Skip to content

C
cust-app
Commit c67db6aa authored by 罗林杰's avatar 罗林杰
Browse files
Options

修改充值倒计时弹窗

parent c0120fcf
Hide whitespace changes
Inline Side-by-side
Showing with 222 additions and 7 deletions
pagesme/goldCoin/recharge.vue
View file @ c67db6aa
...@@ -31,6 +31,37 @@ ...@@ -31,6 +31,37 @@
<view class="bottom"> <view class="bottom">
<button class="btn" :loading="loading" @click="submitorder">立即充值</button> <button class="btn" :loading="loading" @click="submitorder">立即充值</button>
</view> </view>
<view class="dialog_box" v-if="show">
<view class="bg"></view>
<view class="dialog_content">
<view class="bag">
<image class="pop-bgc" :src="baseUrl + '/common/home-pop-bg.png'"></image>
<view class="divss">
<view class="namne">提示</view>
<view class="namnes">充值成功，请等待倒计时结束确认是否到账</view>
<u-count-down
:time="60000"
format="mm:ss"
:auto-start="true"
@finish="finish"
@change="updateTimeData"
>
<view class="time">
<view class="time__custom">
<text class="time__custom__item">{{ showMinutes }}</text>
</view>
<text class="time__doc">:</text>
<view class="time__custom">
<text class="time__custom__item">{{ showSeconds }}</text>
</view>
</view>
</u-count-down>
<view class="button" v-if="timeFinish" @click="confirm">确认</view>
</view>
</view>
</view>
</view>
</view> </view>
</template> </template>
<script> <script>
...@@ -61,6 +92,24 @@ export default { ...@@ -61,6 +92,24 @@ export default {
memberId:null,//会员id memberId:null,//会员id
coinCount:100,//金币数量 coinCount:100,//金币数量
payMoney:100,//支付金额 payMoney:100,//支付金额
//图片路径
baseUrl: this.$IMG_URL,
timeData: { // 时间数据对象
minutes: '00',
seconds: '00'
},
show:false,
timeFinish: false,
}
},
computed: {
// 格式化分钟显示（补零）
showMinutes() {
return String(this.timeData.minutes).padStart(2, '0')
},
// 格式化秒数显示（补零）
showSeconds() {
return String(this.timeData.seconds).padStart(2, '0')
} }
}, },
onLoad(option) { onLoad(option) {
...@@ -104,8 +153,6 @@ export default { ...@@ -104,8 +153,6 @@ export default {
activityId: 0 activityId: 0
} }
pay(payquery).then(res => { pay(payquery).then(res => {
console.log("支付参数", res)
console.log("测试支付", res.data.errMsg)
if (res.data.errMsg === 'OK') { if (res.data.errMsg === 'OK') {
if (!res.data.data.nonceStr) { if (!res.data.data.nonceStr) {
uni.showToast({ uni.showToast({
...@@ -133,7 +180,6 @@ export default { ...@@ -133,7 +180,6 @@ export default {
}) })
}, },
fail(e) { fail(e) {
console.log("支付失败", e)
uni.showToast({ uni.showToast({
title: '支付已取消', title: '支付已取消',
icon: 'none' icon: 'none'
...@@ -153,10 +199,7 @@ export default { ...@@ -153,10 +199,7 @@ export default {
} }
}) })
} else { } else {
uni.showToast({ this.show = true
title: '充值成功！',
icon: 'success'
})
} }
} else if(res.data.code !== 200){ } else if(res.data.code !== 200){
uni.showToast({ uni.showToast({
...@@ -171,6 +214,16 @@ export default { ...@@ -171,6 +214,16 @@ export default {
uni.navigateTo({ uni.navigateTo({
url: '/pagesme/goldCoin/consumeRecord' url: '/pagesme/goldCoin/consumeRecord'
}); });
},
updateTimeData(time) {
this.timeData = time
},
finish(){
this.timeFinish = true
this.getCoinBalance()
},
confirm(){
this.show = false
} }
} }
} }
...@@ -275,4 +328,166 @@ export default { ...@@ -275,4 +328,166 @@ export default {
border: none; border: none;
} }
} }
.dialog_box {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 999;
.bg {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
background-color: rgba(0, 0, 0, 0.5);
}
.dialog_content {
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 10;
text-align: center;
.title {
font-size: 50rpx;
color: #fff;
margin: 40rpx auto;
}
.bag {
position: relative;
width: 500rpx;
height: 562rpx;
background: #ffffff;
border-radius: 24rpx 24rpx 24rpx 24rpx;
opacity: 1;
overflow: hidden;
margin-left: 125rpx;
margin-top: 40%;
// 关闭按钮样式
.close-button {
position: absolute;
top: 20rpx;
right: 20rpx;
width: 40rpx;
height: 40rpx;
line-height: 40rpx;
text-align: center;
font-size: 40rpx;
font-weight: bold;
color: #999999;
cursor: pointer;
z-index: 10;
&:active {
color: #666666; // 点击时颜色变化
}
}
.divss {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
.namne {
color: rgba(45, 49, 50, 0.8);
font-weight: 400;
font-size: 40rpx;
font-family: 'PingFang SC-Heavy, PingFang SC';
width: 100%;
height: 56rpx;
line-height: 56rpx;
margin-top: 66rpx;
text-align: center;
}
.button {
width: 392rpx;
height: 84rpx;
background: linear-gradient(86deg, #c2d2f9 0%, #c5c2f3 100%);
border-radius: 42rpx;
font-size: 28rpx;
font-family: 'PingFang SC-Regular, PingFang SC';
font-weight: 400;
color: #415c9e;
line-height: 84rpx;
text-align: center;
margin: 0 auto;
margin-top: 100rpx;
}
.namnes {
width: 364rpx;
height: 96rpx;
font-size: 28rpx;
font-family: 'PingFang SC-Regular, PingFang SC';
font-weight: 400;
color: #4a4a4a;
line-height: 48rpx;
margin: 0 auto;
margin-top: 80rpx;
text-align: center;
}
}
.pop-bgc {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
// z-index: -1;
}
}
}
}
.time {
@include flex;
align-items: center;
justify-content: center;
margin-top: 8px;
&__custom {
margin-top: 4px;
width: 22px;
height: 22px;
background-color: $u-primary;
border-radius: 4px;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
&__item {
color: #fff;
font-size: 12px;
text-align: center;
}
}
&__doc {
color: $u-primary;
padding: 0px 4px;
}
&__item {
color: #606266;
font-size: 15px;
margin-right: 4px;
}
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment