介绍信附件改为图片显示

src/views/menu/visitCheck/detail.vue

@@ -20,15 +20,20 @@
             <van-cell title="介绍信编号" v-if="visitInfo.letterNo"  :value="visitInfo.letterNo"></van-cell>
             <van-cell title="开具日期" v-if="visitInfo.startTimeStr"  :value="visitInfo.startTimeStr"></van-cell>
             <van-cell title="有效天数" v-if="visitInfo.effectiveDays"  :value="`${visitInfo.effectiveDays}天`"></van-cell>
-            <van-cell title="介绍信附件"  v-if="visitInfo.letterFile && visitInfo.letterFile.length > 0">
-              <template #right-icon>
-                <div class="file-box">
-                  <p class="van-ellipsis" v-for="(v, i) in visitInfo.letterFile"
-                     :key="v.url"
-                     @click="previewFile(v)">{{v.name}}</p>
+
+            <div class="upload-box" v-if="visitInfo.letterFile && visitInfo.letterFile.length > 0">
+              <span>介绍信附件</span>
+              <van-cell >
+                <div
+                  class="nfc-img van-hairline--surround"
+                  v-for="(v, i) in visitInfo.letterFile"
+                  :key="v"
+                  @click="preView(visitInfo.letterFile)">
+                  <img :src="imgUrl(v)" alt="" />
                 </div>
-              </template>
-            </van-cell>
+              </van-cell>
+            </div>
+
             <van-cell v-if="visitInfo.letterDescription" title="备注信息" :value="visitInfo.letterDescription"></van-cell>
             <!-- <div class="upload-box" v-if="visitInfo.approveSignImg">
               <span>审批签名</span>
@@ -242,7 +247,8 @@ export default {
         this.approveRemark = this.visitInfo.approveRemark;
         if(res.data.letterFile){
           let imgArr = res.data.letterFile.map(v=>{
-            return JSON.parse(v)
+            let data = JSON.parse(v);
+            return data.imgPath;
           })
           this.visitInfo.letterFile = imgArr;
         }

src/views/menu/visitRecord/detail.vue

@@ -28,15 +28,19 @@
               </van-cell>
             </div>
 
-            <van-cell title="介绍信附件"  v-if="selectedUser.letterFile && selectedUser.letterFile.length > 0">
-              <template #right-icon>
-                <div class="file-box">
-                  <p class="van-ellipsis" v-for="(v, i) in selectedUser.letterFile"
-                     :key="v.url"
-                     @click="previewFile(v)">{{v.name}}</p>
+            <div class="upload-box" v-if="selectedUser.letterFile && selectedUser.letterFile.length > 0">
+              <span>介绍信附件</span>
+              <van-cell >
+                <div
+                  class="nfc-img van-hairline--surround"
+                  v-for="(v, i) in selectedUser.letterFile"
+                  :key="v"
+                  @click="preView(selectedUser.letterFile)">
+                  <img :src="imgUrl(v)" alt="" />
                 </div>
-              </template>
-            </van-cell>
+              </van-cell>
+            </div>
+
             <div class="upload-box" v-if="selectedUser.checkImage && selectedUser.checkImage.length > 0">
               <span>核验结果</span>
               <van-cell >
@@ -277,7 +281,8 @@ export default {
         let letterFile = [];
         if(res.data.letterFile && res.data.letterFile.length > 0){
             letterFile = res.data.letterFile.map(v=>{
-            return JSON.parse(v)
+              let data = JSON.parse(v);
+            return data.imgPath;
           })
         }
         this.selectedUser = res.data;
@@ -286,7 +291,7 @@ export default {
         this.selectedUser.letterFile = letterFile;
         //设置最小时间
         let minDate = this.selectedUser.arrivalTime;
-        
+
         // this.minDate = compatibleWithIOSStringToDate(this.selectedUser.arrivalTime)
         if(minDate)
         {
@@ -294,13 +299,13 @@ export default {
           // this.minDate = new Date(minDate)
           // // 苹果手机下 某些版本 new Date(minDate) 对格式有严格要求
           // if(!this.minDate){
-          //   let objStart=minDate.replace(/-/g,"/");            
+          //   let objStart=minDate.replace(/-/g,"/");
           //   this.minDate = Date.parse(new Date(objStart));
           //   console.log("111",this.minDate)
           // }
-          
-          // let objStart=minDate.replace(/-/g,"/");     
-          // console.log("111",objStart,new Date(minDate))       
+
+          // let objStart=minDate.replace(/-/g,"/");
+          // console.log("111",objStart,new Date(minDate))
           // this.minDate = Date.parse(new Date(objStart));
           // console.log("1112",this.minDate)
         }

src/views/menu/visitRegister/detail.vue

@@ -19,15 +19,20 @@
             <van-cell title="介绍信编号" v-if="visitInfo.letterNo"  :value="visitInfo.letterNo"></van-cell>
             <van-cell title="开具日期" v-if="visitInfo.startTimeStr"  :value="visitInfo.startTimeStr"></van-cell>
             <van-cell title="有效天数" v-if="visitInfo.effectiveDays"  :value="`${visitInfo.effectiveDays}天`"></van-cell>
-            <van-cell title="介绍信附件"  v-if="visitInfo.letterFile && visitInfo.letterFile.length > 0">
-              <template #right-icon>
-                <div class="file-box">
-                  <p class="van-ellipsis" v-for="(v, i) in visitInfo.letterFile"
-                     :key="v.url"
-                     @click="previewFile(v)">{{v.name}}</p>
+
+            <div class="upload-box" v-if="visitInfo.letterFile && visitInfo.letterFile.length > 0">
+              <span>介绍信附件</span>
+              <van-cell >
+                <div
+                  class="nfc-img van-hairline--surround"
+                  v-for="(v, i) in visitInfo.letterFile"
+                  :key="v"
+                  @click="preView(visitInfo.letterFile)">
+                  <img :src="imgUrl(v)" alt="" />
                 </div>
-              </template>
-            </van-cell>
+              </van-cell>
+            </div>
+
             <van-cell v-if="visitInfo.description" title="备注信息" :value="visitInfo.description"></van-cell>
           </div>
         </van-panel>
@@ -61,8 +66,9 @@ import {mapGetters} from "vuex";
 import {imgUrl} from "@/utils";
 import { ImagePreview } from 'vant'
 import {visitDetails} from './api'
+import imgCom from "@/components/imgCom/index.vue";
 export default {
-  components: {Uploader, DateCell},
+  components: {imgCom, Uploader, DateCell},
   data(){
     return {
       visitId:null,
@@ -105,7 +111,8 @@ export default {
         // this.approveRemark = this.visitInfo.approveLog.approveRemark;
         if(res.data.letterFile){
           let imgArr = res.data.letterFile.map(v=>{
-            return JSON.parse(v)
+            let data = JSON.parse(v);
+            return data.imgPath;
           })
           this.visitInfo.letterFile = imgArr;
         }
@@ -269,4 +276,26 @@ export default {
     height: 30px;
   }
 }
+.upload-box{
+  padding: 20px 30px;
+  display: flex;
+  >span{
+    display: inline-block;
+    height: 160px;
+    width: 200px;
+    line-height: 160px;
+    font-size: 28px;
+    color:#999;
+    >i{
+      font-style: normal;
+      color: #ee0a24;
+    }
+  }
+  .required::before{
+    content: '*';
+    color: #ee0a24;
+    position: absolute;
+    left: 14px;
+  }
+}
 </style>