src/views/cards/buyVipCard.vue

<template>
  <section style="width: 100%;height: 100%;background: #fff">
    <van-cell-group style="border-bottom: 10px solid #fafafa">
      <van-cell title="车牌号" is-link>
        <template>
          <p @click="show = true" style="color: #1989fa">{{carNum}}</p>
          <van-action-sheet v-model="show" :actions="actions" @select="onSelect"/>
        </template>
      </van-cell>
      <van-cell title="适用停车场" :value="plName"/>
      <van-cell title="卡类别" :value="cardNickname"/>
      <van-cell title="卡名称" :value="cardName"/>
      <van-cell title="生效时间" is-link>
        <template>
          <p @click="showDate = true" style="color: #1989fa"> {{valueStart}}</p>
        </template>
      </van-cell>
      <van-cell title="失效时间" :value="effDate"/>
      <van-cell title="购买数量">
        <template>
          <van-stepper v-model="count" :min="1" theme="round" button-size="22" disable-input  @change="changeCount"/>
        </template>
      </van-cell>
    </van-cell-group>
    <van-popup v-model="showDate" position="bottom" :style="{ height: '30%' }">
      <van-datetime-picker
        v-show="showDate"
        v-model="currentDate"
        type="date"
        title="选择生效日期"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="confirmDate"
        @cancel="cancelDate"
      />
    </van-popup>
    <van-cell-group style="border-bottom: 10px solid #fafafa">
      <van-cell title="单价">
        <template>
          <p style="font-size: 16px;font-weight: 600;color: #000;">{{actPrice|numFilter}}元</p>
        </template>
      </van-cell>
      <van-cell title="优惠">
        <template>
          <p style="font-size: 16px;font-weight: 600;color: #f00;">{{discValue}}折</p>
        </template>
      </van-cell>
      <van-cell title="支付金额">
        <template>
          <p style="font-size: 16px;font-weight: 600;color: #000;">{{ ((payPrice*discValue)/10) |numFilter}}元</p>
        </template>
      </van-cell>
    </van-cell-group>
    <div class="leftRightPadding" style="margin-top: 34px">
      <!--<mt-button type="danger" size="large"></mt-button>-->
      <van-button type="info" block @click="buyCardHandle">购买</van-button>
    </div>
  </section>
