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 active">50元</view>
        <view class="item">100元</view>
        <view class="item">200元</view>
        <view class="item">400元</view>
        <view class="item">800元</view>
        <view class="item">1000元</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 {
       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.getProvider({
        service:'payment',
        success: (paymentList) => {
          // console.log(paymentList);
          uni.requestPayment({
          	provider: 'wxpay',
          	// orderInfo: res1.data.config,
            orderInfo: obj,
          	success: (e) => {
          		console.log('成功', e);
          	},
          	fail: (e) => {
          		console.log('error', e);
          	},
          	complete: () => {
          	},
          });
        }
      })
      
    }
  },
  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>