完成上传

src/views/identity-upload/index.vue

@@ -9,15 +9,21 @@
           v-model="item.fileList"
           :max-count="1"
           :after-read="(file) => handleAfterRead(file, index)"
-          :preview-size="previewSize"
           :deletable="true"
-          :upload-text="item.label"
           accept="image/*"
           :multiple="false"
+          preview-size="auto"
+          class="custom-uploader"
         >
           <template #default>
-            <div class="upload-box" v-if="!item.fileList.length">
-              <van-icon name="photograph" class="camera-icon" />
+            <div
+              class="upload-box"
+              v-if="!item.fileList.length"
+              :style="{ backgroundImage: `url(${item.bg})` }"
+            >
+              <div class="overlay">
+                <van-icon name="photograph" class="camera-icon" />
+              </div>
             </div>
           </template>
         </van-uploader>
@@ -49,22 +55,28 @@
 import { ref, computed } from 'vue'
 import { showToast } from 'vant'
 
-/** 上传项 */
+/** 上传项类型 */
 interface UploadItem {
   label: string
-  fileList: any[]
   field: string
+  fileList: { url: string; file?: File }[]
+  bg: string
 }
+
+/** 背景图（本地 assets 图片） */
+import frontBg from '@/assets/images/id-front-bg.png'
+import backBg from '@/assets/images/id-back-bg.png'
+
+/** 上传列表 */
 const uploadList = ref<UploadItem[]>([
-  { label: '请上传身份证人像面', field: 'front', fileList: [] },
-  { label: '请上传身份证国徽面', field: 'back', fileList: [] },
+  { label: '请上传身份证人像面', field: 'front', fileList: [], bg: frontBg },
+  { label: '请上传身份证国徽面', field: 'back', fileList: [], bg: backBg },
 ])
 
-/** 图片选择后处理*/
+/** 图片选择后处理 */
 const handleAfterRead = (file: any, index: number) => {
   const target = uploadList.value[index]
-  if (!target) return // ✅ 防御性检查，防止未定义
-
+  if (!target) return
   showToast('上传中...')
   setTimeout(() => {
     target.fileList = [
@@ -80,10 +92,7 @@ const handleAfterRead = (file: any, index: number) => {
 /** 是否完成上传 */
 const isReady = computed(() => uploadList.value.every((item) => item.fileList.length > 0))
 
-/** 预览尺寸 */
-const previewSize = '35vw'
-
-/** 下一步 */
+/** 下一步按钮点击 */
 const onNext = () => {
   if (!isReady.value) return showToast('请先上传身份证正反面')
   showToast('上传完成，进入下一步')
@@ -117,22 +126,41 @@ const onNext = () => {
   width: 35vw;
   height: 22vw;
   border-radius: 2vw;
-  background: #f0f0f0;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  position: relative;
+  overflow: hidden;
+  box-shadow: inset 0 0 2vw rgba(0, 0, 0, 0.05);
+  margin-bottom: 3vw;
+}
+.overlay {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.25);
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 3vw;
-  box-shadow: inset 0 0 2vw rgba(0, 0, 0, 0.05);
 }
 .camera-icon {
   font-size: 8vw;
-  color: #ff7a00;
+  color: #fff;
+  opacity: 0.9;
 }
 .upload-text {
   font-size: 3.4vw;
   color: #666;
 }
 
+/* 预览图尺寸与上传框保持一致 */
+.custom-uploader >>> .van-uploader__preview,
+.custom-uploader >>> .van-uploader__preview-image {
+  width: 35vw !important;
+  height: 22vw !important;
+  border-radius: 2vw;
+  object-fit: cover;
+}
+
 /* 说明文字 */
 .info-section {
   margin: 8vw 0 12vw;

src/views/invoice-information/index.vue

@@ -206,6 +206,12 @@ const getStatus = async () => {
 }
 
 const handleNext = useDebounceFn(async () => {
+  if (!statusMap.value.isIdImgReady) {
+    return router.push({
+      path: '/identity-upload',
+    })
+  }
+
   // 当eventStatus === PROCESSED 需要人脸认证
   if (statusMap.value.eventStatus === 'PROCESSED') {
     return router.push({
@@ -214,11 +220,6 @@ const handleNext = useDebounceFn(async () => {
   }
   return submitInvoiceApply()
   // 当前账户没有身份照片，跳转上传证件页面
-  // if (!res.data.isIdImgReady) {
-  //   router.push({
-  //     path: '/identity-upload',
-  //   })
-  // }
 }, 1000)
 
 const submitInvoiceApply = async () => {