优化

src/project/fengdu/AppCircle/Detail.vue

@@ -1,4 +1,4 @@
-<template>
+div<template>
   <div class="Detail" v-if="pageShow">
     <div class="top">
       <div class="item-top">
@@ -41,7 +41,7 @@
             <p>{{ item.content }}</p>
             <div class="bottom">
               <span>{{ item.createTime }}</span>
-              <div hover-class="text-hover" @click="commentId = item.id, replyName = item.createUserName, focus = true">回复</div>
+              <div hover-class="text-hover" @click="replay(item)">回复</div>
             </div>
             <div class="replay-list" v-if="item.replyList.length">
               <div class="replay-item" v-for="replay in item.replyList" :key="replay.id">
@@ -64,9 +64,9 @@
         <AiEmpty v-if="!list.length"></AiEmpty>
       </div>
     </div>
-    <div class="footer">
-      <input :placeholder="commentId ? '回复' + replyName : '请输入评论内容'" :focus="focus" v-model="content">
-      <div hover-class="hover-class" @click="send">发送</div>
+    <div class="footer" @click="showComment">
+      <span>请输入评论内容</span>
+      <!-- <div hover-class="hover-class">发送</div> -->
     </div>
     <u-popup v-model="isShow" mode="bottom" hidden height="350rpx" border-radius="30">
 			<div class="popup">
@@ -90,7 +90,20 @@
         </div>
       </div>
 		</u-popup>
-    <AiLogin ref="login"/>
+    <u-popup v-model="isShowComment" mode="bottom" hidden height="400rpx" border-radius="30" @close="focus = false">
+			<div class="popup">
+        <div class="popup-title">
+          <h2>评论</h2>
+          <image @click="isShowComment = false, focus = false" src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-guanbi.png" />
+        </div>
+        <div class="form">
+          <textarea :maxlength="100" :cursor-spacing="10" :placeholder="commentId ? '回复' + replyName : '请输入评论内容'" :focus="focus" v-model="content"></textarea>
+          <div>
+            <div class="send-btn" hover-class="hover-class" @click="send">发送</div>
+          </div>
+        </div>
+      </div>
+		</u-popup>
   </div>
 </template>
 
@@ -112,6 +125,7 @@
         isFrom: '',
         list: [],
         isMore: false,
+        isShowComment: false,
         current: 1,
         content: '',
         focus: false,
@@ -153,6 +167,31 @@
         })
       },
 
+      showComment () {
+        this.commentId = ''
+        this.replyName = ''
+        this.isShowComment = true
+
+        this.$nextTick(() => {
+          setTimeout(() => {
+            this.focus = true
+          }, 500)
+        })
+      },
+
+      replay (item) {
+        this.commentId = item.id
+        this.replyName = item.createUserName
+
+        this.isShowComment = true
+
+        this.$nextTick(() => {
+          setTimeout(() => {
+            this.focus = true
+          }, 500)
+        })
+      },
+
       getInfo (id) {
         this.$instance.post(`/app/appneighborhoodassistance/queryDetailById?id=${id}`, null, {
           withoutToken: this.token ? false : true,
@@ -193,6 +232,7 @@
         }).then(res => {
           uni.hideLoading()
           if (res.code === 0) {
+            this.isShowComment = false
             this.$toast('提交成功')
             this.content = ''
             this.replyName = ''
@@ -291,7 +331,7 @@
     }
 
     .popup {
-      height: 700px;
+      height: 400px;
       border-radius: 20px 20px 0 0;
 
       .popup-title {
@@ -341,6 +381,41 @@
           }
         }
       }
+
+      .form {
+        padding: 0 32px;
+
+        textarea {
+          width: 100%;
+          margin-bottom: 20px;
+          height: 200px;
+          line-height: 1.3;
+          padding: 20px;
+          font-size: 28px;
+          color: #333;
+          box-sizing: border-box;
+          background: #eeeeee;
+        }
+
+        & > div {
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+        }
+
+        .send-btn {
+          display: inline-block;
+          width: 100px;
+          height: 60px;
+          line-height: 60px;
+          text-align: right;
+          text-align: center;
+          font-size: 26px;
+          color: #fff;
+          border-radius: 30px;
+          background: #2d7dffff;
+        }
+      }
     }
     .footer {
       display: flex;
@@ -353,16 +428,17 @@
       padding: 14px 32px;
       background: #fff;
 
-      input {
+      span {
         flex: 1;
         height: 60px;
-        margin-right: 16px;
+        line-height: 60px;
+        // margin-right: 16px;
         padding: 0 24px;
         border-radius: 30px;
         font-size: 26px;
-        color: #333;
         box-sizing: border-box;
-        background: #eeeeeeff;
+        background: #eeeeee;
+        color: #999;
       }
 
       div {