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-10 00:16:04 +08:00
parent 8854cdd32d
commit c9c1d74957
3 changed files with 354 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

274
bundle/combo/info.vue
View File

@ -4,56 +4,122 @@
<view class="container" style="padding-top: 20px;">
<!-- 基本信息 -->
<view class="form-card">
<view class="form-card" v-if="id == 1">
<view class="section-title">
基本信息 <text class="required">*</text>
基本信息 <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" />
<input class="input" type="text" placeholder="请填写姓名" placeholder-class="placeholder-style"
v-model="formData.youth.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>
<picker mode="date" :end="endDate" @change="onYouthDateChange">
<view class="picker-view" :class="{ 'has-value': formData.youth.both }">
<text>{{ formData.youth.both || '请选择出生年月' }}</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" />
<input class="input" type="idcard" placeholder="请输入身份证号码" placeholder-class="placeholder-style"
v-model="formData.youth.card" />
</view>
</view>
<!-- 家长1基本信息 -->
<view class="form-card" v-if="id == 3 || id == 4">
<view class="section-title">
家长1基本信息 <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.parents[0].name" />
</view>
<view class="form-item">
<view class="label">出生年月</view>
<picker mode="date" :end="endDate" @change="(e) => onParentDateChange(e, 0)">
<view class="picker-view" :class="{ 'has-value': formData.parents[0].both }">
<text>{{ formData.parents[0].both || '请选择出生年月' }}</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.parents[0].card" />
</view>
</view>
<!-- 家长基本信息2 -->
<view class="form-card" v-if="id == 4">
<view class="section-title">
家长2基本信息 <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.parents[1].name" />
</view>
<view class="form-item">
<view class="label">出生年月</view>
<picker mode="date" :end="endDate" @change="(e) => onParentDateChange(e, 1)">
<view class="picker-view" :class="{ 'has-value': formData.parents[1].both }">
<text>{{ formData.parents[1].both || '请选择出生年月' }}</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.parents[1].card" />
</view>
</view>
<!-- 随行子女信息 -->
<view class="form-card" v-if="comboType === 'family'">
<view class="form-card" v-if="id == 3 || id == 4">
<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" />
<input class="input" type="text" placeholder="请填写姓名" placeholder-class="placeholder-style"
v-model="formData.child.name" />
</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>
<picker mode="date" :end="endDate" @change="onChildDateChange">
<view class="picker-view" :class="{ 'has-value': formData.child.both }">
<text>{{ formData.child.both || '请选择出生年月' }}</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" />
<input class="input" type="idcard" placeholder="请输入身份证号码" placeholder-class="placeholder-style"
v-model="formData.child.card" />
</view>
</view>
@ -62,10 +128,11 @@
<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" />
<input class="input-grey" type="number" placeholder="请填写联系方式"
placeholder-class="placeholder-style-small" v-model="formData.phone" />
</view>
</view>
@ -73,7 +140,7 @@
<view class="tips">
*提交表单申请，工作人员将在3个工作日内进行审核，如需及时了解，请直接电话咨询，我们将在第一时间解答
</view>
<!-- 底部按钮 -->
<view class="footer-bar">
<view class="btn btn-default" @click="contactUs">联系我们</view>
@ -82,10 +149,11 @@
<!-- 提交成功弹窗 -->
<view class="modal-container" v-if="showSuccessPopup">
<view class="modal-mask" @click="showSuccessPopup = false"></view>
<view class="modal-mask" @click="confirmSuccess"></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>
<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>
@ -102,45 +170,146 @@ export default {
components: {
navbar,
},
computed: {
endDate() {
const date = new Date();
date.setDate(date.getDate() - 1);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
}
},
data() {
return {
showSuccessPopup: false,
comboType: 'adult', // 套餐类型：adult(成人卡) youth(青年卡) family(亲子卡)
formData: {
name: '',
birth: '',
idCard: '',
parents: [
{ name: '', both: '', card: '' },
{ name: '', both: '', card: '' }
],
youth: {
name: '',
both: '',
card: '',
},
child: {
name: '',
both: '',
card: '',
},
phone: '',
childName: '',
childBirth: '',
childIdCard: ''
}
group_id: 0
},
id: 0,
isSubmitting: false
}
},
onLoad(args) {
this.comboType = args.type || 'adult'
this.id = args.id
this.formData.group_id = this.id
},
methods: {
onDateChange(e) {
this.formData.birth = e.detail.value;
onYouthDateChange(e) {
this.formData.youth.both = e.detail.value;
},
onParentDateChange(e, index) {
this.formData.parents[index].both = e.detail.value;
},
onChildDateChange(e) {
this.formData.childBirth = e.detail.value;
this.formData.child.both = 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' });
let self = this;
// id == 1 验证 youth 属性
if (self.id == 1) {
let youth = self.formData.youth;
if (!youth || !youth.name || !youth.both || !youth.card) {
return uni.showToast({ title: '请填写完整基本信息', icon: 'none' });
}
}
this.showSuccessPopup = true;
// id == 3(第一个亲子卡) 或 4 时，验证 parents[0] 和 child 属性
if (self.id == 3 || self.id == 4) {
let p0 = self.formData.parents[0];
if (!p0 || !p0.name || !p0.both || !p0.card) {
return uni.showToast({ title: '请填写完整家长1基本信息', icon: 'none' });
}
let child = self.formData.child;
if (!child || !child.name || !child.both || !child.card) {
return uni.showToast({ title: '请填写完整随行子女信息', icon: 'none' });
}
}
// id == 4 时(第二个亲子卡)，还需要额外验证 parents[1] 属性
if (self.id == 4) {
let p1 = self.formData.parents[1];
if (!p1 || !p1.name || !p1.both || !p1.card) {
return uni.showToast({ title: '请填写完整家长2基本信息', icon: 'none' });
}
}
// 所有场景必填联系电话
if (!self.formData.phone) {
return uni.showToast({ title: '请填写联系电话', icon: 'none' });
}
const phoneReg = /^1[3-9]\d{9}$/;
if (!phoneReg.test(self.formData.phone)) {
return uni.showToast({ title: '请输入正确的手机号码', icon: 'none' });
}
if (self.isSubmitting) return;
self.isSubmitting = true;
uni.showLoading({ title: '提交中...', mask: true });
let submitData = {
...self.formData,
parents: JSON.stringify(self.formData.parents),
youth: JSON.stringify(self.formData.youth),
child: JSON.stringify(self.formData.child)
};
self._post(
'ground.group/submitGroupData',
submitData,
result => {
uni.hideLoading();
if (result.code) {
self.formData = {
parents: [
{ name: '', both: '', card: '' },
{ name: '', both: '', card: '' }
],
youth: { name: '', both: '', card: '' },
child: { name: '', both: '', card: '' },
phone: '',
group_id: self.id
};
self.showSuccessPopup = true;
} else {
uni.showToast({ title: '提交失败', icon: 'none' });
}
},
false,
() => {
uni.hideLoading();
self.isSubmitting = false;
}
)
},
confirmSuccess() {
this.showSuccessPopup = false;
// 点击好的之后，可以跳转或返回上一页
@ -178,7 +347,7 @@ page {
margin-bottom: 30rpx;
display: flex;
align-items: center;
.required {
color: #E53935;
margin-left: 8rpx;
@ -190,27 +359,27 @@ page {
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;
@ -218,10 +387,11 @@ page {
display: flex;
align-items: center;
justify-content: space-between;
&.has-value {
color: #333333;
}
.arrow-down {
font-size: 30rpx;
color: #CCCCCC;
@ -235,13 +405,13 @@ page {
display: flex;
align-items: center;
margin-top: 30rpx;
.label {
font-size: 30rpx;
color: #333333;
width: 160rpx;
}
.input-grey {
flex: 1;
background-color: #F6F7F8;
@ -282,7 +452,7 @@ page {
box-sizing: border-box;
display: flex;
justify-content: space-between;
.btn {
flex: 1;
height: 88rpx;
@ -292,13 +462,13 @@ page {
font-size: 32rpx;
border-radius: 8rpx;
}
.btn-default {
background-color: #FFFFFF;
color: #333333;
margin-right: 20rpx;
}
.btn-primary {
background-color: #3B5B9B;
color: #FFFFFF;