布局交互调整

src/components/QuestionComment.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import { ElMessage,ElMessageBox  } from 'element-plus'
 import {ArrowUp} from "@element-plus/icons-vue";
 import * as $api from '@/api/question'
@@ -8,8 +8,16 @@ const props = defineProps({
     item: Object
 })
 
+
 const dataInfo = ref({...props.item,commentInfo: {}});
 
+watch(
+    ()=>props.item,
+    (newval)=>{
+        console.log(newval)
+        dataInfo.value=props.item
+    }
+)
 
 /* 点赞/吐槽 */
 const setLikeHandle = async(type) => {
@@ -32,12 +40,8 @@ const setLikeHandle = async(type) => {
 }
 
 
-// 展开收起评论
+// 展开评论
 const openCommentHandle = () => {
-    if(dataInfo.value.commentInfo.show) {
-        closeComment()
-        return
-    }
     dataInfo.value.commentInfo = {
         show: true,
         commentList: [],
@@ -46,6 +50,7 @@ const openCommentHandle = () => {
     }
     getComment(1)
 }
+const comment_total = ref({});//评论数量
 /* 获取评论 */
 const getComment = async(type) => {
     dataInfo.value.commentInfo.default_type = type;
@@ -60,6 +65,10 @@ const getComment = async(type) => {
     
     if(code !== 200) return
     dataInfo.value.commentInfo.commentList = data.list || [];
+    comment_total.value = {
+        hot_num: data.hot_total,
+        my_num: data.my_total
+    }
 }
 /* 收起评论 */
 const closeComment = () => {
@@ -149,9 +158,14 @@ const delCommentHandle = ({community_question_comment_id},index) => {
             <img src="@/assets/question/tease.png" alt="" v-else class="icon">
             <text v-if="dataInfo.tease_total">{{dataInfo.tease_total}}</text>
         </view>
-        <view class="commetn-item-wrap" @click="openCommentHandle">
-            <img src="@/assets/question/comment.png" alt="" class="icon"> 
-            <text v-if="dataInfo.comment_total">{{dataInfo.comment_total}}</text>
+        <view class="commetn-item-wrap" >
+            <span 
+                @click="closeComment" 
+                v-if="dataInfo.commentInfo &&dataInfo.commentInfo.show"
+                style="cursor:pointer;color:#F3A52F"
+            >收起评论 <el-icon><ArrowUp /></el-icon></span>
+            <img src="@/assets/question/comment.png" alt="" class="icon" v-else @click="openCommentHandle">
+            <!-- <text v-if="dataInfo.comment_total">{{dataInfo.comment_total}}</text> -->
         </view>
         <view class="commetn-item-wrap" @click="setLikeHandle(1)">
             <img src="@/assets/question/like_act.png" alt="" v-if="dataInfo.op_type===1" class="icon">
@@ -179,8 +193,8 @@ const delCommentHandle = ({community_question_comment_id},index) => {
 
         <div class="list-cont">
             <ul class="list-tab">
-                <li :class="dataInfo.commentInfo.default_type===1 && 'act'" @click="getComment(1)">精选评论</li>
-                <li :class="dataInfo.commentInfo.default_type===2 && 'act'" @click="getComment(2)">我的评论</li>
+                <li :class="dataInfo.commentInfo.default_type===1 && 'act'" @click="getComment(1)">精选评论({{comment_total.hot_num}})</li>
+                <li :class="dataInfo.commentInfo.default_type===2 && 'act'" @click="getComment(2)">我的评论({{comment_total.my_num}})</li>
             </ul>
             <ul class="list-ul" v-if="dataInfo.commentInfo.commentList.length">
                 <li class="list-item" v-for="(item,index) in dataInfo.commentInfo.commentList" :key="item.community_question_comment_id">
@@ -193,18 +207,13 @@ const delCommentHandle = ({community_question_comment_id},index) => {
             </ul>
             <div class="nodata" v-else>暂无评论</div>
         </div>
-        <div class="slide-up" @click="closeComment">
+        <!-- <div class="slide-up" @click="closeComment">
             收起评论 <el-icon><ArrowUp /></el-icon>
-        </div>
+        </div> -->
     </div>
 </template>
 
 <style lang='scss' scoped>
-.btn-sty {
-    width: 140px;
-    height: 40px;
-    line-height: 40px;
-}
 .question-comment-wrapper {
     color: #999;
 	display: flex;
@@ -240,6 +249,11 @@ const delCommentHandle = ({community_question_comment_id},index) => {
         display: flex;
         align-items: center;
         justify-content: space-between;
+        .btn-sty {
+            width: 140px;
+            height: 40px !important;
+            line-height: 40px  !important;
+        }
     }
     .list-cont {
         border-top: 1px solid #F2F2F2;