cpdm_pc/src/views/Community.vue

<script setup lang="ts">
import CpmdHeader from '@/components/CpmdHeader.vue';
import { onMounted, onUnmounted, ref } from 'vue'

import { userInfoStore } from '@/stores'
import { getUnread } from '../utils/test'
//持久化设置 菜单状态
import { menuStatusStore } from '@/stores'
import { ElMessage } from 'element-plus';
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>('')
//用户性别
const userSex = ref<string>('')
//用户编号
const userNo = ref<string>('')
//用户发送的信息
const user_msg = ref<string>('')
//输入框样式
const des_input = ref<any>()
//防止重复点

const isLock = ref<boolean>(false)


//刚进入页面就将高度设置为页面需要的
onMounted(() => {
    userName.value = userInfo.userInfo.userName;
    userNo.value = userInfo.userInfo.userNo;
    userSex.value = userInfo.userInfo.gender;
    //进到界面开始轮询
    // queryMsg()
    if (userInfo.token) {
        getUnread()
    }
})
//界面销毁函数
const parentId = ref<string>('')

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: any = await queryMsgApi(params)
    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
            noMore.value = true

            // totalElements
        }
    }
}
//获取数据报
const getData = async () => {
    //判断总条数是否大于当前页面的数据
    //先判断
    if (totol.value < list.value.length) {
        noMore.value = true;
        return
    }
    if (totol.value != 0) {
        if (totol.value == list.value.length) {
            //显示noMore
            if (totol.value == 0) {
                noMore.value = false;
            } else {
                noMore.value = true;
            }

            return
        }
    }


    // //先是加载中的话就不加载了
    // if (isLoading.value) {
    //     return
    // }
    isLoading.value = true;
    //参数构造

    //到这里就可以显示加载中
    let res = await queryMsg()
    pageNum.value++
    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
        parentId: parentId.value
    }
    let res: any = await queryMsgApi1(params)

    //修改文本

    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 () => {
    //判断总条数是否大于当前页面的数据
    if (totol1.value < list1.value.length) {
        noMore1.value = true;
        return
    }
    //先判断
    if (totol1.value == list1.value.length) {
        //显示noMore
        if (totol1.value == 0) {
            noMore1.value = false;
        } else {

            noMore1.value = true;
        }

        return
    }

    //先是加载中的话就不加载了
    if (isLoading1.value) {
        return
    }
    isLoading1.value = true;
    //参数构造

    //到这里就可以显示加载中
    let res = await queryMsg1()
    pageNum1.value++
    isLoading1.value = false;

}

//点击发布留言按钮  打开弹出框
const openPubMsg = () => {
    //重置输入框

    user_msg.value = ''
    //调用填写的内容
    pub_visible.value = true
}



//点击进行发布信息
const pubMsg = async () => {
    //判断用户是否登陆了
    if (!userInfo.token) {
        ElMessage({
            message: '尚未登录',
            type: 'warning'
        })
        return
    }
    if (des_input.value == '') {
        ElMessage({
            message: '留言不能为空',
            type: 'warning'
        })
        return
    }
    if (isLock.value) {
        return
    }
    isLock.value = true
    let params = {
        userNo: userNo.value,
        userName: userName.value,
        commentContent: des_input.value
    }
    let res: any = await pubMsgApi(params)
    //
    //重新刷新列表
    //
    //重新渲染列表数据
    // list.value = []
    // pageNum.value = 1
    // getData()
    if (res.code == 200) {
        list.value.unshift(res.data)
        des_input.value = ''
        isLock.value = false
        pub_visible.value = false
        ElMessage({
            message: res.msg,
            type: 'success'
        })
    } 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) => {
    parentId.value = item.id;
    comName.value = item.userName;
    comTime.value = item.createTime;
    comDes.value = item.commentContent;
    parentUserNo.value = item.userNo
    sub_visible.value = true
    subMM.value = ''
    //打开的时候
    // 需要将数据值空
    resetFun()

    queryMsg1()
}


