pco/app/pages/wx/account-pay.vue

<template>
  <view>
    <view class="top-bg"></view>
    <view class="top-box">
      <view class="top">
        <text class="num">{{ account.totalMoney }}</text>
        <text class="p">账户余额</text>
      </view>
      <view class="bottom">
        <view class="t">
          <view class="p">账户:</view>
          <view class="num">{{ account.accountNo }}</view>
        </view>
      </view>
    </view>
    <view class="item">
      <view class="l" style="margin-top: 15rpx;">
        充值金额:
      </view>
      <view class="r">
        <u-input type="number" style="border: 1rpx solid;margin-left: 8rpx;" placeholder="充值金额"
                 v-model="form.money">
        </u-input>
      </view>
    </view>
    <view v-if="money&&money>0" class="pay-money">
      支付金额：
      <text>{{ money }} 元</text>
    </view>
    <view class="btn-box">
      <view class="btn t" @click="chargeFn">立即充值</view>
    </view>
    <view class="discount" v-if="discountList.length>0">
      活动：
      <view v-for="(item,index) in discountList">
        {{ index + 1 }}、充值满{{ item.money }}元
        <text v-if="item.discount<10">打{{ item.discount }}折</text>
        <text v-if="item.subtract">减{{ item.subtract }}元</text>
      </view>
    </view>
  </view>
</template>

<script>
var jweixin = require('@/components/jweixin-module/index.js');
export default {
  data() {
    return {
      account: {
        totalMoney: 0,
        lockMoney: 0,
        activeMoney: 0,
        deposit: 0
      },
      form: {
        money: ''
      },
      code: '',
      openid: '',
      discountList: []
    }
  },
  onLoad(options) {
    this.code = options.code;
    this.getOpenidByCode();
  },
  onBackPress() {
    this.$common.to('/pages/index/index');
    return true;
  },
  mounted() {
    this.getAccountInfo();
    this.getDiscountInfo();
    this.getWxConfig();
  },
  computed: {
    money() {
      let chargeMoney = this.form.money;
      if (chargeMoney) {
        let discountList = this.discountList;
        let sub = 999999;
        let obj = null;
        for (let i in discountList) {
          let discount = discountList[i];
          let m = discount.money;
          let diff = chargeMoney - m;
          if (diff < sub && diff >= 0) {
            sub = diff;
            obj = discount;
          }
        }
        if (obj != null) {
          if (obj.type == 1) {
            return (chargeMoney * (obj.discount / 10)).toFixed(2)
          }
          return chargeMoney - obj.subtract
        }
      }
    }
  },
  methods: {
    getWxConfig() {
      let url = window.location.href;
      this.$api.getWxConfig({
        url: url
      }).then(resp => {
        jweixin.config({
          //debug: true,
          appId: resp.data.appId,
          timestamp: resp.data.timestamp, // 必填，生成签名的时间戳
          nonceStr: resp.data.noncestr, // 必填，生成签名的随机串
          signature: resp.data.sign, // 必填，签名
          jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
        });
        jweixin.ready(function () {

        });
        jweixin.error(function (res) {
          console.log(res)
        });
      })
    },
    getOpenidByCode() {
      let storeOpenid = uni.getStorageSync('openid');
      this.$api.getOpenidByCode({
        code: this.code,
        openid: storeOpenid
      }).then(resp => {
        let openid = resp.data;
        this.openid = openid;
        if (openid) {
          uni.setStorageSync('openid', openid)
        }

      })
    },
    getAccountInfo() {
      this.$api.getAccountInfo().then(resp => {
        this.account = resp.data;
      })
    },
    getDiscountInfo() {
      this.$api.getDiscountInfo().then(resp => {
        this.discountList = resp.data;
      })
    },
    chargeFn() {
      let money = this.form.money;
      if (!money) {
        this.$common.toast('请输入充值金额');
      }
      let a = {
        id: this.account.id,
        c: money
      }
      let p = {
        a: JSON.stringify(a),
        money: this.money > 0 ? this.money : money,
        tradeType: "JSAPI",
        openid: this.openid
      }
      p.desc = "A1-账户充值";
      this.$api.getPrePay(this.$common.removeNull(p)).then(resp => {
        let data = resp.data;
        let that = this;
        jweixin.chooseWXPay({
          timestamp: data
              .timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
          nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
          package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
          signType: data.signType, // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
          paySign: data.paySign, // 支付签名
          success: function (res) {
            if (res.errMsg === "chooseWXPay:ok") {
              that.$common.toast('支付成功')
              that.cars = [];
              that.item.list = [];
              that.total = 0
              // wx.closeWindow();
            }
          }
        });
      })

    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #fff;
}

.top-bg {
  width: 100%;
  height: 400rpx;
  position: absolute;
  z-index: 0;
  background-image: linear-gradient(0deg, #fff 0%, #0080ff 40%);
}

.top-box {
  position: relative;
  z-index: 1;

  .top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .num {
      color: #fff;
      font-size: 60rpx;
      margin-top: 50rpx;
    }

    .p {
      color: rgba(255, 255, 255, .7);
      margin-top: 10rpx;
    }
  }

  .bottom {
    display: flex;
    background-color: #fff;
    border-radius: 20rpx;
    margin: 40rpx;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .t {
      display: flex;
      width: 100%;
      padding: 40rpx 30rpx;
      box-sizing: border-box;
      border-bottom: 1px solid #eee;

      .p,
      .num {
        font-size: 30rpx;
        color: #191919;
      }

      .num {
        margin-left: 30rpx;
      }
    }

    .b {
      display: flex;
      width: 100%;
      padding-bottom: 60rpx;

    }
  }
}


.item {
  display: flex;
  margin-top: 100rpx;
  margin-left: 60rpx;
}

.btn-box {
  position: relative;
  z-index: 1;
  display: flex;
  border-radius: 20rpx;
  display: flex;
  margin: 30rpx;
  padding: 30rpx;
  flex-direction: column;

  .btn {
    height: 88rpx;
    width: 70%;
    color: #fff;
    margin: 20rpx auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10rpx;
  }

  .t {
    background-color: #0080ff;
  }

  .b {
    background-color: #ffb400;
  }
}

.pay-money {
  margin: 20rpx 0 0 120rpx;
  font-size: 30rpx;

  text {
    color: red;
    font-weight: bold;
  }
}

.discount {
  margin: 0 0 0 60rpx;
  font-size: 27rpx;

  view {
    margin-left: 20rpx;
    padding-top: 10rpx;
  }
}
</style>