feat(证件有效期): 添加证件有效期结束类型选择功能
新增证件有效期结束类型选择弹窗,支持选择"长期"或"选择日期"选项
Showing
1 changed file
with
55 additions
and
1 deletions
| ... | @@ -294,6 +294,20 @@ | ... | @@ -294,6 +294,20 @@ |
| 294 | /> | 294 | /> |
| 295 | </nut-popup> | 295 | </nut-popup> |
| 296 | 296 | ||
| 297 | + <!-- 证件有效期结束类型选择器弹窗 --> | ||
| 298 | + <nut-popup | ||
| 299 | + v-model:visible="showEndDateTypeModal" | ||
| 300 | + position="bottom" | ||
| 301 | + > | ||
| 302 | + <nut-picker | ||
| 303 | + v-model="endDateTypePickerValue" | ||
| 304 | + :columns="endDateTypeOptions" | ||
| 305 | + title="选择证件有效期类型" | ||
| 306 | + @confirm="onEndDateTypeConfirm" | ||
| 307 | + @cancel="showEndDateTypeModal = false" | ||
| 308 | + ></nut-picker> | ||
| 309 | + </nut-popup> | ||
| 310 | + | ||
| 297 | <!-- 身份证有效期结束日期选择器 --> | 311 | <!-- 身份证有效期结束日期选择器 --> |
| 298 | <nut-popup | 312 | <nut-popup |
| 299 | v-model:visible="showIdcardEndDate" | 313 | v-model:visible="showIdcardEndDate" |
| ... | @@ -400,6 +414,7 @@ const showIdentityModal = ref(false); | ... | @@ -400,6 +414,7 @@ const showIdentityModal = ref(false); |
| 400 | const showBankModal = ref(false); | 414 | const showBankModal = ref(false); |
| 401 | const showIdcardBeginDate = ref(false); | 415 | const showIdcardBeginDate = ref(false); |
| 402 | const showIdcardEndDate = ref(false); | 416 | const showIdcardEndDate = ref(false); |
| 417 | +const showEndDateTypeModal = ref(false); | ||
| 403 | 418 | ||
| 404 | /** | 419 | /** |
| 405 | * 身份证号码错误信息 | 420 | * 身份证号码错误信息 |
| ... | @@ -426,6 +441,23 @@ const minYearDate = ref(new Date(currentYear - 80, 0, 1)); // 80年前的1月1 | ... | @@ -426,6 +441,23 @@ const minYearDate = ref(new Date(currentYear - 80, 0, 1)); // 80年前的1月1 |
| 426 | // 银行选择器当前选中的值 | 441 | // 银行选择器当前选中的值 |
| 427 | const bankPickerValue = ref([]); | 442 | const bankPickerValue = ref([]); |
| 428 | 443 | ||
| 444 | +// 证件有效期结束类型选择器当前选中的值 | ||
| 445 | +const endDateTypePickerValue = ref([]); | ||
| 446 | + | ||
| 447 | +/** | ||
| 448 | + * 证件有效期结束类型选项 | ||
| 449 | + */ | ||
| 450 | +const endDateTypeOptions = ref([ | ||
| 451 | + { | ||
| 452 | + text: '长期', | ||
| 453 | + value: 'long_term' | ||
| 454 | + }, | ||
| 455 | + { | ||
| 456 | + text: '选择日期', | ||
| 457 | + value: 'select_date' | ||
| 458 | + } | ||
| 459 | +]); | ||
| 460 | + | ||
| 429 | /** | 461 | /** |
| 430 | * 银行列表数据(从接口获取) | 462 | * 银行列表数据(从接口获取) |
| 431 | */ | 463 | */ |
| ... | @@ -938,7 +970,11 @@ const showIdcardBeginDatePicker = () => { | ... | @@ -938,7 +970,11 @@ const showIdcardBeginDatePicker = () => { |
| 938 | * 显示身份证有效期结束日期选择器 | 970 | * 显示身份证有效期结束日期选择器 |
| 939 | */ | 971 | */ |
| 940 | const showIdcardEndDatePicker = () => { | 972 | const showIdcardEndDatePicker = () => { |
| 941 | - showIdcardEndDate.value = true | 973 | + // 设置默认选中第一个选项 |
| 974 | + if (endDateTypeOptions.value.length > 0) { | ||
| 975 | + endDateTypePickerValue.value = [endDateTypeOptions.value[0].value]; | ||
| 976 | + } | ||
| 977 | + showEndDateTypeModal.value = true | ||
| 942 | } | 978 | } |
| 943 | 979 | ||
| 944 | /** | 980 | /** |
| ... | @@ -955,6 +991,24 @@ const onIdcardBeginDateConfirm = (param) => { | ... | @@ -955,6 +991,24 @@ const onIdcardBeginDateConfirm = (param) => { |
| 955 | } | 991 | } |
| 956 | 992 | ||
| 957 | /** | 993 | /** |
| 994 | + * 证件有效期结束类型选择确认回调 | ||
| 995 | + * @param {Object} param - 选择器返回的参数 | ||
| 996 | + */ | ||
| 997 | +const onEndDateTypeConfirm = ({ selectedValue }) => { | ||
| 998 | + const selectedType = selectedValue[0]; | ||
| 999 | + | ||
| 1000 | + if (selectedType === 'long_term') { | ||
| 1001 | + // 选择长期,直接设置为"长期" | ||
| 1002 | + tempIdentityInfo.value.idcard_effect_end = '长期'; | ||
| 1003 | + showEndDateTypeModal.value = false; | ||
| 1004 | + } else if (selectedType === 'select_date') { | ||
| 1005 | + // 选择日期,打开日期选择器 | ||
| 1006 | + showEndDateTypeModal.value = false; | ||
| 1007 | + showIdcardEndDate.value = true; | ||
| 1008 | + } | ||
| 1009 | +}; | ||
| 1010 | + | ||
| 1011 | +/** | ||
| 958 | * 确认选择身份证有效期结束日期 | 1012 | * 确认选择身份证有效期结束日期 |
| 959 | * @param {Object} param - 日期选择器返回的参数 | 1013 | * @param {Object} param - 日期选择器返回的参数 |
| 960 | */ | 1014 | */ | ... | ... |
-
Please register or login to post a comment