hookehuyr

fix 更新换行切换功能

1 <!-- 1 <!--
2 * @Date: 2023-08-22 14:13:07 2 * @Date: 2023-08-22 14:13:07
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-08-25 15:15:29 4 + * @LastEditTime: 2023-08-25 17:07:08
5 * @FilePath: /bieyuan/src/views/next.vue 5 * @FilePath: /bieyuan/src/views/next.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -10,10 +10,10 @@ ...@@ -10,10 +10,10 @@
10 <van-form @submit="onSubmit"> 10 <van-form @submit="onSubmit">
11 <div v-for="(item, index) in userInfo" :key="index" class="input-box"> 11 <div v-for="(item, index) in userInfo" :key="index" class="input-box">
12 <p class="title">{{ index + 1 }}.{{ index === 0 ? '我的信息' : '同行人' }}</p> 12 <p class="title">{{ index + 1 }}.{{ index === 0 ? '我的信息' : '同行人' }}</p>
13 - <van-field v-model="item.name" label="姓名:" type="text" placeholder="请输入姓名" :border="false" 13 + <van-field :id="'name' + index" v-model="item.name" label="姓名:" type="text" placeholder="请输入姓名" :border="false"
14 - :rules="[{ required: true, message: '请填写姓名' }]" label-width="4em" class="input-text" /> 14 + :rules="[{ required: true, message: '请填写姓名' }]" label-width="4em" class="input-text" @focus="onFocus" @keydown="handleKeyDown" />
15 - <van-field v-model="item.phone" label="手机号:" type="digit" placeholder="请输入手机号" :border="false" 15 + <van-field :id="'phone' + index" v-model="item.phone" label="手机号:" type="digit" placeholder="请输入手机号" :border="false"
16 - :rules="[{ validator: validatorPhone, message: '请输入正确手机号' }]" label-width="4em" class="input-text" /> 16 + :rules="[{ validator: validatorPhone, message: '请输入正确手机号' }]" label-width="4em" class="input-text" @focus="onFocus" @keydown="handleKeyDown" />
17 <van-field label="证件类型:" :border="false" label-width="4.5em"> 17 <van-field label="证件类型:" :border="false" label-width="4.5em">
18 <template #input> 18 <template #input>
19 <van-radio-group v-model="item.id_type" direction="horizontal" checked-color="#93663D" style="height: 2.5rem;"> 19 <van-radio-group v-model="item.id_type" direction="horizontal" checked-color="#93663D" style="height: 2.5rem;">
...@@ -22,10 +22,10 @@ ...@@ -22,10 +22,10 @@
22 </van-radio-group> 22 </van-radio-group>
23 </template> 23 </template>
24 </van-field> 24 </van-field>
25 - <van-field v-if="item.id_type === 'id_card'" v-model="item.id_number" label="身份证:" type="text" placeholder="请输入身份证号" :border="false" 25 + <van-field :id="'id_type' + index" v-if="item.id_type === 'id_card'" v-model="item.id_number" label="身份证:" type="text" placeholder="请输入身份证号" :border="false"
26 - :rules="[{ validator: validatorId, message: '请填写正确身份证号' }]" label-width="4em" class="input-text" /> 26 + :rules="[{ validator: validatorId, message: '请填写正确身份证号' }]" label-width="4em" class="input-text" @focus="onFocus" @keydown="handleKeyDown" />
27 - <van-field v-else v-model="item.id_number" label="护照:" type="text" placeholder="请输入护照号" :border="false" 27 + <van-field :id="'id_type' + index" v-else v-model="item.id_number" label="护照:" type="text" placeholder="请输入护照号" :border="false"
28 - :rules="[{ required: true, message: '请填写正确护照号' }]" label-width="4em" class="input-text" /> 28 + :rules="[{ required: true, message: '请填写正确护照号' }]" label-width="4em" class="input-text" @focus="onFocus" @keydown="handleKeyDown" />
29 </div> 29 </div>
30 <div style="padding: 2rem;"> 30 <div style="padding: 2rem;">
31 <van-button block type="primary" color="#93663D" native-type="submit"> 31 <van-button block type="primary" color="#93663D" native-type="submit">
...@@ -61,6 +61,7 @@ const { appUserInfo } = storeToRefs(store); ...@@ -61,6 +61,7 @@ const { appUserInfo } = storeToRefs(store);
61 61
62 const userInfo = ref([]); // 用户预约信息 62 const userInfo = ref([]); // 用户预约信息
63 const num = ref(1); 63 const num = ref(1);
64 +const keyDownList = ref([])
64 65
65 onMounted(async () => { 66 onMounted(async () => {
66 num.value = $route.query.count ? +$route.query.count : 1; 67 num.value = $route.query.count ? +$route.query.count : 1;
...@@ -96,7 +97,32 @@ onMounted(async () => { ...@@ -96,7 +97,32 @@ onMounted(async () => {
96 userInfo.value[0] = data; 97 userInfo.value[0] = data;
97 } 98 }
98 } 99 }
99 -}) 100 + //
101 + for (let index = 0; index < userInfo.value.length; index++) {
102 + // const element = keyDownList[index];
103 + const arr = ['name', 'phone', 'id_type']
104 + for (let idx = 0; idx < arr.length; idx++) {
105 + const element = arr[idx] + index;
106 + keyDownList.value.push(element)
107 + }
108 + }
109 +});
110 +
111 +// 点击换行功能
112 +const currentIndex = ref('');
113 +const onFocus = (evt) => {
114 + const currentId = $(evt.target).attr('id');
115 + currentIndex.value = keyDownList.value.indexOf(currentId);
116 +}
117 +const handleKeyDown = (evt) => {
118 + //
119 + if (evt.keyCode === 13) {
120 + const id = `input#${keyDownList.value[currentIndex.value + 1]}`;
121 + if (id) {
122 + $(id).focus()
123 + }
124 + }
125 +}
100 126
101 /** 127 /**
102 * 手机号码校验 128 * 手机号码校验
......