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="车牌号" v-if="xufeiFlag==2">
        <template>{{$route.query.carNumber}}</template>
      </van-cell>
      <van-cell title="车牌号" is-link v-else>
        <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="生效时间"  v-if="xufeiFlag==2">
        <template>
          {{valueStart}}
        </template>
      </van-cell>
      <van-cell title="生效时间" is-link v-else>
        <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;" v-if="discValue == undefined || discValue >= 10">
            暂无优惠</p>
          <p style="font-size: 16px;font-weight: 600;color: #f00;" v-else>{{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: "", // 支付金额
      xufeiFlag: ""//判断是否续费  1否    2是
    };
  },
  created() {
    this.xufeiFlag = this.$route.query.xufeiFlag;
    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);
    if (this.xufeiFlag == 2) { // 2代表续费
      this.valueStart = this.$route.query.expDate;
      // effDate
      this.getEffDate(1);
    } else {
      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() { // 购买续费
      // paySrcType 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: this.xufeiFlag == 1 ? "1" : "2",
        cardCouponsId: this.$router.query.custCardNo,
        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>