财务订单审核-详情页影像资料去掉分类，显示全部图片

src/views/finance/modules/auditDetail.vue

@@ -261,12 +261,12 @@
           <el-col :span="6" class="carMsgItem">
             <span class="label">使用性质</span>
             <span class="value">{{ dictChange(optionObj['car_nature_code'], detailData?.carInfoVo?.carNatureCode)
-              }}</span>
+            }}</span>
           </el-col>
           <el-col :span="6" class="carMsgItem">
             <span class="label">车辆用途</span>
             <span class="value">{{ dictChange(optionObj['vehicle_use_code'], detailData?.carInfoVo?.vehicleUseCode)
-              }}</span>
+            }}</span>
           </el-col>
           <el-col :span="6" class="carMsgItem">
             <span class="label">车辆种类</span>
@@ -276,12 +276,12 @@
           <el-col :span="6" class="carMsgItem">
             <span class="label">车辆类型</span>
             <span class="value">{{ dictChange(optionObj['car_type_code'], detailData?.carInfoVo?.carTypeCode)
-              }}</span>
+            }}</span>
           </el-col>
           <el-col :span="6" class="carMsgItem">
             <span class="label">能源种类</span>
             <span class="value">{{ dictChange(optionObj['energy_type_code'], detailData?.carInfoVo?.energyTypeCode)
-              }}</span>
+            }}</span>
           </el-col>
           <el-col :span="6" class="carMsgItem">
             <span class="label">注册日期</span>
@@ -464,7 +464,7 @@
           <div class="taxList">
             <span class="taxItem" :class="{ 'active': item.bool }" v-for="(item, index) in tbList" :key="index">{{
               item.name
-              }}</span>
+            }}</span>
           </div>
         </div>
         <el-row :gutter="20" v-if="!tbList[0].bool">
@@ -528,7 +528,7 @@
           <div class="taxList">
             <span class="taxItem" :class="{ 'active': item.bool }" v-for="(item, index) in bbList" :key="index">{{
               item.name
-              }}</span>
+            }}</span>
           </div>
         </div>
         <el-row :gutter="20" v-if="!bbList[0].bool && !bbList[1].bool">
@@ -616,7 +616,7 @@
               <th colspan="2">
                 <div>跟单费用</div>
               </th>
-                <th colspan="2">
+              <th colspan="2">
                 <div>入口费用</div>
               </th>
               <th colspan="2">
@@ -664,7 +664,7 @@
               <th>
                 <div>￥{{ detailData?.insFeeOrders?.jqFollowPremium }}</div>
               </th>
-                <th>
+              <th>
                 <el-input-number v-model="detailData.costRatio.jqInletRatio" controls-position="right" v-if="costShow"
                   style="width: 80px" :min="0" :max="100" />
                 <div v-else>{{ detailData?.costRatio?.jqInletRatio }}%</div>
@@ -740,7 +740,7 @@
               <th>
                 <div>￥{{ detailData?.insFeeOrders?.syFollowPremium }}</div>
               </th>
-               <th>
+              <th>
                 <el-input-number v-model="detailData.costRatio.syInletRatio" controls-position="right" v-if="costShow"
                   style="width: 80px" :min="0" :max="100" />
                 <div v-else>{{ detailData?.costRatio?.syInletRatio }}%</div>
@@ -816,7 +816,7 @@
               <th>
                 <div>￥{{ detailData?.insFeeOrders?.jyFollowPremium }}</div>
               </th>
-                <th>
+              <th>
                 <el-input-number v-model="detailData.costRatio.jyInletRatio" controls-position="right" v-if="costShow"
                   style="width: 80px" :min="0" :max="100" />
                 <div v-else>{{ detailData?.costRatio?.jyInletRatio }}%</div>
@@ -881,7 +881,7 @@
                   Number(detailData?.insFeeOrders?.syFollowPremium) +
                   Number(detailData?.insFeeOrders?.jyFollowPremium)).toFixed(5) }}</div>
               </th>
-                 <th colspan="2">
+              <th colspan="2">
                 <div>小计： ￥{{ (Number(detailData?.insFeeOrders?.jqReceivablePremium) +
                   Number(detailData?.insFeeOrders?.syReceivablePremium) +
                   Number(detailData?.insFeeOrders?.jyReceivablePremium)).toFixed(5) }}</div>
@@ -1008,38 +1008,23 @@
       </div>
       <div id="fileMsg" class="fileMsg">
         <div class="title" id="fileMsg" :ref="(el) => setSectionRef(el, 6)">影像资料</div>
