From 82ee4d4e137bb1452676a61563eccae1a478d874 Mon Sep 17 00:00:00 2001
From: XiaoMo <a1300399510@qq.com>
Date: Fri, 31 Mar 2023 11:00:10 +0800
Subject: [PATCH] =?UTF-8?q?a1300399510@qq.com=20=E6=8F=90=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=8E=202023/03/31=20-11:00:01?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                      |  14 ++
 src/components/DetailReply.vue   | 218 +++++++++++++++++++++++++++++++
 src/views/detail/detailIndex.vue |  14 +-
 3 files changed, 244 insertions(+), 2 deletions(-)
 create mode 100755 src/components/DetailReply.vue

diff --git a/src/App.vue b/src/App.vue
index ec0d50c..925ab5b 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -95,4 +95,18 @@ export default {
 	-webkit-box-shadow: 0 0 .3rem rgba(0, 0, 0, .1);
 	box-shadow: 0 0 .3rem rgba(0, 0, 0, .1);
 }
+
+// 弹窗公共类 蒙版
+.pop-box {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	background-color: rgba(0, 0, 0, 0.64);
+	z-index: 100;
+	align-items: center;
+	justify-content: flex-end;
+	overflow: auto;
+}
 </style>
diff --git a/src/components/DetailReply.vue b/src/components/DetailReply.vue
new file mode 100755
index 0000000..11180b9
--- /dev/null
+++ b/src/components/DetailReply.vue
@@ -0,0 +1,218 @@
+<template>
+    <div>
+        <!-- 弹窗-讨论-单行 -->
+        <div class="pop-box flexflex flexcolumn" v-if="popState == 'discussionSingle'"
+            bindtap="{{ openDiscussionSingleState ? 'handlePopCancel' : '' }}">
+            <div class="discussion-box pop-box-box flexflex flexcolumn" style="border-radius: .4rem .4rem 0 0;"
+                catchtap="return false">
+                <div class="discussion-header flexacenter" v-if="twoCommentData">
+                    <image class="discussion-avatar" mode="widthFix" src="{{ twoCommentData.avatar }}"></image>
+                    <div class="discussion-text">{{ twoCommentData.content }}</div>
+                    <image class="discussion-icom" catchtap="clearTwoCommentData"
+                        style="height:13px;transform: translate(0);top:0;" mode="widthFix" src="../../img/u1428.png">
+                    </image>
+                </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" focus="{{ true }}"
+                            placeholder="{{ twoCommentData ? '写回复…' : '想问啥，大胆问…' }}" model:value="{{ commentContent }}" />
+                        <image class="discussion-single-input-icom" bindtap="setValue" data-key="popState"
+                            data-value="discussionMulti" mode="widthFix" src="../../img/u1448.png"></image>
+                    </div>
+                    <div class="discussion-single-btn flexcenter" bindtap="postComment" data-content="{{ commentContent }}">
+                        发布
+                    </div>
+                </div>
+            </div>
+
+        </div>
+
+        <!-- 弹窗-讨论-多行 -->
+        <div class="pop-box flexflex flexcolumn" wx:if="{{ popState == 'discussionMulti' }}" bindtap="handlePopCancel"
+            catchtouchmove="return false">
+            <div class="discussion-multi-box pop-box-box flexflex flexcolumn" style="border-radius: 30rpx 30rpx 0 0;"
+                catchtap="return false">
+                <div class="discussion-header flexacenter" v-if="twoCommentData">
+                    <image class="discussion-avatar":src="twoCommentData.avatar"></image>
+                    <div class="discussion-text">{{ twoCommentData.content }}</div>
+                    <image class="discussion-icom" catchtap="clearTwoCommentData" mode="widthFix" src="../../img/u1428.png">
+                    </image>
+                </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>
+                    <!-- <editor id="discussion-multi-textarea" class="discussion-multi-textarea flex1" bindinput="onDiscussionTextareaChange"  bindready="onDiscussionTextareaReady" placeholder="{{ twoCommentData ? '写回复…' : '想问啥，大胆问…' }}"></editor> -->
+                    <image class="discussion-multi-icom" catchtap="openDiscussionSingle" mode="widthFix"
+                        src="../../img/u1431.png"></image>
+                    <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>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DetailReply',
+    data() {
+        return {
+            commentContent: ""
+        };
+    },
+
+    mounted() {
+        console.log("gjklgjklg");
+    },
+
+    methods: {
+
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.discussion-single-box {
+    height: 72rpx;
+    justify-content: space-between;
+    padding: 26rpx 0;
+}
+
+.discussion-single-btn {
+    width: 105rpx;
+    height: 72rpx;
+    font-size: 27rpx;
+    color: #000;
+    border-radius: 12rpx;
+    margin-right: 24rpx;
+    background-color: rgba(80, 227, 194, 1);
+}
+
+.discussion-single-content {
+    height: 72rpx;
+    font-size: 27rpx;
+    border-radius: 12rpx;
+    background-color: rgba(242, 242, 242, 1);
+    margin-left: 24rpx;
+    margin-right: 24rpx;
+    padding-left: 18rpx;
+}
+
+.discussion-single-input-icom {
+    width: 42rpx;
+    height: 42rpx;
+    padding: 15rpx;
+}
+
+.discussion-single-input {
+    height: 100%;
+}
+
+.discussion-header {
+    padding-top: 24rpx;
+    padding-left: 24rpx;
+    position: relative;
+
+
+    .discussion-icom {
+        width: 27rpx;
+        height: 27rpx;
+        padding: 24rpx;
+        position: absolute;
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
+        z-index: 5;
+    }
+
+    .discussion-text {
+        font-size: 24rpx;
+        color: #7f7f7f;
+        margin-left: 18rpx;
+        width: 615rpx;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        /* 文字超出部分省略号显示 */
+        white-space: nowrap;
+        /* 不换行 */
+    }
+
+    .discussion-avatar {
+        width: 36rpx;
+        height: 36rpx;
+        border-radius: 50%;
+    }
+
+}
+
+.discussion-multi-box {
+    .discussion-header {
+        padding-bottom: 24rpx;
+        border-bottom: 1rpx solid #dbdcdd;
+    }
+
+    .discussion-multi-content {
+        position: relative;
+        height: 663rpx;
+        box-sizing: border-box;
+
+    }
+
+    .discussion-multi-textarea {
+        font-size: 30rpx;
+        padding: 24rpx;
+        /* height: 663rpx; */
+        box-sizing: border-box;
+        height: 50vh;
+
+        overflow: auto;
+
+        word-break: break-word;
+        line-height: 36rpx;
+    }
+
+    .discussion-multi-icom {
+        width: 36rpx;
+        height: 36rpx;
+        padding: 24rpx;
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 88;
+    }
+
+    .discussion-multi-sum {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        padding: 24rpx;
+        font-size: 21rpx;
+        color: #aaaaaa;
+    }
+
+    .discussion-multi-bottom {
+        height: 96rpx;
+        border-top: 1rpx solid #dbdcdd;
+        justify-content: flex-end;
+        padding-right: 24rpx;
+    }
+
+    .discussion-multi-btn {
+        background-color: rgba(80, 227, 194, 1);
+        border-radius: 12rpx;
+        width: 105rpx;
+        height: 66rpx;
+        margin: 15rpx 0;
+        font-size: 27rpx;
+    }
+
+}
+</style>
\ No newline at end of file
diff --git a/src/views/detail/detailIndex.vue b/src/views/detail/detailIndex.vue
index 9a561dc..e2b446a 100755
--- a/src/views/detail/detailIndex.vue
+++ b/src/views/detail/detailIndex.vue
@@ -37,8 +37,10 @@
                     <!-- 回复引用 -->
                     <div class="quotation flexflex">
                         <svg-icon icon-class="quotation-left" class-name="quotation-icon"></svg-icon>
-                        <div class="quotation-wenzi flex1 three-lines">这个离开香港是否超过180天，应该是居籍的判断，而非物理空间变化的判断。简单来说，只要你在香港纳税，你在香港有工作，有现金流，有房子…这个离开香港是否超过180天，应该是居籍的判断，而非物理空间变化的判断。简单来说，只要你在香港纳税，你在香港有工作，有现金流，有房子…这个离开香港是否超过180天，应该是居籍的判断，而非物理空间变化的判断。简单来说，只要你在香港纳税，你在香港有工作，有现金流，有房子…</div>
-                        
+                        <div class="quotation-wenzi flex1 three-lines">
+                            这个离开香港是否超过180天，应该是居籍的判断，而非物理空间变化的判断。简单来说，只要你在香港纳税，你在香港有工作，有现金流，有房子…这个离开香港是否超过180天，应该是居籍的判断，而非物理空间变化的判断。简单来说，只要你在香港纳税，你在香港有工作，有现金流，有房子…这个离开香港是否超过180天，应该是居籍的判断，而非物理空间变化的判断。简单来说，只要你在香港纳税，你在香港有工作，有现金流，有房子…
+                        </div>
+
 
                         <div class="quotation-bottom"></div>
                     </div>
@@ -52,10 +54,12 @@
         <!-- 分页 -->
 
 
+        <detail-reply></detail-reply>
     </div>
 </template>
 
 <script>
+import DetailReply from '@/components/DetailReply'
 export default {
     name: 'detailIndex',
 
@@ -72,6 +76,10 @@ export default {
     methods: {
 
     },
+
+    components: {
+        DetailReply
+    }
 };
 </script>
 
@@ -220,6 +228,8 @@ export default {
                     font-size: .32rem;
                     border-radius: .16rem;
                     background: rgb(246, 246, 246);
+                    padding: .36rem .24rem;
+                    box-sizing: border-box;
 
                     .quotation-icon {
                         width: .32rem;