导读:用两个相同的view,未点击时,显示第一个隐藏第二个;点击后,隐藏第一个显示第二个,任务处理完成后恢复初始状态
用两个相同的view,未点击时,显示第一个隐藏第二个;点击后,隐藏第一个显示第二个,任务处理完成后恢复初始状态
1、先在<template>中创建两个相同的view
<view class="btnbox" @click.stop="requestPayment()" v-show="gopay">
<text class="btntxt">去支付</text>
</view>
<view class="btnbox" v-show="!gopay">
<text class="btntxt">支付中 请稍后。。。</text>
</view>
2、在中定义gopay变量并赋初值
export default {
data() {
return {
gopay:true,//支付按钮显示开关,避免重复点击
}
},
}
3、在requestPayment()开始时改变gopay=false,处理完成后改变gopay=true
async requestPayment() {
this.gopay=false;//隐藏支付按钮
//TODO
}
uni.requestPayment({
},
fail: (e) => {
},
complete: () => {
this.gopay=true;//支付完成后打开支付开关
}
})
},
4、<style>中
.btnbox{
width: 98%;
height: 7vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 8px;
background-color: #66CDAA;
}