BJ_web_developers / jy_parkingOS

<template>
    <view>

        <view class="rechargeTop">
            <view class="toDetail uni-list-cell-pd uni-right" @click="detailCell">明细 ></view>
            <view class="rechargeNum uni-center">¥{{acctBalance | toFixed2 }}</view>
        </view>

        <uni-section title="充值金额(元)" type="line" padding>
            <uni-grid :column="3" :highlight="true" :showBorder="false" :square="false" @change="change">
                <uni-grid-item v-for="(item, index) in ListData" :index="index" :key="index">
                    <view class="grid-item-box" style="background-color: #fff;">
                        <view class="text" :class="currentIndex==index?'itemActive':''">
                            {{item.rechargeCode | ortherToFixed}}
                        </view>
                    </view>
                </uni-grid-item>
            </uni-grid>
            <view class="uni-list-cell-pd" v-show="isShowInput">
                <input class="payInut" type="number" v-model="rechargeNum" @input="checkNum" :maxlength="maxlength"
                       placeholder=" 请输入金额">
            </view>
        </uni-section>

        <view class="uni-list-cell-pd">
            温馨提示：暂不支持退款，请谨慎选择充值金额！
        </view>
        <view class="border-bg"></view>

        <view class="order-title">
            支付方法
        </view>
        <view class="order-line"></view>

        <view class="orderwaysview">
            <image src="../../static/orderInfo/orderinfo-wechat.png" class="orderways"></image>
            <view class="order-info" style="margin-left: 8px;">
                微信支付
            </view>
            <image src="../../static/orderInfo/orderinfo-sel.png" class="orderwaysSel"></image>
        </view>

        <button @click="payClick" class="button-sp-area" type="primary" plain="true">确认充值</button>

    </view>
</template>

<script>
export default {
  data() {
    return {
      acctBalance: '0.00',
      wxopenId: '',
      ListData: [],
      currentIndex: 0,
      rechargeFee: 0,
      isShowInput: false,
      rechargeNum: '',
      maxlength: 6 //默认一个长度
    }
  },
  onLoad() {
    uni.setStorageSync("wxCode", '')

    this.recharge();
    this.rechargeList();
  },
  mounted() {
  },
  onShow() {
  },
  methods: {

    getCode() {
      let that = this
      uni.login({
        provider: 'weixin',
        success: function (loginRes) {
          console.log('获取微信code-loginRes.code: ' + loginRes.code);
          uni.setStorageSync("wxCode", loginRes.code)
          that.getOpenID()
        }
      });
    },
    getOpenID() {
      let that = this;
      let code = uni.getStorageSync("wxCode");
      console.log(code)
      let data = {
        appId: that.$common.hs_wxPay_appId,
        // appId:"wxadb8caee05ab2981",
        code: code,
      };
      that.$myRequest({
        url: that.$common.getOpenIdByCode,
        method: 'POST',
        data: data
      }).then(res => {
        let data = res.data;
        that.wxopenId = data.openid;
        console.log(data.openid)
        that.wxPayOrder()
      })
    },
    recharge() {
      let that = this;
      that.$myRequest({
        url: that.$common.walletAccount,
        method: 'POST',
        data: that.$common.requestSign()
      }).then(res => {
        console.log(res)
        let data = res.data;
        that.acctBalance = data.acctBalance;
      })
    },
    rechargeList() {
      let that = this;
      that.$myRequest({
        url: that.$common.rechargeList,
        method: 'POST',
        data: that.$common.requestSign()
      }).then(res => {
        console.log(res)
        let data = res.data;
        that.ListData = data;
        that.rechargeFee = that.ListData[0].rechargeCode
      })
    },
    change(e) {
      let that = this;
      let {
        index
      } = e.detail;
      that.currentIndex = index;
      if (that.ListData[index].rechargeCode == -1) {
        console.log('1')
        that.isShowInput = true;
        that.rechargeNum = ''
      } else {
        that.isShowInput = false;
        that.rechargeFee = that.ListData[index].rechargeCode;
      }
    },
    checkNum(e) {
      let value = e.detail.value;
      let dot = value.indexOf('.'); //包含小数点
      let reg = /^[0-9]+$/; //正整数
      if (dot > -1) {
        this.maxlength = dot + 3; //长度是小数点后两位
        if (value.length > dot + 3) {
        }
      }
      if (reg.test(value)) { //如果是正整数不包含小数点
        this.maxlength = 6;
      }
    },
    detailCell() {
      uni.navigateTo({
        url: '../rechargeDetail/rechargeDetail'
      });
    },
    payClick() {
      let that = this;
      this.getCode();

    },
    wxPayOrder() {
      let that = this;
      let payMoney;
      if (that.isShowInput) {
        payMoney = that.rechargeNum * 100;
      } else {
        payMoney = that.rechargeFee;
      }
      console.log(that.wxopenId)
      let data = {
        openId: that.wxopenId,
        rechargeType: '2',
        acctType: '1',
        paySrcType: '204',
        payType: '16',
        realPayMoney: payMoney.toString(),
        rechargeFee: payMoney.toString(),
      };
      console.log(data)
      that.$myRequest({
        url: that.$common.publicUnifiedOrder,
        method: 'POST',
        data: that.$common.requestSign(data)
      }).then(res => {
        var mydata = res.data;
        console.log(mydata);
        that.MakeWxPay(mydata)
      })
    },
    // 调用微信支付
    MakeWxPay(mydata) {
      console.log(mydata)
      var me = this;
      uni.requestPayment({
        provider: 'wxpay',
        timeStamp: mydata.timeStamp,
        //随机字符串，长度为32个字符以下
        nonceStr: mydata.nonceStr,
        //统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=xx。
        package: mydata.package,
        signType: mydata.signType,
        paySign: mydata.paySign,
        success: function (res) {
          console.log('success:' + JSON.stringify(res));
          me.recharge();
        },
        fail: function (err) {
          console.log('fail:' + JSON.stringify(err));
          uni.showModal({
            title: '提示',
            content: '支付失败/取消',
            showCancel: false,
            success: function (res) {
              if (res.confirm) {
                console.log('支付失败');
              }
            }
          });
        }
      });
    },
  }
}
</script>

