新讨论

app.vue

@@ -85,7 +85,7 @@ provide("isGetLoginState", isGetLoginState)
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+    font-family: "PingFangSC-Regular", "PingFang SC", sans-serif !important;
 }
 
 .flexflex {

assets/css/DetailsComments.css

@@ -165,10 +165,12 @@
 }
 .input-box .bottom .operate .item {
   display: inline-flex;
-  margin-right: 20px;
   position: relative;
   z-index: 1;
 }
+.input-box .bottom .operate .item:not(:last-of-type) {
+  margin-right: 20px;
+}
 .input-box .bottom .operate .item.pitch .emoji-box {
   display: flex;
 }
@@ -191,14 +193,14 @@
   /* 鼠标悬停时显示为可点击 */
 }
 .input-box .bottom .operate .item .emoji-box {
-  width: 581px;
+  width: 501px;
   border-radius: 8px;
   background-color: #fff;
   filter: drop-shadow(0 0 11px rgba(0, 0, 0, 0.1));
   top: 45px;
   position: absolute;
   z-index: 1;
-  left: -14px;
+  left: -15px;
   border: 1px solid #ebebeb;
   display: none;
   flex-wrap: wrap;
@@ -255,15 +257,20 @@
   padding: 0 8px;
   margin-left: 9px;
   display: none;
+  position: absolute;
+  width: max-content;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 20px;
 }
 .input-box .bottom .btn {
   font-size: 14px;
-  color: #333;
   width: 80px;
   height: 28px;
   line-height: 28px;
   text-align: center;
-  background-color: #fddf6d;
+  background-color: var(--main-color);
+  color: #fff;
   border-radius: 43px;
   cursor: pointer;
 }
