This commit is contained in:
@jyuhsin
2025-06-13 17:23:39 +08:00
parent d3364e96f5
commit d1267e1a87
5 changed files with 273 additions and 78 deletions
@@ -96,11 +96,15 @@ layout("/mobile/platform.html"){
}
.join_content {
padding: 20px;
padding: 10px 20px;
height: calc(100% - 26px - 60px);
overflow-y: auto;
}
.join_content .van-cell {
padding: 6px 16px;
}
.join_submit {
width: 90% !important;
}
@@ -114,7 +118,7 @@ layout("/mobile/platform.html"){
}
.van-card-header {
padding: 14px 20px;
padding: 10px 20px;
border-bottom: 1px solid #ebeef5;
box-sizing: border-box;
color: #0e78c5;
@@ -218,6 +222,17 @@ layout("/mobile/platform.html"){
table {
width: 100%
}
.van-notice-bar {
height: 26px;
padding: 0 20px;
font-size: 13px;
}
.van-notice-bar__wrap {
font-size: 13px;
}
.van-field__label {
width: 5.2em;
}
</style>
@@ -369,13 +384,15 @@ layout("/mobile/platform.html"){
<div>
<van-tag @click="delCompanion" size="large" type="primary" color="lightgrey">删除随行人</van-tag>
<van-tag @click="addCompanion" size="large" type="primary"
color="#1867b0" v-if="formData.companionList.length < 3">添加随行人</van-tag>
color="#1867b0">添加随行人</van-tag>
</div>
</div>
<template v-if="configData.familyInfo === 2">
<div>
<span style="color: red;margin-left: 20px;font-size: 14px">限填写3岁以上70岁以下随行人</span>
<van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">
温馨提醒:限填写3岁以上70岁以下随行人。
</van-notice-bar>
</div>
<div v-if="formData.companionList.length > 0" class="van-card-body">
<van-tabs v-model="active" type="card" color="#0e78c5" animated>
@@ -383,8 +400,11 @@ layout("/mobile/platform.html"){
<van-field label="姓名" name="userName" placeholder="请填写姓名" v-model="item.userName"
:rules="[{ required: true }]"></van-field>
<!--<van-field label="工号" name="loginName" placeholder="若没有工号,请忽略此项" v-model="item.loginName"></van-field>-->
<van-field label="身份证件" name="idCard" placeholder="输入身份证自动填充年龄与性别"
:rules="[{ required: true }]" maxlength="18"
@input="getAgeAndSex(item)" v-model="item.idCard"></van-field>
<van-field label="年龄" name="age" placeholder="请填写年龄" v-model="item.age"
type="digit" :rules="[{ required: true }]"></van-field>
type="digit" :rules="[{ required: true }]" @input="(val) => {clearContent()}"></van-field>
<van-field :rules="[{ required: true, message: '请选择性别' }]" label="性别" name="validator">
<template #input>
<van-radio-group direction="horizontal" v-model="item.sex">
@@ -393,45 +413,35 @@ layout("/mobile/platform.html"){
</van-radio-group>
</template>
</van-field>
<van-field label="身份证件" name="idCard" placeholder="输入身份证自动填充年龄与性别"
:rules="[{ required: true }]" maxlength="18"
@input="getAgeAndSex(item)" v-model="item.idCard"></van-field>
<van-field label="手机号" name="mobile" placeholder="请填写手机号"
:rules="[{ required: true }]" type="digit"
v-model="item.mobile"></van-field>
<van-field @click="companionVisible = true" readonly is-link label="与本人关系"
name="relation"
placeholder="随行人与本人关系" v-model="item.relation"
:rules="[{ required: true }]"></van-field>
<!--<van-field @click="self = false; roomVisible = true" readonly is-link label="房间"
name="bedType" placeholder="请选择房间"
v-model="item.bedInfo.bedType"></van-field>
<div style="font-size: 8px; color:orangered; padding-left: 16px; padding-bottom: 4px">
提醒:如果跟报名人员同一房间,无须选择!
</div>
<van-field v-if="item.bedInfo.bedType == '标准间'" @click="self = false; bedVisible = true"
readonly is-link label="床位"
name="bedNum" placeholder="请选择床位" v-model="item.bedInfo.bedNum"></van-field>
<van-field v-if="item.bedInfo.bedType == '标准间'"
:rules="[{ validator, message: '请选择是否拼房' }]" label="是否拼房">
<van-field v-if="item.age !== '' && item.age <= 12" :rules="[{ required: true, message: '请填写身高' }]"
type="digit" label="身高信息" name="height" placeholder="请填写身高信息"
v-model="item.height">
<template #button>
<span>厘米</span>
</template>
</van-field>
<van-field v-if="item.age !== '' && item.age <= 12" :rules="[{ required: true, message: '请选择床位信息' }]" label="床位信息" name="needBed">
<template #input>
<van-radio-group direction="horizontal" v-model="item.bedInfo.isSleepTogether">
<van-radio :name="true" shape="square">是</van-radio>
<van-radio :name="false" shape="square">否</van-radio>
<van-radio-group @change="(val) => {needBedChange(item)}" direction="horizontal" v-model="item.needBed">
<van-radio :name="true" shape="square">需要床位</van-radio>
<van-radio :name="false" shape="square">无需床位</van-radio>
</van-radio-group>
</template>
</van-field>
<van-field v-if="item.bedInfo.bedType == '标准间' && item.bedInfo.isSleepTogether == true"
label="意向拼房人" name="otherSleepUser" placeholder="多个拼房人请用,隔开"
v-model="item.bedInfo.otherSleepUser"></van-field>-->
<!--<van-field @click="companionVisible = true" readonly is-link label="与本人关系"
name="relation"
placeholder="随行人与本人关系" v-model="item.relation"
:rules="[{ required: true }]"></van-field>-->
</van-tab>
</van-tabs>
</div>
<div v-if="formData.companionList.length == 0" class="companionList_empty_text">
<span>
如有随行人出行,请添加随行人
</span>
<span>
如有随行人出行,请添加随行人
</span>
</div>
</template>
@@ -441,20 +451,30 @@ layout("/mobile/platform.html"){
</template>
</div>
<!--床位信息-->
<div v-if="configData.bedInfo === true" class="van-doc-card" style="margin-bottom: 16px">
<div></div>
<div class="van-card-header">
房间信息
房间数量
</div>
<div class="van-card-body">
<van-field @click="self = true; roomVisible = true" readonly is-link label="房间" name="bedType"
placeholder="请选择房间" v-model="formData.bedInfo.bedType"
:rules="[{ required: true }]"></van-field>
<van-field v-if="formData.bedInfo.bedType == '标准间' && formData.bedInfo.isSleepTogether == true"
label="意向拼房人" name="otherSleepUser" placeholder="多个拼房人请用,隔开"
v-model="formData.bedInfo.otherSleepUser"
:rules="[{ required: true }]"></van-field>
<van-field @click="self = true; roomVisible = true" readonly is-link label="房间数量" name="roomCountName"
placeholder="请选择房间数量" v-model="formData.roomCountName"
required :rules="[{ required: true }]"></van-field>
</div>
</div>
<div v-if="configData.bedInfo === true" class="van-doc-card" style="margin-bottom: 16px">
<div></div>
<div class="van-card-header">
用房备注
</div>
<div class="van-card-body">
<van-field @click="roomRemarkClick" readonly is-link label="用房备注" name="roomRemarkName"
placeholder="请选择用房备注" v-model="formData.roomRemarkName"
required :rules="[{ required: true }]"></van-field>
<van-field label="拼房人" name="roommate" :rules="[{ required: true }]"
required v-if="formData.roomRemark === 2"
placeholder="请填写拼房人" v-model="formData.roommate"></van-field>
</div>
</div>
@@ -473,8 +493,18 @@ layout("/mobile/platform.html"){
<van-picker
title="房间需求数" show-toolbar
:columns="roomColumns"
@confirm="roomConfirm"
@cancel="roomCancel">
value-key="label"
@confirm="(val) => {formData.roomCountName = val.label;formData.roomCount = val.value;roomVisible=false}"
@cancel="() => {formData.roomCountName = '';formData.roomCount = '';roomVisible=false}">
</van-picker>
</van-popup>
<van-popup position="bottom" round v-model="roomRemarkVisible">
<van-picker
title="用房备注" show-toolbar
:columns="roomRemarkColumns"
value-key="label"
@confirm="(val) => {formData.roomRemarkName = val.label;formData.roomRemark = val.value;roomRemarkVisible=false}"
@cancel="() => {formData.roomRemarkName = '';formData.roomRemark = '';roomRemarkVisible=false}">
</van-picker>
</van-popup>
@@ -514,10 +544,25 @@ layout("/mobile/platform.html"){
mixins: [mobileMixins],
data() {
return {
roomRemarkVisible: false,
isPdf: false,
isLoad: false,
active: 0,
roomColumns: ['0.5间(一张床)', "1间(两张床)}", '1.5间(三张床)', '2间(四张床)'],
basicRoomColumns: [
{label: '0.5间(一张床)', value: 0.5},
{label: '1间(两张床)', value: 1},
{label: '1.5间(三张床)', value: 1.5},
{label: '2间(四张床)', value: 2},
],
roomColumns: [],
basicRoomRemarkColumns: [
{label: '携带家属,包1间房', value: 1},
{label: '已与其他老师自由组合共住1间房', value: 2},
{label: '1人包房1间,额外支付单房差', value: 3},
{label: '正常报名', value: 4},
{label: '随机拼房', value: 5},
],
roomRemarkColumns: [],
bedColumns: ['1', '2'],
companionColumns: ['配偶', '子女', '亲属', '其他'],
bedVisible: false,
@@ -538,6 +583,7 @@ layout("/mobile/platform.html"){
takePartInUnionId: '',
companionList: [],
bedInfo: {},
roomCount: null,
},
self: true,
btnFlag: false,
@@ -552,6 +598,23 @@ layout("/mobile/platform.html"){
}
},
methods: {
roomRemarkClick() {
if(!this.formData.roomCount) {
this.$toast('请先选择房间数量')
return
}
this.self = true
this.roomRemarkVisible = true
},
needBedChange() {
this.clearContent()
},
clearContent() {
this.$set(this.formData, 'roomCount', '')
this.$set(this.formData, 'roomCountName', '')
this.$set(this.formData, 'roomRemark', '')
this.$set(this.formData, 'roomRemarkName', '')
},
getAgeAndSex(item){
try {
const value = item.idCard
@@ -601,7 +664,7 @@ layout("/mobile/platform.html"){
for (let i = 0; i < cloneData.companionList.length; i++) {
const companion = cloneData.companionList[i];
// 检查每个字段是否为空
if (!companion.userName || !companion.idCard || !companion.mobile || !companion.relation) {
if (!companion.userName || !companion.idCard || !companion.mobile) {
this.$toast('请填写完整随行人信息')
return
}
@@ -614,7 +677,7 @@ layout("/mobile/platform.html"){
} else {
// 判断companion.age,是不是在3到70岁之间,不是就提示
if (companion.age < 3 || companion.age > 70) {
this.$toast('随行人'+ (i+1) +'的年龄超出限制,请添加其他联系人')
this.$toast('随行人'+ (i+1) +'的年龄超出限制,请添加其他联系人')
return
}
}
@@ -672,10 +735,16 @@ layout("/mobile/platform.html"){
// }, 1000)
},
addCompanion() {
if(this.formData.companionList.length === 3) {
this.$toast("随行人最多3人")
return
}
this.formData.companionList.push({userName: '', loginName: '', sex: '', relation: '', bedInfo: {}})
this.clearContent()
},
delCompanion() {
this.formData.companionList.splice(this.active, 1)
this.clearContent()
},
async join() {
const re = await $.post('/platform/theRapyRecuperation/line/enroll/validSignUpInfo', {
@@ -717,6 +786,7 @@ layout("/mobile/platform.html"){
takePartInUnionId: this.takePartInUnionId,
companionList: [],
bedInfo: {},
roomCount: null,
}
this.$set(this.formData.bedInfo, 'bedType', '大床房')
}
@@ -873,6 +943,38 @@ layout("/mobile/platform.html"){
return false
}
},
updateRoomRemarkColumns() {
const roomCount = this.formData.roomCount;
const companions = this.formData.companionList || [];
const needBedCount = companions.filter(o => o.age > 12 || o.needBed).length;
const strategies = {
0.5: () => {
if (companions.length === 0) return 5;
if (needBedCount === 0) return 2;
return 2;
},
1: () => {
if (needBedCount + 1 === 2) return 4;
if (companions.length > 0 && needBedCount === 0) return 1;
if (companions.length === 0) return 3;
return 1;
},
1.5: () => 2,
2: () => {
if (needBedCount + 1 === 4) return 4;
return 1;
}
};
const matchedValue = strategies[roomCount]?.();
if (matchedValue !== undefined) {
this.roomRemarkColumns = this.basicRoomRemarkColumns.filter(
o => o.value === matchedValue
);
} else {
// 默认处理:恢复基础列
this.roomRemarkColumns = [...this.basicRoomRemarkColumns];
}
}
},
async created() {
const loading = this.$toast({
@@ -954,6 +1056,25 @@ layout("/mobile/platform.html"){
})
loading.close()
},
watch: {
'formData.companionList': {
handler(newVal) {
//过滤需要床位的,找大人或者小孩需要床位的
const needBed = newVal.filter(o => o.age > 12 || o.needBed === true)
const bedCount = 0.5 + (needBed.length - needBed.length * 0.5)
console.log(bedCount)
if(bedCount === 0.5) {
this.roomColumns = this.basicRoomColumns.filter(o => o.value <= 1)
} else {
this.roomColumns = this.basicRoomColumns.filter(o => Number.isInteger(bedCount) ? o.value === bedCount : o.value >= bedCount)
}
},
deep: true
},
'formData.roomCount'(newVal) {
this.updateRoomRemarkColumns()
}
},
mounted() {
window.addEventListener('scroll', this.scrollToTop)
},