From ba01c46f416b09298b8cf9ce41443f9c8085c34c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=B1=E6=9C=89=E6=B8=85=E9=A6=99=E6=9C=88=E6=9C=89?=
 =?UTF-8?q?=E9=98=B4?= <185154740@qq.com>
Date: Thu, 17 Feb 2022 10:01:02 +0800
Subject: [PATCH] detail

---
 src/mods/AppVillager/AppVillager.vue |   9 +-
 src/mods/AppVillager/detail.vue      | 408 +++++++++++++++++++--------
 src/static/AppVillager/33.png        | Bin 0 -> 1264 bytes
 3 files changed, 298 insertions(+), 119 deletions(-)
 create mode 100644 src/static/AppVillager/33.png

diff --git a/src/mods/AppVillager/AppVillager.vue b/src/mods/AppVillager/AppVillager.vue
index d248607..4e7f46e 100644
--- a/src/mods/AppVillager/AppVillager.vue
+++ b/src/mods/AppVillager/AppVillager.vue
@@ -36,7 +36,7 @@
             </div>
           </div>
 
-          <div class="tabCurrent0" v-if="tabIndex != 3 && tabCurrent == 0">
+          <div class="tabCurrent0" v-if="tabIndex != 3 || tabCurrent == 0">
             <div class="cardConts">⾦秋穿上⽑⾐，漫步森林，在阳光下呼吸伸展，⾃在安逸的天⼈。也许是兰天名字的由来吧。</div>
 
             <div class="cardImg">
