BJ_web_developers / wxgzh

  <template>
    <div>
      <ul class="choose-area">
  
  
        <li>

          <div style="color: #666">停车场</div>

          <div >{{renewData.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 >{{renewData.cardName}}</div>-->
          <div >月卡</div>

  
          <!--<div class="arrow">></div>-->
        </li>
  
  
        <li>

          <div style="color: #666">车牌</div>

          <div>{{renewData.carNumber}}</div>
          <!--<div class="arrow">></div>-->
        </li>
  
        <li>
          <div style="color: #A31414">生效时间</div>
          <div style="color: #A31414" >{{renewData.expDate }}</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="reduceCarNum">-</span>

            <span>{{cardNum}}</span>
            <span @click="addCardNum">+</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 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="primary" size="large" @click="toPay">确定购买</mt-button>

      </div>
  
  
  
      <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,
    createVipCardOrderForH5,
    publicUnifiedOrderForH5,
    getOpenIdByCode

  } from "@/api/cards/cards";
  import { timestampToTime } from "../../utils/utils.js";
  export default {
    name: "renew",
    directives: {
      TransferDom
    },
    data() {
      return {
        startDate:new Date(),
        dateVal: "",
        startData: "",
        endDate: "",
        parkName: "",
        parkNo: "",
        cardNum: 1, // 卡数量
        unitPrice: 0, // 单价
        disPrice: 0, // 优惠金额
        needPay: 0, // 应付
        agreement: false,
        typeNum: 1, // 卡类型判断
        showHideOnBlur: false, // 购买协议
        createVipCardOrder: {}, // 创建订单对象
        orderId: "", // 订单号
        renewData: {} // 续费数据
      };
    },

    created() {
      if (this.$utils.clientBrowser() == "微信") {
        this.webAppCode = this.getCode();
      }
    },

    mounted() {
      this.renewData = JSON.parse(sessionStorage.getItem("renewData"));
      console.log(this.renewData);
      this.unitPrice = this.renewData.price;
      this.disPrice = this.renewData.price * ((10 - this.renewData.discount) / 10);
      this.needPay = this.unitPrice - this.disPrice;
      this.typeNum = this.renewData.cardType
      this.startData = this.renewData.expDate
      // 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*this.cardNum, "month").format("YYYY-MM-DD");
              return this.$moment(this.startData).add(12*this.cardNum, "month").format("YYYY-MM-DD");

              break;
            case '2':

              this.endDate = this.$moment(this.startData).add(6*this.cardNum, "month").format("YYYY-MM-DD");
              return this.$moment(this.startData).add(6*this.cardNum, "month").format("YYYY-MM-DD");

              break;
            case '3':

              this.endDate = this.$moment(this.startData).add(3*this.cardNum, "month").format("YYYY-MM-DD");
              return this.$moment(this.startData).add(3*this.cardNum, "month").format("YYYY-MM-DD");

              break;
            case '4':

              this.endDate = this.$moment(this.startData).add(1*this.cardNum, "month").format("YYYY-MM-DD");
              return this.$moment(this.startData).add(1*this.cardNum, "month").format("YYYY-MM-DD");

              break;
            case '5':

              this.endDate = this.$moment(this.startData).add(1*this.cardNum, "days").format("YYYY-MM-DD");
              return this.$moment(this.startData).add(1*this.cardNum, "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: {
  

      // 获取code
      getCode() {
        var appID = this.$utils.myVxAppId;
        var code = this.getUrlParam("code");
        var local = window.location.href;
        if (code == null || code === "") {
          window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appID + "&redirect_uri=" + encodeURIComponent(local) + "&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
        } else {
          return code;
        }
      },
      getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
      },

  
  
      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.agreement) {
        //   this.$vux.toast.text("请同意购买须知", "top");
        //   return;
        // }
        this.getopenid();
  
        // this.createOrder();
      },
      // 获取openid
      getopenid() {
        let jsondata = {
          appId: this.$utils.myVxAppId,
          code: this.webAppCode
        };
        getOpenIdByCode(jsondata).then(data => {
          console.log(data);
          if (data.code == "0") {
            this.openid = data.data;
            this.createVipCardOrderForH5();
          } else {
            this.$vux.toast.text(data.message, "top");
          }
        });
      },
      createVipCardOrderForH5() {
        let jsondata = this.$utils.commonParams();
        jsondata.carNumber = this.renewData.carNumber;
        jsondata.custId = this.renewData.custId;
        jsondata.optType = "1";
        // jsondata.cardCouponsId = "";
        jsondata.terminalSource = "3";
        jsondata.plNo = this.renewData.parkNo; // 停车场id
        jsondata.discountAmount = this.disPrice;
        jsondata.cardCouponsId  = this.renewData.custCardNo; // 卡券编码
        jsondata.cardNo  = this.renewData.cardNo; // 卡券编码
        jsondata.cardType = (this.renewData.cardType).toString(); // 卡类型
        // jsondata.carType = (this.vipCardList.carType).toString(); //  1-大型车；2-小型车
        // jsondata.plNo = this.createVipCardOrder.id; // 1-大型车；2-小型车
        jsondata.price = this.unitPrice.toString(); // 卡单价
        jsondata.totalAmount = (this.needPay).toString(); // 购买的总金额
        jsondata.num = this.cardNum; // 购买数量
        jsondata.effDate = this.$utils.timestampToTime(this.renewData.expDate); // 生效时间
        jsondata.expDate = this.$utils.timestampToTime(this.endTimeFunc); // 失效时间
        // jsondata.carNumber = this.carNumber; // 卡适用车牌
        jsondata.optType = "2"; // 操作类型 1 购买 2 续费
        jsondata.sign = this.$utils.signObject(jsondata);
        createVipCardOrderForH5(jsondata).then(data => {
          console.log(data);
          if (data.code == 0) {
  
            // orderId
            let orderId = data.data.orderId;
            // this.custId = data.data.custId;
            this.publicUnifiedOrderForH5(orderId);
          } else {
            this.$vux.toast.text(data.message, "top");
          }
        });
      },
      publicUnifiedOrderForH5(orderId) {
        let vm = this;
        let jsondata = this.$utils.commonParams();
        jsondata.orderId = orderId; // 订单号
        jsondata.payType = "4"; // /** 支付方式-- 1:支付宝 2：微信 3：银联 4:微信公众号 5 个人账户. */
        jsondata.openId = this.openid
        jsondata.paySrcType = "302"; // //支付单来源 101：停车付款单 102：停车预付单 103：停车补缴单 104 共享车位 201 余额充值单 202 押金充值单 301 会员卡购买单 302 会员卡续费
        jsondata.appId = this.$utils.myVxAppId; // 微信标识符
        jsondata.terminalSource = "3"; // 请求端来源 1： 任你停 2：pda 3：微信公共号
        jsondata.custId = this.renewData.custId;
        jsondata.payFee = this.needPay;
        // jsondata.paySource = "3";
        jsondata.cardNo  = this.renewData.cardNo; // 卡券编码
        jsondata.couponPersonId = this.renewData.custCardNo;
        // jsondata.openId = sessionStorage.getItem("wx_openId");
        jsondata.sign = this.$utils.signObject(jsondata);
        publicUnifiedOrderForH5(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);
          }
        });

      },
      createOrder() {
        console.log(this.createVipCardOrder);
        let me = this;
        let jsondata = this.$utils.commonParams();
        jsondata.plNo = this.renewData.parkNo; // 停车场id
        jsondata.cardNo = this.renewData.cardNo; // 卡券编码
        jsondata.cardType = this.renewData.cardType; // 卡类型
        jsondata.carType = this.renewData.carType; //  1-大型车；2-小型车
        // jsondata.plNo = this.createVipCardOrder.id; // 1-大型车；2-小型车
        jsondata.price = this.renewData.price; // 卡单价
        jsondata.totalAmount = (this.needPay).toString(); // 购买的总金额
        jsondata.num = (this.cardNum).toString(); // 购买数量
        jsondata.effDate = this.renewData.expDate; // 生效时间
        jsondata.expDate = this.$utils.timestampToTime(this.endTimeFunc); // 失效时间
        jsondata.carNumber = this.renewData.carNumber; // 卡适用车牌
        jsondata.optType = "2"; // 操作类型 1 购买 2 续费
        jsondata.forceBuy = "1";
        jsondata.cardCouponsId = this.renewData.custCardNo
        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 = "302"; // 支付单来源 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"); // o0Moh6eQhTm5bZVqT6wjdSUsZonM   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);
            }
          }
        );
      }
    }
  };
  </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>