企微端详情已调整

src/apps/AppHandSnapshot/Detail.vue

@@ -13,7 +13,7 @@
     <div class="header-middle">
       <div class="titles">{{ data.content }}</div>
 
-      <span class="status status0" :class="data.eventStatus == 0 ? 'status0' : data.eventStatus == 1 ? 'status1' : data.eventStatus == 2 ? 'status2' : 'status3'" v-if="data.eventStatus"> {{ $dict.getLabel('clapEventStatus', data.eventStatus) }}</span>
+      <span class="status status0" :class="detailStatus.cls" v-if="data.eventStatus"> {{ detailStatus.label }}</span>
 
       <div class="card">
         <span class="card-left">事件类型</span>
@@ -51,7 +51,7 @@
         <span class="card-left" style="color:#999">照片</span>
       </div>
 
-      <img :src="item.url" alt="" v-for="(item, i) in data.files" :key="i"  @click="previewImage(data.files, item.url)" />
+      <img :src="item.url" alt="" v-for="(item, i) in data.files" :key="i" @click="previewImage(data.files, item.url)"/>
     </div>
 
     <div class="header-bottom">
@@ -60,40 +60,30 @@
       <div class="plan">
         <div class="nav">
           <span>办理进度</span>
-          <span> ({{ $dict.getLabel('clapEventStatus', data.eventStatus) }})</span>
+          <span> ({{ detailStatus.label }})</span>
         </div>
 
-        <div class="cards" v-for="(item, index) in data.processList" :key="index">
+        <div class="cards" v-for="(item, index) in process" :key="index">
           <div class="cardss">
             <div class="cardss-left">
-              <span>
+              <span v-text="item.avatar"/>
-                <!-- {{ item.systemExplain }} -->
-                {{ item.girdMemberName && item.girdMemberName.substring(item.girdMemberName.length, item.girdMemberName.length - 2) }}
-              </span>
-
-              <!-- <img src="./components/1.png" class="avatarIcon" alt="" /> -->
             </div>
-
             <div class="cardss-right">
               <div class="cardsss-right-left">
                 <div class="cardssss-right-left-top">
-                  <span>{{ item.systemExplain }}</span>
+                  <span v-text="item.systemExplain"/>
-                  <div style="color: #2ea222; font-size: 16px; margin-top: 5px">
+                  <div style="color: #2ea222; font-size: 16px; margin-top: 5px" v-text="item.statusLabel"/>
-                    {{ $dict.getLabel('clapDoStatus', item.doStatus) }}
                 </div>
               </div>
-              </div>
-
               <div class="cardees-right-right">{{ item.doTime }}</div>
             </div>
-
+            <div class="lines"/>
-            <div class="lines"></div>
           </div>
 
           <div class="cardes-msg-top" v-if="item.doExplain">{{ item.doExplain }}</div>
 
           <div class="imgs">
-            <img :src="e.url" alt="" v-for="(e, index) in item.files" :key="index"  @click="previewImage(item.files, e.url)" />
+            <img :src="e.url" alt="" v-for="(e, index) in item.files" :key="index" @click="previewImage(item.files, e.url)"/>
           </div>
         </div>
       </div>
@@ -116,24 +106,53 @@
 
       <div class="endDoIt" v-if="data.eventStatus == 1 && data.rightType == 0" @click="toContent(3)">前往办理</div>
     </div>
-
+    <AiEvaluation v-show="false" v-model="evaluation" :bid="data.id"/>
     <u-modal v-model="doItShow" :mask-close-able="true" z-index="99" content="确定受理该事件?" :show-cancel-button="true" @confirm="doThings"></u-modal>
   </div>
 </template>
 
 <script>
