cpdm_pc/src/components/CpdmMessage.vue

<script lang="ts" setup>
import { ref, defineExpose } from 'vue'
import { useRouter } from 'vue-router'
import { userInfoStore } from '@/stores'
import { ElMessage } from 'element-plus';
import { pubMsgApi } from '@/api/plan';
const router = useRouter()

//获取缓存用户信息
const userInfo = userInfoStore();
//留言显示的标志
const pub_visible = ref<boolean>(false)
//留言的内容
const des_input = ref<string>('')
//用户的姓名
const userName = ref<string>('')
//用户的编号
const userNo = ref<string>('');
//用户的性别
const userSex = ref<string>('')
//防止重复点
const isLock = ref<boolean>(false)

const open = () => {
    userName.value = userInfo.userInfo.userName;
    userNo.value = userInfo.userInfo.userNo;
    userSex.value = userInfo.userInfo.gender;
    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)
    if (res.code == 200) {
        ElMessage({
            message: '留言成功',
            type: 'success'
        })
        des_input.value = ''
        isLock.value = false
        pub_visible.value = false
        //开始跳转到页面测试记录页面
        router.push({ name: 'popularizationScience' })
    } else {
        ElMessage({
            message: res.msg,
            type: 'error'
        })
    }
    //调用新增留言的方法
}
//点击关闭弹出框
const colseMessage = () => {
    router.push({ name: 'popularizationScience' })
}
defineExpose({ open })
</script>
<template>


    <el-dialog v-model="pub_visible" :show-close="true" @closed="colseMessage" width="60%"
        style="border-radius: 40px;  ">
        <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>
</template>
<style lang="scss" scoped>
:deep(.el-textarea__inner) {
    background-color: #F7F7F7 !important;
    border: none !important;
    border-radius: 20px;
    border: none !important;
    box-shadow: none !important;
}

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

.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: 12px;
        border: 3px solid #48D68E;
        color: #ffffff;
        background-color: #000000;

        padding: 8px 30px;
        cursor: pointer;
        display: flex;
        align-items: center;
    }
}
</style>