修改留言内容

src/api/plan.ts

@@ -97,6 +97,15 @@ export const pubMsgApi = (val: any) => {
             data: { ...val }
         })
 }
+//发布子留言
+export const subPubMsgApi = (val: any) => {
+    return http<any>(
+        {
+            method: 'post',
+            url: pubMsgUrl,
+            data: { ...val }
+        })
+}
 
 //分页查询留言
 export const queryMsgApi = (val: any) => {
@@ -105,4 +114,14 @@ export const queryMsgApi = (val: any) => {
             method: 'get',
             url: `${queryMsgUrl}?pageNum=${val.pageNum}&pageSize=${val.pageSize}`,
         })
-}
+}
+
+//分页查询留言--zliyan
+export const queryMsgApi1 = (val: any) => {
+    return http<any>(
+        {
+            method: 'get',
+            url: `${queryMsgUrl}?pageNum=${val.pageNum}&pageSize=${val.pageSize}&parentUserNo=${val.parentUserNo}`,
+        })
+}
+

src/views/Community.vue

@@ -7,15 +7,23 @@ import { userInfoStore } from '@/stores'
 //持久化设置 菜单状态
 import { menuStatusStore } from '@/stores'
 import { ElMessage } from 'element-plus';
-import { pubMsgApi, queryMsgApi } from '@/api/plan';
+import { pubMsgApi, queryMsgApi, queryMsgApi1, subPubMsgApi } from '@/api/plan';
 import { number } from 'echarts';
+import { fa } from 'element-plus/es/locales.mjs';
 const menuStatus = menuStatusStore();
 menuStatus.saveActiveIndex('3')
 
+const subMM = ref<string>('')
+
 //获取缓存用户信息
 const userInfo = userInfoStore();
+
+//显示发布评论的弹出框
 const pub_visible = ref<boolean>(false)
 
+//显示查看子评论的弹出框
+const sub_visible = ref<boolean>(false)
+
 //用户姓名
 const userName = ref<string>('')
 //用户性别
@@ -37,17 +45,130 @@ onMounted(() => {
     userNo.value = userInfo.userInfo.userNo;
     userSex.value = userInfo.userInfo.gender;
     //进到界面开始轮询
+    queryMsg()
 })
 //界面销毁函数
 
-const pageNum = ref<number>()
-const pageSize = ref<number>()
+const pageNum = ref<number>(1)
+const pageSize = ref<number>(10)
+//数据总共多少条
+const totol = ref<number>(0)
+//显示是否是在加载中
+const isLoading = ref<boolean>(false)
+//是否显示noMore
+const noMore = ref<boolean>(false)
+const list = ref<any>([])
 const queryMsg = async () => {
     let params = {
         pageNum: pageNum.value,
         pageSize: pageSize.value
     }
-    let res = await queryMsgApi(params)
+    let res: any = await queryMsgApi(params)
+    console.log(res)
+    if (res.code == 200) {
+        // 将值赋值给列表
+        if (res.data.content.length > 0) {
+            list.value.push(...res.data.content)
+            totol.value = res.data.totalElements
+        } else {
+            list.value = []
+            totol.value = 0
+            // totalElements
+        }
+    }
+
+}
+
+
+//获取数据报
+const getData = async () => {
+    //判断总条数是否大于当前页面的数据
+    console.log(totol.value == list.value.length)
+    //先判断
+    if (totol.value == list.value.length) {
+        //显示noMore
+        if (totol.value == 0) {
+            noMore.value = true;
+        } else {
+            noMore.value = false;
+        }
+
+        return
+    }
+
+    //先是加载中的话就不加载了
+    if (isLoading.value) {
+        return
+    }
+    isLoading.value = true;
+    //参数构造
+    pageNum.value++
+    //到这里就可以显示加载中
+    let res = await queryMsg()
+    isLoading.value = false;
+
+}
+
+//---------------------//查询字恢复------------------------字恢复
+const pageNum1 = ref<number>(1)
+const pageSize1 = ref<number>(10)
+//数据总共多少条
+const totol1 = ref<number>(0)
+//显示是否是在加载中
+const isLoading1 = ref<boolean>(false)
+//是否显示noMore
+const noMore1 = ref<boolean>(false)
+const list1 = ref<any>([])
+const queryMsg1 = async () => {
+    let params = {
+        pageNum: pageNum1.value,
+        pageSize: pageSize1.value,
+        parentUserNo: parentUserNo.value
+    }
+    let res: any = await queryMsgApi1(params)
+    console.log(res)
+    if (res.code == 200) {
+        // 将值赋值给列表
+        if (res.data.content.length > 0) {
+            list1.value.push(...res.data.content)
+            totol1.value = res.data.totalElements
+        } else {
+            list1.value = []
+            totol1.value = 0
+            // totalElements
+        }
+    }
+
+}
+
+//查询字恢复------------------------字恢复
+//获取数据报
+const getData1 = async () => {
+    //判断总条数是否大于当前页面的数据
+    console.log(totol1.value == list1.value.length)
+    //先判断
+    if (totol1.value == list1.value.length) {
+        //显示noMore
+        if (totol1.value == 0) {
+            noMore1.value = true;
+        } else {
+            noMore1.value = false;
+        }
+
+        return
+    }
+
+    //先是加载中的话就不加载了
+    if (isLoading1.value) {
+        return
+    }
+    isLoading1.value = true;
+    //参数构造
+    pageNum1.value++
+    //到这里就可以显示加载中
+    let res = await queryMsg1()
+    isLoading1.value = false;
+
 }
 
 //点击发布留言按钮  打开弹出框