+import AiEvaluation from "../../components/AiEvaluation";
+
 export default {
   name: 'Detail',
-  components: {},
+  components: {AiEvaluation},
   props: {},
   data() {
     return {
       data: {},
       id: '',
       doItShow: false,
+      evaluation: {}
+    }
+  },
+  computed: {
+    detailStatus: v => {
+      const status = !v.evaluation.id ? v.data.eventStatus : 'evaluation'
+      return {
+        cls: 'status' + status,
+        label: !v.evaluation.id ? v.$dict.getLabel('clapEventStatus', v.data.eventStatus) : "已评价"
+      }
+    },
+    process() {
+      const getAvatar = str => str?.substring(str?.length, str?.length - 2)
+      const list = this.data.processList.map(e => ({
+        ...e,
+        avatar: getAvatar(e.girdMemberName),
+        statusLabel: this.$dict.getLabel('clapDoStatus', e.doStatus)
+      }))
+      if (this.evaluation.id) {
+        const {id, createUserName, score, createTime: doTime, content: doExplain} = this.evaluation
+        list.splice(0, 0, {
+          id, doTime, doExplain,
+          statusLabel: `${score}星评价`,
+          avatar: getAvatar(createUserName),
+          systemExplain: `${createUserName}完成评价`
+        })
+      }
+      return list
     }
   },
-  computed: {},
   watch: {},
   onLoad(o) {
     this.id = o.id
@@ -158,7 +177,7 @@ export default {
     },
 
     callPhone(phone) {
-      uni.makePhoneCall({ phoneNumber: phone })
+      uni.makePhoneCall({phoneNumber: phone})
     },
 
     doThings() {
@@ -170,7 +189,7 @@ export default {
     },
 
     toContent(status) {
-      uni.navigateTo({ url: `./Content?status=${status}&groupId=${this.data.groupId}&groupName=${this.data.groupName}&id=${this.id}` })
+      uni.navigateTo({url: `./Content?status=${status}&groupId=${this.data.groupId}&groupName=${this.data.groupName}&id=${this.id}`})
     },
     previewImage(images, img) {
       uni.previewImage({
@@ -186,6 +205,7 @@ export default {
 uni-page-body {
   height: 100%;
 }
+
 .Detail {
   height: 100%;
   background: #fff;
@@ -194,6 +214,7 @@ uni-page-body {
     display: flex;
     margin: 26px 0 14px 0;
     padding: 0 32px;
+
     .avatars {
       width: 80px;
       height: 80px;
@@ -206,11 +227,13 @@ uni-page-body {
       font-weight: 500;
       margin-right: 16px;
     }
+
     .right {
       .names {
         font-size: 32px;
         font-weight: 500;
       }
+
       .times {
         margin-top: 10px;
         font-size: 28px;
@@ -221,6 +244,7 @@ uni-page-body {
 
   .header-middle {
     padding: 0 32px 10px 32px;
+
     .titles {
       margin: 32px 0;
       line-height: 1.4;
@@ -228,6 +252,7 @@ uni-page-body {
       font-size: 40px;
       font-weight: 600;
     }
+
     .status {
       display: inline-block;
       margin-bottom: 14px;
@@ -236,11 +261,12 @@ uni-page-body {
       color: #ffffff;
       border-radius: 8px;
     }
+
     .status0 {
       background: #ff883c;
     }
 
-    .status1 {
+    .status1, .statusevaluation {
       background: #1aaaff;
     }
 
@@ -257,13 +283,16 @@ uni-page-body {
       justify-content: space-between;
       padding: 34px 0;
       border-bottom: 1px solid #ddd;
+
       .card-left {
         width: 46%;
         font-size: 32px;
         color: #999999;
       }
+
       .card-right {
         font-size: 32px;
+
         .u-icon {
           margin-left: 8px;
         }
@@ -283,6 +312,7 @@ uni-page-body {
       height: 226px;
       margin-right: 8px;
     }
+
     img:nth-child(3n) {
       margin-right: 0;
     }
@@ -290,6 +320,7 @@ uni-page-body {
 
   .header-bottom {
     padding-bottom: 80px;
+
     .line {
       height: 16px;
       background: #f3f6f9;
@@ -297,6 +328,7 @@ uni-page-body {
 
     .plan {
       padding: 0 32px;
+
       .nav {
         padding: 26px 0;
       }
@@ -304,6 +336,7 @@ uni-page-body {
       .cards {
         position: relative;
         padding-bottom: 80px;
+
         .cardss {
           display: flex;
           justify-content: space-between;
@@ -333,10 +366,12 @@ uni-page-body {
               height: 38px;
             }
           }
+
           .cardss-right {
             width: calc(100% - 110px);
             display: flex;
             justify-content: space-between;
+
             .cardsss-right-left {
               .cardssss-right-left-top {
                 width: 300px;
@@ -344,17 +379,20 @@ uni-page-body {
                 text-overflow: ellipsis;
                 font-size: 32px;
               }
+
               .cardssss-right-left-bottom {
                 margin-top: 10px;
                 font-size: 28px;
                 color: #666666;
               }
             }
+
             .cardees-right-right {
               font-size: 28px;
               color: #999999;
             }
           }
+
           .lines {
             position: absolute;
             top: 0;
@@ -364,6 +402,7 @@ uni-page-body {
             background: #eeeeee;
           }
         }
+
         .cardes-msg-top {
           font-size: 28px;
           color: #343d65;
@@ -374,17 +413,20 @@ uni-page-body {
         .imgs {
           margin-top: 10px;
           margin-left: 110px;
+
           img {
             width: 136px;
             height: 136px;
             border-radius: 4px;
             margin-right: 12px;
           }
+
           img:nth-child(4n) {
             margin-right: 0;
           }
         }
       }
+
       .cards:last-child {
         .lines {
           width: 0;
@@ -401,6 +443,7 @@ uni-page-body {
     width: 100%;
     box-sizing: border-box;
     z-index: 999;
+
     .status00 {
       display: flex;
 
@@ -411,19 +454,23 @@ uni-page-body {
         width: 22%;
         padding: 16px 0;
         border-top: 1px solid #ddd;
+
         img {
           width: 44px;
           height: 42px;
         }
+
         .hint {
           margin-top: 4px;
           font-size: 28px;
           color: #666666;
         }
       }
+
       .border-r {
         border-right: 1px solid #ddd;
       }
+
       .doIt {
         width: 56%;
         background: #3975c6;

src/components/AiEvaluation.vue

@@ -0,0 +1,81 @@
+<template>
+  <section class="AiEvaluation">
+    <AiPagePicker v-if="type=='submit'&&!hasEvaluated" type="custom" :ops="ops" nodeKey="">
+      <slot v-if="$slots.default"/>
+      <div v-else v-text="placeholder"/>
+    </AiPagePicker>
+    <div v-if="type=='show'">
+      <slot v-if="$slots.default"/>
+      <AiGroup description no-border labelColor="#999" v-else>
+        <AiItem label="评级分数">
+          <u-rate v-model="detail.score" disabled inactive-icon="star-fill" active-color="#F8B425"/>
+          {{ detail.rateText || "" }}
+        </AiItem>
+        <AiItem label="评价详情" top-label>
+          <div v-html="detail.content"/>
+        </AiItem>
+        <AiItem label="附件" top-label>
+          <AiUploader :def="detail.files" disabled/>
+        </AiItem>
+      </AiGroup>
+    </div>
+    <slot name="finish" v-if="$slots.finish"/>
+  </section>
+</template>
+
+<script>
+import AiPagePicker from "./AiPagePicker";
+import AiGroup from "./AiGroup";
+import AiItem from "./AiItem";
+import AiUploader from "./AiUploader";
+
+export default {
+  name: "AiEvaluation",
+  model: {
+    prop: "info",
+    event: "input"
+  },
+  props: {
+    info: {default: () => ({})},
+    placeholder: {default: "去评价"},
+    bid: {default: ""},
+    type: {default: "submit"} //可选值: submit:提交评价,show:展示评价
+  },
+  components: {AiUploader, AiItem, AiGroup, AiPagePicker},
+  computed: {
+    isShow: v => v.type == 'show',
+    hasEvaluated: v => !!v.detail?.id
+  },
+  data() {
+    return {
+      detail: {},
+      ops: {
+        rateTexts: ['非常不满意', '不满意', '一般', '满意', '非常满意'],
+        url: "/components/pages/submitEvaluation?bid=" + this.bid
+      }
+    }
+  },
+  watch: {
+    bid: {
+      immediate: true,
+      handler() {
+        this.getDetail()
+      }
+    }
+  },
+  methods: {
+    getDetail() {
+      const bizId = this.bid
+      bizId && this.$http.post("/app/appbusinesscompletionevaluation/queryMyEvaluationByBizId", null, {
+        params: {bizId}
+      }).then(res => {
+        if (res?.data) {
+          const info = res.data?.[0]
+          this.detail = {...info, rateText: this.rateTexts?.[info.score - 1]}
+          this.$emit("input", this.detail)
+        }
+      })
+    }
+  },
+}
+</script>

src/components/pages/submitEvaluation.vue

@@ -0,0 +1,62 @@
+<template>
+  <section class="submitEvaluation">
+    <AiGroup>
+      <AiItem label="评价分数" top-label required>
+        <u-rate v-model="form.score" :size="64" active-color="#F8B425" :min-count="1" inactive-icon="star-fill"/>
+      </AiItem>
+    </AiGroup>
+    <u-gap height="24"/>
+    <AiGroup>
+      <AiItem label="评价详情" top-label required>
+        <u-input type="textarea" v-model="form.content" placeholder="请简要描述..."/>
+      </AiItem>
+    </AiGroup>
+    <u-gap height="24"/>
+    <AiGroup>
+      <AiItem label="附件" top-label>
+        <AiUploader v-model="form.files" :limit="9" multiple/>
+      </AiItem>
+    </AiGroup>
+    <div class="fixed-bottom">
+      <div class="bottomBtn" @click="submit">提交</div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "submitEvaluation",
+  appName: "提交评价",
+  data() {
+    return {
+      form: {
+        files: []
+      }
+    }
+  },
+  methods: {
+    submit() {
+      if (!this.form.score) {
+        return this.$u.toast("请选择评价分数!")
+      }
+      if (!this.form.content) {
+        return this.$u.toast("请填写评价详情!")
+      }
+      this.$http.post("/app/appbusinesscompletionevaluation/addOrUpdate", this.form).then(res => {
+        if (res?.code == 0) {
+          this.$u.toast("提交成功!")
+          setTimeout(() => uni.navigateBack({}), 1500)
+        }
+      })
+    }
+  },
+  onLoad(params) {
+    this.form.bizId = params.bid
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.submitEvaluation {
+}
+</style>