hookehuyr

feat(搜索页): 添加证件类型选择功能并调整证件号码输入限制

增加证件类型选择器组件,支持身份证和其他证件类型选择
根据选择的证件类型动态调整证件号码输入框的最大长度限制
<!--
* @Date: 2024-01-26 13:08:09
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-01-08 10:33:16
* @LastEditTime: 2026-01-08 16:57:38
* @FilePath: /xyxBooking-weapp/src/pages/search/index.vue
* @Description: 文件描述
-->
......@@ -9,6 +9,13 @@
<view class="search-page">
<view>
<view v-if="!is_search">
<view class="input-card" @tap="open_id_type_picker">
<view class="input-label">证件类型</view>
<view class="picker-value">
<text>{{ id_type_label }}</text>
<text class="picker-arrow">›</text>
</view>
</view>
<view class="input-card">
<view class="input-label">证件号码</view>
<input
......@@ -17,7 +24,7 @@
v-model="idCode"
placeholder="请输入证件号码"
@blur="checkIdCode"
maxlength="18"
:maxlength="id_type === 1 ? 18 : 30"
>
</view>
<view class="tip-block">
......@@ -42,10 +49,20 @@
<view @tap="goBack" class="btn-item btn-right">返回查询</view>
</view>
</view>
<nut-popup v-model:visible="show_id_type_picker" position="bottom" safe-area-inset-bottom>
<nut-picker
v-model="id_type_picker_value"
:columns="id_type_columns"
title="选择证件类型"
@confirm="on_id_type_confirm"
@cancel="show_id_type_picker = false"
></nut-picker>
</nut-popup>
</template>
<script setup>
import { ref } from 'vue'
import { ref, computed } from 'vue'
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro'
import qrCodeSearch from '@/components/qrCodeSearch';
......@@ -55,6 +72,34 @@ const go = useGo();
const is_search = ref(false);
const idCode = ref('');
const id_number = ref('');
const show_id_type_picker = ref(false);
const id_type_options = [
{ label: '身份证', value: 1 },
{ label: '其他', value: 3 }
];
const id_type = ref(id_type_options[0].value);
const id_type_picker_value = ref([String(id_type.value)]);
const id_type_columns = computed(() => {
return id_type_options.map(item => ({
text: item.label,
value: String(item.value)
}));
});
const id_type_label = computed(() => {
return id_type_options.find(item => item.value === id_type.value)?.label || id_type_options[0].label;
});
const open_id_type_picker = () => {
id_type_picker_value.value = [String(id_type.value)];
show_id_type_picker.value = true;
}
const on_id_type_confirm = ({ selectedValue }) => {
const value = selectedValue?.[0];
id_type.value = Number(value) || 1;
show_id_type_picker.value = false;
}
// 简单的身份证校验
const validateCIN = (id) => {
......@@ -62,6 +107,8 @@ const validateCIN = (id) => {
}
const checkIdCode = () => { // 检查身份证号是否为空
if (id_type.value !== 1) return true;
let flag = true;
if (idCode.value.length === 15) { // 15位身份证号码不校验
flag = true;
......@@ -125,6 +172,22 @@ const goToHome = () => {
font-size: 30rpx;
color: #333;
}
.picker-value {
flex: 1;
display: flex;
align-items: center;
justify-content: flex-end;
text-align: right;
font-size: 30rpx;
color: #333;
}
.picker-arrow {
margin-left: 10rpx;
color: #BBB;
font-size: 28rpx;
}
}
.tip-block {
......