//点击进行发布信息-----子信息
const subPubMsg = async () => {
    //判断是否登陆了
    if (!userInfo.token) {
        ElMessage({
            message: '尚未登录',
            type: 'warning'
        })
        return
    }
    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
        parentId: parentId.value
    }
    let res: any = await subPubMsgApi(params)
    if (res.code == 200) {

        //查找list中ID等于parentID的对象，将起count+1
        // let li = list.value.filter((item:any)=>{
        //     return item.id==parentId.value
        // })
        for (let i = 0; i < list.value.length; i++) {
            if (list.value[i].id == parentId.value) {
                list.value[i].count += 1
            }
        }

        isLock.value = false
        // sub_visible.value = false
        //调用个查询
        //加一条在上边
        list1.value.push(res.data)
        subMM.value = ''
        //禁用滚动
        //在这里应该需要滚动到最底部
        // 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 = [];

}



//退出页面销毁 方法
onUnmounted(() => {

})




</script>

<template>
    <div class="home_header_out">
        <div class=" home_header_inner">
            <CpmdHeader />
            <div style="text-align: center;">
                <!-- <img class="xlts_img" style="margin-top:40px" src="../assets/home/other_text.png" /> -->
            </div>
        </div>
        <div class="leave_message">
            <!-- <img class="img" src="../assets/zs/community.png" alt=""> -->
            <div class="font_blue"> 留言社区 </div>
        </div>
        <div class="kply">

            <div class="kply_inner">

                <div style="padding :20px 40px">
                    <!-- <div style="padding:10% 20% ;" v-show="true">
                        <img width="100%" src="../assets/planNo.png">
                    </div> -->

                    <div class="kepu_title">
                        <div class="kepu_title_des">
                            留言社区
                        </div>
                        <div>
                            <div class="home_mid_plan_button">

                                <div class="pub_button" @click="openPubMsg">
                                    <!-- <img width="30px" src="../assets/kepu/pub.png" />&nbsp;&nbsp; -->
                                    发布留言
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- //留言内容 -->
                    <div class="com_out" style="overflow: auto" :infinite-scroll-distance="20"
                        :infinite-scroll-disabled="isLoading || noMore" 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 class="com_yan">
                                    <span style="color: #818996;">{{ item.count }}</span>
                                    <img height="20px" src="../assets/kepu/yan1.png" @click="subFun(item)" />

                                </div>
                            </div>

                            <el-divider content-position="right"></el-divider>
                        </div>
                        <div style="text-align: center" v-if="isLoading">努力加载中...</div>
                        <div style="text-align: center;" v-if="noMore">没有更多了</div>
                    </div>

                </div>

            </div>

        </div>

    </div>

    <el-dialog v-model="pub_visible" :show-close="true" width="60%" style="border-radius: 5px;  ">
        <template #header="{ close, titleId, titleClass }">
            <div class="my-header">
                <div class="msg_dig">
                    <img width="40px" v-show="userSex == '1'" src="../assets/kepu/man.png" />
                    <img width="40px" v-show="userSex == '0'" src="../assets/kepu/woman.png" />
                    <div style="margin-left:20px">{{ userName }}</div>
                </div>

                <!-- <textarea ref="des_input" rows="5" cols="43" placeholder="写下你珍贵的留言" /> -->
                <el-input type="textarea" style="margin-top: 20px;" :autosize="{ minRows: 6 }" placeholder="写下你珍贵的留言"
                    v-model="des_input">
                </el-input>

                <div class="home_mid_plan_button">

                    <div class="pub_button" @click="pubMsg"> 发布留言
                    </div>
                </div>

            </div>
        </template>
    </el-dialog>
    <el-dialog v-model="sub_visible" :show-close="true" width="60%" top="5vh" style="border-radius: 5px;">
        <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>
                <div class="com_des">
                    {{ comDes }}
                </div>
                <el-divider border-style="dotted" style="margin-top:40px;" />
                <div class="sub_infinite-list-wrapper" style="overflow: auto" :infinite-scroll-distance="20"
                    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-if="isLoading1">努力加载中...</div>
                    <div style="text-align: center;;margin-top:20px" v-if="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-divider--horizontal) {
    margin: 16px 0 !important;
    opacity: 0.4;
}

