尝试修复

src/project/qujing/AppPhotoReport/PhotoDetail.vue

@@ -13,47 +13,47 @@
         <div class="flex wrap">
           <image class="fill imageItem" v-for="(item, index) in info.files" @click="preview(item.url)" :key="index" :src="item.url"/>
         </div>
-        <span v-if="!info.files.length">暂无照片</span>
+        <span v-if="!hasFiles(info.files)">暂无照片</span>
       </AiItem>
     </AiGroup>
-    <u-gap height="24" v-if="result.doExplain" />
+    <u-gap height="24" v-if="result.doExplain"/>
     <AiGroup title="处理详情" description noBorder labelColor="#999" v-if="result.doExplain">
       <AiItem label="处理结果" top-label :value="result.doExplain"/>
       <AiItem label="照片" class="not-line">
         <div class="flex wrap">
           <image class="fill imageItem" v-for="(item, index) in result.files" @click="preview(item.url)" :key="index" :src="item.url"/>
         </div>
-        <span v-if="!result.files.length">暂无照片</span>
+        <span v-if="!hasFiles(result.files)">暂无照片</span>
       </AiItem>
     </AiGroup>
     <u-gap height="24" v-if="info.judgeName"/>
     <AiGroup title="研判信息" description noBorder labelColor="#999" v-if="info.judgeName">
-      <AiItem label="事件研判"><span class="risk-level" :class="`level`+info.judgeRiskLevel">{{ $dict.getLabel('qujingRiskLevel', info.judgeRiskLevel) }}</span></AiItem>
+      <AiItem label="事件研判">
+        <span class="risk-level" :class="`level` + info.judgeRiskLevel">{{ $dict.getLabel("qujingRiskLevel", info.judgeRiskLevel) }}</span>
+      </AiItem>
       <AiItem label="当事人姓名" :value="info.judgeName"/>
       <AiItem label="性别" :value="$dict.getLabel('sex', info.judgeSex)"/>
       <AiItem label="联系电话" :value="info.judgePhone"/>
       <AiItem label="家庭住址" :value="info.judgeAddress"/>
       <AiItem label="排查内容" class="not-line">
-        <span v-for="(item, index) in info.judgeRiskList" :key="index">
-          <span v-if="index > 0">,</span>{{ $dict.getLabel('qujingRisk', item) }}
-        </span>
+        <span v-for="(item, index) in info.judgeRiskList" :key="index"> <span v-if="index > 0">,</span>{{ $dict.getLabel("qujingRisk", item) }} </span>
       </AiItem>
     </AiGroup>
     <u-gap height="24" v-if="info.mediateAreaName"/>
     <AiGroup title="调解信息" description noBorder labelColor="#999" v-if="info.mediateAreaName">
-      <AiItem label="调解主体" :value="info.mediateAreaName" />
+      <AiItem label="调解主体" :value="info.mediateAreaName"/>
       <AiItem label="涉及金额" :value="info.mediateAmount"/>
       <AiItem label="调解员" :value="info.mediatePerson"/>
       <AiItem label="参加人" :value="info.mediateMember || '无'"/>
       <AiItem label="调解时间" :value="info.mediateDate"/>
       <AiItem label="调处思路、措施及主要过程" :value="info.mediateInfo"/>
-      <AiItem label="调处结果" class="not-line" value="调解成功" />
+      <AiItem label="调处结果" class="not-line" value="调解成功"/>
     </AiGroup>
-    <u-gap height="24" />
-    <u-tabs :list="evaluation && evaluation.id ? [{name:'办理进度'},{name:'我的评价'}] : [{name:'办理进度'}] " :current="currentTab" @change="v=>currentTab=v"/>
-    <u-gap height="24" bg-color="#fff" />
-    <AiGroup noBorder v-if="currentTab=='0'">
-      <AiStep v-for="(item,i) in process" :key="item.id" :index="i">
+    <u-gap height="24"/>
+    <u-tabs :list="tabs" :current="currentTab" @change="v => (currentTab = v)"/>
+    <u-gap height="24" bg-color="#fff"/>
+    <AiGroup noBorder v-if="currentTab == '0'">
+      <AiStep v-for="(item, i) in process" :key="item.id" :index="i">
         <div class="flex start">
           <div class="fill stepTitle" v-text="item.systemExplain"/>
           <div class="color-999 mar-r32 stepTime" v-text="item.doTime"/>
@@ -62,7 +62,7 @@
         <u-gap height="48"/>
       </AiStep>
     </AiGroup>
-    <AiEvaluation v-if="currentTab=='1'" :bid="info.id" type="show"/>
+    <AiEvaluation v-if="currentTab == '1'" :bid="info.id" type="show"/>
     <AiEvaluation v-if="info.eventStatus == 3" v-model="evaluation" class="fixed-bottom bg-fff" :bid="info.id">
       <div class="bottomBtn">去评价</div>
     </AiEvaluation>
