OfficeApp/subpkg/topUp/topUp.vue

<template>
  <view class="">
    <view class="info">
      <view class="bg"></view>
      <view class="card">
        <view class="title">充值信息</view>
        <view class="item">
          <text>充值账户</text>
          <text>{{$store.state.app.userInfo.account||''}}</text>
        </view>
      </view>
    </view>
    <view class="price">
      <view class="title">充值金额</view>
      <view class="tab">
        <view class="item" :class="index==changeMoney?'active':''" @click="changePrice(index)"
          v-for="(item, index) in priceList" :key="index">{{item}}</view>
      </view>
      <input v-if="priceList[changeMoney]=='自定义'" class="input" type="digit" placeholder="输入充值金额(元)" v-model="payMoney.money" />
      <button class="btn" @click="pay">充值</button>
    </view>
<!--    <view class="tip">
      <view class="title">注意事项</view>
      <view class="text">充值后帐户的金额不能提现，可用于商城消费使用佣金导入账户之后不能再次导出、不可提现账户充值出现问题可联系商城客服，也可拨打商城客服热线<text @click="copyPhone('4008888888')">4008888888</text>
      </view>
    </view> -->
  </view>
</template>

<script>
  import { recharge, payWay, payPrepay, wechatJsConfig, payStatus } from "@/api/pay.js"
  import { userInfo } from "@/api/oaUser.js"
  import { debounce, throttle } from 'lodash'
  import { Toast } from '@/libs/uniApi.js'
  export default {
    data() {
      return {
        priceList: ['10元','50元','100元','500元','1000元','5000元','10000元', '自定义'],
        changeMoney: -1,
        payMoney: {
          money: ''
        },
        payTimer: null,
        timeCount: 5,
      }
    },
    // 点击充值记录
    onNavigationBarButtonTap(res){
      if (res.index === 0) {
        uni.navigateTo({
          url: '/subpkg/topUpList/topUpList'
        })
      }
    },
    onLoad() {},
    onShow() {},
    methods: {
      changePrice(index){
        if(this.changeMoney == index)this.changeMoney = -1;
        else this.changeMoney = index;
        if(this.priceList[index]=='自定义')this.payMoney.money = '';
        else this.payMoney.money = this.priceList[index].split('元')[0];
      },
      //充值
      pay(){
        if(!this.payMoney.money)return Toast('请先填写充值金额!')
        if(this.payMoney.money<=0)return Toast('充值金额不能小于0!')
        if(!this.payTimer){
          this.goRecharge();
          this.payTimer = setInterval(()=>{
            this.timeCount--;
            if(this.timeCount<=0){
              clearInterval(this.payTimer);
              this.payTimer = null;
              this.timeCount = 5;
            }
          }, 1000)
        }
        else Toast(this.timeCount+'秒后再支付!')
      },
      async goRecharge() {
        let { data } = await recharge({
          money: this.payMoney.money
        });
        let res = await payWay({
          order_id: data.order_id,
          from: data.from,
        })
        // console.log(res);
        let res1 = await payPrepay({
          from: data.from,
          order_id: data.order_id,
          pay_way: res.data.lists[0].pay_way
        })
        // console.log(res1.data, res1.data.config.package.split('=')[1]);
        let obj = {
          "appid": res1.data.config.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
          "noncestr": res1.data.config.nonceStr, // 随机字符串
          "package": res1.data.config.package, // 固定值
          "partnerid": res1.data.config.partnerid, // 微信支付商户号
          "prepayid": res1.data.config.package.split('=')[1], // 统一下单订单号 
          "timestamp": res1.data.config.timestamp, // 时间戳（单位：秒）
          "sign": res1.data.config.paySign
        }
        // console.log(obj);
        uni.showLoading({
          title:'获取微信支付信息',
          success: () => {
            uni.getProvider({
              service: 'payment',
              success: (paymentList) => {
                // console.log(paymentList);
                uni.hideLoading();
                uni.showLoading({
                  title:'微信支付中'
                })
                uni.requestPayment({
                  provider: 'wxpay',
                  // orderInfo: res1.data.config,
                  orderInfo: obj,
                  success: (e) => {
                    console.log('成功', e);
                    uni.hideLoading();
                    payStatus({
                      order_id: data.order_id,
                      from: data.from,
                    }).then((status)=>{
                      uni.showToast({
                        icon:status.data.pay_status?'success':'none',
                        title: status.data.pay_status?'支付成功':'支付失败'
                      })
                      userInfo().then(user=>{
                        this.$store.commit('setUserInfo', user.data);
                      })
                    })
                  },
                  fail: (e) => {
                    uni.hideLoading();
                    uni.showToast({
                      icon:'error',
                      title: '支付失败!'
                    })
                  },
                  complete: () => {},
                });
              }
            })
          },
          fail: (e) => {
            uni.showToast({
              icon:'error',
              title:'请先安装微信'
            })
          }
        })
      }
    },
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

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

  .info {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    height: 250rpx;

    .bg {
      background-color: #3274F9FF;
      height: 170rpx;
      width: 100vw;
      border-radius: 0rpx 0rpx 28rpx 28rpx;
      position: absolute;
      top: 0;
      left: 0;
    }

    .card {
      width: 694rpx;
      height: 180rpx;
      background: #FFFFFF;
      margin-top: 38.55rpx;
      box-shadow: 0rpx 0rpx 18rpx 2rpx rgba(50, 116, 249, 0.1);
      border-radius: 14rpx 14rpx 14rpx 14rpx;
      opacity: 1;
      padding: 31.5rpx 28rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: absolute;
      top: 0;

      .title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333333;
        padding-bottom: 10rpx;
      }

      .item {
        display: flex;
        justify-content: space-between;
        font-size: 32rpx;
        font-weight: 400;
        color: #333333;
      }
    }
  }

  .price {
    display: flex;
    flex-direction: column;
    padding: 0 28rpx;

    .title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333333;
      line-height: 39rpx;
      margin-bottom: 42rpx;
    }

    .tab {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;

      .item {
        width: 217rpx;
        height: 131rpx;
        margin-bottom: 20rpx;
        border-radius: 7rpx 7rpx 7rpx 7rpx;
        border: 2rpx solid #F5F5F5;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 32rpx;
        font-weight: 500;
        line-height: 32rpx;
      }

      .active {
        border: 2rpx solid #3274F9;
        color: #3274F9;
      }
    }

    .input {
      width: 100%;
      height: 112rpx;
      background: #F5F5F5;
      border-radius: 56rpx 56rpx 56rpx 56rpx;
      opacity: 1;
      padding: 0 45.56rpx;
      box-sizing: border-box;
      font-size: 28rpx;
      font-weight: 400;
      color: #333;
      line-height: 35rpx;
    }

    .btn {
      width: 694rpx;
      height: 84rpx;
      margin-top: 73.6rpx;
      background: #3274F9;
      box-shadow: 0rpx 14rpx 44rpx 2rpx #E9EFF5;
      border-radius: 42rpx 42rpx 42rpx 42rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32rpx;
      font-weight: 400;
      color: #FFFFFF;
    }
  }

  .tip {
    display: flex;
    flex-direction: column;
    padding: 0 28rpx;
    margin-top: 84rpx;

    .title {
      font-size: 32rpx;
      font-weight: 500;
      color: #3274F9;
      line-height: 32rpx;
      margin-bottom: 21rpx;
    }

    .text {
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.6);
      line-height: 42rpx;
      -webkit-background-clip: text;
    }
  }
</style>