评论组件调整

src/components/AiComment.vue

@@ -2,17 +2,15 @@
   <div class="AiComment">
     <div class="comments flex-row">
       <div class="comments-box" @click="showCommentBox">{{ boxContent }}</div>
-      <img src="AiComment/comment.svg" @click="showCommentList" alt=""/>
-      <text>{{ commentCount || 0 }}</text>
+      <u-icon name="thumb-up" size="30" label="赞"/>
     </div>
     <div class="modalWrapper" v-if="commentBoxPopup" :class="{clickClose:!modelClickClose}"
          @click="commentBoxPopup=false"/>
-    <div class="commentBox" v-if="commentBoxPopup" :style="{bottom:marginBottom+ 'px'}">
-      <textarea v-model="content" placeholder="写下你的想法…" maxlength="300" :focus="focus" @focus="getMarginBottom"
-                @blur="marginBottom=0" :adjust-position="false" fixed/>
+    <div class="commentBox" v-if="commentBoxPopup">
+      <u-input v-model="content" placeholder="写下你的想法…" type="textarea" auto-height :maxlength="limit"/>
       <view class="flex-row form-submit">
-        <div>{{ `字数 ${wordCount || 0} / 300` }}</div>
-        <button @click="submitComment" :disabled="wordCount == 0">发布</button>
+        <div>{{ `字数 ${wordCount} / ${limit}` }}</div>
+        <button @click="submitComment" :disabled="wordCount == 0">发表</button>
       </view>
     </div>
   </div>
@@ -20,29 +18,33 @@
 
 <script>
 
+import {mapState} from "vuex";
+
 export default {
   name: "AiComment",
   props: {
     needLogin: Boolean,
     customLogin: Boolean,
     commentCount: Number,
-    modelClickClose: {type: Boolean, default: true}
+    modelClickClose: {type: Boolean, default: true},
+    placeholder: {default: "我也说两句..."},
+    limit: {default: 1000}
   },
   computed: {
+    ...mapState(['token']),
     wordCount() {
-      return this.content.length || 0
+      return this.content?.length || 0
     },
     boxContent() {
-      return this.content || "我也说两句..."
+      return this.content || this.placeholder
     },
     isLogin() {
-      return Boolean(uni.getStorageSync('token'))
+      return !!this.token
     },
   },
   data() {
     return {
       content: "",
-      marginBottom: 0,
       commentBoxPopup: false,
       focus: false
     }
@@ -76,10 +78,6 @@ export default {
       this.commentBoxPopup = false
       this.$emit("showCommentList")
     },
-    getMarginBottom({detail}) {
-      this.marginBottom = detail.height
-      this.focus = true
-    }
   }
 }
 </script>
@@ -94,32 +92,23 @@ export default {
     box-sizing: border-box;
     position: fixed;
     bottom: 0;
-    background: #f7f7f7;
+    background: #fff;
 
     .comments-box {
-      width: 580px;
+      flex: 1;
+      min-width: 0;
       height: 64px;
       line-height: 64px;
-      background-color: #fff;
+      background-color: #f0f0f0;
       color: #666;
       font-size: 26px;
       padding-left: 16px;
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
-    }
-
-    image {
-      width: 52px;
-      height: 52px;
-      margin-left: 16px;
-      vertical-align: middle;
-    }
-
-    text {
-      color: #666666;
-      font-size: 28px;
-      line-height: 60px;
+      border-radius: 30px;
+      text-align: center;
+      margin-right: 42px;
     }
   }
 
@@ -137,9 +126,10 @@ export default {
     }
   }
 
-  .commentBox {
+  ::v-deep.commentBox {
     width: 100%;
-    height: 288px;
+    min-height: 288px;
+    max-height: 60vh;
     background-color: #fff;
     padding: 32px 32px 24px 26px;
     box-sizing: border-box;
@@ -149,7 +139,9 @@ export default {
 
     textarea {
       width: 100%;
-      height: 144px;
+      min-height: 144px;
+      max-height: calc(60vh - 144px);
+      overflow-y: auto;
       color: #666;
       font-size: 26px;
       background: #F7F7F7;