随手拍改造完成

src/mods/conv/AppPhotoReport/AppPhotoReport.vue

@@ -1,27 +1,34 @@
 <template>
   <div class="photo-list">
     <div class="photo-list__wrapper">
-      <div class="photo-item" v-for="(item, index) in list" :key="index" hover-class="bg-hover" @click="$linkTo('./PhotoDetail?id=' + item.id)">
-        <div class="photo-item__top">
-          <h2>{{ item.content }}</h2>
-          <div class="photo-item__top--info">
-            <div class="photo-item__top--info-item">
-              <label>事件类型</label>
-              <span>{{ item.groupName }}</span>
-            </div>
-            <div class="photo-item__top--info-item">
-              <label>所属网格</label>
-              <span>{{ item.girdName }}</span>
+
+      <div class="photo-item" v-for="(item, index) in list" :key="index">
+        <u-swipe-action @content-click="$linkTo('./PhotoDetail?id=' + item.id)" :index="item.id"
+                        :options="itemOptions" @click="handleDelete">
+          <div class="photo-item__top">
+            <h2>{{ item.content }}</h2>
+            <div class="photo-item__top--info">
+              <div class="photo-item__top--info-item">
+                <label>事件类型</label>
+                <span>{{ item.groupName }}</span>
+              </div>
+              <div class="photo-item__top--info-item">
+                <label>所属网格</label>
+                <span>{{ item.girdName }}</span>
+              </div>
             </div>
           </div>
-        </div>
-        <div class="photo-item__bottom flex">
-          <div class="flex fill">
-            <i :class="'status-' + item.eventStatus"></i>
-            <span :class="'status-' + item.eventStatus">{{ item.statusName }}</span>
+          <div class="photo-item__bottom flex">
+            <div class="flex fill">
+              <i :class="'status-' + item.eventStatus"></i>
+              <span :class="'status-' + item.eventStatus">{{ item.statusName }}</span>
+            </div>
+            <AiEvaluation :bid="item.id" v-if="item.eventStatus>1">
+              <div class="itemBtn">去评价</div>
+              <div slot="finish" class="finish">已评价</div>
+            </AiEvaluation>
           </div>
-          <div class="color-red" @click.stop="handleDelete(item.id)">删除</div>
-        </div>
+        </u-swipe-action>
       </div>
       <AiEmpty v-if="!list.length"/>
     </div>
@@ -43,7 +50,10 @@ export default {
       pageShow: false,
       current: 1,
       total: 0,
-      isMore: false
+      isMore: false,
+      itemOptions: [
+        {text: '删除', style: {backgroundColor: '#f46'}}
+      ]
     }
   },
 
