Liuyi
2024-12-20 d470e67ac1997882502b75cbfdaf359626cfaaa8
pages/recharge/index.vue
@@ -1,8 +1,10 @@
<script setup>
   import{ ref ,onMounted} from 'vue'
   import{ ref ,onMounted,onUnmounted} from 'vue'
   import { wxPayApi,rechargeApi } from '../../api/index.js'
   
   const choosedMoney = ref()
   const choosedMoney = ref(50)
   const disabled = ref(true)
   const userInfo = JSON.parse(uni.getStorageSync('userInfo'))
   //选择金额
   const moneyList = ref([
      {value:50,active:true},
@@ -37,28 +39,103 @@
   //支付方式
   const payMethod = ref()
   const payList = ref([
      {text:"支付宝支付",value:1,checked:true,img:'../../static/images/recharge/pay.png'},
      {text:"微信支付",value:2,checked:false,img:'../../static/images/recharge/wx.png'},
      {text:"余额",value:3,checked:false,img:'../../static/images/recharge/balance.png'},
      // {text:"支付宝支付",value:1,checked:true,img:'../../static/images/recharge/pay.png'},
      {text:"微信支付",value:2,checked:true,img:'../../static/images/recharge/wx.png'},
      // {text:"余额",value:3,checked:false,img:'../../static/images/recharge/balance.png'},
   ])
   function choosePay(index1){
      payList.value.forEach((item,index) =>{
         if(item.checked == true){
            item.checked = false
   // function choosePay(index1){
   //    payList.value.forEach((item,index) =>{
   //       if(item.checked == true){
   //          item.checked = false
   //       }
   //    })
   //    payList.value[index1].checked = true
   //    payMethod.value = payList.value[index1].value
   // }
   let timerId
   let payStatus = ref(true)
   async function submit(){
      if(payStatus.value){
         payStatus.value = false
         timerId = setTimeout(()=>{
            payStatus.value = true
         },20000)
         let money = ''
         if(disabled.value){
            money = choosedMoney.value
         }else{
            money = Number(otherMoney.value)
         }
         let data = {
                 cardNumber:userInfo.waterCardNumber,
                 paymentMethod:1,
                 rechargeAmount:money
             }
         //生成订单
         await rechargeApi(data).then(async(res) =>{
            if(res.code == 200){
               let data = {
                  businessType:1,
                  businessNo:res.data
                  }
               //发起支付
               await wxPay(data)
               otherMoney.value = ''
            }
         })
      }else{
         uni.showToast({
            title:'充值间隔20秒,请稍后!',
            icon:'none'
         })
      }
   }
   //微信支付
   async function wxPay(data){
      await wxPayApi(data).then((res) =>{
         if(res.code == 200){
            //调用微信官方支付接口弹出付款界面,输入密码扣款
            wx.requestPayment({
              //预支付订单信息
              // appId: res.data.appId,
              timeStamp: res.data.timeStamp,     //时间戳
              nonceStr: res.data.nonceStr,      //随机串
              package: res.data.package,      //prepay_id
              signType: res.data.signType,      //签名算法MD5
              paySign: res.data.paySign ,//微信签名
             success (res) {
               if (res.errMsg == "requestPayment:ok"){
                 console.log('支付成功', res)
                 uni.showToast({
                  title: '支付成功',
                  duration: 2000,
                 });
                 uni.navigateBack()
               }else{
                 uni.showToast({
                  title: '支付失败',
                  duration: 2000,
                  icon:'none'
                 });
               }
             },
             fail (res) {
               uni.showToast({
                  title: '微信支付失败',
                  duration: 2000,
                  icon:'none'
               });
             }
            })
         }
      })
      payList.value[index1].checked = true
      payMethod.value = payList.value[index1].value
   }
   function submit(){
      let money = ''
      if(disabled.value){
         money = choosedMoney.value
      }else{
         money = otherMoney.value
      }
      console.log('money',money)
   }
   onUnmounted(() =>{
      clearTimeout(timerId)
   })
</script>
<template>
   <view class="container">
@@ -86,10 +163,10 @@
               </view>
            </view>
            <view class="pay-methods">
               <view class="money-title">
               <!-- <view class="money-title">
                  <view class="title-icon"></view>
                  <view class="title-text">请选择支付方式</view>
               </view>
               </view> -->
               <view class="methods-list">
                  <block v-for="(item,index) in payList">
                     <view class="pay-item">
@@ -97,13 +174,13 @@
                           <image :src="item.img" alt=""></image>
                           <view>{{item.text}}</view>
                        </view>
                        <radio :value="item.value" :checked="item.checked" @click="choosePay(index)"/>
                        <radio :value="item.value" :checked="item.checked"/>
                     </view>
                  </block>
               </view>
            </view>
         </view>
         <view class="submit-btn" @click="submit()">立即充值</view>
         <view :style="{opacity:payStatus ? 1 : 0.7}" class="submit-btn" @click="submit()">立即充值</view>
      </view>
   </view>
</template>
@@ -182,7 +259,7 @@
                  padding: 0 20rpx;
                  box-sizing: border-box;
                  // background: #49B4E3;
                  height:216rpx;
                  height:130rpx;
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;