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

添加篮球套餐功能

Browse Source
This commit is contained in:
wangxiaowei
2026-04-07 16:07:36 +08:00
parent bd461f3e18
commit 8854cdd32d
9 changed files with 1423 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

772
bundle/combo/details.vue Normal file
View File

@ -0,0 +1,772 @@
<template>
<view class="page-container">
<!-- Top Background & Card -->
<view class="top-section">
<!-- 成人卡 -->
<template v-if="comboType === 'adult'">
<image class="bg-img" src="https://xh.stnav.com/uploads/sport/crk-bg.png"></image>
<!-- 添加的卡片文字内容 -->
<view class="card-text-content" :style="{ top: (statusBarHeight + navHeight + 20) + 'px' }">
<view class="card-title">
<view class="en">Adult Card</view>
<view class="zh">成人卡</view>
</view>
<view class="card-date">
<image class="diamond" src="https://xh.stnav.com/uploads/sport/icon_zs.png" mode="aspectFit"></image>
<text>有效期：2026.03.05到期</text>
</view>
</view>
</template>
<!-- 青年卡 -->
<template v-if="comboType === 'youth'">
<image class="bg-img" src="https://xh.stnav.com/uploads/sport/qnk-bg.png"></image>
<!-- 添加的卡片文字内容 -->
<view class="card-text-content" :style="{ top: (statusBarHeight + navHeight + 20) + 'px' }">
<view class="card-title">
<view class="en">Adult Card</view>
<view class="zh">青年卡</view>
</view>
<view class="card-date">
<image class="diamond" src="https://xh.stnav.com/uploads/sport/icon_zs.png" mode="aspectFit"></image>
<text>有效期：2026.03.05到期</text>
</view>
</view>
</template>
<!-- 亲子卡 -->
<template v-if="comboType === 'family'">
<image class="bg-img" src="https://xh.stnav.com/uploads/sport/qzk-bg.png"></image>
<!-- 添加的卡片文字内容 -->
<view class="card-text-content" :style="{ top: (statusBarHeight + navHeight + 20) + 'px' }">
<view class="card-title-parten">
<view class="en">Adult Card</view>
<view class="zh">亲子卡</view>
</view>
<view class="card-date">
<image class="diamond" src="https://xh.stnav.com/uploads/sport/icon_zs.png" mode="aspectFit"></image>
<text>有效期：2026.03.05到期</text>
</view>
</view>
</template>
<view class="nav-header" :style="{ paddingTop: statusBarHeight + 'px' }">
<view class="nav-content" :style="{ height: navHeight + 'px' }">
<image class="back-icon" src="@/static/icon/back3.png" @click="goBack" mode="aspectFit"></image>
<text class="nav-title">我的会员</text>
</view>
</view>
</view>
<!-- 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>
</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>
</view>
<view class="right-info">
<view class="right-name">VIP优惠</view>
<view class="right-desc">每次打球立享折扣，运动更划算</view>
</view>
</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>
</view>
<view class="right-info">
<view class="right-name">入场不限次</view>
<view class="right-desc">凭有效凭证不限次进出场地，自由通行</view>
</view>
</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>
</view>
<view class="right-info">
<view class="right-name">专属客服</view>
<view class="right-desc">任何问题将由专属客服优先跟进处理</view>
</view>
</view>
</view>
<!-- 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>
</view>
<view class="rules-title">权益说明</view>
<view class="rules-subtitle">更多会员专属权益与服务内容</view>
<view class="rules-list">
<view class="rule-item">· 这里是权益说明内容，这里是内容</view>
<view class="rule-item">· 这里是权益说明内容，这里是内容</view>
<view class="rule-item">· 这里是权益说明内容，这里是内容</view>
<view class="rule-item">· 这里是权益说明内容，这里是内容</view>
</view>
</view>
</view>
<!-- Bottom Button -->
<view class="bottom-bar">
<view class="btn-submit" @click="handleSubmit">立即开通</view>
</view>
<!-- 完善信息提示弹窗 -->
<view class="modal-container" v-if="showInfoModal">
<view class="modal-mask" @click="closeInfoModal"></view>
<view class="modal-content">
<view class="modal-header">
<text class="modal-title">温馨提示</text>
<view class="close-icon" @click="closeInfoModal">×</view>
</view>
<view class="modal-desc">检测到您未填写相关信息，为不影响使用请尽快完善</view>
<view class="modal-btn" @click="goToFillInfo">立即去完善</view>
</view>
</view>
<!-- 会员购买弹窗 -->
<view class="buy-modal-container" v-if="showBuyModal">
<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 === 0 }" @click="selectPlan(0)">
<view class="plan-name">月卡</view>
<view class="plan-price">
<text style="font-size: 24rpx; margin-right: 4rpx;">￥</text>
<text>50.00</text>
</view>
<view class="plan-desc">指导价50元/月</view>
<view class="check-mark"></view>
</view>
<view class="plan-item" :class="{ active: selectedPlan === 1 }" @click="selectPlan(1)">
<view class="plan-name">季卡</view>
<view class="plan-price">
<text style="font-size: 24rpx; margin-right: 4rpx;">￥</text>
<text>128.00</text>
</view>
<view class="plan-desc">指导价128元/季</view>
<view class="check-mark"></view>
</view>
<view class="plan-item" :class="{ active: selectedPlan === 2 }" @click="selectPlan(2)">
<view class="plan-name">年卡</view>
<view class="plan-price">
<text style="font-size: 24rpx; margin-right: 4rpx;">￥</text>
<text>218.00</text>
</view>
<view class="plan-desc">指导价218元/年</view>
<view class="check-mark"></view>
</view>
</view>
<view class="buy-modal-tips">
提示文字在此处显示提示文字在此处显示提示文字在此处显示提示文字在此处显示提示文字在此处显示
</view>
<view class="buy-modal-btn" @click="confirmBuy">立即开通</view>
</view>
</view>
<!-- 购买成功弹窗 -->
<view class="success-modal-container" v-if="showSuccessModal">
<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>
<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>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
statusBarHeight: 20,
navHeight: 44,
comboType: 'adult', // 套餐类型：adult(成人卡) youth(青年卡) family(亲子卡)
showInfoModal: false, // 完善信息提示弹窗
showBuyModal: false, // 会员购买弹窗
showSuccessModal: false, // 购买成功弹窗
selectedPlan: 0, // 选择的套餐
};
},
created() {
let sysInfo = uni.getSystemInfoSync();
this.statusBarHeight = sysInfo.statusBarHeight;
// #ifdef MP-WEIXIN
let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
this.navHeight = menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;
// #endif
},
onLoad(args) {
this.comboType = args.type || 'adult'
},
methods: {
goBack() {
uni.navigateBack();
},
handleSubmit() {
this.showSuccessModal = true;
return false
//TODO 如果信息审核没有通过，uni.showToast提示"信息审核没通过，请耐心等待"
// 检测是否填写过表单信息，没有的话需要跳转到信息完善页面
// 测试：默认 true 弹出购买弹窗。如果为 false 弹出提示完善信息弹窗
const hasFilledInfo = true;
if (!hasFilledInfo) {
this.showInfoModal = true;
} else {
// 已经填写过信息，弹出开通会员弹窗
this.showBuyModal = true;
}
},
closeInfoModal() {
this.showInfoModal = false;
},
goToFillInfo() {
this.showInfoModal = false;
uni.navigateTo({
url: '/bundle/combo/info?type=' + this.comboType
});
},
closeBuyModal() {
this.showBuyModal = false;
},
selectPlan(index) {
this.selectedPlan = index;
},
confirmBuy() {
this.showBuyModal = false;
uni.showToast({ title: '正在为您开通...', icon: 'none' });
setTimeout(() => {
this.showSuccessModal = true;
}, 1000);
},
closeSuccessModal() {
this.showSuccessModal = false;
}
}
}
</script>
<style lang="scss">
page {
background-color: #fff;
}
.page-container {
padding-bottom: 200rpx;
}
.top-section {
position: relative;
width: 100%;
height: 460rpx;
.bg-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.card-text-content {
position: absolute;
left: 100rpx;
right: 80rpx;
z-index: 1;
.card-title {
.en {
font-size: 32rpx;
color: #D19A57;
font-weight: 500;
margin-bottom: 8rpx;
}
.zh {
font-size: 32rpx;
color: #D19A57;
font-weight: bold;
}
}
.card-title-parten {
.en {
font-size: 32rpx;
color: #834B08;
font-weight: 500;
margin-bottom: 8rpx;
}
.zh {
font-size: 32rpx;
color: #834B08;
font-weight: bold;
}
}
.card-date {
font-weight: 400;
margin-top: 40rpx;
text-align: right;
font-size: 26rpx;
color: #A47539;
display: flex;
justify-content: flex-end;
align-items: center;
.diamond {
width: 26rpx;
height: 20rpx;
margin-right: 6rpx;
}
}
}
.nav-header {
position: relative;
z-index: 1;
width: 100%;
.nav-content {
display: flex;
align-items: center;
justify-content: center;
position: relative;
color: #fff;
font-size: 34rpx;
}
.back-icon {
position: absolute;
left: 30rpx;
width: 44rpx;
height: 44rpx;
}
}
.card-box {
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);
}
}
}
.content-section {
position: relative;
z-index: 2;
background-color: #fff;
border-radius: 40rpx 40rpx 0 0;
padding: 10rpx 40rpx;
.section-title {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 60rpx;
.line {
width: 60rpx;
height: 2rpx;
background-color: #D4B481;
margin: 0 20rpx;
}
.title-text {
font-size: 32rpx;
color: #A37F4B;
font-weight: bold;
}
}
.rights-list {
margin-bottom: 60rpx;
.right-item {
display: flex;
align-items: flex-start;
margin-bottom: 40rpx;
.icon-circle {
width: 80rpx;
height: 80rpx;
background-color: #E8C18E;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: bold;
font-size: 28rpx;
margin-right: 30rpx;
flex-shrink: 0;
}
.right-info {
.right-name {
font-size: 26rpx;
line-height: 36rpx;
color: #D19A57;
font-weight: bold;
margin-bottom: 6rpx;
}
.right-desc {
font-size: 24rpx;
color: #D19A57;
font-weight: 400;
line-height: 34rpx;
}
}
}
}
.rules-box {
border: 2rpx solid #E8C18E;
border-radius: 20rpx;
padding: 24rpx 30rpx;
position: relative;
.rules-tag {
position: absolute;
top: 0;
right: 52rpx;
}
.rules-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
margin-bottom: 16rpx;
}
.rules-subtitle {
font-size: 24rpx;
color: #999;
margin-bottom: 30rpx;
}
.rule-item {
font-size: 26rpx;
color: #666;
margin-bottom: 16rpx;
line-height: 1.5;
}
}
}
.bottom-bar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #fff;
padding: 20rpx 40rpx 60rpx;
box-sizing: border-box;
.btn-submit {
background: linear-gradient( 90deg, #F6E1B0 0%, #EDC66E 100%);
color: #333;
font-size: 32rpx;
font-weight: bold;
height: 90rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 45rpx;
}
}
/* 完善信息提示弹窗 */
.modal-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
}
.modal-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
position: relative;
width: 560rpx;
background-color: #FFFFFF;
border-radius: 20rpx;
padding: 40rpx;
display: flex;
flex-direction: column;
align-items: center;
z-index: 101;
.modal-header {
width: 100%;
position: relative;
display: flex;
justify-content: center;
margin-bottom: 40rpx;
.modal-title {
font-size: 32rpx;
color: #333333;
font-weight: 500;
}
.close-icon {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-size: 40rpx;
color: #666666;
line-height: 1;
}
}
.modal-desc {
font-size: 28rpx;
color: #666666;
line-height: 1.6;
text-align: center;
margin-bottom: 50rpx;
padding: 0 10rpx;
}
.modal-btn {
width: 100%;
height: 80rpx;
line-height: 80rpx;
text-align: center;
background-color: #3B5B9B;
color: #FFFFFF;
font-size: 30rpx;
border-radius: 8rpx;
}
}
/* 会员购买弹窗样式 */
.buy-modal-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
display: flex;
align-items: flex-end;
justify-content: center;
}
.buy-modal-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}
.buy-modal-content {
position: relative;
width: 100%;
box-sizing: border-box;
background-color: #FFFFFF;
border-radius: 20rpx 20rpx 0 0;
padding: 50rpx 40rpx;
padding-bottom: calc(50rpx + env(safe-area-inset-bottom));
z-index: 101;
.buy-modal-title {
text-align: center;
font-size: 36rpx;
font-weight: 500;
color: #333;
margin-bottom: 50rpx;
}
.plan-list {
display: flex;
justify-content: space-between;
margin-bottom: 40rpx;
.plan-item {
width: 31%;
border: 2rpx solid #EEEEEE;
border-radius: 12rpx;
padding: 38rpx 0;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
overflow: hidden;
transition: all 0.3s;
&.active {
border-color: #E8C18E;
background-color: #FFFDF8;
.check-mark {
display: block;
}
}
.plan-name {
font-size: 30rpx;
color: #333;
margin-bottom: 16rpx;
}
.plan-price {
font-size: 40rpx;
color: #E53935;
font-weight: bold;
margin-bottom: 16rpx;
display: flex;
align-items: baseline;
}
.plan-desc {
font-size: 22rpx;
color: #999;
}
.check-mark {
display: none;
position: absolute;
right: -2rpx;
bottom: -2rpx;
width: 44rpx;
height: 40rpx;
background-color: #D4B481;
border-radius: 20rpx 0 0 0;
&::after {
content: '';
position: absolute;
left: 18rpx;
top: 10rpx;
width: 8rpx;
height: 14rpx;
border-right: 3rpx solid #fff;
border-bottom: 3rpx solid #fff;
transform: rotate(45deg);
}
}
}
}
.buy-modal-tips {
font-size: 24rpx;
color: #666;
line-height: 1.6;
margin-bottom: 50rpx;
}
.buy-modal-btn {
background: linear-gradient( 90deg, #F6E1B0 0%, #EDC66E 100%);
color: #333;
font-size: 32rpx;
font-weight: bold;
height: 90rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 45rpx;
}
}
/* 购买成功弹窗 */
.success-modal-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 102;
display: flex;
align-items: center;
justify-content: center;
}
.success-modal-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
}
.success-modal-content {
position: relative;
width: 580rpx;
display: flex;
flex-direction: column;
align-items: center;
z-index: 103;
.success-img-wrapper {
position: relative;
width: 100%;
.success-img {
width: 100%;
display: block;
}
.success-confirm-btn {
position: absolute;
bottom: 60rpx;
left: 50%;
transform: translateX(-50%);
width: 396rpx;
height: 88rpx;
background: linear-gradient( 90deg, #F6E1B0 0%, #EDC66E 100%);
border-radius: 44rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
font-weight: bold;
color: #5C3D10;
}
}
.success-close {
width: 60rpx;
height: 60rpx;
margin-top: 40rpx;
}
}
</style>