src/views/cards/buyCard.vue

<template>
  <div>
    <ul class="choose-area">
      <li>
        <div style="color: #666">选择停车场</div>
        <div @click="parkNameVisible = true">{{parkName}}</div>
        <div class="arrow">></div>
        <!--<div class="arrow">></div>-->
      </li>
      <!--<li>-->
      <!--<div style="color: #666">卡名称</div>-->
      <!--<div>微纳园卡</div>-->
      <!--</li>-->
      <li>
        <div style="color: #666">选择卡类型</div>
        <div @click="cardTypeListVisible = true">{{carType}}</div>
        <div class="arrow">></div>
        <!--<div class="arrow">></div>-->
      </li>
      <li>
        <div style="color: #666">绑定车牌</div>
        <div @click="carNumberVisible = true">{{carNumber}}</div>
        <div class="arrow">></div>
      </li>
      <li>
        <div style="color: #A31414">生效时间</div>
        <div style="color: #A31414" @click="selectData">{{ $utils.timestampToTime(startData) }}</div>
        <div class="arrow">></div>
      </li>
      <li>
        <div style="color: #666">有效期至</div>
        <div>{{ $utils.timestampToTime(endTimeFunc) }}</div>
      </li>
      <li>
        <div style="color: #666">购买数量</div>
        <div class="choose-num">
          <span @click="addCardNum">+</span>
          <span>{{cardNum}}</span>
          <span @click="reduceCarNum">-</span>
        </div>
      </li>
      <li>
        <div style="color: #666">单价</div>
        <div>￥{{ (unitPrice/100).toFixed(2)}}</div>
      </li>
      <li>
        <div style="color: #666">优惠金额</div>
        <div>￥{{(disPrice/100).toFixed(2)}}</div>
      </li>
      <li>
        <div style="color: #666">应付金额</div>
        <div style="color: #A31414">￥{{(needPay/100).toFixed(2)}}</div>
      </li>
    </ul>
    <!--<div class="parkArea leftRightPadding">-->
    <!--<p class="parkAreaTitle">-->
    <!--<span>本卡同时适用于以下停车场：</span>-->
    <!--<span class="parkMore" @click="parkMoreVisible = true">查看更多</span>-->
    <!--</p>-->
    <!--<p>停车场停车场停车停车场</p>-->
    <!--</div>-->
    <div style="padding:15px;text-align: center">
      <check-icon :value.sync="agreement">
      </check-icon>
      <p style="display: inline-block;height: 23px;line-height: 23px;">我已阅读并同意 <span style="color: blue"
                                                                                     @click="showHideOnBlur=true">《购买须知》</span>
      </p>
    </div>
    <div style="margin-top: 34px" class="leftRightPadding">
      <mt-button type="danger" size="large" @click="toPay">确定购买</mt-button>
    </div>
    <!-- @touchmove.prevent 阻止默认事件，在选择时间时阻止页面也跟着滚动-->
    <div @touchmove.prevent>
      <mt-datetime-picker
        lockScroll="true"
        ref="datePicker"
        v-model="dateVal"
        type="date"
        year-format="{value} 年"
        month-format="{value} 月"
        date-format="{value} 日"
        :startDate="startDate"
        @confirm="handleConfirm()"
      ></mt-datetime-picker>
    </div>
    <!--停车场-->
    <mt-actionsheet
      :actions="parkNameList"
      v-model="parkNameVisible">
    </mt-actionsheet>
    <!--卡类型-->
    <mt-actionsheet
      :actions="cardTypeList"
      v-model="cardTypeListVisible">
    </mt-actionsheet>
    <!--车牌号-->
    <mt-actionsheet
      :actions="carNumList"
      v-model="carNumberVisible">
    </mt-actionsheet>
    <mt-popup
      v-model="parkMoreVisible" class="park-list-wrap"
    >
      <ul class="park-list">
        <li v-for="(i, index) in 10">{{index+1}}、停车场{{i}}</li>
      </ul>
    </mt-popup>
    <div v-transfer-dom>
      <x-dialog v-model="showHideOnBlur" class="dialog-demo" hide-on-blur>
        <div class="agreen-box">
          <p>
            1. 本停车卡为指定停车场有效使用，为特定的场地停车权限，请按照停车场场地自主选择购买。
          </p>
          <p>
            2. 月卡（季卡）一经售出，概不退卡，允许车牌变更1次（有效期内）。
          </p>
          <p>
            3. 年卡可以支持车牌变更3次（有效期内），年卡退卡需要按照原价扣除已经使用月份（不满一个月按照一个月计算）并退回已开具发票。
          </p>
          <p>
            4. 停车场管理方对车辆及车内财务无看管保全义务，车主须遵守停车场管理规定将车辆停在车场的停车位内，乱停车辆引起的贴条和拖车等后果由车主自行承担。
          </p>
          <p>
            5. 友情提醒：妥善关闭和锁定已停车入位的车辆，不在车内放置现金和其它贵重物品，其它停车规定须遵守所辖停车场的管理规定（参见停车场公示）。
          </p>
        </div>
        <div @click="showHideOnBlur=false">
          <span class="vux-close">X</span>
        </div>
      </x-dialog>
    </div>
  </div>
