a1300399510@qq.com 提交于 2023/03/31 -11:40:02

src/components/DetailReply.vue

@@ -15,7 +15,7 @@
                     <div class="discussion-single-content flexacenter flex1">
                         <input class="discussion-single-input flex1" cursor-spacing="5" type="text"
                             :placeholder="twoCommentData ? '写回复…' : '想问啥，大胆问…'" v-model="commentContent" />
-                        <img class="discussion-single-input-icom" @click="setValue('popState', 'discussionMulti',)"
+                        <img class="discussion-single-input-icom" @click="setValue('popState', 'discussionMulti')"
                             src="@/assets/img/detail/u1448.png" />
                     </div>
                     <div class="discussion-single-btn flexcenter" @click="postComment(commentContent)">
@@ -23,7 +23,6 @@
                     </div>
                 </div>
             </div>
-
         </div>
 
         <!-- 弹窗-讨论-多行 -->
@@ -31,20 +30,15 @@
             <div class="discussion-multi-box pop-box-box flexflex flexcolumn" style="border-radius: .4rem .4rem 0 0;"
                 @click.stop="">
                 <div class="discussion-header flexacenter" v-if="twoCommentData">
-                    <image class="discussion-avatar" :src="twoCommentData.avatar"></image>
+                    <img class="discussion-avatar" :src="twoCommentData.avatar" />
                     <div class="discussion-text one-line">{{ twoCommentData.content }}</div>
                     <img class="discussion-icom" @click.stop="clearTwoCommentData()" src="@/assets/img/detail/u1428.png">
                 </div>
                 <div class="discussion-multi-content flexflex flex1">
-                    <textarea v-if="discussionMultiState" class="discussion-multi-textarea flex1" type="text"
-                        maxlength="500" v-model="commentContent" @blur="setValue('discussionMultiState', false, 'boolean')"
-                        :placeholder="twoCommentData ? '写回复…' : '想问啥，大胆问…'"></textarea>
-                    <div v-else @click="setValue('discussionMultiState', true, 'boolean')"
-                        class="discussion-multi-textarea flex1"
-                        :style="{ color: !commentContent ? 'rgba(118,118,118,1)' : '' }">{{ commentContent ?
-                            commentContent : (twoCommentData ? '写回复…' : '想问啥，大胆问…') }}</div>
-                    <image class="discussion-multi-icom" catchtap="openDiscussionSingle" mode="widthFix"
-                        src="@/assets/img/detail/u1431.png"></image>
+                    <textarea class="discussion-multi-textarea flex1" type="text"
+                        maxlength="500" v-model="commentContent" :placeholder="twoCommentData ? '写回复…' : '想问啥，大胆问…'"></textarea>
+                    <img class="discussion-multi-icom" @click.stop="openDiscussionSingle()" 
+                        src="@/assets/img/detail/u1431.png" />
                     <div class="discussion-multi-sum">{{ 500 - commentContent.length }}</div>
                 </div>
                 <div class="discussion-multi-bottom flexflex flexacenter">
@@ -69,10 +63,13 @@ export default {
             },
             popState: "discussionSingle",
 
-            openDiscussionSingleState: ""
+            openDiscussionSingleState: false, // 弹出键盘动画
+
         };
     },
 
+    props: ["twoCommentData"],
+
     mounted() {
         console.log("gjklgjklg");
     },
@@ -84,6 +81,16 @@ export default {
             console.log("dffgkgfk");
         },
 
+        // 关闭弹窗
+        handlePopCancel(){
+            this.twoCommentData = null
+        },
+        
+        // 切换简单的切换数据
+        setValue(key, value) {
+            this[key] = value
+        },
+
     },
 };
 </script>
@@ -130,9 +137,6 @@ export default {
 
 .discussion-single-input {
     height: 100%;
-    background: transparent;
-    border: none;
-    outline: none;
 }
 
 .discussion-header {
@@ -168,34 +172,33 @@ export default {
 
 .discussion-multi-box {
     .discussion-header {
-        padding-bottom: 24rpx;
-        border-bottom: 1rpx solid #dbdcdd;
+        padding-bottom: .32rem;
+        border-bottom: .0133rem solid #dbdcdd;
     }
 
     .discussion-multi-content {
         position: relative;
-        height: 663rpx;
+        height: 8.84rem;
         box-sizing: border-box;
 
     }
 
     .discussion-multi-textarea {
-        font-size: 30rpx;
-        padding: 24rpx;
-        /* height: 663rpx; */
+        font-size: .4rem;
+        padding: .32rem;
         box-sizing: border-box;
         height: 50vh;
 
         overflow: auto;
 
         word-break: break-word;
-        line-height: 36rpx;
+        line-height: .48rem;
     }
 
     .discussion-multi-icom {
-        width: 36rpx;
-        height: 36rpx;
-        padding: 24rpx;
+        width: .48rem;
+        height: .48rem;
+        padding: .32rem;
         position: absolute;
         top: 0;
         right: 0;
@@ -206,25 +209,25 @@ export default {
         position: absolute;
         bottom: 0;
         right: 0;
-        padding: 24rpx;
-        font-size: 21rpx;
+        padding: .32rem;
+        font-size: .28rem;
         color: #aaaaaa;
     }
 
     .discussion-multi-bottom {
-        height: 96rpx;
-        border-top: 1rpx solid #dbdcdd;
+        height: 1.28rem;
+        border-top: .0133rem solid #dbdcdd;
         justify-content: flex-end;
-        padding-right: 24rpx;
+        padding-right: .32rem;
     }
 
     .discussion-multi-btn {
         background-color: rgba(80, 227, 194, 1);
-        border-radius: 12rpx;
-        width: 105rpx;
-        height: 66rpx;
-        margin: 15rpx 0;
-        font-size: 27rpx;
+        border-radius: .16rem;
+        width: 1.4rem;
+        height: .88rem;
+        margin: .2rem 0;
+        font-size: .36rem;
     }
 
 }