村民圈

src/mods/AppVillager/detail.vue

@@ -1,36 +1,39 @@
 <template>
   <div class="Page">
-    <div class="top">
-      <div class="tops">未通过原因：请勿带情绪进行评论请勿带情绪进行评论请勿带情绪进行评论</div>
+    <div class="top" v-if="detail.status == 2">
+      <div class="tops">{{ detail.auditOpinion }}</div>
     </div>
 
     <div class="middle">
       <div class="cardTop">
-        <img src="../../static/workOnline/icon3@2x.png" alt="" />
+        <img :src="avatarUrl" alt="" />
 
         <div class="rightTop">
           <div class="leftStaus">
-            <span class="names">雷洋</span>
+            <span class="names">{{ detail.createUserName }}</span>
 
-            <span class="titless">美丽庭院 | 2020-10-28 12</span>
+            <span class="titless">{{ $dict.getLabel('villagerCircleTopic', detail.topic) }} | {{ detail.status }}</span>
           </div>
 
-          <!-- :style="{ class: item.auditStatus == 0 ? 'status0' : item.auditStatus == 1 ? 'status1' : 'status2' }"  -->
+          <div class="statusDele">
+            <div class="status status0" :class="detail.auditStatus == 0 ? 'status0' : detail.auditStatus == 1 ? 'status1' : 'status2'">{{ $dict.getLabel('auditStatus', detail.status) }}</div>
 
-          <div class="status status0">审核中</div>
+            <div class="dels" @click.stop=";(modalShow = true), (deleId = detail.id)">删除</div>
+            <!-- <img src="../../static/AppVillager/4.png" alt="" @click.stop="delShow = true" class="dels" /> -->
+          </div>
         </div>
       </div>
 
-      <div class="cardConts">⾦秋穿上⽑⾐，漫步森林，在阳光下呼吸伸展，⾃在安逸的天⼈。也许是兰天名字的由来吧。</div>
+      <div class="cardConts">{{ detail.content }}</div>
 
       <div class="cardImg">
-        <img src="../../static/workOnline/icon3@2x.png" alt="" v-for="(items, i) in 4" :key="i" />
+        <img :src="item.url" alt="" v-for="(items, i) in detail.pictures" :key="i" @click.stop="previewImage(detail.pictures, item.url)" />
       </div>
 
       <div class="cardBot">
         <div class="icons">
           <u-icon name="map-fill"></u-icon>
-          <span>东湖生态旅游风景区听涛景区</span>
+          <span>{{ detail.gpsDesc }}</span>
         </div>
 
         <div class="icones">
@@ -96,7 +99,8 @@ export default {
   props: {},
   data() {
     return {
-      id: '888',
+      id: '',
+      avatarUrl: '',
       data: {},
       poupShow: false,
       content: '',
@@ -110,8 +114,9 @@ export default {
   computed: { ...mapState(['user']) },
   watch: {},
   onLoad(o) {
-    this.$dict.load('atWillReportType').then(() => {
-      // this.id = o.id
+    this.$dict.load('villagerCircleTopic').then(() => {
+      this.id = o.id
+      this.avatarUrl = o.avatarUrl
       this.getDetail()
     })
   },
@@ -121,6 +126,15 @@ export default {
       this.$instance.post(`/app/appvillagercircleinfo/queryDetailById?id=${this.id}`).then((res) => {
         if (res.code == 0) {
           this.detail = res.data
+          this.getReplyList()
+        }
+      })
+    },
+
+    getReplyList() {
+      this.$instance.post(`/app/appvillagercirclecomment/list?id=${detail.id}&size=999`).then((res) => {
+        if (res.code == 0) {
+          this.replylist = res.data.records
         }
       })
     },
@@ -188,6 +202,13 @@ export default {
       this.deleId = '999'
       this.deleShow = true
     },
+
+    previewImage(images, img) {
+      uni.previewImage({
+        urls: images.map((v) => v.url),
+        current: img,
+      })
+    },
   },
   onShareAppMessage() {
     return {
@@ -243,18 +264,26 @@ export default {
           }
         }
 
-        .status {
-          font-size: 28px;
-          margin-right: 10px;
-        }
-        .status0 {
-          color: #42d784;
-        }
-        .status1 {
-          color: #ff4466;
-        }
-        .status2 {
-          color: #ff883c;
+        .statusDele {
+          display: flex;
+          align-items: center;
+          .status {
+            font-size: 28px;
+          }
+          .status0 {
+            color: #42d784;
+          }
+          .status1 {
+            color: #ff4466;
+          }
+          .status2 {
+            color: #ff883c;
+          }
+          .dels {
+            margin-left: 20px;
+            width: 68px;
+            height: 68px;
+          }
         }
       }
     }