添加套餐管理
This commit is contained in:
@ -4,29 +4,11 @@
|
|||||||
|
|
||||||
<view style="margin-top: 20px;">
|
<view style="margin-top: 20px;">
|
||||||
<!-- 青年卡 -->
|
<!-- 青年卡 -->
|
||||||
<view class="pr d-c-c mb-20" @click="jumpPage('/bundle/combo/details?type=youth')">
|
<view class="pr d-c-c mb-20" v-for="item in list" :key="item.id" @click="jumpPage(`/bundle/combo/details?id=${item.id}`)">
|
||||||
<view class="pr">
|
<view class="pr">
|
||||||
<image src="https://xh.stnav.com/uploads/sport/qnk.png" style="width: 690rpx; height: 300rpx;" />
|
<image :src="item.img" style="width: 690rpx; height: 300rpx;" />
|
||||||
<view class="kt-btn-bg">
|
<view class="kt-eg-name">{{ item.eg_name }}</view>
|
||||||
<view>立即开通</view>
|
<view class="kt-name">{{ item.name }}</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 class="kt-btn-bg">
|
||||||
<view>立即开通</view>
|
<view>立即开通</view>
|
||||||
</view>
|
</view>
|
||||||
@ -45,10 +27,28 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
list: [],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.handleGetList();
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
handleGetList() {
|
||||||
|
// 获取套餐卡列表
|
||||||
|
let self = this;
|
||||||
|
self._post(
|
||||||
|
'ground.group/getGroupList',
|
||||||
|
null,
|
||||||
|
result => {
|
||||||
|
self.list = result.data;
|
||||||
|
},
|
||||||
|
false,
|
||||||
|
() => {
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
/*跳转页面*/
|
/*跳转页面*/
|
||||||
jumpPage(path) {
|
jumpPage(path) {
|
||||||
this.gotoPage(path);
|
this.gotoPage(path);
|
||||||
@ -63,6 +63,24 @@ page {
|
|||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.kt-eg-name {
|
||||||
|
position: absolute;
|
||||||
|
left: 46rpx;
|
||||||
|
top: 52rpx;
|
||||||
|
color: #C2863E;
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kt-name {
|
||||||
|
position: absolute;
|
||||||
|
left: 64rpx;
|
||||||
|
top: 118rpx;
|
||||||
|
color: #C2863E;
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
.kt-btn-bg {
|
.kt-btn-bg {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 34rpx;
|
left: 34rpx;
|
||||||
|
|||||||
@ -2,56 +2,18 @@
|
|||||||
<view class="page-container">
|
<view class="page-container">
|
||||||
<!-- Top Background & Card -->
|
<!-- Top Background & Card -->
|
||||||
<view class="top-section">
|
<view class="top-section">
|
||||||
<!-- 成人卡 -->
|
<view style="width: 100%; height: 100%; position: relative;">
|
||||||
<template v-if="comboType === 'adult'">
|
<image class="bg-img" src="https://xh.stnav.com/uploads/sport/card-bg.png"></image>
|
||||||
<image class="bg-img" src="https://xh.stnav.com/uploads/sport/crk-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="card-text-content" :style="{ top: (statusBarHeight + navHeight + 20) + 'px' }">
|
<view class="info-name" style="position: absolute; top: 100rpx; left: 40rpx;">{{ info.name }}</view>
|
||||||
<view class="card-title">
|
<view style="position: absolute; bottom: 68rpx; right: 40rpx; display: flex; align-items: center;">
|
||||||
<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>
|
<image class="diamond" src="https://xh.stnav.com/uploads/sport/icon_zs.png" mode="aspectFit"></image>
|
||||||
<text>有效期:2026.03.05到期</text>
|
<text style="color: #834B08;font-weight: bold;">有效期:2026.03.05到期</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</view>
|
||||||
|
|
||||||
<!-- 青年卡 -->
|
|
||||||
<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-header" :style="{ paddingTop: statusBarHeight + 'px' }">
|
||||||
<view class="nav-content" :style="{ height: navHeight + 'px' }">
|
<view class="nav-content" :style="{ height: navHeight + 'px' }">
|
||||||
@ -105,10 +67,7 @@
|
|||||||
<view class="rules-title">权益说明</view>
|
<view class="rules-title">权益说明</view>
|
||||||
<view class="rules-subtitle">更多会员专属权益与服务内容</view>
|
<view class="rules-subtitle">更多会员专属权益与服务内容</view>
|
||||||
<view class="rules-list">
|
<view class="rules-list">
|
||||||
<view class="rule-item">· 这里是权益说明内容,这里是内容</view>
|
<rich-text :nodes="info.content"></rich-text>
|
||||||
<view class="rule-item">· 这里是权益说明内容,这里是内容</view>
|
|
||||||
<view class="rule-item">· 这里是权益说明内容,这里是内容</view>
|
|
||||||
<view class="rule-item">· 这里是权益说明内容,这里是内容</view>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -142,27 +101,18 @@
|
|||||||
<view class="plan-name">月卡</view>
|
<view class="plan-name">月卡</view>
|
||||||
<view class="plan-price">
|
<view class="plan-price">
|
||||||
<text style="font-size: 24rpx; margin-right: 4rpx;">¥</text>
|
<text style="font-size: 24rpx; margin-right: 4rpx;">¥</text>
|
||||||
<text>50.00</text>
|
<text>{{ info.price }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="plan-desc">指导价50元/月</view>
|
<view class="plan-desc">指导价{{ info.month_price }}元/月</view>
|
||||||
<view class="check-mark"></view>
|
<view class="check-mark"></view>
|
||||||
</view>
|
</view>
|
||||||
<view class="plan-item" :class="{ active: selectedPlan === 1 }" @click="selectPlan(1)">
|
<view class="plan-item" :class="{ active: selectedPlan === 1 }" @click="selectPlan(1)">
|
||||||
<view class="plan-name">季卡</view>
|
<view class="plan-name">季卡</view>
|
||||||
<view class="plan-price">
|
<view class="plan-price">
|
||||||
<text style="font-size: 24rpx; margin-right: 4rpx;">¥</text>
|
<text style="font-size: 24rpx; margin-right: 4rpx;">¥</text>
|
||||||
<text>128.00</text>
|
<text>{{ info.price }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="plan-desc">指导价128元/季</view>
|
<view class="plan-desc">指导价{{ info.month_price }}元/季</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 class="check-mark"></view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -193,6 +143,7 @@
|
|||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
id: 0,
|
||||||
statusBarHeight: 20,
|
statusBarHeight: 20,
|
||||||
navHeight: 44,
|
navHeight: 44,
|
||||||
comboType: 'adult', // 套餐类型:adult(成人卡) youth(青年卡) family(亲子卡)
|
comboType: 'adult', // 套餐类型:adult(成人卡) youth(青年卡) family(亲子卡)
|
||||||
@ -200,6 +151,7 @@ export default {
|
|||||||
showBuyModal: false, // 会员购买弹窗
|
showBuyModal: false, // 会员购买弹窗
|
||||||
showSuccessModal: false, // 购买成功弹窗
|
showSuccessModal: false, // 购买成功弹窗
|
||||||
selectedPlan: 0, // 选择的套餐
|
selectedPlan: 0, // 选择的套餐
|
||||||
|
info: null, // 套餐详情数据
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
@ -212,25 +164,69 @@ export default {
|
|||||||
},
|
},
|
||||||
onLoad(args) {
|
onLoad(args) {
|
||||||
this.comboType = args.type || 'adult'
|
this.comboType = args.type || 'adult'
|
||||||
|
this.id = args.id
|
||||||
|
this.handleGetDetails();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
goBack() {
|
goBack() {
|
||||||
uni.navigateBack();
|
uni.navigateBack();
|
||||||
},
|
},
|
||||||
|
|
||||||
handleSubmit() {
|
handleGetDetails() {
|
||||||
this.showSuccessModal = true;
|
let self = this;
|
||||||
return false
|
self._post(
|
||||||
//TODO 如果信息审核没有通过,uni.showToast提示"信息审核没通过,请耐心等待"
|
'ground.group/getGroupDetails',
|
||||||
|
{ id: self.id },
|
||||||
|
result => {
|
||||||
|
self.info = result.data;
|
||||||
|
},
|
||||||
|
false,
|
||||||
|
() => {
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
// 检测是否填写过表单信息,没有的话需要跳转到信息完善页面
|
handleSubmit() {
|
||||||
// 测试:默认 true 弹出购买弹窗。如果为 false 弹出提示完善信息弹窗
|
let self = this;
|
||||||
const hasFilledInfo = true;
|
//TODO 如果信息审核没有通过,uni.showToast提示"信息审核没通过,请耐心等待"
|
||||||
if (!hasFilledInfo) {
|
// 成人卡不需要提交资料
|
||||||
this.showInfoModal = true;
|
if (self.id == 2) {
|
||||||
|
self.showBuyModal = true;
|
||||||
} else {
|
} else {
|
||||||
// 已经填写过信息,弹出开通会员弹窗
|
self._post(
|
||||||
this.showBuyModal = true;
|
'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 == 2) {
|
||||||
|
uni.showToast({ title: '审核失败,请重新提交', icon: 'none' });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (result.data.status == 1) {
|
||||||
|
// 已经审核通过,弹出开通会员弹窗
|
||||||
|
self.showBuyModal = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
false,
|
||||||
|
() => {
|
||||||
|
}
|
||||||
|
);
|
||||||
|
// const hasFilledInfo = true;
|
||||||
|
// if (!hasFilledInfo) {
|
||||||
|
// self.showInfoModal = true;
|
||||||
|
// } else {
|
||||||
|
// // 已经填写过信息,弹出开通会员弹窗
|
||||||
|
// self.showBuyModal = true;
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
closeInfoModal() {
|
closeInfoModal() {
|
||||||
@ -239,7 +235,7 @@ export default {
|
|||||||
goToFillInfo() {
|
goToFillInfo() {
|
||||||
this.showInfoModal = false;
|
this.showInfoModal = false;
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '/bundle/combo/info?type=' + this.comboType
|
url: '/bundle/combo/info?id=' + this.id
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
closeBuyModal() {
|
closeBuyModal() {
|
||||||
@ -329,16 +325,14 @@ page {
|
|||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.diamond {
|
|
||||||
width: 26rpx;
|
|
||||||
height: 20rpx;
|
|
||||||
margin-right: 6rpx;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-header {
|
.nav-header {
|
||||||
position: relative;
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
@ -480,6 +474,7 @@ page {
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
z-index: 99;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
padding: 20rpx 40rpx 60rpx;
|
padding: 20rpx 40rpx 60rpx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@ -621,7 +616,7 @@ page {
|
|||||||
margin-bottom: 40rpx;
|
margin-bottom: 40rpx;
|
||||||
|
|
||||||
.plan-item {
|
.plan-item {
|
||||||
width: 31%;
|
width: 48%;
|
||||||
border: 2rpx solid #EEEEEE;
|
border: 2rpx solid #EEEEEE;
|
||||||
border-radius: 12rpx;
|
border-radius: 12rpx;
|
||||||
padding: 38rpx 0;
|
padding: 38rpx 0;
|
||||||
@ -769,4 +764,17 @@ page {
|
|||||||
margin-top: 40rpx;
|
margin-top: 40rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.info-name {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #834B08;
|
||||||
|
line-height: 44rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diamond {
|
||||||
|
width: 26rpx;
|
||||||
|
height: 20rpx;
|
||||||
|
margin-right: 6rpx;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -4,56 +4,122 @@
|
|||||||
|
|
||||||
<view class="container" style="padding-top: 20px;">
|
<view class="container" style="padding-top: 20px;">
|
||||||
<!-- 基本信息 -->
|
<!-- 基本信息 -->
|
||||||
<view class="form-card">
|
<view class="form-card" v-if="id == 1">
|
||||||
<view class="section-title">
|
<view class="section-title">
|
||||||
基本信息 <text class="required">*</text>
|
基本信息 <text class="required">*</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="form-item">
|
<view class="form-item">
|
||||||
<view class="label">姓名</view>
|
<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>
|
||||||
|
|
||||||
<view class="form-item">
|
<view class="form-item">
|
||||||
<view class="label">出生年月</view>
|
<view class="label">出生年月</view>
|
||||||
<picker mode="date" @change="onDateChange">
|
<picker mode="date" :end="endDate" @change="onYouthDateChange">
|
||||||
<view class="picker-view" :class="{'has-value': formData.birth}">
|
<view class="picker-view" :class="{ 'has-value': formData.youth.both }">
|
||||||
<text>{{ formData.birth || '请选择出生年月' }}</text>
|
<text>{{ formData.youth.both || '请选择出生年月' }}</text>
|
||||||
<image src="https://xh.stnav.com/uploads/sport/icon_down.png" style="width: 36rpx; height: 36rpx;" mode="aspectFit"></image>
|
<image src="https://xh.stnav.com/uploads/sport/icon_down.png"
|
||||||
|
style="width: 36rpx; height: 36rpx;" mode="aspectFit"></image>
|
||||||
</view>
|
</view>
|
||||||
</picker>
|
</picker>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="form-item no-border">
|
<view class="form-item no-border">
|
||||||
<view class="label">身份证号</view>
|
<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>
|
</view>
|
||||||
|
|
||||||
<!-- 随行子女信息 -->
|
<!-- 随行子女信息 -->
|
||||||
<view class="form-card" v-if="comboType === 'family'">
|
<view class="form-card" v-if="id == 3 || id == 4">
|
||||||
<view class="section-title">
|
<view class="section-title">
|
||||||
随行子女信息 <text class="required">*</text>
|
随行子女信息 <text class="required">*</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="form-item">
|
<view class="form-item">
|
||||||
<view class="label">姓名</view>
|
<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>
|
||||||
|
|
||||||
<view class="form-item">
|
<view class="form-item">
|
||||||
<view class="label">出生年月</view>
|
<view class="label">出生年月</view>
|
||||||
<picker mode="date" @change="onChildDateChange">
|
<picker mode="date" :end="endDate" @change="onChildDateChange">
|
||||||
<view class="picker-view" :class="{'has-value': formData.childBirth}">
|
<view class="picker-view" :class="{ 'has-value': formData.child.both }">
|
||||||
<text>{{ formData.childBirth || '请选择出生年月' }}</text>
|
<text>{{ formData.child.both || '请选择出生年月' }}</text>
|
||||||
<image src="https://xh.stnav.com/uploads/sport/icon_down.png" style="width: 36rpx; height: 36rpx;" mode="aspectFit"></image>
|
<image src="https://xh.stnav.com/uploads/sport/icon_down.png"
|
||||||
|
style="width: 36rpx; height: 36rpx;" mode="aspectFit"></image>
|
||||||
</view>
|
</view>
|
||||||
</picker>
|
</picker>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="form-item no-border">
|
<view class="form-item no-border">
|
||||||
<view class="label">身份证号</view>
|
<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>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@ -65,7 +131,8 @@
|
|||||||
|
|
||||||
<view class="form-item-row no-border">
|
<view class="form-item-row no-border">
|
||||||
<view class="label">联系电话</view>
|
<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>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@ -82,10 +149,11 @@
|
|||||||
|
|
||||||
<!-- 提交成功弹窗 -->
|
<!-- 提交成功弹窗 -->
|
||||||
<view class="modal-container" v-if="showSuccessPopup">
|
<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">
|
<view class="modal-content">
|
||||||
<!-- 注:根据设计图比例此处设为280rpx,猜测28rpx属于笔误 -->
|
<!-- 注:根据设计图比例此处设为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-title">信息提交成功</view>
|
||||||
<view class="modal-desc">请您耐心等候,我们将尽快为您审核</view>
|
<view class="modal-desc">请您耐心等候,我们将尽快为您审核</view>
|
||||||
<view class="modal-btn" @click="confirmSuccess">好的</view>
|
<view class="modal-btn" @click="confirmSuccess">好的</view>
|
||||||
@ -102,45 +170,146 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
navbar,
|
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() {
|
data() {
|
||||||
return {
|
return {
|
||||||
showSuccessPopup: false,
|
showSuccessPopup: false,
|
||||||
comboType: 'adult', // 套餐类型:adult(成人卡) youth(青年卡) family(亲子卡)
|
comboType: 'adult', // 套餐类型:adult(成人卡) youth(青年卡) family(亲子卡)
|
||||||
formData: {
|
formData: {
|
||||||
name: '',
|
parents: [
|
||||||
birth: '',
|
{ name: '', both: '', card: '' },
|
||||||
idCard: '',
|
{ name: '', both: '', card: '' }
|
||||||
|
],
|
||||||
|
youth: {
|
||||||
|
name: '',
|
||||||
|
both: '',
|
||||||
|
card: '',
|
||||||
|
},
|
||||||
|
child: {
|
||||||
|
name: '',
|
||||||
|
both: '',
|
||||||
|
card: '',
|
||||||
|
},
|
||||||
phone: '',
|
phone: '',
|
||||||
childName: '',
|
group_id: 0
|
||||||
childBirth: '',
|
},
|
||||||
childIdCard: ''
|
id: 0,
|
||||||
}
|
isSubmitting: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad(args) {
|
onLoad(args) {
|
||||||
this.comboType = args.type || 'adult'
|
this.comboType = args.type || 'adult'
|
||||||
|
this.id = args.id
|
||||||
|
this.formData.group_id = this.id
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onDateChange(e) {
|
onYouthDateChange(e) {
|
||||||
this.formData.birth = e.detail.value;
|
this.formData.youth.both = e.detail.value;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
onParentDateChange(e, index) {
|
||||||
|
this.formData.parents[index].both = e.detail.value;
|
||||||
|
},
|
||||||
|
|
||||||
onChildDateChange(e) {
|
onChildDateChange(e) {
|
||||||
this.formData.childBirth = e.detail.value;
|
this.formData.child.both = e.detail.value;
|
||||||
},
|
},
|
||||||
|
|
||||||
contactUs() {
|
contactUs() {
|
||||||
uni.showToast({ title: '正在连接客服...', icon: 'none' });
|
uni.showToast({ title: '正在连接客服...', icon: 'none' });
|
||||||
},
|
},
|
||||||
|
|
||||||
submitForm() {
|
submitForm() {
|
||||||
if(!this.formData.name || !this.formData.birth || !this.formData.idCard || !this.formData.phone) {
|
let self = this;
|
||||||
return uni.showToast({ title: '请填写完整包含星号的信息', icon: 'none' });
|
|
||||||
}
|
// id == 1 验证 youth 属性
|
||||||
if(this.comboType === 'family') {
|
if (self.id == 1) {
|
||||||
if(!this.formData.childName || !this.formData.childBirth || !this.formData.childIdCard) {
|
let youth = self.formData.youth;
|
||||||
return uni.showToast({ title: '请填写随行子女信息', icon: 'none' });
|
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() {
|
confirmSuccess() {
|
||||||
this.showSuccessPopup = false;
|
this.showSuccessPopup = false;
|
||||||
// 点击好的之后,可以跳转或返回上一页
|
// 点击好的之后,可以跳转或返回上一页
|
||||||
@ -222,6 +391,7 @@ page {
|
|||||||
&.has-value {
|
&.has-value {
|
||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow-down {
|
.arrow-down {
|
||||||
font-size: 30rpx;
|
font-size: 30rpx;
|
||||||
color: #CCCCCC;
|
color: #CCCCCC;
|
||||||
|
|||||||
Reference in New Issue
Block a user