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 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
} 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: {} // 续费数据
    };
  },
  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: {




    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.createOrder();
    },
    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>