a1300399510@qq.com 提交于 2023/03/31 -12:00:01

src/components/DetailReply.vue

@@ -8,17 +8,17 @@
                 <div class="discussion-header flexacenter" v-if="twoCommentData">
                     <img class="discussion-avatar" :src="twoCommentData.avatar" />
                     <div class="discussion-text one-line">{{ twoCommentData.content }}</div>
-                    <img class="discussion-icom" catchtap="clearTwoCommentData"
+                    <img class="discussion-icom" @click.stop="clearTwoCommentData()"
                         style="height:13px;transform: translate(0);top:0;" src="@/assets/img/detail/u1428.png">
                 </div>
                 <div class="discussion-single-box flexflex flex1">
                     <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.stop="setValue()"
                             src="@/assets/img/detail/u1448.png" />
                     </div>
-                    <div class="discussion-single-btn flexcenter" @click="postComment(commentContent)">
+                    <div class="discussion-single-btn flexcenter" @click.stop="postComment(commentContent)">
                         发布
                     </div>
                 </div>
@@ -35,15 +35,16 @@
                     <img class="discussion-icom" @click.stop="clearTwoCommentData()" src="@/assets/img/detail/u1428.png">
                 </div>
                 <div class="discussion-multi-content flexflex flex1">
-                    <textarea class="discussion-multi-textarea flex1" type="text"
+                    <textarea class="discussion-multi-textarea flex1" type="text" maxlength="500" v-model="commentContent"
-                        maxlength="500" v-model="commentContent" :placeholder="twoCommentData ? '写回复…' : '想问啥，大胆问…'"></textarea>
+                        :placeholder="twoCommentData ? '写回复…' : '想问啥，大胆问…'"></textarea>
-                    <img class="discussion-multi-icom" @click.stop="openDiscussionSingle()" 
+                    <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">
-                    <div class="discussion-multi-btn flexcenter" @click="postComment(commentContent)">
+                    <div class="discussion-multi-btn flexcenter" @click.stop="postComment(commentContent)">
-                        发布</div>
+                        发布
+                    </div>
                 </div>
             </div>
         </div>
@@ -56,41 +57,60 @@ export default {
     data() {
         return {
             commentContent: "",
-            twoCommentData: {
-                avatar: "https://oss.gter.net/avatar/97KwEWANd_4DHWiY6VbnSUFSCKroYWFjYQ~~/middle",
-                content: "评论回复",
-
-            },
-            popState: "discussionSingle",
-
             openDiscussionSingleState: false, // 弹出键盘动画
-
         };
     },
-
+    props: ["twoCommentData", "popState"],
-    props: ["twoCommentData"],
 
     mounted() {
-        console.log("gjklgjklg");
+
+        console.log("子组件");
     },
 
     methods: {
 
         // 提交回复
-        postComment() {
+        postComment(commentContent) {
-            console.log("dffgkgfk");
+            console.log("dffgkgfk", commentContent);
         },
 
         // 关闭弹窗
-        handlePopCancel(){
+        handlePopCancel() {
-            this.twoCommentData = null
+            console.log("fglkdf;lgkdfl;k");
+            this.$parent.twoCommentData = null
+            this.$parent.popState = ""
         },
-        
+
+        // 清空
+        clearTwoCommentData() {
+            this.$parent.twoCommentData = null
+        },
+
         // 切换简单的切换数据
         setValue(key, value) {
-            this[key] = value
+            this.$parent.popState = "discussionMulti"
+
+            setTimeout(() => {
+                console.log("twoCommentData", this.twoCommentData);
+            }, 1000);
         },
 
+        openDiscussionSingle() {
+            if (!this.data.islogin) {
+                this.setData({
+                    isloginBtnState: true
+                })
+                return
+            }
+            this.$parent.popState = "discussionSingle"
+            this.openDiscussionSingleState = false
+
+            setTimeout(() => {
+                this.openDiscussionSingleState = true
+            }, 500);
+        },
+
+
     },
 };
 </script>

src/views/detail/detailIndex.vue

@@ -54,7 +54,7 @@
         <!-- 分页 -->
 
 
-        <detail-reply></detail-reply>
+        <detail-reply :two-comment-data="twoCommentData" :pop-state="popState"></detail-reply>
     </div>
 </template>
 
@@ -65,7 +65,12 @@ export default {
 
     data() {
         return {
-
+            twoCommentData: {
+                avatar: "https://oss.gter.net/avatar/97KwEWANd_4DHWiY6VbnSUFSCKroYWFjYQ~~/middle",
+                content: "评论回复",
+            },
+            popState: "discussionSingle",
+            
         };
     },