Showing
1 changed file
with
36 additions
and
10 deletions
| 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 | * 手机号码校验 | ... | ... |
-
Please register or login to post a comment