@@ -239,6 +239,7 @@ export default {
     .datas {
       .card {
         padding: 32px 0 48px 0;
+        box-shadow: inset 0px -1px 0px 0px #dddddd;
         .cardTop {
           display: flex;
           img {
@@ -262,7 +263,7 @@ export default {
               .titless {
                 font-size: 26px;
                 color: #6e727a;
-                margin-top: 1px;
+                margin-top: 6px;
               }
             }
             .status {
@@ -319,6 +320,7 @@ export default {
               .rightFlex {
                 display: flex;
                 justify-content: space-between;
+                width: 27%;
                 .img2,
                 .img3 {
                   width: 48px;
@@ -326,6 +328,9 @@ export default {
                 }
               }
             }
+            .icon:nth-child(2) {
+              background: #fff;
+            }
           }
         }
 
diff --git a/src/mods/AppVillager/detail.vue b/src/mods/AppVillager/detail.vue
index d60c00b..011ab8e 100644
--- a/src/mods/AppVillager/detail.vue
+++ b/src/mods/AppVillager/detail.vue
@@ -1,45 +1,79 @@
 <template>
   <div class="Page">
-    <div class="top">未通过原因：请勿带情绪进行评论请勿带情绪进行评论请勿带情绪进行评论</div>
-
-    <div class="cardTop">
-      <img src="../../static/workOnline/池夏2.jpg" alt="" />
-
-      <div class="rightTop">
-        <div class="leftStaus">
-          <span class="names">雷洋</span>
-
-          <span class="titless">美丽庭院 | 2020-10-28 12</span>
-        </div>
-
-        <!-- :style="{ class: item.auditStatus == 0 ? 'status0' : item.auditStatus == 1 ? 'status1' : 'status2' }"  -->
-        <div class="status status0" v-if="tabIndex == 3">审核中</div>
-      </div>
+    <div class="top">
+      <div class="tops">未通过原因：请勿带情绪进行评论请勿带情绪进行评论请勿带情绪进行评论</div>
     </div>
 
-    <div class="cardConts">⾦秋穿上⽑⾐，漫步森林，在阳光下呼吸伸展，⾃在安逸的天⼈。也许是兰天名字的由来吧。</div>
+    <div class="middle">
+      <div class="cardTop">
+        <img src="../../static/workOnline/池夏2.jpg" alt="" />
 
-    <div class="cardImg">
-      <img src="../../static/workOnline/池夏2.jpg" alt="" v-for="(items, i) in 4" :key="i" />
-    </div>
+        <div class="rightTop">
+          <div class="leftStaus">
+            <span class="names">雷洋</span>
 
-    <div class="cardBot">
-      <div class="icon">
-        <u-icon name="map-fill"></u-icon>
-        <span>东湖生态旅游风景区听涛景区</span>
+            <span class="titless">美丽庭院 | 2020-10-28 12</span>
+          </div>
+
+          <!-- :style="{ class: item.auditStatus == 0 ? 'status0' : item.auditStatus == 1 ? 'status1' : 'status2' }"  -->
+          <div class="status status0">审核中</div>
+        </div>
       </div>
 
-      <div class="icon" v-if="tabIndex != 3">
-        <div class="img1">
-          <img src="../../static/AppVillager/1.png" alt="" class="img11" />
+      <div class="cardConts">⾦秋穿上⽑⾐，漫步森林，在阳光下呼吸伸展，⾃在安逸的天⼈。也许是兰天名字的由来吧。</div>
+
+      <div class="cardImg">
+        <img src="../../static/workOnline/池夏2.jpg" alt="" v-for="(items, i) in 4" :key="i" />
+      </div>
+
+      <div class="cardBot">
+        <div class="icons">
+          <u-icon name="map-fill"></u-icon>
+          <span>东湖生态旅游风景区听涛景区</span>
         </div>
 
-        <div class="rightFlex">
-          <img src="../../static/AppVillager/2.png" alt="" class="img2" />
-          <img src="../../static/AppVillager/3.png" alt="" class="img3" />
+        <div class="icones">
+          <div class="img1">
+            <img src="../../static/AppVillager/1.png" alt="" class="img11" />
+          </div>
+
+          <div class="rightFlex">
+            <img src="../../static/AppVillager/2.png" alt="" class="img2" @click="poupShow = true" />
+            <img src="../../static/AppVillager/3.png" alt="" class="img3" @click="like" />
+          </div>
+        </div>
+      </div>
+
+      <div class="reply">
+        <div class="replyTop">
+          <img src="../../static/AppVillager/3.png" alt="" />
+          <span class="people">张三、李四、陶白白等12人</span>
+        </div>
+
+        <div class="replyCont">
+          <span class="nameLeft">张三：</span>
+          <span class="contRight">非常不错！</span>
+        </div>
+
+        <div class="replyCont">
+          <span class="nameLeft">张三：</span>
+          <span class="contRight">为什么不带上我呢！为什么不带上我呢！为什么不带上我呢！</span>
         </div>
       </div>
     </div>
+
+    <u-popup v-model="poupShow" height="auto" mode="bottom" @close="close">
+      <div class="comments-wrapper">
+        <u-input v-model="content" placeholder="写下你的想法" type="textarea" auto-height :clearable="false" height="180" maxlength="140"> </u-input>
+        <div class="words">字数{{ content.length }}/140</div>
+
+        <div class="bottombtn">
+          <div class="emptys" @click="content = ''">清空内容</div>
+
+          <div class="publishs" @click="send">发送</div>
+        </div>
+      </div>
+    </u-popup>
   </div>
 </template>
 
@@ -49,112 +83,252 @@ export default {
   components: {},
   props: {},
   data() {
-    return {}
+    return {
+      id: '',
+      data: {},
+      poupShow: false,
+      content: '',
+      flag: false,
+      pageShow: false,
+    }
   },
   computed: {},
   watch: {},
-  onLoad() {},
+  onLoad(o) {
+    this.$dict.load('atWillReportType').then(() => {
+      this.id = o.id
+    })
+  },
   onShow() {},
-  methods: {},
+  methods: {
+    send() {
+      if (this.flag) return
+      if (!this.content) {
+        return this.$u.toast('请输入你的想法')
+      }
+
+      this.$http
+        .post(`/app/appvillagediscussmessage/addOrUpdate`, {
+          content: this.content,
+          avatar: this.user.avatar,
+          createUserId: this.user.id,
+          createUserName: this.user.name,
+          discussId: this.id,
+        })
+        .then((res) => {
+          if (res?.code == 0) {
+            this.$u.toast('留言成功')
+            this.flag = false
+            this.content = ''
+            this.showBottomInput = false
+            this.getDetail()
+          }
+        })
+    },
+
+    like(id) {
+      this.$http
+        .post(`/app/appvillagediscussmessage/suport?id=${id}&userId=${this.user.id}`)
+        .then((res) => {
+          this.$hideLoading()
+          if (res.code === 0) {
+            this.$u.toast('点赞成功')
+            this.getDetail()
+          }
+        })
+        .catch((err) => {
+          this.$u.toast(err)
+        })
+    },
+  },
 }
 </script>
 
 <style scoped lang="scss">
 .Page {
   background: #fff;
+  padding: 0 32px;
   .top {
-    padding: 24px;
-    font-size: 26px;
-    color: #ff4466;
-    background: #fff5f7;
-    border-radius: 16px;
-    margin: 32px 0;
+    padding-top: 32px;
+    .tops {
+      padding: 24px;
+      font-size: 26px;
+      color: #ff4466;
+      background: #fff5f7;
+      border-radius: 16px;
+    }
   }
 
-  .cardTop {
-    display: flex;
-    img {
-      width: 96px;
-      height: 96px;
-      border-radius: 50%;
+  .middle {
+    padding-bottom: 48px;
+    .cardTop {
+      display: flex;
+      margin-top: 32px;
+      img {
+        width: 96px;
+        height: 96px;
+        border-radius: 50%;
+      }
+      .rightTop {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        .leftStaus {
+          display: flex;
+          flex-direction: column;
+          margin-left: 16px;
+          .names {
+            font-size: 32px;
+            font-weight: 500;
+          }
+          .titless {
+            font-size: 26px;
+            color: #6e727a;
+            margin-top: 6px;
+          }
+        }
+        .status {
+          font-size: 28px;
+        }
+        .status0 {
+          color: #42d784;
+        }
+        .status1 {
+          color: #ff4466;
+        }
+        .status2 {
+          color: #ff883c;
+        }
+      }
     }
-    .rightTop {
+
+    .cardConts {
+      margin-top: 24px;
+      font-size: 32px;
+    }
+
+    .cardImg {
+      margin-top: 24px;
+      img {
+        width: 226px;
+        height: 226px;
+        margin-right: 4px;
+      }
+      img:nth-child(3n + 0) {
+        margin-right: 0;
+      }
+    }
+
+    .cardBot {
+      margin-top: 24px;
+      .icons {
+        padding: 8px 32px 8px 16px;
+        background: #eff1f3;
+        border-radius: 28px;
+      }
+      .icones {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 24px;
+        .img1 {
+          width: 60%;
+          .img11 {
+            width: 48px;
+            height: 48px;
+          }
+        }
+        .rightFlex {
+          display: flex;
+          justify-content: space-between;
+          width: 27%;
+          .img2,
+          .img3 {
+            width: 48px;
+            height: 48px;
+          }
+        }
+      }
+    }
+
+    .reply {
+      margin-top: 32px;
+      padding: 0 24px 24px 24px;
+      background: #f7f8f9;
+      border-radius: 16px;
+      .replyTop {
+        padding: 20px 0;
+        margin-bottom: 18px;
+        img {
+          width: 40px;
+          height: 40px;
+          vertical-align: bottom;
+        }
+        .people {
+          font-size: 28px;
+          font-weight: 500;
+          color: #485d87;
+          margin-left: 8px;
+        }
+      }
+
+      .replyCont {
+        margin-top: 8px;
+        font-size: 28px;
+        font-weight: 500;
+        .nameLeft {
+          color: #485d87;
+        }
+        .contRight {
+          color: #485d87;
+        }
+      }
+    }
+  }
+
+  .comments-wrapper {
+    padding: 20px 0;
+    background: #f7f7f7;
+    .u-input {
+      background: #fff;
+      border-radius: 8px 8px 0 0;
+      padding: 10px !important;
+      margin: 0 30px 0 30px;
+
+      .uni-textarea-placeholder {
+        padding: 16px 0 0 16px;
+      }
+      .uni-textarea-textarea {
+        padding: 16px 0 0 16px;
+      }
+    }
+    .words {
+      background: #f7f7f7;
+      border-radius: 0 0 8px 8px;
+      margin: 0 30px;
+      padding: 10px;
+      text-align: right;
+      font-size: 26px;
+      color: #999999;
+    }
+    .bottombtn {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      width: 100%;
-      .leftStaus {
-        display: flex;
-        flex-direction: column;
-        margin-left: 16px;
-        .names {
-          font-size: 32px;
-          font-weight: 500;
-        }
-        .titless {
-          font-size: 26px;
-          color: #6e727a;
-          margin-top: 1px;
-        }
+      margin: 0 30px;
+      padding: 20px 0 0;
+      .emptys {
+        font-size: 26px;
+        color: #666666;
       }
-      .status {
-        font-size: 28px;
-      }
-      .status0 {
-        color: #42d784;
-      }
-      .status1 {
-        color: #ff4466;
-      }
-      .status2 {
-        color: #ff883c;
-      }
-    }
-  }
-
-  .cardConts {
-    margin-top: 24px;
-    font-size: 32px;
-  }
-
-  .cardImg {
-    margin-top: 24px;
-    img {
-      width: 226px;
-      height: 226px;
-      margin-right: 4px;
-    }
-    img:nth-child(3n + 0) {
-      margin-right: 0;
-    }
-  }
-
-  .cardBot {
-    margin-top: 24px;
-    .icon {
-      padding: 8px 32px 8px 16px;
-      background: #eff1f3;
-      border-radius: 28px;
-    }
-    .icon {
-      display: flex;
-      justify-content: space-between;
-      margin-top: 24px;
-      .img1 {
-        width: 60%;
-        .img11 {
-          width: 48px;
-          height: 48px;
-        }
-      }
-      .rightFlex {
-        display: flex;
-        justify-content: space-between;
-        .img2,
-        .img3 {
-          width: 48px;
-          height: 48px;
-        }
+      .publishs {
+        width: 144px;
+        height: 64px;
+        line-height: 64px;
+        text-align: center;
+        background: #1365dd;
+        border-radius: 32px;
+        color: #fff;
       }
     }
   }
diff --git a/src/static/AppVillager/33.png b/src/static/AppVillager/33.png
new file mode 100644
index 0000000000000000000000000000000000000000..11c4076b77dffc17c355f172e16e01a6eb8cee7c
GIT binary patch
literal 1264
zcmV<M1P}X(P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px(s!2paRA@u(m}_hlRTRg6XK5=CDIzruB1jY}q9}>css*wj`T^+&B{oPRAyEk$
zs02;aRCl&ZKU5-!5`ut)kcfn!B}M{NVW;2&5W$EV-UbkPs6j<ZDP{MV*_l4*cDu8i
zS-Um8-)83AbN|14&b{~C5xRJjF0P+$fX<F!cLe^I5h!^>`{dO#PJ9%plB;ksl0*3O
z3OVC7u%{_BBB*(VU?7wO*R~NG5n)x%1?GJErd;$2#4`YYP;-33CWVJP6erXb3}?dn
zGKqKr;TgcVkj_O}&?IW$^)PY><mSN9({SKai(G-JVMEqt6@b4|4+{*lM3vqPPx(Pw
zP0y-ruxW3z<khAj)3XM^AJkDId}|5nl?N+l*)!j|?K%VtKDOT|Y^XEj@$3Nz>0(i4
zS%SulfbvQ4(zfh_m0O$NuP_ankre<FUe>;m-kb#TEkVW<xN~s4wAEqQ_>KKugjd4>
zsm=<3@s(PkP-Tg^sXr`ynsy7U>W^UWF$Vz3!iKExbb#WZ=JytU0{UBGW<LsJ?`U7v
z>=khK5Br->xqDks_IEnK_)4u(sIY_-UI%YK13i54vKks;+9HUmvxt>ygiGxKNR&qP
zaV+N=wrqVx{z?X!_BrrKl@4l*a1iKi4e~-MjK017;ST)*udPWYrOkK25+5)F@=ixR
z(*n3>ndau7#RN($=eHC>^|Y(^{nmq?_zhlKl_EfsxnP(92_@>CGQik*IxHv3YJ~@!
z9fi<T7(TFLf%}hx6$vMc5*l0Sw&w_(an=iP1!0sKkRRJkxkR4E&(m9@N-0X;*usN;
zs*FVN+mCjeG6p8cP`qo65tz5GRrw(-Gz0RYYXE;pr;D-_=$S~CPi*mz-S3_7)}E{=
z%-`U=5yECb9&!a>&AdkWp(F8k-3(8Tg`op7Bi{0wK0rw4sPdNOWbh48Tx5&P>j4G%
zFnkac^vRs?CeO=iVe5C!ld{kZx=bN|r5XZ3tLqabP!`)~{@d1g1)g037aQzxMJWjf
z<ttYylnnr_D_7u{X~@t-Qy906CIdM5GaNq$LkjJ5%0!!A1AC4-vk#SFLt+`>Ndz{1
zZI=YrE;R8z@8$np4>Oj)m1xYjs!~)J6bC1Myp$ubad(T8NyXj+)b4}#oO^@9&N@RL
z>}Zs%1E_c(4xesLpXbAdSm#l~mQ?^&`B1*1S?lFIWk79E&UYDrbzi`T&SvTM-kdcN
zP=(pc;at-VK$&a?r6$=b%Nl@#r{MJun&qDF`8zjmUM$X0=HVL1)Hb@j7Cv)I2NB*4
z2jsbAvmZO9+ZuJoL3Zgf%v{=1Iv|WT1M+1?0NglD)n@GusM%%rQaDm)h*Lr)_mpx3
zlDl+o5sAVldtlA>mOeh1xy_JeZoR|<gmjKHmD2@Ke4ATWDcC8T{|CN50l!}T-(iQT
zj3X#^A>pFM0l2x)xbT~f$?i+a#GOeFuC|Wbz0|w8Ql_IYL7zVr7WL{!_2%;A+omf3
z%gBlZN@>)&)O#p6=1Sm#DhC?!*}ikG)Tiq|<=-ml4wR{W-2j=IS+{<>Bj9$XGG*80
aBk(U(IIKXeUpe*w0000<MNUMnLSTaTFjO%B

literal 0
HcmV?d00001