wangxiaowei/xiuhuwangqiu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改充值弹窗

Browse Source
This commit is contained in:
wangxiaowei
2025-12-30 18:17:59 +08:00
parent a9f6c940bb
commit a9b34c58ad
1 changed files with 379 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

648
bundle/recharge/recharge.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<view class=""> <view class="">
<navbar title="充值"></navbar> <navbar title="充值"></navbar>
<view class="recharge-box"> <view class="recharge-box">
<view class="r-desc"> <view class="r-desc">
<view class="r-desc1">请选择充值金额</view> <view class="r-desc1">请选择充值金额</view>
@ -10,9 +10,11 @@
<view class="bg-white card"> <view class="bg-white card">
<view> <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="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 class="card-balance">充值{{ balance['balance' + (i + 1)] }}</view>
</view> </view>
<view class="d-f a-i-c"> <view class="d-f a-i-c">
@ -26,11 +28,11 @@
</view> </view>
</view> </view>
</view> </view>
<view > <view>
<checkbox-group @change="checkboxChange"> <!-- <checkbox-group @change="checkboxChange">
<text class="" style="margin-right: 20rpx;" @click="see">我已阅读并同意充值协议</text> <text class="" style="margin-right: 20rpx;" @click="see">我已阅读并同意充值协议</text>
<checkbox value="true" :checked="yxChekced"/> <checkbox value="true" :checked="yxChekced"/>
</checkbox-group> </checkbox-group> -->
<!-- <text class="" style="margin-right: 20rpx;">我已阅读并同意充值协议</text> <!-- <text class="" style="margin-right: 20rpx;">我已阅读并同意充值协议</text>
<checkbox value="cb" class="checkbox" :checked="yxChekced" @change="yxChekced = !yxChekced" /> --> <checkbox value="cb" class="checkbox" :checked="yxChekced" @change="yxChekced = !yxChekced" /> -->
</view> </view>
@ -44,7 +46,7 @@
<view class="r-desc2">c.充值前请先查看本协议<text style="color: #FF5951;" @click="see">《充值协议》</text>。</view> <view class="r-desc2">c.充值前请先查看本协议<text style="color: #FF5951;" @click="see">《充值协议》</text>。</view>
</view> </view>
<view class="card-btn" @click="confirmCard">确定</view> <view class="card-btn" @click="openXieYi">确定</view>
</view> </view>
<!-- 会员卡选择弹窗 --> <!-- 会员卡选择弹窗 -->
@ -60,311 +62,419 @@
</view> </view>
</view> </view>
</Popup> --> </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> </view>
</template> </template>
<script> <script>
import navbar from '@/components/navbar.vue'; import navbar from '@/components/navbar.vue';
import Popup from '@/components/uni-popup.vue'; import Popup from '@/components/uni-popup.vue';
export default { export default {
components: { components: {
navbar, navbar,
Popup Popup
}, },
data() { data() {
return { return {
cardPopup: false, cardPopup: false,
currentType: -1, currentType: -1,
balance: {}, balance: {},
yxChekced: true yxChekced: false
}
},
onLoad() {
let self = this;
// 获取充值卡
self._post(
'ground.ground/groundSetting',
{
app_id: self.getAppId(),
},
function (res) {
self.balance = res.data.lists.balance;
console.log("🚀 ~ res:", self.balance)
} }
)
},
methods: {
// 选择会员卡
selectCard(index) {
this.currentType = index;
}, },
onLoad() { checkboxChange(e) {
console.log("🚀 ~ e:", e)
this.yxChekced = e.detail.value[0]
console.log("🚀 ~ e:", this.yxChekced)
},
openXieYi() {
this.cardPopup = true;
},
// 确认选择
confirmCard() {
let self = this; let self = this;
// 获取充值卡 if (!self.yxChekced) {
self._post( uni.showToast({
'ground.ground/groundSetting', title: '请认真阅读并查看此协议',
{ icon: 'none'
app_id: self.getAppId(), });
}, return;
function(res) { }
self.balance = res.data.lists.balance;
console.log("🚀 ~ res:", self.balance) self.cardPopup = false;
uni.showLoading({
title: '加载中'
});
self._post('user.index/detail', {
source: self.getPlatform()
}, function (res) {
uni.hideLoading();
console.log("🚀 ~ res:", res)
if (res.data.userInfo.mobile == '') {
uni.showModal({
title: '提示',
content: '请先绑定手机号',
success: function (sm) {
if (sm.confirm) {
uni.switchTab({
url: '/pages/user/index/index'
});
}
}
});
} else {
if (self.currentType == -1) {
uni.showToast({
title: '请选择充值金额',
icon: 'none'
});
return;
}
self.wxPay()
} }
) });
}, },
methods: { // 微信支付
// 选择会员卡 wxPay() {
selectCard(index) { let self = this;
this.currentType = index; uni.showLoading({
}, title: '加载中'
});
checkboxChange(e) { try {
console.log("🚀 ~ e:", e) self._post(
this.yxChekced = e.detail.value[0] 'user.groundOrder/recharge',
console.log("🚀 ~ e:", this.yxChekced) {
app_id: self.getAppId(),
}, type: this.currentType
},
// 确认选择 function (res) {
confirmCard() { if (res.code) {
if (!this.yxChekced) { const data = res.data
uni.showToast({ console.log("🚀 ~ pay data:", data)
title: '请同意充值协议', uni.requestPayment({
icon: 'none' provider: 'wxpay',
}); timeStamp: data.payment.timeStamp,
return; nonceStr: data.payment.nonceStr,
} package: 'prepay_id=' + data.payment.prepay_id,
signType: 'MD5',
let self = this; paySign: data.payment.paySign,
uni.showLoading({ success: res => {
title: '加载中' self.result = 'success'
}); console.log("🚀 ~ pay success res:", res)
self._post('user.index/detail', { uni.showToast({
source: self.getPlatform() title: '支付成功',
}, function(res) { icon: 'none'
uni.hideLoading();
console.log("🚀 ~ res:", res)
if (res.data.userInfo.mobile == '') {
uni.showModal({
title: '提示',
content: '请先绑定手机号',
success: function(sm) {
if (sm.confirm) {
uni.switchTab({
url: '/pages/user/index/index'
}); });
} self.loadding = false;
}
}); setTimeout(() => {
}else { uni.redirectTo({
if (self.currentType == -1) { url: '/bundle/recharge/card'
});
}, 500);
},
fail: res => {
console.log("🚀 ~ pay error res:", res)
self.result = 'fail'
self.loadding = false;
uni.showToast({
title: '支付失败',
icon: 'none'
});
},
});
} else {
self.loadding = false;
uni.showToast({ uni.showToast({
title: '请选择充值金额', title: '创建订单失败',
icon: 'none' icon: 'none'
}); });
return; return
} }
self.wxPay()
} }
)
} catch (error) {
console.log("🚀 ~ pay error res:", res)
self.result = 'fail'
self.loadding = false;
uni.showToast({
title: '支付失败',
icon: 'none'
}); });
}, setTimeout(() => {
uni.navigateBack({ delta: 1 })
// 微信支付 }, 500);
wxPay() {
let self = this;
uni.showLoading({
title: '加载中'
});
try {
self._post(
'user.groundOrder/recharge',
{
app_id: self.getAppId(),
type: this.currentType
},
function(res) {
if (res.code) {
const data = res.data
console.log("🚀 ~ pay data:", data)
uni.requestPayment({
provider: 'wxpay',
timeStamp: data.payment.timeStamp,
nonceStr: data.payment.nonceStr,
package: 'prepay_id=' + data.payment.prepay_id,
signType: 'MD5',
paySign: data.payment.paySign,
success: res => {
self.result = 'success'
console.log("🚀 ~ pay success res:", res)
uni.showToast({
title: '支付成功',
icon: 'none'
});
self.loadding = false;
setTimeout(() => {
uni.redirectTo({
url: '/bundle/recharge/card'
});
}, 500);
},
fail: res => {
console.log("🚀 ~ pay error res:", res)
self.result = 'fail'
self.loadding = false;
uni.showToast({
title: '支付失败',
icon: 'none'
});
},
});
} else {
self.loadding = false;
uni.showToast({
title: '创建订单失败',
icon: 'none'
});
return
}
}
)
} catch (error) {
console.log("🚀 ~ pay error res:", res)
self.result = 'fail'
self.loadding = false;
uni.showToast({
title: '支付失败',
icon: 'none'
});
setTimeout(() => {
uni.navigateBack({delta: 1})
}, 500);
}
},
see() {
uni.navigateTo({
url: '/pages/webview/webview?url=https://xh.stnav.com/czxy.html'
});
} }
},
see() {
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> </script>
<style lang="scss"> <style lang="scss">
page { page {
background-color: #fff; background-color: #fff;
}
.recharge-box {
margin: 0 30rpx;
margin-top: 24rpx;
.r-desc {
.r-desc1 {
font-size: 32rpx;
color: #303133;
line-height: 44rpx;
}
.r-desc2 {
margin-top: 12rpx;
font-size: 26rpx;
color: #909399;
line-height: 36rpx;
}
} }
.recharge-box { .card {
margin: 0 30rpx; margin-top: 28rpx;
margin-top: 24rpx; padding-bottom: 64rpx;
.r-desc { .card-item {
.r-desc1 { width: 690rpx;
font-size: 32rpx; height: 104rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.04);
border-radius: 16rpx;
border: 2rpx solid #fff;
margin: 0 0 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 30rpx;
box-sizing: border-box;
.card-title {
font-size: 30rpx;
color: #121212;
margin-right: 24rpx;
}
.sale {
font-size: 28rpx;
.discount {
color: #FF5951;
}
}
.card-balance {
font-size: 30rpx;
color: #303133; color: #303133;
line-height: 44rpx; line-height: 42rpx;
} margin-left: 26rpx;
.r-desc2 {
margin-top: 12rpx;
font-size: 26rpx;
color: #909399;
line-height: 36rpx;
} }
} }
.card { .active {
margin-top: 28rpx; border: 2rpx solid #FF5951;
padding-bottom: 64rpx; background: #FFF4F4;
.card-item { .card-checkout {
width: 690rpx; .iconfont {
height: 104rpx; color: #365A9A;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0,0,0,0.04);
border-radius: 16rpx;
border: 2rpx solid #fff;
margin: 0 0 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 30rpx;
box-sizing: border-box;
.card-title {
font-size: 30rpx;
color: #121212;
margin-right: 24rpx;
}
.sale {
font-size: 28rpx;
.discount {
color: #FF5951;
}
}
.card-balance {
font-size: 30rpx;
color: #303133;
line-height: 42rpx;
margin-left: 26rpx;
} }
} }
.active {
border: 2rpx solid #FF5951;
background: #FFF4F4;
.card-checkout {
.iconfont{
color: #365A9A;
}
}
}
} }
.card-btn {
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: 22rpx;
width: 630rpx;
height: 90rpx;
background: #365A9A;
border-radius: 8rpx;
font-weight: bold;
font-size: 30rpx;
color: #FFFFFF;
line-height: 90rpx;
text-align: center;
}
} }
.notice-popup { .card-btn {
padding: 20rpx 0; position: fixed;
width: 100%; left: 50%;
transform: translateX(-50%);
bottom: 22rpx;
width: 630rpx;
height: 90rpx;
background: #365A9A;
border-radius: 8rpx;
font-weight: bold;
font-size: 30rpx;
color: #FFFFFF;
line-height: 90rpx;
text-align: center;
}
}
.title { .notice-popup {
font-size: 36rpx; padding: 20rpx 0;
color: #303133; width: 100%;
line-height: 50rpx;
text-align: center;
}
.desc { .title {
margin-top: 48rpx; font-size: 36rpx;
font-weight: 400; color: #303133;
font-size: 32rpx; line-height: 50rpx;
color: #303133; text-align: center;
line-height: 52rpx; }
text-align: center;
}
.rule { .desc {
margin-bottom: 18rpx; margin-top: 48rpx;
text-align: left; font-weight: 400;
} font-size: 32rpx;
color: #303133;
line-height: 52rpx;
text-align: center;
}
.rule1 { .rule {
font-weight: 400; margin-bottom: 18rpx;
font-size: 32rpx; text-align: left;
color: #303133; }
line-height: 44rpx;
text-align: left; .rule1 {
margin-bottom: 10rpx; font-weight: 400;
} font-size: 32rpx;
} color: #303133;
line-height: 44rpx;
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> </style>