:deep(.el-input__wrapper) {
    align-items: center;
    background-color: #F7F7F7 !important;
    border-radius: 5px !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)
// }
// textarea {
//     font-size: 0.8rem;
//     letter-spacing: 1px;
// }
:deep(.el-textarea__inner) {
    background-color: #F7F7F7 !important;
    border: none !important;
    border-radius: 20px;
    border: none !important;
    box-shadow: none !important;
}

textarea {
    margin-top: 30px;
    outline: none;
    padding: 10px;
    max-width: 100%;
    line-height: 1.5;
    border-radius: 5px;
    border: none;
    background-color: #F7F7F7;
}

textarea:focus {
    outline: none;
    border: none !important;
}



label {
    display: block;
    margin-bottom: 10px;
}


.my-header {
    padding: 60px 60px 10px 60px;

    display: flex;
    flex-direction: column;

    .com_des {
        background-color: #F7F7F7;
        padding: 20px 40px;
        margin-top: 40px;
        border-radius: 5px;
    }

    .com_des1 {

        padding: 20px 40px;
        margin-top: 10px;
        border-radius: 40px;
    }

    .home_mid_plan_button {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: end;
        margin-top: 40px;

        // text-align: right;
        .pub_button {
            cursor: pointer;
            // width: 100px;
            border-radius: 5px;
            border: 1px solid #48D68E;
            color: #ffffff;
            background-color: #3B3B3B;

            padding: 8px 30px;
            cursor: pointer;
            display: flex;
            align-items: center;
        }
    }

    .msg_dig {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
}

.home_header_out {
    /* 启用滚动捕捉对齐 */
    scroll-snap-align: start;
    // position: relative;
    padding-bottom: 60px;
    width: 100%;
    min-width: 1200px;
    // background-image: url('../assets/home/bg_ty.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #ffffff; //估计是需要动态
    flex: 1;

    //获取屏幕宽度home_header_out 这个div的宽度--然后宽度*1000再除1920即为当前div的宽度
    .home_header_inner {
        min-height: 1;
        left: 0;
        right: 0;
        margin: auto;
        // height: 100px;
        width: 100%;

        .xlts_img {
            height: 60px;
        }
    }

    .leave_message {

        left: 0;
        right: 0;
        margin: auto;
        width: 1200px;
        margin-bottom: 20px;
        margin-top: 20px;

        .font_blue {
            position: relative;
            color: #00DE7E;
            font-weight: 700;
            font-size: 22px;
            font-family: 'Rammetto One-Regular';
            padding-top: 30px;
            z-index: 10;
            background: url(../assets/zs/community.png) no-repeat;
            background-size: auto 50px;

            // img {
            //     position: absolute;
            //     height: 50px;
            //     left: 0;
            //     top: 10px;
            // }
        }


    }

    .kply {
        width: 100%;
        // margin-top: 40px;
        // background-color: #FAFAFA;

        .kply_inner {
            left: 0;
            right: 0;
            margin: auto;
            width: 1200px;
            // padding: 20px 20px;
            background-color: #ffffff;
            border-radius: 5px;
            // height: 1000px;
            box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);

            // margin-bottom: 60px;
            .kepu_title {

                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;

                .kepu_title_des {
                    font-family: Alibaba PuHuiTi 2.0;
                    font-weight: 600;
                    font-size: 20px;
                    color: #000000;
                }

                .home_mid_plan_button {
                    width: 100%;
                    display: flex;
                    flex-direction: row;
                    justify-content: end;

                    // text-align: right;
                    .pub_button {
                        cursor: pointer;
                        // width: 100px;
                        border-radius: 5px;
                        border: 1px solid #48D68E;
                        color: #ffffff;
                        background-color: #3B3B3B;

                        padding: 8px 30px;
                        cursor: pointer;
                        display: flex;
                        align-items: center;
                    }
                }

            }

            .com_out {
                height: 500px;
                padding-top: 20px;

                .com_title {
                    margin-top: 5px;
                    display: flex;
                    flex-direction: row;
                    align-items: center;

                    img {
                        width: 40px
                    }

                    .com_des {
                        margin-left: 5px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        height: 40px;

                        .com_name {

                            font-weight: normal;
                            font-size: 16px;
                            color: #222222;

                        }

                        .com_time {
                            font-weight: normal;
                            font-size: 16px;
                            color: #000000;
                            opacity: 0.4;

                        }

                    }


                }

                .com_content {
                    letter-spacing: 3px;
                    margin-top: 10px;
                    background-color: #F6F6F6;
                    padding: 10px 20px;
                    border-radius: 5px;
                    line-height: 24px;
                    font-size: 14px;
                }

                .com_yan {
                    margin-top: 10px;
                    display: flex;
                    align-items: center;
                    justify-content: end;

                    span {
                        margin-left: 8px;
                    }
                }
            }
        }
    }


}



