修改充值弹窗

This commit is contained in:
wangxiaowei
2025-12-30 18:17:59 +08:00
parent a9f6c940bb
commit a9b34c58ad

View File

@ -10,9 +10,11 @@
<view class="bg-white card">
<view>
<view class="card-item" :class="currentType == i + 1 ? 'active' : ''" v-for="i in 5" :key="i" @click="selectCard(i + 1)">
<view class="card-item" :class="currentType == i + 1 ? 'active' : ''" v-for="i in 5" :key="i"
@click="selectCard(i + 1)">
<view class="d-f a-i-c">
<view class="icon-box d-c-c card-checkout"><span class="icon iconfont icon-xuanze"></span></view>
<view class="icon-box d-c-c card-checkout"><span class="icon iconfont icon-xuanze"></span>
</view>
<view class="card-balance">充值{{ balance['balance' + (i + 1)] }}</view>
</view>
<view class="d-f a-i-c">
@ -26,11 +28,11 @@
</view>
</view>
</view>
<view >
<checkbox-group @change="checkboxChange">
<view>
<!-- <checkbox-group @change="checkboxChange">
<text class="" style="margin-right: 20rpx;" @click="see">我已阅读并同意充值协议</text>
<checkbox value="true" :checked="yxChekced"/>
</checkbox-group>
</checkbox-group> -->
<!-- <text class="" style="margin-right: 20rpx;">我已阅读并同意充值协议</text>
<checkbox value="cb" class="checkbox" :checked="yxChekced" @change="yxChekced = !yxChekced" /> -->
</view>
@ -44,7 +46,7 @@
<view class="r-desc2">c.充值前请先查看本协议<text style="color: #FF5951;" @click="see">充值协议</text></view>
</view>
<view class="card-btn" @click="confirmCard">确定</view>
<view class="card-btn" @click="openXieYi">确定</view>
</view>
<!-- 会员卡选择弹窗 -->
@ -60,14 +62,39 @@
</view>
</view>
</Popup> -->
<Popup :show="cardPopup" :width='680' :padding="0" backgroundColor="#fff" radius="16rpx">
<view class="notice-popup">
<view class="title" style="font-size: 36rpx; color: #303133; line-height: 50rpx;margin-top: 20rpx;">充值说明
</view>
<view class="desc" style="text-align: left; padding: 0 30rpx;">
<view class="r-desc2" style="margin-bottom: 10rpx;">a.账户充值仅限在线方式支付充值金额实时到账</view>
<view class="r-desc2" style="margin-bottom: 10rpx;">b.有问题请联系客服</view>
<!-- <view class="r-desc2" style="margin-bottom: 10rpx;">c.充值前请先查看本协议<text style="color: #FF5951;" @click="see">充值协议</text></view> -->
<view class="r-desc2 xy" style="margin-bottom: 10rpx;display: flex; align-items: center; flex-wrap: wrap;" @click="yxChekced = !yxChekced">
<view style="margin-right: 10rpx;" :class="yxChekced ? 'active' : ''">
<view class="icon-box d-c-c card-checkout"><span class="icon iconfont icon-xuanze" style="font-size: 46rpx;"></span>
</view>
</view>
<view class="" style="font-size: 30rpx;">
我已认真阅读并查看此协议<text style="color: #FF5951;" @click="see">充值协议</text>
</view>
</view>
</view>
<view class="btn">
<view class="btn1" @click="cardPopup = false">取消</view>
<view class="btn2" @click="confirmCard">确定</view>
</view>
</view>
</Popup>
</view>
</template>
<script>
import navbar from '@/components/navbar.vue';
import Popup from '@/components/uni-popup.vue';
import navbar from '@/components/navbar.vue';
import Popup from '@/components/uni-popup.vue';
export default {
export default {
components: {
navbar,
Popup
@ -78,7 +105,7 @@
cardPopup: false,
currentType: -1,
balance: {},
yxChekced: true
yxChekced: false
}
},
@ -90,7 +117,7 @@
{
app_id: self.getAppId(),
},
function(res) {
function (res) {
self.balance = res.data.lists.balance;
console.log("🚀 ~ res:", self.balance)
}
@ -110,30 +137,35 @@
},
openXieYi() {
this.cardPopup = true;
},
// 确认选择
confirmCard() {
if (!this.yxChekced) {
let self = this;
if (!self.yxChekced) {
uni.showToast({
title: '请同意充值协议',
title: '请认真阅读并查看此协议',
icon: 'none'
});
return;
}
let self = this;
self.cardPopup = false;
uni.showLoading({
title: '加载中'
});
self._post('user.index/detail', {
source: self.getPlatform()
}, function(res) {
}, function (res) {
uni.hideLoading();
console.log("🚀 ~ res:", res)
if (res.data.userInfo.mobile == '') {
uni.showModal({
title: '提示',
content: '请先绑定手机号',
success: function(sm) {
success: function (sm) {
if (sm.confirm) {
uni.switchTab({
url: '/pages/user/index/index'
@ -141,7 +173,7 @@
}
}
});
}else {
} else {
if (self.currentType == -1) {
uni.showToast({
title: '请选择充值金额',
@ -168,7 +200,7 @@
app_id: self.getAppId(),
type: this.currentType
},
function(res) {
function (res) {
if (res.code) {
const data = res.data
console.log("🚀 ~ pay data:", data)
@ -225,27 +257,64 @@
icon: 'none'
});
setTimeout(() => {
uni.navigateBack({delta: 1})
uni.navigateBack({ delta: 1 })
}, 500);
}
},
see() {
uni.navigateTo({
url: '/pages/webview/webview?url=https://xh.stnav.com/czxy.html'
uni.showLoading({
title: '加载中'
});
// 1. 协议文件地址(可替换为实际后端返回的 word 文件 url
const url = 'https://xh.stnav.com/czxy.doc';
// 2. 下载 word 文件
uni.downloadFile({
url,
success: (res) => {
if (res.statusCode === 200) {
// 3. 预览 word 文件
uni.openDocument({
filePath: res.tempFilePath,
fileType: 'doc',
success: () => {
// 预览成功
uni.hideLoading();
},
fail: (err) => {
uni.hideLoading();
setTimeout(() => {
uni.showToast({ title: '无法预览文件', icon: 'none' });
}, 1000);
}
});
} else {
uni.hideLoading();
// setTimeout(() => {
// uni.showToast({ title: '下载失败', icon: 'none' });
// }, 1000);
}
},
fail: () => {
uni.hideLoading();
// setTimeout(() => {
// uni.showToast({ title: '下载失败', icon: 'none' });
// }, 1000);
}
});
}
}
}
}
</script>
<style lang="scss">
page {
page {
background-color: #fff;
}
}
.recharge-box {
.recharge-box {
margin: 0 30rpx;
margin-top: 24rpx;
@ -272,7 +341,7 @@
width: 690rpx;
height: 104rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0,0,0,0.04);
box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.04);
border-radius: 16rpx;
border: 2rpx solid #fff;
margin: 0 0 20rpx;
@ -287,8 +356,10 @@
color: #121212;
margin-right: 24rpx;
}
.sale {
font-size: 28rpx;
.discount {
color: #FF5951;
}
@ -307,7 +378,7 @@
background: #FFF4F4;
.card-checkout {
.iconfont{
.iconfont {
color: #365A9A;
}
}
@ -331,9 +402,9 @@
line-height: 90rpx;
text-align: center;
}
}
}
.notice-popup {
.notice-popup {
padding: 20rpx 0;
width: 100%;
@ -366,5 +437,44 @@
text-align: left;
margin-bottom: 10rpx;
}
}
.btn {
margin-top: 40rpx;
display: flex;
justify-content: space-around;
padding-bottom: 20rpx;
}
.btn1 {
width: 280rpx;
height: 80rpx;
text-align: center;
line-height: 80rpx;
font-size: 32rpx;
color: #121212;
background-color: #F6F7F8;
border-radius: 8rpx;
}
.btn2 {
width: 280rpx;
height: 80rpx;
text-align: center;
line-height: 80rpx;
font-size: 32rpx;
color: #fff;
background-color: #365A9A;
border-radius: 8rpx;
}
.xy {
.active {
.card-checkout {
.iconfont {
color: #365A9A;
}
}
}
}
</style>