</template>
<script>
import { queryUserCars, createVipCardOrder2022 } from "@/api/card/card";
export default {
  name: "buyVipCard",
  data() {
    return {
      plName:'',
      cardNo:'',
      plNo:'',
      carList: [],
      carNum: "",
      show: false,
      actions: [],
      minDate: '',
      maxDate: new Date(2099, 10, 14),
      currentDate: '',
      valueStart: "",
      effDate:'',// 失效时间
      showDate: false,
      count: 1, // 购买数量
      cardName: "",//卡名称
      carType: "",//车辆类型
      cardType: "",//卡类型
      cardNickname: "",//卡类别
      actPrice: "",//单价
      discValue: "",//优惠
      payPrice: "" // 支付金额
    };
  },
  created() {
    this.plNo = this.$route.query.plNo;
    this.cardNo = this.$route.query.cardNo;
    this.plName = this.$route.query.plName;
    this.cardName = this.$route.query.cardName;
    this.carType = this.$route.query.carType;
    let carTypeName;
    switch (Number(this.carType)) {
      case 1:
        carTypeName = "大型车";
        break;
      case 2:
        carTypeName = "小型车";
        break;
      default:
        break;
    }
    this.cardType = this.$route.query.cardType;
    let cardTypeName;
    switch (Number(this.cardType)) {
      case 1:
        cardTypeName = "年卡";
        break;
      case 2:
        cardTypeName = "半年卡";
        break;
      case 3:
        cardTypeName = "季卡";
        break;
      case 4:
        cardTypeName = "月卡";
        break;
      case 5:
        cardTypeName = "日卡";
        break;
      default:
        break;
    }
    this.cardNickname = carTypeName + cardTypeName;
    this.actPrice = Number(this.$route.query.actPrice);
    this.discValue = Number(this.$route.query.discValue);
    this.payPrice = this.actPrice * this.count;
    console.log(this.actPrice);
    console.log(this.discValue);
    console.log(this.payPrice);
    this.queryUserCars();
    this.getStartDate()
  },
  methods: {
    getStartDate(){
      let dateTime = new Date();
      this.valueStart = this.$utils.formatDate(dateTime,1)
      // this.minDate = this.$utils.formatDate(dateTime,1)
      this.minDate = new Date()
      //  计算失效日期根据卡类型
      this.getEffDate(1)
    },
    getEffDate(num){
      if(this.cardType==1){ // 年卡  给日期添加12个月
        console.log(this.valueStart)
        this.effDate = this.$moment(this.valueStart).add(12*num, 'M').subtract(1,'days').format('YYYY-MM-DD')
      }
      if(this.cardType==2){ // 半年卡  给日期添加6个月
        console.log(this.valueStart)
        this.effDate = this.$moment(this.valueStart).add(6*num, 'M').subtract(1,'days').format('YYYY-MM-DD')
      }
      if(this.cardType==3){ // 季卡  给日期添加3个月
        console.log(this.valueStart)
        this.effDate = this.$moment(this.valueStart).add(3*num, 'M').subtract(1,'days').format('YYYY-MM-DD')
      }
      if(this.cardType==4){ // 月卡  给日期添加1个月
        console.log(this.valueStart)
        this.effDate = this.$moment(this.valueStart).add(1*num, 'M').subtract(1,'days').format('YYYY-MM-DD')
      }
      if(this.cardType==5){ // 日卡  给日期添加1个月
        console.log(this.valueStart)
        this.effDate = this.$moment(this.valueStart).add(1*num,'days').format('YYYY-MM-DD')
      }
      if(this.cardType==6){ // 错峰年卡(周末免费)  给日期添加12个月
        console.log(this.valueStart)
        this.effDate = this.$moment(this.valueStart).add(12*num, 'M').subtract(1,'days').format('YYYY-MM-DD')
      }
      if(this.cardType==7){ // 错峰月卡(周末免费)  给日期添加1个月
        console.log(this.valueStart)
        this.effDate = this.$moment(this.valueStart).add(1*num, 'M').subtract(1,'days').format('YYYY-MM-DD')
      }
      if(this.cardType==8){ // 错峰夜晚包月  给日期添加1个月
        console.log(this.valueStart)
        this.effDate = this.$moment(this.valueStart).add(1*num, 'M').subtract(1,'days').format('YYYY-MM-DD')
      }
    },
    queryUserCars() {
      let jsondata = {};
      jsondata.sign = this.$utils.signObject(jsondata);
      queryUserCars(jsondata).then(response => {
        console.log(response);
        this.carList = response.data;
        if (this.carList.length == 0) {
          this.carNum = "点击选择车牌";
          this.carList = {
            name: "前往绑定车牌页面"
          };
        } else if (this.carList.length == 3) {
          this.carList.forEach((v, i) => {
            this.actions.push({
              name: v.carNumber
            });
          });
          this.carNum = this.carList[0].carNumber;
        } else {
          this.carList.forEach((v, i) => {
            console.log(v)
            this.actions.push({
              name: v.carNumber
            });
          });
          this.carNum = this.carList[0].carNumber;
          this.actions.push({
            name: "前往绑定车牌页面"
          });
        }
      });
    },
    changeCount(val){
      console.log( this.count)
      this.payPrice = this.actPrice * this.count
      this.getEffDate(val)
    },
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      this.carNum = item.name;
      console.log(item.name);
      if (item.name == "前往绑定车牌页面") {
        this.$router.push({
            name: "addCarNum"
          }
        );
      }
    },
    confirmDate(val) {
      console.log(val);
      this.valueStart = this.$utils.formatDate(val,1);
      this.getEffDate(this.count)
      this.showDate = false;
    },
    cancelDate() {
      this.showDate = false;
    },
    buyCardHandle(){ // 购买续费
      //mypaySrcType 301 会员卡购买单 302 会员卡续费
      // cardCouponsId	是	string	已购买的会员卡id 新增不传 续费必传
      // optType	是	string	操作类型 1 购买 2 续费
      if (this.carNum == '点击选择车牌') {
        this.$toast('请先选择车牌')
        return;
      }
      let jsondata = {
        plNo: this.plNo,
        cardNo: this.cardNo,
        cardType: this.cardType,
        carType: this.carType,
        price: this.actPrice,
        totalAmount: (this.payPrice*this.discValue)/10,
        num: this.count,
        effDate: this.valueStart,
        expDate: this.effDate,
        carNumber: this.carNum,
        optType: 1,
        cardCouponsId:'',
        forceBuy: '1'
      };
      jsondata.sign = this.$utils.signObject(jsondata);
      createVipCardOrder2022(jsondata).then(response => {
        console.log(response);
        if(response.code == 0){
          let orderId = response.data.orderId
          console.log(orderId)
        }else if(response.code== 5006){
          this.$toast('请先去补缴欠费订单')
        }else{
          this.$toast(response.message)
        }
      });
    }
  }
};
</script>
<style scoped>
  .order-line-bold {
    background: #fafafa;
    height: 12px;
    margin-top: 12px;
    padding: 0px;
    overflow: hidden;
  }
</style>