新增支付防抖功能

This commit is contained in:
weipengfei 2023-07-20 17:40:13 +08:00
parent 75bf2692d0
commit 7e66b25348
5 changed files with 85 additions and 16 deletions

11
package-lock.json generated Normal file
View File

@ -0,0 +1,11 @@
{
"requires": true,
"lockfileVersion": 1,
"dependencies": {
"lodash": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -3,20 +3,23 @@
<view class="finance_head">
<view class="top">
<view class="left">
<image></image>
<view>张三</view>
<image></image>
<u--image :showLoading="true" :src="userInfo.avatar||''" width="44px" height="44px" shape="circle"></u--image>
<view class="name">{{userInfo.nickname}}</view>
<image src="../../static/img/contract/setting.png"></image>
</view>
<view class="right" @click="naviTo('/subpkg/topUp/topUp')">
账户充值
</view>
</view>
<view class="center">
<view>
<view class="title">
<text style="margin-right: 20rpx;">账户总金额()</text><uni-icons type="eye" color="#fff"></uni-icons>
</view>
<view>1338.96</view>
<view>可提现金额</view>
<view class="price">1338.96</view>
<view class="bubble">
<!-- <image src="../../static/img/contract/bubble.png"></image> -->
<view class="text">可提现金额100.00</view>
</view>
</view>
</view>
</view>
@ -26,10 +29,17 @@
export default {
data() {
return {
userInfo:{}
}
},
onLoad() {},
onLoad() {
// console.log(this.userInfo);
this.userInfo = this.$store.state.app.userInfo;
uni.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#3175f9'
})
},
onShow() {},
methods: {
naviTo(url) {
@ -57,13 +67,17 @@ export default {
padding: 10rpx 28rpx;
.left{
display: flex;
align-items: center;
flex: 1;
font-size: 28rpx;
font-weight: 500;
color: #FFFFFF;
.name{
margin: 0 17.5rpx;
}
image{
width: 30rpx;
height: 30rpx;
width: 40rpx;
height: 40rpx;
}
}
.right{
@ -74,6 +88,29 @@ export default {
}
.center{
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
.title{
font-size: 25rpx;
font-weight: 400;
line-height: 39rpx;
}
.price{
font-size: 60rpx;
font-weight: bold;
line-height: 39rpx;
margin-top: 28rpx;
margin-bottom: 14rpx;
}
.bubble{
padding: 20rpx 28rpx 10rpx 28rpx;
background-image: url('../../static/img/contract/bubble.png');
background-repeat: no-repeat;
background-size: 100% 100%;
.text{
}
}
}
}
</style>

View File

@ -21,7 +21,7 @@
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="goRecharge">充值</button>
<button class="btn" @click="pay">充值</button>
</view>
<view class="tip">
<view class="title">注意事项</view>
@ -33,17 +33,26 @@
<script>
import { recharge, payWay, payPrepay, wechatJsConfig, payStatus } from "@/api/pay.js"
import { debounce, throttle } from 'lodash'
import { Toast } from '@/libs/uniApi.js'
export default {
data() {
return {
priceList: ['50元', '100元', '200元', '500元', '1000元', '自定义'],
changeMoney: 0,
changeMoney: -1,
payMoney: {
money: ''
}
},
payTimer: null,
timeCount: 5,
}
},
onLoad() {},
onLoad() {
uni.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#3175f9'
})
},
onShow() {},
methods: {
changePrice(index){
@ -52,6 +61,20 @@
else this.payMoney.money = this.priceList[index].split('元')[0];
},
//
pay(){
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
@ -124,8 +147,6 @@
})
}
})
}
},
onPullDownRefresh() {