完善购买详情

This commit is contained in:
wangxiaowei
2026-04-11 00:23:57 +08:00
parent 2e568f8f8d
commit 2a95c0e176

View File

@ -6,11 +6,13 @@
<image class="bg-img" src="https://xh.stnav.com/uploads/sport/card-bg.png"></image>
<view style="position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;">
<image :src="info.img" style="width: 690rpx; height: 290rpx;"></image>
<view class="info-name" style="position: absolute; top: 40rpx; left: 40rpx;">{{ info.eg_name }}</view>
<view class="info-name" style="position: absolute; top: 40rpx; left: 40rpx;">{{ info.eg_name }}
</view>
<view class="info-name" style="position: absolute; top: 100rpx; left: 40rpx;">{{ info.name }}</view>
<view style="position: absolute; bottom: 68rpx; right: 40rpx; display: flex; align-items: center;">
<image class="diamond" src="https://xh.stnav.com/uploads/sport/icon_zs.png" mode="aspectFit"></image>
<text style="color: #834B08;font-weight: bold;">有效期2026.03.05到期</text>
<view v-if="info.order.end_time && id == info.order.group_id" style="position: absolute; bottom: 68rpx; right: 40rpx; display: flex; align-items: center;">
<image class="diamond" src="https://xh.stnav.com/uploads/sport/icon_zs.png" mode="aspectFit">
</image>
<text style="color: #834B08;font-weight: bold;">有效期{{ info.order.end_time }}到期</text>
</view>
</view>
</view>
@ -26,13 +28,15 @@
<!-- Rights Content -->
<view class="content-section">
<view class="section-title">
<image src="https://xh.stnav.com/uploads/sport/hyqy.png" mode="heightFix" style="height: 40rpx;"></image>
<image src="https://xh.stnav.com/uploads/sport/hyqy.png" mode="heightFix" style="height: 40rpx;">
</image>
</view>
<view class="rights-list">
<view class="right-item">
<view class="icon-circle">
<image src="https://xh.stnav.com/uploads/sport/icon_vip.png" style="width: 80rpx; height: 80rpx;"></image>
<image src="https://xh.stnav.com/uploads/sport/icon_vip.png"
style="width: 80rpx; height: 80rpx;"></image>
</view>
<view class="right-info">
<view class="right-name">VIP优惠</view>
@ -41,7 +45,8 @@
</view>
<view class="right-item">
<view class="icon-circle">
<image src="https://xh.stnav.com/uploads/sport/icon_money.png" style="width: 80rpx; height: 80rpx;"></image>
<image src="https://xh.stnav.com/uploads/sport/icon_money.png"
style="width: 80rpx; height: 80rpx;"></image>
</view>
<view class="right-info">
<view class="right-name">入场不限次</view>
@ -50,7 +55,8 @@
</view>
<view class="right-item">
<view class="icon-circle">
<image src="https://xh.stnav.com/uploads/sport/icon_service.png" style="width: 80rpx; height: 80rpx;"></image>
<image src="https://xh.stnav.com/uploads/sport/icon_service.png"
style="width: 80rpx; height: 80rpx;"></image>
</view>
<view class="right-info">
<view class="right-name">专属客服</view>
@ -62,7 +68,8 @@
<!-- Rules Box -->
<view class="rules-box">
<view class="rules-tag">
<image src="https://xh.stnav.com/uploads/sport/jshy.png" style="width: 100rpx; height: 80rpx;"></image>
<image src="https://xh.stnav.com/uploads/sport/jshy.png" style="width: 100rpx; height: 80rpx;">
</image>
</view>
<view class="rules-title">权益说明</view>
<view class="rules-subtitle">更多会员专属权益与服务内容</view>
@ -95,7 +102,7 @@
<view class="buy-modal-mask" @click="closeBuyModal"></view>
<view class="buy-modal-content">
<view class="buy-modal-title">会员购买</view>
<view class="plan-list">
<view class="plan-item" :class="{ active: selectedPlan === 1 }" @click="selectPlan(1)">
<view class="plan-name">月卡</view>
@ -130,10 +137,12 @@
<view class="success-modal-mask" @click="closeSuccessModal"></view>
<view class="success-modal-content">
<view class="success-img-wrapper">
<image class="success-img" src="https://xh.stnav.com/uploads/sport/buy-success.png" mode="widthFix"></image>
<image class="success-img" src="https://xh.stnav.com/uploads/sport/buy-success.png" mode="widthFix">
</image>
<view class="success-confirm-btn" @click="closeSuccessModal">确定</view>
</view>
<image class="success-close" src="https://xh.stnav.com/uploads/sport/icon_close2.png" mode="aspectFit" @click="closeSuccessModal"></image>
<image class="success-close" src="https://xh.stnav.com/uploads/sport/icon_close2.png" mode="aspectFit"
@click="closeSuccessModal"></image>
</view>
</view>
</view>
@ -151,7 +160,12 @@ export default {
showBuyModal: false, // 会员购买弹窗
showSuccessModal: false, // 购买成功弹窗
selectedPlan: 1, // 选择的套餐 1-月卡 2-季卡
info: null, // 套餐详情数据
info: {
order: {
group_id: 0, // 套餐ID
end_time: '', // 会员到期时间
},
}, // 套餐详情数据
};
},
created() {
@ -188,45 +202,45 @@ export default {
handleSubmit() {
let self = this;
// 判断之前是否开通过任意一张会员卡,如果开通过且没有过期,提示"您已购买过套餐卡,无需重复购买"
if (self.info.order.end_time) {
uni.showToast({ title: '您已购买过套餐卡,无需重复购买', icon: 'none' });
return false;
}
//TODO 如果信息审核没有通过uni.showToast提示"信息审核没通过,请耐心等待"
// 成人卡不需要提交资料
if (self.id == 2) {
self.showBuyModal = true;
} else {
self._post(
'ground.group/getGroupData',
null,
result => {
if (!result.data) {
// 没有填写过信息,弹出完善信息提示弹窗
self.showInfoModal = true;
return false;
}
'ground.group/getGroupData',
null,
result => {
if (!result.data) {
// 没有填写过信息,弹出完善信息提示弹窗
self.showInfoModal = true;
return false;
}
if (result.data.status == 0) {
uni.showToast({ title: '信息审核中,请耐心等待', icon: 'none' });
}
if (result.data.status == 0) {
uni.showToast({ title: '信息审核中,请耐心等待', icon: 'none' });
}
if (result.data.status == 2) {
uni.showToast({ title: '审核失败,请重新提交', icon: 'none' });
}
if (result.data.status == 2) {
uni.showToast({ title: '审核失败,请重新提交', icon: 'none' });
}
if (result.data.status == 1) {
// 已经审核通过,弹出开通会员弹窗
self.showBuyModal = true;
if (result.data.status == 1) {
// 已经审核通过,弹出开通会员弹窗
self.showBuyModal = true;
}
},
false,
() => {
}
},
false,
() => {
}
);
// const hasFilledInfo = true;
// if (!hasFilledInfo) {
// self.showInfoModal = true;
// } else {
// // 已经填写过信息,弹出开通会员弹窗
// self.showBuyModal = true;
// }
);
}
},
closeInfoModal() {
@ -252,20 +266,54 @@ export default {
'order.group/submitStoreOrder',
{
group_id: self.id,
type: self.selectedPlan, // 1-月卡 2-季卡
group_type: self.selectedPlan, // 1-月卡 2-季卡
order_amount: self.selectedPlan === 1 ? self.info.month_price : self.info.seasonal_price
},
result => {
console.log("🚀 ~ result:", result)
if (result.code == 1) {
uni.showLoading({
title: '支付中'
});
const payId = result.data.lists.id;
self._post(
'order.group/Pay', {
order_id: payId,
},
function (pay) {
console.log("🚀 ~ pay:", pay)
uni.requestPayment({
provider: 'wxpay',
timeStamp: pay.data.payment.timeStamp,
nonceStr: pay.data.payment.nonceStr,
package: 'prepay_id=' + pay.data.payment.prepay_id,
signType: 'MD5',
paySign: pay.data.payment.paySign,
success: res => {
uni.hideLoading();
setTimeout(() => {
self.showSuccessModal = true;
}, 1000);
},
fail: res => {
setTimeout(() => {
uni.showToast({
title: '支付失败',
icon: 'none'
});
}, 200);
},
});
}
);
} else {
uni.showToast({ title: result.msg || '订单创建失败', icon: 'none' });
}
},
false,
() => {
}
)
setTimeout(() => {
self.showSuccessModal = true;
}, 1000);
},
closeSuccessModal() {
this.showSuccessModal = false;
@ -287,7 +335,7 @@ page {
position: relative;
width: 100%;
height: 460rpx;
.bg-img {
position: absolute;
top: 0;
@ -310,6 +358,7 @@ page {
font-weight: 500;
margin-bottom: 8rpx;
}
.zh {
font-size: 32rpx;
color: #D19A57;
@ -324,6 +373,7 @@ page {
font-weight: 500;
margin-bottom: 8rpx;
}
.zh {
font-size: 32rpx;
color: #834B08;
@ -340,8 +390,8 @@ page {
display: flex;
justify-content: flex-end;
align-items: center;
}
}
@ -373,11 +423,11 @@ page {
position: relative;
z-index: 1;
padding: 40rpx 30rpx 0;
.card-img {
width: 100%;
border-radius: 20rpx;
box-shadow: 0 10rpx 20rpx rgba(0,0,0,0.1);
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
}
}
}
@ -496,7 +546,7 @@ page {
box-sizing: border-box;
.btn-submit {
background: linear-gradient( 90deg, #F6E1B0 0%, #EDC66E 100%);
background: linear-gradient(90deg, #F6E1B0 0%, #EDC66E 100%);
color: #333;
font-size: 32rpx;
font-weight: bold;
@ -617,7 +667,7 @@ page {
padding: 50rpx 40rpx;
padding-bottom: calc(50rpx + env(safe-area-inset-bottom));
z-index: 101;
.buy-modal-title {
text-align: center;
font-size: 36rpx;
@ -681,7 +731,7 @@ page {
height: 40rpx;
background-color: #D4B481;
border-radius: 20rpx 0 0 0;
&::after {
content: '';
position: absolute;
@ -705,7 +755,7 @@ page {
}
.buy-modal-btn {
background: linear-gradient( 90deg, #F6E1B0 0%, #EDC66E 100%);
background: linear-gradient(90deg, #F6E1B0 0%, #EDC66E 100%);
color: #333;
font-size: 32rpx;
font-weight: bold;
@ -763,7 +813,7 @@ page {
transform: translateX(-50%);
width: 396rpx;
height: 88rpx;
background: linear-gradient( 90deg, #F6E1B0 0%, #EDC66E 100%);
background: linear-gradient(90deg, #F6E1B0 0%, #EDC66E 100%);
border-radius: 44rpx;
display: flex;
align-items: center;