@@ -77,67 +77,82 @@ export default {
       info: {},
       result: {},
       currentTab: 0,
-      evaluation: {}
-    }
+      evaluation: {},
+    };
   },
   computed: {
     detailStatus: v => {
-      const status = !v.evaluation.id ? v.info.eventStatus : 'evaluation'
+      const status = !v.evaluation.id ? v.info.eventStatus : "evaluation";
       return {
-        cls: 'status-' + status,
-        label: !v.evaluation.id ? v.$dict.getLabel('qujingEventStatus', v.info.eventStatus) : "已评价"
-      }
+        cls: "status-" + status,
+        label: !v.evaluation.id ? v.$dict.getLabel("qujingEventStatus", v.info.eventStatus) : "已评价",
+      };
     },
     process() {
-      const list = this.info.processList
+      const list = this.info.processList;
       if (this.evaluation.id) {
-        const {id, createUserName, score, createTime: doTime, rateText: doExplain} = this.evaluation
+        const {id, createUserName, score, createTime: doTime, rateText: doExplain} = this.evaluation;
         list.splice(0, 0, {
-          id, doTime, doExplain,
-          systemExplain: `${createUserName}完成评价 (${score}星评价)`
-        })
+          id,
+          doTime,
+          doExplain,
+          systemExplain: `${createUserName}完成评价 (${score}星评价)`,
+        });
       }
-      return list
-    }
+      return list;
+    },
+    tabs: v => {
+      const tabs = [{name: "办理进度"}];
+      if (!!v.evaluation?.id) {
+        tabs.push({name: "我的评价"});
+      }
+      return tabs;
+    },
   },
   onShow() {
-    this.getInfo()
+    this.getInfo();
   },
   onLoad(query) {
-    this.id = query.id
-    this.getInfo()
-    this.$dict.load(['qujingEventStatus', 'qujingDoStatus', 'qujingEventType', 'sex', 'qujingRisk', 'qujingRiskLevel'])
+    this.id = query.id;
+    this.getInfo();
+    this.$dict.load(["qujingEventStatus", "qujingDoStatus", "qujingEventType", "sex", "qujingRisk", "qujingRiskLevel"]);
   },
   methods: {
     getInfo() {
-      this.$loading()
-      this.$instance.post(`/app/appclapeventinfoqujing/queryDetailById?id=${this.id}`).then(res => {
-        if (res?.data) {
-          this.info = res.data
-          if (['3', '4'].includes(res.data.eventStatus) && res.data.groupName != '矛盾调解') {
-            this.result = res.data.processList[0]
-          }
-          if(this.info.judgeRisk) {
-            this.info.judgeRiskList = this.info.judgeRisk.split(',')
-          }
-        }
-      }).finally(() => this.$hideLoading())
+      this.$loading();
+      this.$instance
+          .post(`/app/appclapeventinfoqujing/queryDetailById?id=${this.id}`)
+          .then(res => {
+            if (res?.data) {
+              this.info = res.data;
+              if (["3", "4"].includes(res.data.eventStatus) && res.data.groupName != "矛盾调解") {
+                this.result = res.data.processList[0];
+              }
+              if (this.info.judgeRisk) {
+                this.info.judgeRiskList = this.info.judgeRisk.split(",");
+              }
+            }
+          })
+          .finally(() => this.$hideLoading());
     },
     previewResult(url) {
       uni.previewImage({
         urls: this.result.files.map(v => v.url),
-        current: url
-      })
+        current: url,
+      });
     },
 
     preview(url) {
       uni.previewImage({
         urls: this.info.files.map(v => v.url),
-        current: url
-      })
-    }
-  }
-}
+        current: url,
+      });
+    },
+    hasFiles(files) {
+      return files?.length > 0;
+    },
+  },
+};
 </script>
 
 <style lang="scss">
@@ -195,7 +210,7 @@ export default {
       background: #ff883c;
     }
 
-    &.status-1, &.status-2, &.status-evaluation{
+    &.status-1, &.status-2, &.status-evaluation {
       background: #1aaaff;
     }
 
@@ -219,28 +234,34 @@ export default {
       margin-right: 0;
     }
   }
+
   .not-line {
     .AiItem {
       .normal {
-        border: none!important;
-        min-height: 112px!important;
+        border: none !important;
+        min-height: 112px !important;
       }
     }
   }
+
   ::v-deep .AiGroup {
     .groupHeader {
-      padding-top: 16px!important;
+      padding-top: 16px !important;
     }
   }
+
   .level1 {
     color: #3D88F5;
   }
+
   .level2 {
     color: #52C75B;
   }
+
   .level3 {
     color: #FF883C;
   }
+
   .level4 {
     color: #FF3C3C;
   }