实名认证页代码优化

src/views/rvDriverAuthentication/component/photoItem.vue

@@ -9,14 +9,15 @@
         </van-radio-group>
       </div>
       <div class="photoWrap" v-if="inSure == 1">
-          <van-uploader  :after-read="(file) => afterRead(file,'urlList')" class="customUploadMul"
+          <van-uploader  :after-read="(file) => afterRead(file,'urlList')" class="customUploadMul" @click-upload="(event)=>clickUpload(event,'urlList')">
-                         :max-count="3" :disabled="!showFun()" deletable>
+<!--            -->
+<!--            :max-count="3"  v-model="fileList" multiple  :deletable="true" -->
             <template v-if="urlList.length > 0">
-              <div v-for="(item, index) in urlList" :key="'uploaded-' + index" class="uploaded-item">
+              <div v-for="(item, index) in urlList" :key="index" class="uploaded-item">
                 <img class="photo_item" mode="widthFix" :src="item.replace(/http:\/\//g, 'https://')" />
               </div>
             </template>
-            <template v-if="urlList.length < 3">
+            <template v-if="urlList.length < 3 && showFun()">
               <div class="tipWrap">
                 <img class="photo_item" mode="widthFix" src="@/assets/authentication/carInfo_icon5.png"/>
                 <img class="camera" v-if="showFun()" src="@/assets/authentication/camera.png" />
@@ -32,16 +33,16 @@
         <span>{{title}}</span>
       </div>
       <div class="photo_img flex flex_between">
-        <van-uploader v-if="leftUrl"  :after-read="(file) => afterRead(file,'leftImg')" class="customUpload"  :disabled="!showFun()">
+        <van-uploader v-if="leftUrl"  :after-read="(file) => afterRead(file,'leftImg')" class="customUpload"   @click-upload="(event)=>clickUpload(event,'leftImg')">
-            <template v-if="form.leftImg">
+          <template v-if="form.leftImg">
-             <img class="photo_item" mode="widthFix" :src="form.leftImg.replace(/http:\/\//g, 'https://')" />
+            <img class="photo_item" mode="widthFix" :src="form.leftImg.replace(/http:\/\//g, 'https://')" />
-            </template>
+          </template>
-            <template v-else>
+          <template v-else>
-              <img class="photo_item"  mode="widthFix" :src="leftUrl" />
+            <img class="photo_item"   mode="widthFix" :src="leftUrl" />
-              <img class="camera" v-if="showFun()" src="@/assets/authentication/camera.png" />
+            <img class="camera" v-if="showFun()" src="@/assets/authentication/camera.png" />
-            </template>
+          </template>
         </van-uploader>
-        <van-uploader v-if="rightUrl"  :after-read="(file) => afterRead(file,'rightImg')" class="customUpload"  :disabled="!showFun()">
+        <van-uploader v-if="rightUrl"  :after-read="(file) => afterRead(file,'rightImg')" class="customUpload"  @click-upload="(event)=>clickUpload(event,'rightImg')">
           <template v-if="form.rightImg">
             <img class="photo_item" mode="widthFix" :src="form.rightImg.replace(/http:\/\//g, 'https://')" />
           </template>
@@ -57,6 +58,8 @@
 
 <script>
 import {uploadImage} from "@/api/mine";
+import { ImagePreview } from 'vant';
+
 /*let baseUrl=''
 if (window.location.href.includes('www.sinoassist.com')) {
   baseUrl = 'https://www.sinoassist.com'
@@ -101,21 +104,56 @@ export default {
     mounted() {
       setTimeout(()=>{
         this.form.isInsure=this.inSure
+        // this.form.isInsure=1
       },1500)
     },
     methods: {
-      async afterRead(file,type,index){ // 支持多文件上传
+      clickUpload(event,type){
+        if (!this.showFun()) {
+          let url=[]
+          if (type=='leftImg'){
+            url=[this.leftUrl?.replace(/http:\/\//g, 'https://')]
+          }else if(type=='rightImg'){
+            url= [this.rightUrl?.replace(/http:\/\//g, 'https://')]
+          }else{
+            url=this.urlList?.map(item => item?.replace(/http:\/\//g, 'https://'))
+          }
+           ImagePreview({
+            images: url,
+            closeable: true,
+            showIndex:false
+          });
+          console.log(url)
+          event.stopPropagation(); // 阻止事件冒泡
+          event.preventDefault(); // 阻止默认上传行为（如果支持）
+          return false; // 阻止后续逻辑
+        }
+        // 默认行为（允许上传）
+      },
+      async afterRead(file,type){ // 支持多文件上传
         const formData = new FormData();
         formData.append("file" , file.file);
         let res = await uploadImage(formData)
-        if (type=='urlList' && (index==0 || index)){
+        if (type=='urlList'){
-          this.$set( this.form.urlList,index,res.data)
+          console.log("this.urlList",this.urlList?.length)
-        }else if(type=='urlList'){
+          if(this.urlList?.length==3){
-          this.form[type].push(...this.urlList,res.data)
+            const updatedList = [...this.urlList];
+            updatedList[2] = res?.data?.replace(/http:\/\//g, 'https://');
+            this.form.urlList = updatedList;
+          }else{
+            this.form.urlList=[res?.data?.replace(/http:\/\//g, 'https://'),...this.urlList]
+          }
+          const uniqueUrls =  this.form.urlList?.reduce((acc, url) => {
+            if (!acc.includes(url)) {
+              acc.push(url);
+            }
+            return acc;
+          }, []);
+          this.$emit(type, uniqueUrls)
         }else{
           this.form[type] = res.data
+          this.$emit(type, this.form[type])
         }
-        this.$emit(type, this.form[type])
       },
       radioChange(val){
         this.$emit('insureHandle',val)
@@ -148,10 +186,23 @@ export default {
       width: 100% !important;
       display: flex;
       flex-wrap: wrap;
+     /* ::v-deep .van-uploader__preview{
+        width: 100% !important;
+      }*/
     }
     .uploaded-item,.tipWrap{
       width: calc(50% - 3px);
     }
+    ::v-deep .van-uploader__preview{
+      width: calc(50% - 3px);
+      margin: 0 0 8px 0;
+      .van-uploader__preview-image{
+        width: 100% !important;
+      }
+    }
+    ::v-deep .van-uploader__preview:nth-child(odd){
+     margin-right: 5px !important;
+    }
   }
   .photo_wrap {
     padding: 20px 12px 22px 17px;
@@ -243,3 +294,8 @@ export default {
     }
   }
 </style>
+<style>
+.van-image-preview{
+  z-index: 9999999999 !important;
+}
+</style>