-        <div class="information">
-          <el-tabs v-model="activeName" tab-position="left" class="demo-tabs">
-            <el-tab-pane v-for="(item, index) in infoList" :label="item.label" :name="item.name">
-              <el-row :gutter="10" class="list">
-                <el-col :span="4" class="list-item" v-for="sub in item.list">
-                  <img :src="sub.previewUrl" @click="viewImage(sub)" />
-                  <div class="tips">{{ sub.imageType === 'C01' ? '行驶证主页' : sub.imageType === 'D01' ? '行驶证副页' :
-                    sub.imageType
-                      ===
-                      'TAR05' ? '机动车辆登记证书' : sub.imageType === 'XC00' ? '新车合格证' : sub.imageType === 'GC00' ? '购车发票' :
-                        sub.imageType
-                          ===
-                          'C02' ? '车主身份证（正面）' : sub.imageType === 'D02' ? '车主身份证（反面）' : sub.imageType === 'Y02' ? '车主营业执照' :
-                            sub.imageType
-                              ===
-                              'C03' ? '投保人身份证（正面）' : sub.imageType === 'D03' ? '投保人身份证（反面） ' : sub.imageType ===
-                                'Y03' ? '投保人营业执照' : sub.imageType
-                                  === 'C04' ? '被保人身份证（正面）' : sub.imageType === 'D04' ? '被保人身份证（反面）' : sub.imageType ===
-                                    'Y04' ? '被保人营业执照' : sub.imageType === 'GX00' ? '关系证明' : sub.imageType === 'C0500' ? '验车照（车架）' :
-                                      sub.imageType
-                                        ===
-                                        'C0501' ? '验车照（后左）' : sub.imageType === 'C0502' ? '验车照（后右）' : sub.imageType ===
-                                          'C0503' ? '验车照（前右）' : sub.imageType
-                                            === 'C0504' ? '验车照（前左）' : sub.imageType === 'C0506' ? '验车照（正前）' : sub.imageType ===
-                                              'C0507' ? '验车照（正后）' : sub.imageType === 'C0505' ? '验车照（人车合影）' : sub.imageType ===
-                                                'C0508' ? '验车照（地标合影）' : sub.imageType === 'C0509' ? '验车照（工作台）' : sub.imageType ===
-                                                  'C0510' ? '验车照（天窗）' : sub.imageType
-                                                    === 'LAST_INSURANCE_POLICY' ? '上年商业险保单' : '--' }}</div>
-                </el-col>
-              </el-row>
-            </el-tab-pane>
-          </el-tabs>
+        <div class="mb-[16px]">
+          <div class="imageList">
+            <div class="imageItem" v-for="item in images" :key="item.id">
+              <div class="imageBox" @click="viewImage(item)">
+                <img :src="item.downloadUrl">
+                <div class="btn">
+                  <span class="btnItem" >
+                    <el-icon>
+                      <ZoomIn />
+                    </el-icon>
+                    <span>点击图片放大</span>
+                  </span>
+                </div>
+              </div>
+              <div class="m-[10px] text-[14px] text-[#666666]">{{ returnName(item.imageType) }}</div>
+            </div>
+          </div>
         </div>
         <div class="title">电子保单</div>
         <div class="fileList">
@@ -1082,7 +1067,7 @@
           <el-table-column prop="packagePrice" label="总价" align="center">
             <template #default="scope">
               <div>{{ scope.row.packagePrice * scope.row.rightsCount || scope.row.contractRate * scope.row.rightsCount
-              }}
+                }}
               </div>
             </template>
           </el-table-column>
