hookehuyr

feat(collectionSettings): 添加身份证信息上传和有效期选择功能

新增身份证人像面、国徽面上传功能,包含预览和删除操作
添加身份证有效期开始和结束日期选择器
增加身份证地址输入字段
更新表单验证逻辑以包含新增字段
...@@ -356,3 +356,121 @@ ...@@ -356,3 +356,121 @@
356 } 356 }
357 } 357 }
358 } 358 }
359 +
360 +// 身份证图片上传样式
361 +.idcard-img-container {
362 + margin-top: 20rpx;
363 +}
364 +
365 +.idcard-img-upload {
366 + width: 100%;
367 + height: 200rpx;
368 + border: 2rpx dashed #ddd;
369 + border-radius: 12rpx;
370 + display: flex;
371 + flex-direction: column;
372 + align-items: center;
373 + justify-content: center;
374 + background-color: #fafafa;
375 + transition: all 0.3s ease;
376 +
377 + &:active {
378 + background-color: #f0f0f0;
379 + border-color: #ccc;
380 + }
381 +
382 + .upload-icon {
383 + font-size: 48rpx;
384 + color: #999;
385 + margin-bottom: 10rpx;
386 + }
387 +
388 + .upload-text {
389 + font-size: 28rpx;
390 + color: #999;
391 + }
392 +}
393 +
394 +.idcard-img-preview {
395 + width: 100%;
396 + position: relative;
397 +
398 + .idcard-img-image {
399 + width: 100%;
400 + height: 200rpx;
401 + border-radius: 12rpx;
402 + object-fit: cover;
403 + }
404 +
405 + .idcard-img-actions {
406 + display: flex;
407 + justify-content: space-between;
408 + margin-top: 20rpx;
409 +
410 + .change-img-btn {
411 + flex: 1;
412 + text-align: center;
413 + padding: 20rpx;
414 + background-color: #ffa500;
415 + color: white;
416 + border-radius: 8rpx;
417 + font-size: 28rpx;
418 + margin-right: 10rpx;
419 +
420 + &:active {
421 + background-color: #e6940a;
422 + }
423 + }
424 +
425 + .delete-img-btn {
426 + flex: 1;
427 + text-align: center;
428 + padding: 20rpx;
429 + background-color: #ff4757;
430 + color: white;
431 + border-radius: 8rpx;
432 + font-size: 28rpx;
433 + margin-left: 10rpx;
434 +
435 + &:active {
436 + background-color: #e63946;
437 + }
438 + }
439 + }
440 +}
441 +
442 +// 日期选择器样式
443 +.date-selector {
444 + display: flex;
445 + align-items: center;
446 + justify-content: space-between;
447 + padding: 20rpx 0;
448 + border-bottom: 1rpx solid #eee;
449 + min-height: 80rpx;
450 +
451 + .date-text {
452 + font-size: 32rpx;
453 + color: #999;
454 +
455 + &.date-selected {
456 + color: #333;
457 + }
458 + }
459 +
460 + .arrow-down {
461 + font-size: 28rpx;
462 + color: #999;
463 + // transform: rotate(90deg);
464 + }
465 +
466 + &:active {
467 + background-color: #f5f5f5;
468 + }
469 +}
470 +
471 +// 必填项红色*号标记
472 +.required-mark {
473 + color: #ff4757;
474 + font-size: 28rpx;
475 + margin-right: 8rpx;
476 +}
......
This diff is collapsed. Click to expand it.