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

87
bundle/combo/combo-list.vue Normal file
View File

@ -0,0 +1,87 @@
<template>
<view>
<navbar title="套餐卡"></navbar>
<view style="margin-top: 20px;">
<!-- 青年卡 -->
<view class="pr d-c-c mb-20" @click="jumpPage('/bundle/combo/details?type=youth')">
<view class="pr">
<image src="https://xh.stnav.com/uploads/sport/qnk.png" style="width: 690rpx; height: 300rpx;" />
<view class="kt-btn-bg">
<view>立即开通</view>
</view>
</view>
</view>
<!-- 成人卡 -->
<view class="pr d-c-c mb-20" @click="jumpPage('/bundle/combo/details?type=adult')">
<view class="pr">
<image src="https://xh.stnav.com/uploads/sport/crk.png" style="width: 690rpx; height: 300rpx;" />
<view class="kt-btn-bg">
<view>立即开通</view>
</view>
</view>
</view>
<!-- 亲子卡 -->
<view class="pr d-c-c" @click="jumpPage('/bundle/combo/details?type=family')">
<view class="pr">
<image src="https://xh.stnav.com/uploads/sport/qzk.png" style="width: 690rpx; height: 300rpx;" />
<view class="kt-btn-bg">
<view>立即开通</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import navbar from '@/components/navbar.vue';
export default {
components: {
navbar,
},
data() {
return {
}
},
methods: {
/*跳转页面*/
jumpPage(path) {
this.gotoPage(path);
},
}
}
</script>
<style lang="scss">
page {
background-color: #fff;
}
.kt-btn-bg {
position: absolute;
left: 34rpx;
bottom: 44rpx;
background-image: url(https://xh.stnav.com/uploads/sport/kt-btn.png);
background-size: 100% 100%;
width: 258rpx;
height: 56rpx;
line-height: 56rpx;
color: #F62036;
font-size: 30rpx;
font-weight: bold;
& view {
padding-left: 60rpx;
}
}
.mb-20 {
margin-bottom: 20px;
}
</style>

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>

371
bundle/combo/info.vue Normal file
View File

@ -0,0 +1,371 @@
<template>
<view class="page-bg">
<navbar title="完善信息" bg="#F6F7F8"></navbar>
<view class="container" style="padding-top: 20px;">
<!-- 基本信息 -->
<view class="form-card">
<view class="section-title">
基本信息 <text class="required">*</text>
</view>
<view class="form-item">
<view class="label">姓名</view>
<input class="input" type="text" placeholder="请填写姓名" placeholder-class="placeholder-style" v-model="formData.name" />
</view>
<view class="form-item">
<view class="label">出生年月</view>
<picker mode="date" @change="onDateChange">
<view class="picker-view" :class="{'has-value': formData.birth}">
<text>{{ formData.birth || '请选择出生年月' }}</text>
<image src="https://xh.stnav.com/uploads/sport/icon_down.png" style="width: 36rpx; height: 36rpx;" mode="aspectFit"></image>
</view>
</picker>
</view>
<view class="form-item no-border">
<view class="label">身份证号</view>
<input class="input" type="idcard" placeholder="请输入身份证号码" placeholder-class="placeholder-style" v-model="formData.idCard" />
</view>
</view>
<!-- 随行子女信息 -->
<view class="form-card" v-if="comboType === 'family'">
<view class="section-title">
随行子女信息 <text class="required">*</text>
</view>
<view class="form-item">
<view class="label">姓名</view>
<input class="input" type="text" placeholder="请填写姓名" placeholder-class="placeholder-style" v-model="formData.childName" />
</view>
<view class="form-item">
<view class="label">出生年月</view>
<picker mode="date" @change="onChildDateChange">
<view class="picker-view" :class="{'has-value': formData.childBirth}">
<text>{{ formData.childBirth || '请选择出生年月' }}</text>
<image src="https://xh.stnav.com/uploads/sport/icon_down.png" style="width: 36rpx; height: 36rpx;" mode="aspectFit"></image>
</view>
</picker>
</view>
<view class="form-item no-border">
<view class="label">身份证号</view>
<input class="input" type="idcard" placeholder="请输入身份证号码" placeholder-class="placeholder-style" v-model="formData.childIdCard" />
</view>
</view>
<!-- 联系方式 -->
<view class="form-card">
<view class="section-title">
联系方式 <text class="required">*</text>
</view>
<view class="form-item-row no-border">
<view class="label">联系电话</view>
<input class="input-grey" type="number" placeholder="请填写联系方式" placeholder-class="placeholder-style-small" v-model="formData.phone" />
</view>
</view>
<!-- 提示信息 -->
<view class="tips">
*提交表单申请，工作人员将在3个工作日内进行审核，如需及时了解，请直接电话咨询，我们将在第一时间解答
</view>
<!-- 底部按钮 -->
<view class="footer-bar">
<view class="btn btn-default" @click="contactUs">联系我们</view>
<view class="btn btn-primary" @click="submitForm">提交申请</view>
</view>
<!-- 提交成功弹窗 -->
<view class="modal-container" v-if="showSuccessPopup">
<view class="modal-mask" @click="showSuccessPopup = false"></view>
<view class="modal-content">
<!-- 注：根据设计图比例此处设为280rpx，猜测28rpx属于笔误 -->
<image class="modal-icon" src="https://xh.stnav.com/uploads/sport/add-success.png" style="width: 280rpx; height: 280rpx;"></image>
<view class="modal-title">信息提交成功</view>
<view class="modal-desc">请您耐心等候，我们将尽快为您审核</view>
<view class="modal-btn" @click="confirmSuccess">好的</view>
</view>
</view>
</view>
</view>
</template>
<script>
import navbar from '@/components/navbar.vue';
export default {
components: {
navbar,
},
data() {
return {
showSuccessPopup: false,
comboType: 'adult', // 套餐类型：adult(成人卡) youth(青年卡) family(亲子卡)
formData: {
name: '',
birth: '',
idCard: '',
phone: '',
childName: '',
childBirth: '',
childIdCard: ''
}
}
},
onLoad(args) {
this.comboType = args.type || 'adult'
},
methods: {
onDateChange(e) {
this.formData.birth = e.detail.value;
},
onChildDateChange(e) {
this.formData.childBirth = e.detail.value;
},
contactUs() {
uni.showToast({ title: '正在连接客服...', icon: 'none' });
},
submitForm() {
if(!this.formData.name || !this.formData.birth || !this.formData.idCard || !this.formData.phone) {
return uni.showToast({ title: '请填写完整包含星号的信息', icon: 'none' });
}
if(this.comboType === 'family') {
if(!this.formData.childName || !this.formData.childBirth || !this.formData.childIdCard) {
return uni.showToast({ title: '请填写随行子女信息', icon: 'none' });
}
}
this.showSuccessPopup = true;
},
confirmSuccess() {
this.showSuccessPopup = false;
// 点击好的之后，可以跳转或返回上一页
uni.navigateBack();
}
}
}
</script>
<style lang="scss">
page {
background-color: #F6F7F8;
}
.page-bg {
background-color: #F6F7F8;
min-height: 100vh;
}
.container {
padding: 24rpx 30rpx 200rpx;
}
.form-card {
background-color: #FFFFFF;
border-radius: 12rpx;
padding: 40rpx 30rpx;
margin-bottom: 24rpx;
}
.section-title {
font-size: 32rpx;
color: #333333;
font-weight: 500;
margin-bottom: 30rpx;
display: flex;
align-items: center;
.required {
color: #E53935;
margin-left: 8rpx;
font-weight: normal;
}
}
.form-item {
margin-bottom: 10rpx;
border-bottom: 2rpx solid #F5F5F5;
padding-bottom: 16rpx;
&.no-border {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.label {
font-size: 28rpx;
color: #666666;
margin-bottom: 20rpx;
margin-top: 30rpx;
}
.input {
font-size: 30rpx;
color: #333333;
width: 100%;
height: 60rpx;
}
.picker-view {
font-size: 30rpx;
color: #CCCCCC;
height: 60rpx;
display: flex;
align-items: center;
justify-content: space-between;
&.has-value {
color: #333333;
}
.arrow-down {
font-size: 30rpx;
color: #CCCCCC;
margin-left: 10rpx;
transform: scaleY(0.6);
}
}
}
.form-item-row {
display: flex;
align-items: center;
margin-top: 30rpx;
.label {
font-size: 30rpx;
color: #333333;
width: 160rpx;
}
.input-grey {
flex: 1;
background-color: #F6F7F8;
height: 80rpx;
border-radius: 8rpx;
padding: 0 24rpx;
font-size: 28rpx;
color: #333333;
}
}
.placeholder-style {
color: #CCCCCC;
font-size: 30rpx;
}
.placeholder-style-small {
color: #CCCCCC;
font-size: 28rpx;
}
.tips {
font-size: 26rpx;
color: #666666;
line-height: 1.6;
padding: 20rpx 10rpx;
}
.footer-bar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 2;
background-color: #F6F7F8;
padding: 20rpx 30rpx;
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
box-sizing: border-box;
display: flex;
justify-content: space-between;
.btn {
flex: 1;
height: 88rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
border-radius: 8rpx;
}
.btn-default {
background-color: #FFFFFF;
color: #333333;
margin-right: 20rpx;
}
.btn-primary {
background-color: #3B5B9B;
color: #FFFFFF;
}
}
.modal-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100; // 遮罩层要在最上面
display: flex;
align-items: flex-end;
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: 100%;
box-sizing: border-box;
background-color: #FFFFFF;
border-radius: 48rpx 48rpx 0 0;
padding: 70rpx 50rpx;
padding-bottom: calc(70rpx + env(safe-area-inset-bottom));
display: flex;
flex-direction: column;
align-items: center;
z-index: 101; // 内容在遮罩层上方
.modal-icon {
margin-bottom: 40rpx;
}
.modal-title {
font-size: 36rpx;
color: #333333;
font-weight: 500;
margin-bottom: 20rpx;
}
.modal-desc {
font-size: 26rpx;
color: #999999;
margin-bottom: 174rpx;
text-align: center;
}
.modal-btn {
width: 100%;
height: 88rpx;
line-height: 88rpx;
text-align: center;
background-color: #3B5B9B;
color: #FFFFFF;
font-size: 32rpx;
border-radius: 8rpx;
}
}
</style>