@@ -1169,6 +1154,116 @@ const getAssetsFile = (url: string) => {
 let handleSaveCostloading = ref(false)
 // 页签
 let tipsIndex = ref('TBMsg')
+// 影像资料
+let images = ref([])
+
+let list = ref([
+  {
+    name: '行驶证主页',
+    type: 'C01'
+  }, {
+    name: '行驶证副页',
+    type: 'D01'
+  }, {
+    name: '机动车辆登记证书',
+    type: 'TAR05'
+  }, {
+    name: '新车合格证',
+    type: 'XC00'
+  }, {
+    name: '购车发票',
+    type: 'GC00'
+  }, {
+    name: '上年商业险保单',
+    type: 'LAST_INSURANCE_POLICY'
+  }, {
+    name: '车主身份证（正面）',
+    type: 'C02'
+  }, {
+    name: '车主身份证（反面）',
+    type: 'D02'
+  }, {
+    name: '车主营业执照',
+    type: 'Y02'
+  }, {
+    name: '投保人身份证（正面）',
+    type: 'C03'
+  }, {
+    name: '投保人身份证（反面）',
+    type: 'D03'
+  }, {
+    name: '投保人营业执照',
+    type: 'Y03'
+  }, {
+    name: '被保人身份证（正面）',
+    type: 'C04'
+  }, {
+    name: '被保人身份证（反面）',
+    type: 'D04'
+  }, {
+    name: '被保人营业执照',
+    type: 'Y04'
+  }, {
+    name: '关系证明',
+    type: 'GX00'
+  }, {
+    name: '验车照（车架）',
+    type: 'C0500'
+  }, {
+    name: '验车照（后左）',
+    type: 'C0501'
+  }, {
+    name: '验车照（后右）',
+    type: 'C0502'
+  }, {
+    name: '验车照（前右）',
+    type: 'C0503'
+  }, {
+    name: '验车照（前左）',
+    type: 'C0504'
+  }, {
+    name: '验车照（正前）',
+    type: 'C0506'
+  }, {
+    name: '验车照（正后）',
+    type: 'C0507'
+  }, {
+    name: '验车照（人车合影）',
+    type: 'C0505'
+  }, {
+    name: '验车照（地标合影）',
+    type: 'C0508'
+  }, {
+    name: '验车照（工作台）',
+    type: 'C0509'
+  }, {
+    name: '验车照（天窗）',
+    type: 'C0510'
+  }
+])
+// 获取影像资料名称
+const returnName = (type) => {
+  let obj = list.value.find(a => a.type === type)
+  return obj?.name || '--'
+}
+//影像接口
+const imageEcho = (item: any) => {
+  api.insurancePolicyApi.getImage(item).then((res: any) => {
+    if (res.code == 200) {
+      console.log(res)
+      images.value = res.data.images.map((val: any) => {
+        return {
+          ...val,
+        }
+      })
+    } else {
+      ElMessage({
+        message: res.msg,
+        type: 'error'
+      })
+    }
+  })
+}
 let tipsList = ref([
   {
     name: '投保信息',
@@ -1228,7 +1323,7 @@ let optionObj = ref({
   car_type_code: [], // 车辆类型
 })
 const viewImage = (item) => {
-  imageUrl.value = item.previewUrl
+  imageUrl.value = item.downloadUrl
   imageShow.value = true
 }
 const initOption = () => {
@@ -1489,14 +1584,7 @@ const initDetail = () => {
         ...(res.data.insOrderRightsInfoVo?.insOrderRightsPackageList || [])
       ]
       vehicleAndVesselTaxVo.value = res.data?.vehicleAndVesselTaxVo || {};
-      if (res.data?.imageVoList?.length) {
-        for (let i = 0; i < infoList.value.length; i++) {
-          const element = infoList.value[i];
-          const arr = res.data?.imageVoList.filter(v => element.typeList.includes(v.imageCode))
-          element.list = arr.map(v => ({ previewUrl: v.imageBase64List[0].imageBase64Str, imageType: v.imageCode }))
-        }
-      }
-      nextTick(() => jumpFn());
+      imageEcho(res.data?.order.quoteNo)
     }
   }).catch((err) => {
     console.log("获取详情失败", err);
@@ -1958,13 +2046,12 @@ onUnmounted(() => {
 
           .imageBox {
             width: 210px;
-            height: 130px;
             position: relative;
 
             img {
               display: block;
               width: 100%;
-              height: 100%;
+              height: 130px;
             }
 
             .btn {
@@ -1981,7 +2068,7 @@ onUnmounted(() => {
               justify-content: space-between;
 
               .btnItem {
-                width: 49.5%;
+                width: 100%;
                 display: flex;
                 justify-content: center;
                 align-items: center;
@@ -1994,9 +2081,6 @@ onUnmounted(() => {
                   margin-left: 4px;
                 }
 
-                &:first-child {
-                  border-right: 1px solid #FFFFFF;
-                }
               }
             }
           }
@@ -2086,42 +2170,8 @@ onUnmounted(() => {
       }
 
       .information {
-        height: 280px;
         margin-bottom: 16px;
 
-        .list {
-          height: 290px;
-          overflow-y: auto;
-
-          .list-item {
-            height: calc(50% - 12px);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            position: relative;
-            margin: 0 0 12px;
-            border-radius: 0 0 6px 6px;
-
-            img {
-              width: 100%;
-              height: 130px;
-              border-radius: 0 0 6px 6px;
-            }
-
-            .tips {
-              position: absolute;
-              left: 5px;
-              bottom: 0;
-              width: calc(100% - 10px);
-              height: 24px;
-              background: url("@/assets/images/additional/tips.png") no-repeat;
-              background-size: 100% 100%;
-              text-align: center;
-              line-height: 24px;
-              color: #FFFFFF;
-            }
-          }
-        }
       }
 
       .fileList {