@@ -59,11 +180,10 @@ const openPubMsg = () => {
     pub_visible.value = true
 }
 
-//点击进行发布信息
-const pubMsg = async () => {
 
-    console.log(des_input.value.value)
 
+//点击进行发布信息
+const pubMsg = async () => {
     if (des_input.value == '') {
         ElMessage({
             message: '留言不能为空',
@@ -80,14 +200,92 @@ const pubMsg = async () => {
         userName: userName.value,
         commentContent: des_input.value.value
     }
-    let res = await pubMsgApi(params)
-    des_input.value.value = ''
-    isLock.value = false
-    pub_visible.value = false
+    let res: any = await pubMsgApi(params)
+    if (res.code == 200) {
+        des_input.value.value = ''
+        isLock.value = false
+        pub_visible.value = false
+    } else {
+        ElMessage({
+            message: res.msg,
+            type: 'error'
+        })
+    }
+
     //调用新增留言的方法
 
 }
-//轮旋切换页面的方法
+//打开子页面进行回复
+//评论名称
+const comName = ref<string>('')
+//评论时间
+const comTime = ref<string>('')
+//具体评论
+const comDes = ref<string>('')
+const parentUserNo = ref<string>('')
+//评论性别
+const comSex = ref<string>('0')
+const subFun = (item: any) => {
+
+    comName.value = item.userName;
+    comTime.value = item.createTime;
+    comDes.value = item.commentContent;
+    parentUserNo.value = item.userNo
+    sub_visible.value = true
+    queryMsg1()
+}
+
+
+//点击进行发布信息-----子信息
+const subPubMsg = async () => {
+    if (subMM.value == '') {
+        ElMessage({
+            message: '留言不能为空',
+            type: 'warning'
+        })
+        return
+    }
+    if (isLock.value) {
+        return
+    }
+    isLock.value = true
+    // <!-- "parentUserNo": "string",
+    //             "userName": "string",
+    //             "userNo": "string"
+    //             "commentContent": "string", -->
+    let params = {
+        userNo: userNo.value,
+        userName: userName.value,
+        commentContent: subMM.value,
+        parentUserNo: parentUserNo.value
+    }
+    let res: any = await subPubMsgApi(params)
+    if (res.code == 200) {
+        subMM.value = ''
+        isLock.value = false
+        // sub_visible.value = false
+        //调用个查询
+        resetFun()
+        queryMsg1()
+    } else {
+        ElMessage({
+            message: res.msg,
+            type: 'error'
+        })
+    }
+
+    //调用新增留言的方法
+
+}
+const resetFun = () => {
+    pageNum1.value = 1;
+    pageSize1.value = 10;
+    totol1.value = 0;
+    isLoading1.value = false;
+    noMore1.value = false;
+    list1.value = [];
+
+}
 
 
 
@@ -129,28 +327,29 @@ onUnmounted(() => {
                         </div>
                     </div>
                     <!-- //留言内容 -->
-                    <div class="com_out">
-                        <div class="com_title">
-                            <img src="../assets/kepu/man.png" />
-                            <div class="com_des">
-                                <div class="com_name">
-                                    李武
-                                </div>
-                                <div class="com_time">
-                                    2024/07/23 20:05:24
+                    <div class="com_out" style="overflow: auto" v-infinite-scroll="getData">
+                        <div v-for="item in list">
+                            <div class="com_title">
+                                <img src="../assets/kepu/man.png" />
+                                <div class="com_des">
+                                    <div class="com_name">
+                                        {{ item.userName }}
+                                    </div>
+                                    <div class="com_time">
+                                        {{ item.createTime }}
+                                    </div>
                                 </div>
                             </div>
+                            <div class="com_content">
+                                {{ item.commentContent }}
+                            </div>
+                            <div class="com_yan">
+                                <img height="40px" src="../assets/kepu/yan.png" @click="subFun(item)" />
+                                <span>{{ item.count }}</span>
+                            </div>
                         </div>
-                        <div class="com_content">
-                            请根据您最近一个月的实际情况，选择最符合自己的选项。所有陈述都无正确和错误之分。所以请您不要再三思考，要根据第一反应诚实作答。
-                            选择最符合自己的选项。所有陈述都无正确和错误之分。所以请您不要再三思考，要根据第一反应诚实作答
-                        </div>
-                        <div class="com_yan">
-                            <img height="40px" src="../assets/kepu/yan.png" />
-                            <span>42</span>
-                        </div>
-
-
+                        <div style="text-align: center;margin-top:20px" v-show="isLoading">努力加载中...</div>
+                        <div style="text-align: center;;margin-top:20px" v-show="noMore">没有更多了</div>
                     </div>
                 </div>
 
@@ -159,6 +358,7 @@ onUnmounted(() => {
         </div>
 
     </div>
+
     <el-dialog v-model="pub_visible" :show-close="true" width="60%" style="border-radius: 40px;">
         <template #header="{ close, titleId, titleClass }">
             <div class="my-header">
@@ -182,9 +382,101 @@ onUnmounted(() => {
 
     </el-dialog>
 
+    <!-- comName.value = item.userName;
+    comTime.value = item.createTime;
+    comDes.value = item.commentContent; -->
+
+    <el-dialog v-model="sub_visible" :show-close="true" width="60%" style="border-radius: 40px;">
+        <template #header="{ close, titleId, titleClass }">
+            <div class="my-header">
+                <div class="msg_dig">
+                    <img width="40px" src="../assets/kepu/man.png" />
+
+                    <div style="margin-left:20px;display: flex;flex-direction: column;justify-content: space-between;">
+                        <div>
+                            {{ comName }}
+                        </div>
+                        <div style="color:#999999;font-size: 10px;margin-top:10px">{{ comTime }}</div>
+
+                    </div>
+                </div>
+                <!-- 新增恢复 -->
+                <!-- "parentUserNo": "string",
+                "userName": "string",
+                "userNo": "string"
+                "commentContent": "string", -->
+                <!-- <textarea ref="des_input" rows="5" cols="43" placeholder="写下你珍贵的留言" /> -->
+                <div class="com_des">
+                    {{ comDes }}
+                </div>
+                <el-divider border-style="dotted" style="margin-top:40px;" />
+                <div class="sub_infinite-list-wrapper" style="overflow: auto" v-infinite-scroll="getData1">
+                    <div v-for="item in list1" style="margin-top:40px">
+
+                        <div class="msg_dig">
+                            <img width="40px" src="../assets/kepu/man.png" />
+
+                            <div
+                                style="margin-left:20px;display: flex;flex-direction: column;justify-content: space-between;">
+                                <div>
+                                    {{ item.userName }}
+                                </div>
+                                <div style="color:#999999;font-size: 10px;margin-top:10px">{{ item.createTime }}</div>
+
+                            </div>
+                        </div>
+
+                        <div class="com_des1">
+                            {{ item.commentContent }}
+                        </div>
+                    </div>
+                    <div style="text-align: center;margin-top:20px" v-show="isLoading1">努力加载中...</div>
+                    <div style="text-align: center;;margin-top:20px" v-show="noMore1">没有更多了</div>
+                </div>
+
+                <el-divider border-style="dotted" style="margin-top:40px;" />
+                <div class="input_cus">
+                    <el-input v-model="subMM" placeholder="发表你的评论" />
+                </div>
+
+
+
+                <div class="home_mid_plan_button">
+
+                    <div class="pub_button" @click="subPubMsg"> 发布
+                    </div>
+                </div>
+
+            </div>
+        </template>
+
+    </el-dialog>
+
 </template>
 <style></style>
 <style lang="scss" scoped>
+:deep(.el-input__wrapper) {
+    align-items: center;
+    background-color: #F7F7F7 !important;
+    border-radius: 40px !important;
+
+    // border: none;
+    // outline: none !important;
+    box-shadow: none;
+}
+
+:deep(.input_cus .el-input__inner) {
+    height: 60px;
+    border: none;
+    outline: none;
+}
+
+
+
+.sub_infinite-list-wrapper {
+    max-height: 400px;
+}
+
 // :v-deep(.el-textarea__inner) {
 //     color: var(--textarea-color)
 // }
@@ -223,6 +515,20 @@ label {
     display: flex;
     flex-direction: column;
 
+    .com_des {
+        background-color: #F7F7F7;
+        padding: 20px 40px;
+        margin-top: 40px;
+        border-radius: 40px;
+    }
+
+    .com_des1 {
+
+        padding: 20px 40px;
+        margin-top: 10px;
+        border-radius: 40px;
+    }
+
     .home_mid_plan_button {
         width: 100%;
         display: flex;
@@ -334,7 +640,7 @@ label {
 
             .com_out {
                 min-height: 500px;
-
+                max-height: 500px;
 
                 .com_title {
                     margin-top: 40px;