@@ -278,6 +285,11 @@
 }
 .comment-list {
   margin-bottom: 78px;
+  padding-top: 17px;
+}
+.comment-list .input-box {
+  margin-bottom: 12px;
+  margin-right: 0;
 }
 .comment-list .comment-item {
   padding-right: 30px;
@@ -334,35 +346,43 @@
 .comment-list .comment-item .comment-content .comment-header .comment-header-right .menu-box {
   position: relative;
 }
-.comment-list .comment-item .comment-content .comment-header .comment-header-right .menu-box:hover .report-box {
+.comment-list .comment-item .comment-content .comment-header .comment-header-right .menu-box:hover .operate-box {
-  display: flex;
+  display: block;
 }
 .comment-list .comment-item .comment-content .comment-header .comment-header-right .menu-box .menu-icon {
   width: 14px;
   height: 14px;
   cursor: pointer;
 }
-.comment-list .comment-item .comment-content .comment-header .comment-header-right .menu-box .report-box {
+.comment-list .comment-item .comment-content .comment-header .comment-header-right .menu-box .operate-box {
   display: none;
+  flex-direction: column;
   position: absolute;
   top: 24px;
   right: 0;
-  width: 60px;
-  height: 24px;
-  background-color: #f6f6f6;
-  border: 1px solid #d7d7d7;
-  border-radius: 5px;
   font-size: 12px;
   color: #7f7f7f;
   cursor: pointer;
+  width: 60px;
+  z-index: 2;
+  border-radius: 5px;
+  background-color: #f6f6f6;
+  border: 1px solid #d7d7d7;
 }
-.comment-list .comment-item .comment-content .comment-header .comment-header-right .menu-box .report-box::after {
+.comment-list .comment-item .comment-content .comment-header .comment-header-right .menu-box .operate-box .item {
+  height: 24px;
+}
+.comment-list .comment-item .comment-content .comment-header .comment-header-right .menu-box .operate-box .item:not(:last-of-type) {
+  border-bottom: 1px solid #d7d7d7;
+}
+.comment-list .comment-item .comment-content .comment-header .comment-header-right .menu-box .operate-box::after {
   content: "";
   width: 58px;
   height: 36px;
   position: absolute;
   top: -14px;
   right: 0;
+  z-index: -1;
 }
 .comment-list .comment-item .comment-content .comment-header .comment-header-right .comment-icon {
   width: 14px;
@@ -396,6 +416,11 @@
   color: #92a1bf;
   display: inline;
 }
+.comment-list .comment-item .comment-content .comments-img {
+  width: 75px;
+  margin-bottom: 13px;
+  border-radius: 5px;
+}
 .comment-list .comment-item .comment-content .alreadyVoted {
   font-size: 12px;
   color: #aaaaaa;
@@ -540,3 +565,25 @@
 .empty-box {
   padding: 80px 0 110px;
 }
+.detail-image-mask {
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  border: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: rgba(255, 255, 255, 0.8);
+  z-index: 100;
+}
+.detail-image-mask .detail-image {
+  width: 80vw;
+  height: 80vh;
+  border-radius: 8px;
+  background-color: #111;
+}
+.detail-image-mask .detail-image .detail-img {
+  max-width: 100%;
+  max-height: 100%;
+}

assets/css/DetailsComments.less

@@ -199,9 +199,13 @@
         .operate {
             .item {
                 display: inline-flex;
-                margin-right: 20px;
                 position: relative;
                 z-index: 1;
+
+                &:not(:last-of-type) {
+                    margin-right: 20px;
+                }
+
                 &.pitch {
                     .emoji-box {
                         display: flex;
@@ -227,7 +231,7 @@
                 }
 
                 .emoji-box {
-                    width: 581px;
+                    width: 501px;
                     border-radius: 8px;
                     background-color: #fff;
                     // box-shadow: 0 0 11px rgba(0, 0, 0, 0.1);
@@ -235,7 +239,7 @@
                     top: 45px;
                     position: absolute;
                     z-index: 1;
-                    left: -14px;
+                    left: -15px;
                     border: 1px solid rgb(235, 235, 235);
                     display: none;
                     flex-wrap: wrap;
@@ -295,17 +299,24 @@
                     padding: 0 8px;
                     margin-left: 9px;
                     display: none;
+                    position: absolute;
+                    width: max-content;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    left: 20px;
                 }
             }
         }
         .btn {
             font-size: 14px;
-            color: #333;
+            // color: #333;
             width: 80px;
             height: 28px;
             line-height: 28px;
             text-align: center;
-            background-color: rgba(253, 223, 109, 1);
+            // background-color: rgba(253, 223, 109, 1);
+            background-color: var(--main-color);
+            color: #fff;
             border-radius: 43px;
             cursor: pointer;
         }
@@ -324,6 +335,13 @@
 
 .comment-list {
     margin-bottom: 78px;
+    padding-top: 17px;
+
+    .input-box {
+        margin-bottom: 12px;
+        margin-right: 0;
+    }
+
     .comment-item {
         &:not(:first-of-type) {
             .comment-avatar {
@@ -389,8 +407,8 @@
                     .menu-box {
                         position: relative;
 
-                        &:hover .report-box {
+                        &:hover .operate-box {
-                            display: flex;
+                            display: block;
                         }
 
                         .menu-icon {
@@ -399,20 +417,26 @@
                             cursor: pointer;
                         }
 
-                        .report-box {
+                        .operate-box {
                             display: none;
+                            flex-direction: column;
                             position: absolute;
                             top: 24px;
                             right: 0;
-                            width: 60px;
-                            height: 24px;
-                            background-color: rgba(246, 246, 246, 1);
-                            border: 1px solid rgba(215, 215, 215, 1);
-                            border-radius: 5px;
                             font-size: 12px;
                             color: #7f7f7f;
                             cursor: pointer;
-
+                            width: 60px;
+                            z-index: 2;
+                            border-radius: 5px;
+                            background-color: rgba(246, 246, 246, 1);
+                            border: 1px solid rgba(215, 215, 215, 1);
+                            .item {
+                                height: 24px;
+                                &:not(:last-of-type) {
+                                    border-bottom: 1px solid rgba(215, 215, 215, 1);
+                                }
+                            }
                             &::after {
                                 content: "";
                                 width: 58px;
@@ -420,6 +444,7 @@
                                 position: absolute;
                                 top: -14px;
                                 right: 0;
+                                z-index: -1;
                             }
                         }
                     }
@@ -463,6 +488,12 @@
                 }
             }
 
+            .comments-img {
+                width: 75px;
+                margin-bottom: 13px;
+                border-radius: 5px;
+            }
+
             .alreadyVoted {
                 font-size: 12px;
                 color: #aaaaaa;
@@ -633,3 +664,28 @@
 .empty-box {
     padding: 80px 0 110px;
 }
+
+.detail-image-mask {
+    width: 100%;
+    height: 100%;
+    max-width: none;
+    max-height: none;
+    border: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-color: rgba(255, 255, 255, 0.8);
+    z-index: 100;
+
+    .detail-image {
+        width: 80vw;
+        height: 80vh;
+        border-radius: 8px;
+        background-color: #111;
+
+        .detail-img {
+            max-width: 100%;
+            max-height: 100%;
+        }
+    }
+}

components/DetailsArea.vue

@@ -18,19 +18,19 @@
                     <img class="icon" src="@/assets/img/eye-icon-black.svg" />
                     {{ info["views"] }}
                 </div>
-                <div class="item flexacenter" style="cursor: auto;">
+                <!-- <div class="item flexacenter" style="cursor: auto;">
                     <img class="icon" src="@/assets/img/riposte-icon.png" />
                     {{ ripostecount["total"] }}
+                </div> -->
+                <div class="item flexacenter" @click="handleLike">
+                    <img class="icon" v-if="islike == 1" src="@/assets/img/like-icon-colours.png" />
+                    <img class="icon" v-else src="@/assets/img/like-icon.png" />
+                    {{ info["likes"] || "" }}
                 </div>
                 <div class="item flexacenter" style="cursor: auto;">
                     <img class="icon" src="@/assets/img/discuss-icon.png" />
                     {{ commentComments }}
                 </div>
-                <!-- <div class="item flexacenter" @click="handleLike">
-                    <img class="icon" v-if="islike == 1" src="@/assets/img/like-icon-colours.png" />
-                    <img class="icon" v-else src="@/assets/img/like-icon.png" />
-                    {{ info["likes"] || "" }}
-                </div> -->
                 <div class="item flexacenter" @click="handleCollect()">
                     <img class="icon" v-if="iscollection == 1" src="@/assets/img/collect-icon-colours.svg" />
                     <img class="icon" v-else src="@/assets/img/collect-icon.png" />
@@ -243,6 +243,7 @@ onBeforeUnmount(() => {
 const randomBottomEmojis = inject("randomBottomEmojis")
 const selectEomji = inject("selectEomji")
 const jointriposte = inject("jointriposte")
+
 </script>
 
 <style scoped lang="less">
@@ -277,11 +278,16 @@ const jointriposte = inject("jointriposte")
         justify-content: space-between;
         .floor-left {
             margin-left: 30px;
+            flex: 1;
+            justify-content: space-between;
+
+
             .item {
                 cursor: pointer;
                 color: #aaaaaa;
                 font-size: 13px;
                 margin-right: 50px;
+
                 .icon {
                     width: 16px;
                     margin-right: 5px;

components/DetailsComments.vue

@@ -13,9 +13,9 @@
             <div class="post-ok flexcenter" @click="submitAnswerComments(commentInputTop)">发送</div>
         </div> -->
 
-        <div class="input-box" v-if="false">
+        <div class="input-box" v-if="true">
             <div class="top flexflex">
-                <img class="avatar" v-if="user.avatar" :src="user.avatar" />
+                <img class="avatar" v-if="userInfoWin.avatar" :src="userInfoWin.avatar" />
                 <textarea class="input-textarea flex1" maxlength="500" v-model="commentInputTop" @input="autoResize" @paste="handleInputPaste" placeholder="说说你的想法或疑问…"></textarea>
             </div>
             <div class="picture-box" v-if="picture.url">
@@ -35,7 +35,7 @@
                     </div>
                     <div class="item flexacenter">
                         <input class="file" type="file" @change="handleFileUpload($event)" accept=".png, .jpg, .jpeg" />
-                        <img class="icon" style="border-radius: 0;" src="@/assets/img/picture-icon.png" alt="" />
+                        <img class="icon" src="@/assets/img/picture-icon.png" alt="" />
                         <span class="file-hint">最多可上传1张图片，支持在输入框中直接粘贴图片。</span>
                     </div>
                 </div>
@@ -76,7 +76,11 @@
                             <div class="comment-header-right flexacenter">
                                 <div class="menu-box flexacenter">
                                     <img class="menu-icon" src="@/assets/img/menu-icon-gray.svg" />
-                                    <div class="report-box flexcenter" @click="report(item['token'])">举报</div>
+                                    <div class="operate-box">
+                                        <div class="item flexcenter" @click="report(item['token'])">举报</div>
+                                        <div class="item flexcenter" @click="report(item['token'])">编辑</div>
+                                        <div class="item flexcenter" @click="commentDelete(item['token'], index)">删除</div>
+                                    </div>
                                 </div>
                                 <!-- <img class="comment-icon" title="回复" @click="openAnswerCommentsChild(index)" src="@/assets/img/comment-icon-gray.svg" /> -->
                                 <img class="comment-icon" title="回复" @click="!item['childState'] ? openAnswerCommentsChild(index) : closeAnswerCommentsChild()" src="@/assets/img/comment-icon-gray.svg" />
@@ -89,8 +93,37 @@
                         </div>
                         <!-- shutAnswerCommentsChild   openAnswerCommentsChild  -->
                         <div class="comment-text" @click="!item['childState'] ? openAnswerCommentsChild(index) : closeAnswerCommentsChild()">{{ item["content"] }}</div>
+                        <img class="comments-img" @click="handleAnswerText" :src="item.image?.base64 || item.image?.url" v-if="item.image?.url" />
                         <div class="alreadyVoted" v-if="item.voteoption">已投：{{ item.voteoption }}</div>
-                        <div class="comments-input-masking" @click="closeAnswerCommentsChild()" v-if="item['childState']"></div>
+                        <div class="input-box" v-if="item['childState']">
+                            <img class="cross" @click="closeAnswerCommentsChild()" src="@/assets/img/cross-icon.png" />
+                            <div class="top flexflex">
+                                <textarea class="input-textarea flex1" maxlength="500" placeholder="说说你的想法或疑问…" v-model="item['commentInput']" @input="autoResize" @paste="handleInputPaste($event, index)"></textarea>
+                            </div>
+                            <div class="picture-box" v-if="item.picture?.url">
+                                <div class="picture">
+                                    <img class="close" @click="closeFileUpload(index)" src="@/assets/img/close-icon.png" />
+                                    <img class="img" @click="handleAnswerText" :src="item.picture?.base64 || item.picture.url" />
+                                </div>
+                            </div>
+                            <div class="bottom flexacenter">
+                                <div class="operate flexacenter">
+                                    <div class="item" :class="{ 'pitch': item.emojiState }">
+                                        <img class="icon" src="@/assets/img/smiling-face.png" @click="openEmoji(index)" alt="" />
+                                        <div class="emoji-box">
+                                            <div class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEmoji(item, index)">{{ item }}</div>
+                                        </div>
+                                    </div>
+                                    <div class="item flexacenter">
+                                        <input class="file" type="file" @change="handleFileUpload($event, index)" accept=".png, .jpg, .jpeg" />
+                                        <img class="icon" src="@/assets/img/picture-icon.png" alt="" />
+                                        <span class="file-hint">最多可上传1张图片，支持在输入框中直接粘贴图片。</span>
+                                    </div>
+                                </div>
+                                <div class="btn" @click="submitAnswerComments(item['commentInput'], index)">发送</div>
+                            </div>
+                        </div>
+                        <!-- <div class="comments-input-masking" @click="closeAnswerCommentsChild()" v-if="item['childState']"></div>
                         <div class="comments-input-box" :class="{ 'comments-input-box-show': item['childState'] }">
                             <div class="comments-input">
                                 <el-input v-model="commentInput" type="textarea" placeholder="回复" :maxlength="500" show-word-limit></el-input>
@@ -99,7 +132,7 @@
                                     <div class="comments-btn flexcenter" @click="submitAnswerComments(commentInput, index)">发送</div>
                                 </div>
                             </div>
-                        </div>
+                        </div> -->
                         <!-- 子评论 -->
                         <div class="child-comments" v-if="item['child'].length > 0">
                             <div class="comment-item flexflex" v-for="(ite, i) in item['child']" :key="ite.id">
@@ -130,7 +163,12 @@
                                         <div class="comment-header-right flexacenter">
                                             <div class="menu-box flexacenter">
                                                 <img class="menu-icon" src="@/assets/img/menu-icon-gray.svg" />
-                                                <div class="report-box flexcenter" @click="report(ite['token'])">举报</div>
+                                                <div class="operate-box">
+                                                    <div class="item flexcenter" @click="report(ite['token'])">举报</div>
+                                                    <div class="item flexcenter" @click="report(ite['token'])">编辑</div>
+                                                    <div class="item flexcenter" @click="commentDelete(ite['token'], index, i)">删除</div>
+                                                </div>
+                                                <!-- <div class="report-box flexcenter" @click="report(ite['token'])">举报</div> -->
                                             </div>
                                             <img class="comment-icon" title="回复" @click="!ite['childState'] ? openAnswerCommentsChild(index, i) : closeAnswerCommentsChild()" src="@/assets/img/comment-icon-gray.svg" />
                                             <div class="flexacenter like-box" @click="commentLike(index, i)">
@@ -144,8 +182,37 @@
                                         <div class="comments-reply" v-if="ite?.reply?.nickname">@{{ ite?.reply?.nickname }}</div>
                                         {{ ite["content"] }}
                                     </div>
+                                    <img class="comments-img" @click="handleAnswerText" :src="ite.image?.base64 || ite.image?.url" v-if="ite.image?.url" />
                                     <div class="alreadyVoted" v-if="ite.voteoption">已投：{{ ite.voteoption }}</div>
-                                    <div class="comments-input-masking" @click="closeAnswerCommentsChild()" v-if="ite['childState']"></div>
+                                    <div class="input-box" v-if="ite['childState']">
+                                        <img class="cross" @click="closeAnswerCommentsChild()" src="@/assets/img/cross-icon.png" />
+                                        <div class="top flexflex">
+                                            <textarea class="input-textarea flex1" maxlength="500" :placeholder="'回复“' + (ite['nickname'] || '匿名用户') + '”：'" v-model="ite['commentInput']" @input="autoResize" @paste="handleInputPaste($event, index)"></textarea>
+                                        </div>
+                                        <div class="picture-box" v-if="ite.picture?.url">
+                                            <div class="picture">
+                                                <img class="close" @click="closeFileUpload(index, i)" src="@/assets/img/close-icon.png" />
+                                                <img class="img" @click="handleAnswerText" :src="ite.picture.base64 || ite.picture.url" />
+                                            </div>
+                                        </div>
+                                        <div class="bottom flexacenter">
+                                            <div class="operate flexacenter">
+                                                <div class="item" :class="{ 'pitch': ite.emojiState }">
+                                                    <img class="icon" src="@/assets/img/smiling-face.png" @click="openEmoji(index, i)" alt="" />
+                                                    <div class="emoji-box">
+                                                        <div class="emoji-icon" v-for="item in emojiData" :key="item" @click="selectEmoji(item, index, i)">{{ item }}</div>
+                                                    </div>
+                                                </div>
+                                                <div class="item flexacenter">
+                                                    <input class="file" type="file" @change="handleFileUpload($event, index, i)" accept=".png, .jpg, .jpeg" />
+                                                    <img class="icon" src="@/assets/img/picture-icon.png" alt="" />
+                                                    <span class="file-hint">最多可上传1张图片，支持在输入框中直接粘贴图片。</span>
+                                                </div>
+                                            </div>
+                                            <div class="btn" @click="submitAnswerComments(ite['commentInput'], index, i)">发送</div>
+                                        </div>
+                                    </div>
+                                    <!-- <div class="comments-input-masking" @click="closeAnswerCommentsChild()" v-if="ite['childState']"></div>
                                     <div class="comments-input-box" :class="{ 'comments-input-box-show': ite['childState'] }">
                                         <div class="comments-input">
                                             <el-input v-model="commentInput" type="textarea" placeholder="回复" :maxlength="500" show-word-limit></el-input>
@@ -154,7 +221,7 @@
                                                 <div class="comments-btn flexcenter" @click="submitAnswerComments(commentInput, index, i)">发送</div>
                                             </div>
                                         </div>
-                                    </div>
+                                    </div> -->
                                 </div>
                             </div>
                         </div>
@@ -183,6 +250,13 @@
             <div class="automatic-send flexcenter" @click="submitAnswerComments(reviewsPopoverInput)">发送</div>
         </div>
     </el-dialog>
+
+    <!-- 大图 -->
+    <div class="detail-image-mask flexcenter" v-if="dialogSrc" @click="dialogSrc = ''">
+        <div class="detail-image flexcenter">
+            <img class="detail-img" :src="dialogSrc" />
+        </div>
+    </div>
 </template>
 
 <script setup>
@@ -205,11 +279,7 @@ watch(
 
 onMounted(() => window.addEventListener("scroll", handleScroll))
 
-onMounted(() => {
+onMounted(() => {})
-    setInterval(() => {
-        console.log("userInfoWin", userInfoWin.value)
-    }, 2000)
-})
 
 const sendMessage = inject("sendMessage")
 const TAHomePage = inject("TAHomePage")
@@ -323,18 +393,26 @@ const submitAnswerComments = (content, index, i) => {
     // if (index == null) content = commentInputTop.value
     // else content = commentInput.value
 
-    if (i != null) parentid = targetCommentList[index]["child"][i]["id"]
+    let image = {}
-    else if (index != null) parentid = targetCommentList[index]["id"]
 
-    if (!content) {
+    if (i != null) {
-        ElMessage.error("请填写评论内容")
+        parentid = targetCommentList[index]["child"][i]["id"]
-        return
+        image = commentList.value[index]["child"][i]["picture"] || {}
-    }
+    } else if (index != null) {
+        parentid = targetCommentList[index]["id"]
+        image = commentList.value[index]["picture"] || {}
+    } else image = picture.value
+
+    // if (!content) {
+    //     ElMessage.error("请填写评论内容")
+    //     return
+    // }
 
     detailsSubmitommentListHttp({
         content,
         token: props.token,
         parentid,
+        image: image ? { aid: image.aid, url: image.url } : null,
     }).then(res => {
         if (res.code != 200) {
             ElMessage.error(res.message)
@@ -344,7 +422,10 @@ const submitAnswerComments = (content, index, i) => {
         let data = res.data
 
         if (i != null) {
-            console.log("data", data)
+            console.log("targetCommentList[index]", targetCommentList[index])
+            targetCommentList[index]["child"][i]["commentInput"] = ""
+            targetCommentList[index]["child"][i]["picture"] = {}
+
             let targetData = {
                 id: data["commentid"],
                 content,
@@ -359,6 +440,7 @@ const submitAnswerComments = (content, index, i) => {
                 // ...data.data
                 timestampnow: "刚刚",
                 uin: data.data?.uin,
+                image,
             }
 
             targetCommentList[index]["child"].unshift(targetData)
@@ -376,8 +458,11 @@ const submitAnswerComments = (content, index, i) => {
                 uin: data.data?.uin,
                 child: [],
                 voteoption: haveVotedValue.value || null,
+                image,
             }
             if (index != null) {
+                targetCommentList[index]["commentInput"] = ""
+                targetCommentList[index]["picture"] = {}
                 targetCommentList[index]["child"].unshift(targetData)
                 targetCommentList[index]["childnum"]++
             } else {
@@ -398,6 +483,8 @@ const submitAnswerComments = (content, index, i) => {
 
         closeAnswerCommentsChild()
 
+        picture.value = {}
+
         if (bottomNavigationState) {
             bottomNavigationState = false
             floorCommentBtn("back")
@@ -539,6 +626,209 @@ const postCommentFocusBlur = () => {
     }, 200)
 }
 
+let picture = ref({})
+
+let emojiState = ref(false)
+let emojiMaskState = ref(false)
+
+const emojiData = ["😀", "😁", "😆", "😅", "😂", "😉", "😍", "🥰", "😋", "😜", "🤪", "😎", "🤩", "🥳", "😔", "🙁", "😭", "😡", "😳", "🤗", "🤔", "🤭", "🤫", "😯", "😵", "🙄", "🥴", "🤢", "🤑", "🤠", "👌", "✌️", "🤟", "🤘", "🤙", "👍", "👎", "✊", "👏", "🤝", "🙏", "💪", "❤️", "💔", "🌹", "🥀", "🎉", "🎁", "🧧", "🌙", "⭐", "🌍", "💌", "📬", "🚗", "🚕", "🚲", "🛵", "🚀", "🚁", "⛵", "🚢", "🍎", "🍐", "🍊", "🍉", "🍓", "🍑", "🍔", "🍟", "🍕", "🥪", "🍜", "🍡", "🍨", "🍦", "🎂", "🍰", "🍭", "🍿", "🍩", "🧃", "🍹"]
+
+// 打开 Emoji
+const openEmoji = (index, i) => {
+    if (i != undefined) commentList.value[index].child[i]["emojiState"] = true
+    else if (index != undefined) commentList.value[index]["emojiState"] = true
+    else {
+        closeEmoji()
+        closeAnswerCommentsChild()
+        emojiState.value = true
+    }
+
+    emojiMaskState.value = true
+}
+
+// 关闭 Emoji
+const closeEmoji = (index, i) => {
+    commentList.value.forEach(ele => {
+        ele["emojiState"] = false
+        if (ele["child"] && ele["child"].length != 0) {
+            ele["child"].forEach(el => {
+                el["emojiState"] = false
+            })
+        }
+    })
+
+    emojiState.value = false
+    emojiMaskState.value = false
+}
+
+// 选择 Emoji
+const selectEmoji = (key, index, i) => {
+    closeEmoji()
+    if (i != undefined) {
+        if (!commentList.value[index]["child"][i]["commentInput"]) commentList.value[index]["child"][i]["commentInput"] = ""
+        commentList.value[index]["child"][i]["commentInput"] += key
+    } else if (index != undefined) {
+        if (!commentList.value[index]["commentInput"]) commentList.value[index]["commentInput"] = ""
+        commentList.value[index]["commentInput"] += key
+    } else {
+        commentInputTop.value += key
+    }
+}
+
+// 自动输入框增高
+const autoResize = e => {
+    e.target.style.height = "auto" // 重置高度
+    e.target.style.height = `${e.target.scrollHeight}px` // 设置为内容高度
+}
+
+const maxSize = 20 * 1024 * 1024 // 20MB
+
+const handleInputPaste = (event, index, ii) => {
+    const items = event.clipboardData.items // 获取粘贴的内容
+
+    for (let i = 0; i < items.length; i++) {
+        const item = items[i]
+        if (item.type.startsWith("image/")) {
+            event.preventDefault()
+            const file = item.getAsFile() // 获取文件
+
+            if (file.size > maxSize) {
+                ElMessage({
+                    message: "文件大小不能超过 20MB",
+                    type: "error",
+                })
+                return
+            }
+
+            const reader = new FileReader()
+            reader.onload = e => {
+                const base64 = e.target.result
+
+                uploadImg(base64).then(res => {
+                    const obj = {
+                        base64,
+                        ...res,
+                    }
+                    if (ii != undefined) commentList.value[index].child[ii]["picture"] = obj
+                    else if (index != undefined) commentList.value[index]["picture"] = obj
+                    else picture.value = obj
+                    ElMessage({
+                        message: "上传成功",
+                        type: "success",
+                    })
+                })
+            }
+            reader.readAsDataURL(file)
+        }
+    }
+}
+
+const handleFileUpload = (event, index, i) => {
+    closeEmoji()
+    const file = event.target.files[0] // 获取选择的文件
+
+    if (!file) return
+
+    if (file.size > maxSize) {
+        ElMessage({
+            message: "文件大小不能超过 20MB",
+            type: "error",
+        })
+        return
+    }
+
+    const reader = new FileReader()
+    reader.onload = e => {
+        const base64 = e.target.result
+        uploadImg(base64).then(res => {
+            const obj = {
+                base64,
+                ...res,
+            }
+
+            if (i != undefined) {
+                commentList.value[index].child[i]["picture"] = obj
+            } else if (index != undefined) {
+                commentList.value[index]["picture"] = obj
+            } else picture.value = obj
+
+            ElMessage({
+                message: "上传成功",
+                type: "success",
+            })
+        })
+    }
+    reader.readAsDataURL(file)
+}
+
+// 删除上传的图片
+const closeFileUpload = (index, i) => {
+    if (i != undefined) commentList.value[index].child[i]["picture"] = {}
+    else if (index != undefined) commentList.value[index]["picture"] = {}
+    else picture.value = {}
+}
+
+// 上传图片 获取图片url
+const uploadImg = base64 => {
+    return new Promise((resolve, reject) => {
+        // detailLoading.value = true
+        commonUploadHttp({
+            data: base64,
+        }).then(res => {
+            if (res.code != 200) {
+                ElMessage({
+                    message: res.message || "上传失败",
+                    type: "error",
+                })
+                return
+            }
+            let data = res.data
+            resolve(data)
+        })
+    })
+}
+
+let dialogSrc = ref("") // 大图的src
+
+// 处理点击答案图片 展开大图
+const handleAnswerText = e => {
+    if (e.target.tagName === "IMG") {
+        var src = e.target.getAttribute("src")
+        dialogSrc.value = src
+        window.addEventListener("keydown", handleKeydown)
+    }
+}
+
+// 大图的监听 esc 键盘按钮
+const handleKeydown = event => {
+    if (event.key !== "Escape") return
+    dialogSrc.value = ""
+    window.removeEventListener("keydown", handleKeydown) // 取消监听
+}
+
+// 点击删除
+const commentDelete = (token, index, i) => {
+    commentDeleteHttp({
+        token,
+    }).then(res => {
+        if (res.code != 200) {
+            ElMessage.error(res.message)
+            return
+        }
+
+        if (i >= 0) {
+            commentList.value[index].child.splice(i, 1)
+            commentList.value[index].childnum -= 1
+            console.log("childnum", commentList.value[index])
+        } else {
+            commentComments.value -= commentList.value[index].childnum
+            commentList.value.splice(index, 1)
+        }
+
+        commentComments.value -= 1
+    })
+}
+
 defineExpose({ changeCommentVoteoption, wipeCommentVoteoption, reviewsComment, bottomNavigationBar, closeAnswerCommentsChild })
 </script>
 

composables/api.js

@@ -113,3 +113,13 @@ export const riposteSubmitHttp = query => {
 export const riposteDetailHttp = query => {
     return Http.post("/api/riposte/riposteDetail", query)
 }
+
+// 评论相关 - 上传图片
+export const commonUploadHttp = query => {
+    return Http.post("https://oss.gter.net/upload/base64", query)
+}
+
+// 评论相关 - 删除评论
+export const commentDeleteHttp = query => {
+    return Http.post("/api/comment/commentDelete", query)
+}

utils/http.js

@@ -10,7 +10,7 @@ axios.defaults.withCredentials = true
 axios.interceptors.request.use( //响应拦截
     async config => {
         // 开发时登录用的，可以直接替换小程序的 authorization
-        config['headers']['authorization'] = process.env.NODE_ENV !== "production" && "8b57dba168f09b07175629edecac6bb7"
+        config['headers']['authorization'] = process.env.NODE_ENV !== "production" && "c1fb97e6994539d87922b1b60c09d43c"
         return config;
     },
     error => {