fix(collectionSettings): 调整图片上传区域高度并优化日期选择器限制
增加银行和身份证图片上传区域的高度以改善用户体验 为证件有效期日期选择器添加最大和最小日期限制,防止选择无效日期 移除冗余的catch-move属性
Showing
2 changed files
with
19 additions
and
6 deletions
| ... | @@ -282,7 +282,7 @@ | ... | @@ -282,7 +282,7 @@ |
| 282 | 282 | ||
| 283 | .bank-img-upload { | 283 | .bank-img-upload { |
| 284 | width: 100%; | 284 | width: 100%; |
| 285 | - height: 200rpx; | 285 | + height: 250rpx; |
| 286 | border: 2rpx dashed #ddd; | 286 | border: 2rpx dashed #ddd; |
| 287 | border-radius: 12rpx; | 287 | border-radius: 12rpx; |
| 288 | display: flex; | 288 | display: flex; |
| ... | @@ -364,7 +364,7 @@ | ... | @@ -364,7 +364,7 @@ |
| 364 | 364 | ||
| 365 | .idcard-img-upload { | 365 | .idcard-img-upload { |
| 366 | width: 100%; | 366 | width: 100%; |
| 367 | - height: 200rpx; | 367 | + height: 250rpx; |
| 368 | border: 2rpx dashed #ddd; | 368 | border: 2rpx dashed #ddd; |
| 369 | border-radius: 12rpx; | 369 | border-radius: 12rpx; |
| 370 | display: flex; | 370 | display: flex; |
| ... | @@ -397,7 +397,7 @@ | ... | @@ -397,7 +397,7 @@ |
| 397 | 397 | ||
| 398 | .idcard-img-image { | 398 | .idcard-img-image { |
| 399 | width: 100%; | 399 | width: 100%; |
| 400 | - height: 200rpx; | 400 | + height: 250rpx; |
| 401 | border-radius: 12rpx; | 401 | border-radius: 12rpx; |
| 402 | object-fit: cover; | 402 | object-fit: cover; |
| 403 | } | 403 | } | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2022-09-19 14:11:06 | 2 | * @Date: 2022-09-19 14:11:06 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-08-07 15:12:29 | 4 | + * @LastEditTime: 2025-08-07 15:16:21 |
| 5 | * @FilePath: /jgdl/src/pages/collectionSettings/index.vue | 5 | * @FilePath: /jgdl/src/pages/collectionSettings/index.vue |
| 6 | * @Description: 收款设置 | 6 | * @Description: 收款设置 |
| 7 | --> | 7 | --> |
| ... | @@ -42,7 +42,6 @@ | ... | @@ -42,7 +42,6 @@ |
| 42 | v-model:visible="showAccountModal" | 42 | v-model:visible="showAccountModal" |
| 43 | position="bottom" | 43 | position="bottom" |
| 44 | :style="{ width: '100%', height: '85%' }" | 44 | :style="{ width: '100%', height: '85%' }" |
| 45 | - :catch-move="true" | ||
| 46 | :close-on-click-overlay="false" | 45 | :close-on-click-overlay="false" |
| 47 | closeable | 46 | closeable |
| 48 | close-icon-position="top-right" | 47 | close-icon-position="top-right" |
| ... | @@ -139,7 +138,6 @@ | ... | @@ -139,7 +138,6 @@ |
| 139 | v-model:visible="showIdentityModal" | 138 | v-model:visible="showIdentityModal" |
| 140 | position="bottom" | 139 | position="bottom" |
| 141 | :style="{ width: '100%', height: '85%' }" | 140 | :style="{ width: '100%', height: '85%' }" |
| 142 | - :catch-move="true" | ||
| 143 | :close-on-click-overlay="false" | 141 | :close-on-click-overlay="false" |
| 144 | closeable | 142 | closeable |
| 145 | close-icon-position="top-right" | 143 | close-icon-position="top-right" |
| ... | @@ -284,6 +282,8 @@ | ... | @@ -284,6 +282,8 @@ |
| 284 | v-model="idcardBeginDate" | 282 | v-model="idcardBeginDate" |
| 285 | type="date" | 283 | type="date" |
| 286 | title="选择证件有效期开始日期" | 284 | title="选择证件有效期开始日期" |
| 285 | + :max-date="maxYearDate" | ||
| 286 | + :min-date="minYearDate" | ||
| 287 | @confirm="onIdcardBeginDateConfirm" | 287 | @confirm="onIdcardBeginDateConfirm" |
| 288 | @cancel="showIdcardBeginDate = false" | 288 | @cancel="showIdcardBeginDate = false" |
| 289 | /> | 289 | /> |
| ... | @@ -299,6 +299,8 @@ | ... | @@ -299,6 +299,8 @@ |
| 299 | v-model="idcardEndDate" | 299 | v-model="idcardEndDate" |
| 300 | type="date" | 300 | type="date" |
| 301 | title="选择证件有效期结束日期" | 301 | title="选择证件有效期结束日期" |
| 302 | + :max-date="maxYearDate" | ||
| 303 | + :min-date="minYearDate" | ||
| 302 | @confirm="onIdcardEndDateConfirm" | 304 | @confirm="onIdcardEndDateConfirm" |
| 303 | @cancel="showIdcardEndDate = false" | 305 | @cancel="showIdcardEndDate = false" |
| 304 | /> | 306 | /> |
| ... | @@ -403,6 +405,17 @@ const idCardError = ref(''); | ... | @@ -403,6 +405,17 @@ const idCardError = ref(''); |
| 403 | const idcardBeginDate = ref(new Date()); | 405 | const idcardBeginDate = ref(new Date()); |
| 404 | const idcardEndDate = ref(new Date()); | 406 | const idcardEndDate = ref(new Date()); |
| 405 | 407 | ||
| 408 | +/** | ||
| 409 | + * 日期选择器的最大日期(当天) | ||
| 410 | + */ | ||
| 411 | +const maxYearDate = ref(new Date()); | ||
| 412 | + | ||
| 413 | +/** | ||
| 414 | + * 日期选择器的最小日期(当前年份前80年) | ||
| 415 | + */ | ||
| 416 | +const currentYear = new Date().getFullYear(); | ||
| 417 | +const minYearDate = ref(new Date(currentYear - 80, 0, 1)); // 80年前的1月1日 | ||
| 418 | + | ||
| 406 | // 银行选择器当前选中的值 | 419 | // 银行选择器当前选中的值 |
| 407 | const bankPickerValue = ref([]); | 420 | const bankPickerValue = ref([]); |
| 408 | 421 | ... | ... |
-
Please register or login to post a comment