</template>
<script>
import { TransferDomDirective as TransferDom } from "vux";
import {
  queryParkListForVipCard,
  queryVipCardInfoByPlNo,
  queryUserCars,
  weixinpay,
  createVipCardOrder
} from "@/api/cards/cards";
import { timestampToTime } from "../../utils/utils.js";
export default {
  name: "buyCard",
  directives: {
    TransferDom
  },
  data() {
    return {
      startDate: new Date(),
      dateVal: "",
      selectedValue: "",
      startData: "",
      endDate: "",
      parkName: "请点击选择",
      parkNameVisible: false,
      parkNameList: [], // 停车场
      parkNo: "",
      cardTypeListVisible: false,
      cardTypeList: [], // 卡类型
      carType: "请点击选择",
      carNumList: [
        { name: "前往绑定车牌", method: this.addCar }
      ],
      carNumber: "请选择车牌",
      carNumberVisible: false,
      parkMoreVisible: false,
      cardNum: 1, // 卡数量
      unitPrice: 10, // 单价
      disPrice: 9, // 优惠金额
      needPay: 1, // 应付
      agreement: false,
      typeNum: 1, // 卡类型判断
      showHideOnBlur: false, // 购买协议
      createVipCardOrder: {}, // 创建订单对象
      orderId: "" // 订单号
    };
  },
  mounted() {
    this.queryParkListForVipCard();  // 获取停车场
    this.queryUserCars();  // 获取用户车牌
  },
  computed: {
    // 卡类型 1-年卡；2-半年卡；3-季卡；4-月卡；5-日卡；
    endTimeFunc() {
      if (this.startData) {
        switch (this.typeNum) {
          case 1:
            this.endDate = this.$moment(this.startData).add(12, "month").format("YYYY-MM-DD");
            return this.$moment(this.startData).add(12, "month").format("YYYY-MM-DD");
            break;
          case 2:
            this.endDate = this.$moment(this.startData).add(6, "month").format("YYYY-MM-DD");
            return this.$moment(this.startData).add(6, "month").format("YYYY-MM-DD");
            break;
          case 3:
            this.endDate = this.$moment(this.startData).add(3, "month").format("YYYY-MM-DD");
            return this.$moment(this.startData).add(3, "month").format("YYYY-MM-DD");
            break;
          case 4:
            this.endDate = this.$moment(this.startData).add(1, "month").format("YYYY-MM-DD");
            return this.$moment(this.startData).add(1, "month").format("YYYY-MM-DD");
            break;
          case 5:
            this.endDate = this.$moment(this.startData).add(1, "days").format("YYYY-MM-DD");
            return this.$moment(this.startData).add(1, "days").format("YYYY-MM-DD");
            break;
        }
        // return  this.$moment(this.startData).add(1,"month").format("YYYY-MM-DD");
        // return this.startData.getMonth()+1
      }
      // switch (val){
      //   case 2:
      //     return this.startData.setMonth(this.startData.getMonth()+1);
      //     break;
      // }
    }
  },
  methods: {
    // 获取用户绑定车牌
    queryUserCars() {
      let jsondata = this.$utils.commonParams();
      jsondata.sign = this.$utils.signObject(jsondata);
      queryUserCars(jsondata).then(data => {
        console.log(data);
        let res = data.data;
        if (data.code == 0) {
          if (res.length > 0) {
            if (res.length == 3) {
              this.carNumList = [];
            }
            res.forEach((item, index) => {
              this.carNumList.unshift({
                name: item.carNumber,
                method: this.bandingCar
              });
            });
          }
          console.log(this.carNumList);
        } else {
          this.$vux.toast.text(data.message, "top");
        }
      });
    },
    // 打开时间选择器
    selectData() {
      // this.dateVal = this.startData
      this.$refs["datePicker"].open();
      // console.log(this.startData)
      // this.endDate = this.startData.setMonth(this.startData.getMonth()+1)
      // console.log(this.endDate)
    },
    //
    queryParkListForVipCard() {
      let jsondata = this.$utils.commonParams();
      jsondata.parkName = ""; //搜索的停车场名称
      jsondata.sign = this.$utils.signObject(jsondata);
      queryParkListForVipCard(jsondata).then(data => {
        console.log(data);
        if (data.code == 0) {
          let res = data.data;
          res.parkList.forEach((item, i) => {
            this.parkNameList.push({
              name: item.plName,
              parkNo: item.plNo,
              method: this.parkNameAction
            });
          });
        } else {
          this.$vux.toast.text(data.message, "top");
        }
      });
    },
    handleConfirm() {
      console.log(this.dateVal);
      this.startData = this.$utils.timestampToTime(this.dateVal);
      // this.endDate = this.dateVal.setMonth(this.dateVal.getMonth() + 1);
    },
    // 停车场选择事件
    parkNameAction(e) {
      console.log(e);
      this.parkName = e.name;
      this.parkNo = e.parkNo;
      // alert(this.parkNo)
      this.queryVipCardInfoByPlNo();
    },
    //  根据停车场搜卡类型
    queryVipCardInfoByPlNo() {
      let me = this;
      let jsondata = this.$utils.commonParams();
      jsondata.plNo = this.parkNo;
      jsondata.plNo = this.parkNo;
      jsondata.sign = this.$utils.signObject(jsondata);
      queryVipCardInfoByPlNo(jsondata).then(data => {
        console.log(data);
        if (data.code == 0) {
          // res.vipCardList =
          // this.cardTypeList = res.vipCardList
          // { name: "月卡", num: 1, method: this.clickAction },
          let vipCardList = data.data.vipCardList;
          vipCardList.forEach((item, index) => {
            me.$set(item, "name", item.cardName);
            me.$set(item, "method", me.vipCardAction);
            me.cardTypeList.push(item);
          });
          console.log(me.cardTypeList);
        } else {
          this.$vux.toast.text(data.message, "top");
        }
      });
    },
    bandingCar(e) {
      this.carNumber = e.name;
    },
    addCar(e) {
      this.$router.push({
        path: "addCar",
        query: {
          source: 1  // 1表示来源是购买车牌页面
        }
      });
    },
    vipCardAction(e) {
      console.log(e);
      this.carType = e.name;
      // this.startData = e.expDate;
      // this.endDate = e.effDate;
      // this.cardNum = e.validNum;
      this.unitPrice = e.price;
      this.disPrice = e.price * ((10 - e.discValue) / 10);
      this.needPay = this.unitPrice - this.disPrice;
      this.startData = new Date();
      this.typeNum = e.cardType;
      this.createVipCardOrder = e;
      // this.endDate = this.endTimeFunc(e.carType);
      // this.endDate = this.startData;
      // 卡类型 1-年卡；2-半年卡；3-季卡；4-月卡；5-日卡；
    },
    clickActionCarNum(e) {
      this.carNumber = e.name;
    },
    addCardNum() { // 增加购买数量
      this.cardNum++;
      this.calcMoney();
    },
    reduceCarNum() { // 增加购买数量
      if (this.cardNum == 1) {
        return;
      }
      this.cardNum--;
      this.calcMoney();
    },
    calcMoney() {
      this.needPay = this.cardNum * (this.unitPrice - this.disPrice);
    },
    //  购买
    toPay() {
      if (this.parkName == "请点击选择") {
        this.$vux.toast.text("请选择停车场", "top");
        return;
      }
      if (this.carType == "请点击选择") {
        this.$vux.toast.text("请选择卡类型", "top");
        return;
      }
      if (this.carNumber == "请选择车牌") {
        this.$vux.toast.text("请选择车牌", "top");
        return;
      }
      if (!this.agreement) {
        this.$vux.toast.text("请同意购买须知", "top");
        return;
      }
      this.createOrder();
    },
    createOrder() {
      console.log(this.createVipCardOrder);
      let me = this;
      let jsondata = this.$utils.commonParams();
      jsondata.plNo = this.parkNo; // 停车场id
      jsondata.cardNo = this.createVipCardOrder.cardNo; // 卡券编码
      jsondata.cardType = (this.createVipCardOrder.cardType).toString(); // 卡类型
      jsondata.carType = (this.createVipCardOrder.carType).toString(); //  1-大型车；2-小型车
      // jsondata.plNo = this.createVipCardOrder.id; // 1-大型车；2-小型车
      jsondata.price = (this.createVipCardOrder.price).toString(); // 卡单价
      jsondata.totalAmount = (this.needPay).toString(); // 购买的总金额
      jsondata.num = this.cardNum; // 购买数量
      jsondata.effDate = this.$utils.timestampToTime(this.startData); // 生效时间
      jsondata.expDate = this.$utils.timestampToTime(this.endDate); // 失效时间
      jsondata.carNumber = this.carNumber; // 卡适用车牌
      jsondata.optType = "1"; // 操作类型 1 购买 2 续费
      jsondata.forceBuy = "1";
      jsondata.sign = this.$utils.signObject(jsondata);
      createVipCardOrder(jsondata).then(data => {
        console.log(data);
        // orderId
        if (data.code == 0) {
          this.orderId = data.data.orderId;
          this.vxPay();
        } else {
          this.$vux.toast.text(data.message, "top");
        }
      });
    },
    vxPay() {
      let vm = this;
      let jsondata = this.$utils.commonParams();
      jsondata.orderId = this.orderId; // 订单号
      jsondata.payType = "4"; // 支付方式-- 1:支付宝 2：微信 3：银联.
      jsondata.paySrcType = "301"; // 支付单来源 101：停车付款单 102：停车预付单 103：停车补缴单 104 共享车位 201 余额充值单 202 押金充值单 301 会员卡购买单 302 会员卡续费
      jsondata.appId = this.$utils.myVxAppId; // 微信标识符
      jsondata.terminalSource = "3"; // 请求端来源 1： 任你停 2：pda 3：微信公共号
      jsondata.paySource = "3";
      jsondata.couponPersonId = "";
      jsondata.openId = sessionStorage.getItem("wx_openId");
      jsondata.sign = this.$utils.signObject(jsondata);
      weixinpay(jsondata).then(res => {
        console.log(data);
        if (res.code == 0) { //
          if (res.data) {
            var data = res.data;
            console.log(JSON.stringify(data));
            if (typeof WeixinJSBridge === "undefined") { // 微信浏览器内置对象。参考微信官方文档
              if (document.addEventListener) {
                document.addEventListener("WeixinJSBridgeReady", vm.onBridgeReady(data), false);
              } else if (document.attachEvent) {
                document.attachEvent("WeixinJSBridgeReady", vm.onBridgeReady(data));
                document.attachEvent("onWeixinJSBridgeReady", vm.onBridgeReady(data));
              }
            } else {
              console.log("准备调用微信支付");
              vm.onBridgeReady(data);
            }
          } else {
            alert("没有找到返回值");
          }
        } else {
          alert(res.message);
        }
      });
    },
    onBridgeReady(params) {
      let me = this;
      console.log("调用微信支付WeixinJSBridge");
      WeixinJSBridge.invoke(
        "getBrandWCPayRequest", params,
        //
        // 'getBrandWCPayRequest', { // 下面参数内容都是后台返回的
        //   'appId': data.appId, // 公众号名称，由商户传入
        //   'timeStamp': data.timeStamp, // 时间戳
        //   'nonceStr': data.nonceStr, // 随机串
        //   'package': data.package, // 预支付id
        //   'signType': data.signType, // 微信签名方式
        //   'paySign': data.paySign // 微信签名
        // },
        function(res) {
          // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
          if (res.err_msg === "get_brand_wcpay_request:ok") {
            console.log("成功");
            this.$vux.toast.text("支付成功", "top");
            me.$router.go(-2);
          } else {
            console.log("失败");
            alert("支付失败");
            me.$router.go(-2);
          }
        }
      );
    }
  },
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date);
    }
  }
};
</script>
<style scoped lang="scss">
  .choose-area {
    background: #fff;
    padding: 0 10px;
  }
  .choose-area > li {
    padding-right: 20px;
    position: relative;
    height: 38px;
    line-height: 38px;
    border-bottom: 1px solid #EFEFEF;
    display: flex;
    justify-content: space-between;
    .arrow {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 16px;
    }
    &:last-child {
      border-bottom: 0;
    }
  }
  .choose-num {
    height: 28px;
    margin-top: 5px;
    line-height: 28px;
    display: flex;
    border: 1px solid #D8D8D8;
    span {
      display: inline-block;
      &:nth-of-type(1) {
        width: 28px;
        height: 28px;
        text-align: center;
        cursor: pointer;
      }
      &:nth-of-type(2) {
        width: 50px;
        text-align: center;
        border-left: 1px solid #D8D8D8;
        border-right: 1px solid #D8D8D8;
      }
      &:nth-of-type(3) {
        width: 28px;
        height: 28px;
        text-align: center;
        cursor: pointer;
      }
    }
  }
  .parkArea {
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 10px;
    background: #fff;
    color: #999;
  }
  .parkAreaTitle {
    display: flex;
    justify-content: space-between;
    color: #666;
  }
  .parkMore {
    cursor: pointer;
  }
  .park-list-wrap {
    width: 80%;
    max-height: 70%;
    overflow-y: scroll;
    border-radius: 5px;
  }
  .park-list {
    /*width: 80%;*/
    li {
      padding-left: 20px;
      line-height: 25px;
    }
  }
  .agreen-box {
    padding: 15px;
    text-align: left;
    p {
      margin-bottom: 15px;
    }
  }
  .vux-close {
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: 18px;
  }
  /deep/ .picker-items {
    width: 100%
  }
</style>