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>XXXXX账户</text>
        </view>
        <view class="item">
          <text>收款账户</text>
          <text>XXXXX账户</text>
        </view>
      </view>
    </view>
    <view class="price">
      <view class="title">充值金额</view>
      <view class="tab">
        <view class="item" :class="index==changeMoney?'active':''" @click="changeMoney=index"
          v-for="(item, index) in priceList" :key="index">{{item}}</view>
      </view>
      <input class="input" type="digit" placeholder="输入充值金额(元)" v-model="payMoney.money" />
      <button class="btn" @click="goRecharge">充值</button>
    </view>
    <view class="tip">
      <view class="title">注意事项</view>
      <view class="text">充值后帐户的金额不能提现，可用于商城消费使用佣金导入账户之后不能再次导出、不可提现账户充值出现问题可联系商城客服，也可拨打商城客服热线<text>4008888888</text>
      </view>
    </view>
  </view>
</template>

<script>
  import { recharge, payWay, payPrepay, wechatJsConfig } from "@/api/pay.js"
  export default {
    data() {
      return {
        priceList: ['50元', '100元', '200元', '500元', '1000元', '2000元'],
        changeMoney: 0,
        payMoney: {
          money: ''
        }
      }
    },
    onLoad() {},
    onShow() {},
    methods: {
      //充值
      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();
                    uni.showToast({
                      icon:'success',
                      title:'支付成功!'
                    })
                  },
                  fail: (e) => {
                    console.log('error', e);
                    uni.hideLoading();
                    uni.showToast({
                      icon:'error',
                      title: e.errMsg
                    })
                  },
                  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: 350rpx;

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

    .card {
      width: 694rpx;
      height: 277rpx;
      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>