26392

src/apps/AppVillageDiscuss/Detail.vue

@@ -2,13 +2,12 @@
   <div class="Detail">
     <AiTopFixed>
       <div flex class="w-100">
-        <div class="avatar" v-text="data.avatar"/>
+        <div class="avatar" v-text="data.avatar" />
         <div flex class="column start fill">
-          <b class="color-333" v-text="data.createUserName"/>
+          <b class="color-333" v-text="data.createUserName" />
-          <span class="color-999" v-text="data.createTime"/>
+          <span class="color-999" v-text="data.createTime" />
         </div>
-        <div class="statusTag" :class="{over:data.status>0}"
+        <div class="statusTag" :class="{ over: data.status > 0 }" v-text="data.status == 0 ? (data.type == 0 ? '征集中' : '投票中') : $dict.getLabel('discussStatus', data.status)" />
-             v-text="data.status==0? data.type==0?'征集中':'投票中':$dict.getLabel('discussStatus',data.status)"/>
       </div>
       <div class="header-middle">
         <div class="contsnts">
@@ -16,30 +15,33 @@
         </div>
       </div>
       <div class="img-list" v-if="data.images && data.images.length && data.contentType != 1">
-        <img :src="item.accessUrl" alt="" v-for="(item, index) in data.images" :key="index"
+        <img :src="item.accessUrl" alt="" v-for="(item, index) in data.images" :key="index" @click="previewImage(data.images, item.accessUrl)" />
-             @click="previewImage(data.images, item.accessUrl)"/>
       </div>
       <div class="img-list" v-if="data.images && data.images.length && data.contentType == 1">
         <video class="video" :src="data.images[0].url"></video>
       </div>
     </AiTopFixed>
-    <div v-if="data.type==0" class="comments">
+    <div v-if="data.type == 0" class="comments">
-      <b class="total" v-text="`全部评论(${commentCount})`"/>
+      <span class="totalCount">
+        <span class="total" v-text="`全部评论(${commentCount})`" />
+        <span class="rightCount">
+          <u-icon name="clock"></u-icon>
+          <u-count-down :timestamp="timestamp" separator="zh" show-days show-hours show-minutes show-seconds></u-count-down>
+        </span>
+      </span>
       <div v-for="op in data.messages" :key="op.id">
         <div flex class="header">
-          <u-avatar :src="op.avatar" size="48"/>
+          <u-avatar :src="op.avatar" size="48" />
-          <b class="fill" v-text="op.createUserName"/>
+          <b class="fill" v-text="op.createUserName" />
-          <u-icon name="thumb-up" :label="op.suport"/>
+          <u-icon name="thumb-up" :label="op.suport" />
         </div>
-        <div class="content" v-text="op.content"/>
+        <div class="content" v-text="op.content" />
-        <div class="content color-999" v-text="op.createTime"/>
+        <div class="content color-999" v-text="op.createTime" />
       </div>
     </div>
-    <div v-else-if="data.type==1" class="comments">
+    <div v-else-if="data.type == 1" class="comments"></div>
-
-    </div>
     <div class="bottomBar">
-      <div v-if="data.status<2" @click="handleComplete">结束公示</div>
+      <div v-if="data.status < 2" @click="handleComplete">结束公示</div>
     </div>
   </div>
 </template>
@@ -52,27 +54,28 @@ export default {
     return {
       data: {},
       id: '',
+      timestamp: '',
     }
   },
   computed: {
     commentCount() {
       return this.data.messages?.length || 0
-    }
+    },
   },
   watch: {},
   onLoad(o) {
     this.id = o.id
     this.getDetail()
-    this.$dict.load("discussStatus")
+    this.$dict.load('discussStatus')
   },
   onShow() {
-    document.title = "议事详情"
+    document.title = '议事详情'
   },
   methods: {
     previewImage(images, img) {
       uni.previewImage({
-        urls: images.map(v => v.url),
+        urls: images.map((v) => v.url),
-        current: img
+        current: img,
       })
     },
     getDetail() {
@@ -80,39 +83,45 @@ export default {
         if (res?.data) {
           this.data = {
             ...res.data,
-            avatar: res.data.createUserName?.substr(0, 2) || "游客",
+            avatar: res.data.createUserName?.substr(0, 2) || '游客',
             images: JSON.parse(res.data.images),
-            messages: res.data.messages || []
+            messages: res.data.messages || [],
           }
+          this.timestamp = new Date(res.data.discussDeadline).getTime()
         }
       })
     },
     handleSubmitComment(content) {
       if (!!content) {
-        let {id} = this
+        let { id } = this
-        this.$http.post("/app/appvillagediscussmessage/addOrUpdate", {
+        this.$http
-          id, content
+          .post('/app/appvillagediscussmessage/addOrUpdate', {
-        }).then(res => {
+            id,
-          if (res?.code == 0) {
+            content,
-            this.$u.toast("提交成功!")
+          })
-            this.getDetail()
+          .then((res) => {
-          }
+            if (res?.code == 0) {
-        })
+              this.$u.toast('提交成功!')
+              this.getDetail()
+            }
+          })
       } else {
-        this.$u.toast("不能提交空评论!")
+        this.$u.toast('不能提交空评论!')
       }
     },
     handleComplete() {
-      this.$confirm("是否要结束公示").then(() => {
+      this.$confirm('是否要结束公示')
-        let {id} = this
+        .then(() => {
-        this.$http.post("/app/appvillagediscuss/finishPublic", {id}).then(res => {
+          let { id } = this
-          if (res?.code == 0) {
+          this.$http.post('/app/appvillagediscuss/finishPublic', { id }).then((res) => {
-            this.$u.toast("已结束公示!")
+            if (res?.code == 0) {
-            this.getDetail()
+              this.$u.toast('已结束公示!')
-          }
+              this.getDetail()
+            }
+          })
         })
-      }).catch(() => 0)
+        .catch(() => 0)
-    }
+    },
   },
 }
 </script>
@@ -124,7 +133,7 @@ export default {
   padding-bottom: 112px;
 
   ::v-deep.AiTopFixed {
-    border-bottom: 16px solid #F6F7F9;
+    border-bottom: 16px solid #f6f7f9;
 
     .avatar {
       height: 64px;
@@ -153,8 +162,8 @@ export default {
     .statusTag {
       padding: 0 12px;
       line-height: 30px;
-      border: 1px solid #2573FF;
+      border: 1px solid #2573ff;
-      color: #2573FF;
+      color: #2573ff;
       font-size: 22px;
 
       &.over {
@@ -193,7 +202,7 @@ export default {
       .title {
         width: 100%;
         line-height: 112px;
-        background: #FFF;
+        background: #fff;
         font-size: 32px;
         font-family: PingFangSC-Regular, PingFang SC;
         color: #999;
@@ -208,13 +217,16 @@ export default {
   .comments {
     padding: 0 32px;
     font-size: 28px;
-
+    .totalCount {
-    .total {
+      display: flex;
-      display: block;
+      justify-content: space-between;
-      font-size: 30px;
-      height: 120px;
       padding-top: 44px;
-      box-sizing: border-box;
+      .total {
+        display: block;
+        font-size: 30px;
+        height: 120px;
+        box-sizing: border-box;
+      }
     }
 
     .u-avatar {