| | |
| | | <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}, |
| | |
| | | //支付方式 |
| | | 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"> |
| | |
| | | </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"> |
| | |
| | | <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> |
| | |
| | | padding: 0 20rpx; |
| | | box-sizing: border-box; |
| | | // background: #49B4E3; |
| | | height:216rpx; |
| | | height:130rpx; |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: space-between; |