<style scoped lang="scss">
    .rechargeTop {
        height: 100px;
        background: #007AFF;
        color: #fff;
        position: relative;
    }

    .toDetail {
        /*text-align: right;*/

    }

    .rechargeNum {
        font-size: 30px;
    }

    .text {
        width: 80%;
        height: 60px;
        line-height: 60px;
        margin: 10px auto;
        border: 1px solid #ccc;
        text-align: center;
    }

    .itemActive {
        background: #f0ad4e;
    }

    .order-title {
        font-size: 18px;
        margin-left: 16px;
        margin-top: 15px;
        font-weight: bold;
        color: #404040;
    }

    .order-info {
        font-size: 14px;
        margin-left: 15px;
        margin-top: 12px;
        color: #404040;
    }

    .order-line {
        background: #D9D9D9;
        height: 1px;
        margin-top: 12px;
        margin-left: 15px;
        padding: 0px;
        overflow: hidden;
        /* 透明度 */
        opacity: 0.5;
    }

    .order-line-bold {
        background: #FAFAFA;
        height: 12px;
        margin-top: 12px;
        padding: 0px;
        overflow: hidden;
    }

    .flex-row-justify-between {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .flex-row-justify-end {
        display: flex;
        flex-direction: row;
        /* 水平对齐*/
        align-items: baseline;

    }

    .order-discount {
        color: #C8C7CC;
        margin-right: 20 upx;
        /* margin-right: 12px ; */
        /* margin-top:12px ; */

    }

    .orderwaysview {
        display: flex;
        flex-direction: row;
    }

    .orderways {
        width: 18px;
        height: 18px;
        margin-left: 15px;
        margin-top: 14px;
    }

    .orderwaysSel {
        width: 16px;
        height: 16px;
        margin-left: auto;
        margin-right: 14px;
        margin-top: 14px;
        /* justify-content:flex-end; */
    }

    .button-sp-area {
        margin: 0 auto;
        width: 60%;
        margin-top: 40px;

    }

    .payInut {
        display: flex;
        box-sizing: border-box;
        flex-direction: row;
        align-items: center;
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        min-height: 36px;
        padding-left: 10px;
    }
</style>