@@ -140,10 +150,11 @@ export default {
 
   .photo-item {
     width: 686px;
-    margin: 0 auto 24px;
+    margin: 0 32px 24px;
     background: #FFFFFF;
     box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
     border-radius: 16px;
+    overflow: hidden;
 
     .photo-item__top {
       padding: 32px;
@@ -198,6 +209,20 @@ export default {
         background: #FF883C;
       }
 
+      .itemBtn {
+        border: 1px solid #4181FF;
+        border-radius: 8px;
+        color: #4181FF;
+        padding: 8px 22px;
+
+
+      }
+
+      .finish {
+        color: #42D784;
+        font-size: 28px;
+      }
+
       span {
         color: #FF883C;
         font-size: 28px;

src/mods/conv/AppPhotoReport/PhotoDetail.vue

@@ -1,64 +1,89 @@
 <template>
   <div class="photo-detail" v-if="pageShow">
-    <h2>{{ info.content }}</h2>
-    <div class="status-name" :class="'status-' + info.eventStatus">
-      {{ $dict.getLabel('clapEventStatus', info.eventStatus) }}
-    </div>
-    <div class="photo-detail__info">
-      <div class="photo-detail__item">
-        <i>事件类型</i>
-        <span>{{ info.groupName }}</span>
-      </div>
-      <div class="photo-detail__item">
-        <i>所属网格</i>
-        <span>{{ info.girdName }}</span>
-      </div>
-      <div class="photo-detail__item">
-        <i>上报时间</i>
-        <span>{{ info.createTime }}</span>
-      </div>
-      <div class="photo-detail__img" style="border: none;">
-        <i>照片</i>
-        <div class="photo-detail__img--imgs">
-          <image v-for="(item, index) in info.files" @click="preview(item.url)" :key="index" :src="item.url"/>
+    <AiGroup noBorder>
+      <h2>{{ info.content }}</h2>
+      <div class="status-name" :class="detailStatus.cls" v-text="detailStatus.label"/>
+    </AiGroup>
+    <AiGroup description noBorder labelColor="#999">
+      <AiItem label="事件类型" :value="info.groupName"/>
+      <AiItem label="所属网格" :value="info.girdName"/>
+      <AiItem label="上报时间" :value="info.createTime"/>
+      <AiItem label="照片" top-label>
+        <image v-for="(item, index) in info.files" @click="preview(item.url)" :key="index" :src="item.url"/>
+        <span v-if="!info.files.length">暂无照片</span>
+      </AiItem>
+    </AiGroup>
+    <u-gap height="24"/>
+    <AiGroup title="处理详情" v-if="info.eventStatus > 1" description noBorder labelColor="#999">
+      <AiItem label="处理结果" top-label :value="result.doExplain"/>
+      <AiItem label="照片" top-label>
+        <image v-for="(item, index) in result.files" @click="preview(item.url)" :key="index" :src="item.url"/>
+        <span v-if="!result.files.length">暂无照片</span>
+      </AiItem>
+    </AiGroup>
+    <u-gap height="24"/>
+    <u-tabs :list="[{name:'办理进度'},{name:'我的评价'}]" :current="currentTab" @change="v=>currentTab=v"/>
+    <u-gap height="24"/>
+    <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" v-text="item.doTime"/>
         </div>
-        <span v-if="info.files && !info.files.length">暂无照片</span>
-      </div>
-    </div>
-    <div class="result" v-if="info.eventStatus > 1">
-      <h2>处理详情</h2>
-      <div class="result-info">
-        <h2>处理结果</h2>
-        <p>{{ result.doExplain || '-' }}</p>
-      </div>
-      <div class="photo-detail__img" v-if="result.files.length">
-        <i>照片</i>
-        <div class="photo-detail__img--imgs">
-          <image @click="previewResult(item.url)" v-for="(item, index) in result.files" :key="index" :src="item.url"/>
-        </div>
-      </div>
-    </div>
+        <div v-if="item.doExplain" class="stepContent mar-t8" v-text="item.doExplain"/>
+        <u-gap height="48"/>
+      </AiStep>
+    </AiGroup>
+    <AiEvaluation v-if="currentTab=='1'" :bid="info.id" type="show"/>
+    <AiEvaluation v-if="info.eventStatus > 1" v-model="evaluation" class="fixed-bottom bg-fff" :bid="info.id">
+      <div class="bottomBtn">去评价</div>
+    </AiEvaluation>
   </div>
 </template>
 
 <script>
+import AiGroup from "../../../components/AiGroup/AiGroup";
+import AiItem from "../../../components/AiItem/AiItem";
+import AiStep from "../../../components/AiStep/AiStep";
+
 export default {
+  components: {AiStep, AiItem, AiGroup},
   appName: "随手拍详情",
   data() {
     return {
       pageShow: false,
       info: {},
-      result: {}
+      result: {},
+      currentTab: 0,
+      evaluation: {}
+    }
+  },
+  computed: {
+    detailStatus: v => {
+      const status = !v.evaluation.id ? v.info.eventStatus : 'evaluation'
+      return {
+        cls: 'status-' + status,
+        label: !v.evaluation.id ? v.$dict.getLabel('clapEventStatus', v.info.eventStatus) : "已评价"
+      }
+    },
+    process() {
+      const list = this.info.processList
+      if (this.evaluation.id) {
+        const {id, createUserName, score, createTime: doTime, rateText: doExplain} = this.evaluation
+        list.splice(0, 0, {
+          id, doTime, doExplain,
+          systemExplain: `${createUserName}完成评价 (${score}星评价)`
+        })
+      }
+      return list
     }
   },
-
   onLoad(query) {
     this.$loading()
     this.$dict.load(['clapEventStatus']).then(() => {
       this.getInfo(query.id)
     })
   },
-
   methods: {
     getInfo(id) {
       this.$instance.post(`/app/appclapeventinfo/queryDetailById?id=${id}`).then(res => {
@@ -71,11 +96,7 @@ export default {
             this.pageShow = true
           })
         }
-
-        this.$hideLoading()
-      }).catch(() => {
-        this.$hideLoading()
-      })
+      }).finally(() => this.$hideLoading())
     },
 
     previewResult(url) {
@@ -97,11 +118,11 @@ export default {
 
 <style lang="scss">
 .photo-detail {
-  padding: 32px;
+  padding: 32px 0 160px;
   margin-bottom: 60px;
   background: #fff;
 
-  & > h2 {
+  h2 {
     line-height: 1.3;
     margin-bottom: 26px;
     color: #333333;
@@ -109,6 +130,17 @@ export default {
     font-size: 40px;
   }
 
+  ::v-deep.stepTitle {
+    min-height: 44px;
+    font-family: PingFangSC-Regular;
+    font-weight: 400;
+    font-size: 32px;
+  }
+
+  .stepContent {
+    color: #343D65;
+  }
+
   .status-name {
     width: 96px;
     height: 44px;
@@ -120,7 +152,7 @@ export default {
     font-size: 26px;
     border-radius: 8px;
 
-    &.status-1 {
+    &.status-1, &.status-evaluation {
       background: #1AAAFF;
     }
 
@@ -132,77 +164,5 @@ export default {
       background: #FF4466;
     }
   }
-
-  .photo-detail__item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 112px;
-    font-size: 32px;
-    border-bottom: 1px solid #DDDDDD;
-
-    i {
-      color: #999999;
-      font-size: 32px;
-    }
-
-    span {
-      color: #333333;
-    }
-  }
-
-  .result {
-    & > h2 {
-      height: 116px;
-      line-height: 116px;
-      font-size: 38px;
-      color: #333;
-      font-weight: 600;
-      border-top: 1px solid #DDDDDD;
-    }
-
-    .result-info {
-      h2 {
-        height: 112px;
-        line-height: 112px;
-        color: #999999;
-        font-size: 32px;
-      }
-
-      p {
-        line-height: 1.3;
-        padding-bottom: 32px;
-        color: #333333;
-        font-size: 32px;
-      }
-    }
-  }
-
-  .photo-detail__img {
-    border-top: 1px solid #DDDDDD;
-    padding: 32px 0;
-
-    & > i {
-      display: block;
-      margin-bottom: 32px;
-      color: #999999;
-      font-size: 32px;
-    }
-
-    .photo-detail__img--imgs {
-      display: flex;
-      flex-wrap: wrap;
-
-      image {
-        width: 226px;
-        height: 226px;
-        margin: 0 9px 9px 0;
-
-        &:nth-of-type(3n) {
-          margin-right: 0;
-        }
-      }
-    }
-  }
 }
 </style>