371 lines
10 KiB
Vue
371 lines
10 KiB
Vue
<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> |