.home_mid {
    // background-color: blanchedalmond;
    width: 1200px;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 40px;
    // position: relative;




    .kepu_title {
        text-align: center;

        font-size: 50px;
        color: #111111;
        line-height: 95px;

        // width: 100%;
        // left: 0;
        // right: 0;
        // margin: auto
    }

    .kepu_title_sub {
        margin-top: 30px;
        text-align: center;
        font-size: 28px;
        color: #48D68E;
        line-height: 26px;
    }

    .man1_group {
        margin-top: 60px;
        height: 100%;
        display: flex;

        .man1 {
            position: relative;
            width: 327px;
            // height: 100%;

            // height: 100%
            .man1_img {
                position: absolute;
                bottom: 0;
                /* bottom: 0px; */
                /* height: auto; */
                width: 100%;
                left: 100px
            }

        }

        .des {
            border: #48D68E solid 5px;
            border-radius: 40px;
            padding: 20px;
            letter-spacing: 6px;
            flex: 1;

            .des_inner {
                border: 1px dashed #48D68E;
                border-radius: 40px;
                padding-bottom: 40px;
                padding-top: 30px;
                padding-left: 100px;
                padding-right: 20px;
                letter-spacing: 6px;
                font-weight: normal;
                font-size: 24px;
                color: #333333;
                line-height: 40px;
            }
        }
    }

    .man2_group {
        margin-top: 60px;
        height: 100%;
        display: flex;

        .man2 {
            position: relative;
            width: 327px;
            // height: 100%;

            // height: 100%
            .man2_img {
                position: absolute;
                bottom: 0;
                /* bottom: 0px; */
                /* height: auto; */
                width: 100%;
                left: -100px
            }

        }

        .des2 {
            border: #48D68E solid 5px;
            border-radius: 40px;
            padding: 20px;
            letter-spacing: 6px;
            flex: 1;

            .des2_inner {
                border: 1px dashed #48D68E;
                border-radius: 40px;
                padding-bottom: 40px;
                padding-top: 30px;
                padding-left: 20px;
                padding-right: 100px;
                letter-spacing: 6px;
                font-weight: normal;
                font-size: 24px;
                color: #333333;
                line-height: 40px;
            }
        }
    }

    .get_more {
        text-align: center;

        img {
            width: 300px;
            margin-top: 60px;
            margin-bottom: 60px;
        }
    }
}



// .home_footer_out {
//     width: 100%;
//     background-color: #000000;
// }</style>