storlead-centre-platform/ui/sp-user-center/src/layout/components/notice/index.vue

<template>
    <el-card shadow="never" class="list-card" body-style="padding-right: 0">
        <template #header>
            <el-radio-group v-model="search.messageType" @change="changeType">
                <el-radio-button v-for="item in typeData" :value="item.messageType">
                    <template #default>
                        {{ item.messageTypeName }}
                        <el-badge :value="item.stateNumber" class="badge" v-if="item.stateNumber > 0"></el-badge>
                    </template>
                </el-radio-button>
            </el-radio-group>
            <div class="right-btn">
                 <span  @click="setMsgToolsOpen">
                        <i-ep-Setting />
                        接收设置
                </span>

                <span @click="allRead">
                    <i-ep-MessageBox /> 全部标记为已读
                </span>
                <span @click="clearMessage">
                    <i-ep-DeleteFilled /> 清空已读
                </span>
            </div>
        </template>
        <div class="content" v-loading="loading">
            <template v-if="noticeData.length != 0">
                <div class="notice-box" v-for="item in noticeData" @click="readMessage(item)">
                    <div class="avatar">
                        <div class="system-icon" v-if="item.sendUserId == '0'"><i-ep-Bell size="20" color="#FFF" /></div>
                        <el-avatar v-else :src="item.photo"></el-avatar>
                    </div>
                    <div class="detail-notice">
                        <div style="flex: 1;margin-right: 10px">
                            <p class="bold mb6">{{ item.sendUserId == '0' ? '系统通知' : item.sendUserName }} {{ item.title }}</p>
                            <p class="light">
                                <i
                                    v-if="item.messageIcon"
                                    :class="`iconfont ${item.messageIcon}`"
                                    :style="{ color: ['icon-ri', 'icon-yue', 'icon-zhou'].includes(item.messageIcon) ? '#1874FF' : '#909399' }"
                                ></i> {{ item.content }}
                            </p>
                        </div>
                        <div style="width: 105px">
                            <p class="time light mb6">{{ item.date }}</p>
                            <p class="light" :style="{ 'text-align': 'right', 'color': item.isRead ? '#8C8C8C' : '#1874FF' }">
                                {{ item.isRead ? "已读" : "未读" }}
                            </p>
                        </div>
                    </div>
                </div>
            </template>
            <div v-else class="notice-box no-data-box">
                <p>暂无数据</p>
            </div>
        </div>
        <pagination
            layout="total, sizes, prev, pager, next"
            v-model:total="total"
            v-model:page="search.pageIndex"
            v-model:limit="search.pageSize"
            @pagination="getData"
            style="padding-right: 20px;"
        />
        <setMsgTools ref="setMsgToolsRef"></setMsgTools>
    </el-card>
</template>

<script setup lang="ts">
    import { listMessage, getMessageType, updateRead, updateReadAll, clearRead } from '@/api/public'
    import setMsgTools from './SetMsgTools.vue'
    import moment from "moment";

    const typeData = ref([])
    const setMsgToolsRef = ref()
    const setMsgToolsOpen= ()=> {
        setMsgToolsRef.value.openSetting()

    }
    const search = ref({
        pageIndex: 1,
        pageSize: 10,
        messageType: 0,
    })

    const noticeData = ref([])
    const total = ref(0)

    const router = useRouter();
    const getType = () => {
        // getMessageType().then(res => {
        //     if(res.success) {
        //         typeData.value = res.result
        //         search.value.messageType = Number(router.currentRoute.value.query.messageType) as number
        //         getData()
        //     }
        // })
    }

    const loading = ref(false)
    const getData = () => {
        loading.value = true
        listMessage(search.value).then(res => {
            let { success, result } = res
            if(success){
                noticeData.value = (result.records || []).map(item => {
                    // 判断创建时间是不是今天
                    if(item.createTime.slice(0, 10) == moment().format("YYYY-MM-DD")){
                        item.date = "今天 " + item.createTime.slice(11, 16)
                    }else{
                        item.date = moment(item.createTime).format("MM月DD日 HH:mm")
                    }
                    return item
                })
                total.value = Number(result.total)
            }
        }).finally(() => {
            loading.value = false
        })
    }

    const changeType = (type: number) => {
        search.value.messageType = type
        changeSize(search.value.pageSize)
    }

    const changeSize = (size: number) => {
        search.value.pageIndex = 1;
        search.value.pageSize = size;
        getData()
    }

    const readMessage = (item) => {
        if(!item.isRead){
            updateRead([item.id]).then(res => {
                if(res.success){
                    item.isRead = 1
                    item.stateNumber --
                }else{
                    ElMessage.error(res.msg);
                }
            })
        }
        if(item.callbackUrl){
            window.open(item.callbackUrl, '_blank')
        }
    }

    const allRead = () => {
        if(noticeData.value.length == 0){
            ElMessage.error('列表暂无数据');
            return
        }
        updateReadAll().then(res => {
            if(res.success){
                ElMessage.success('操作成功');
                typeData.value = typeData.value.map(item => {
                    item.stateNumber = 0
                    return item
                })
                getData()
            }else{
                ElMessage.error(res.msg);
            }
        })
    }

    const clearMessage = () => {
        if(noticeData.value.length == 0){
            ElMessage.error('列表暂无数据');
            return
        }
        clearRead().then(res => {
            if(res.success){
                ElMessage.success('操作成功');
                getData()
            }else{
                ElMessage.error(res.msg);
            }
        })
    }

    const route = useRoute();
    watch(route, (newRoute, oldRoute) => {
        let queryDataNew: any = router.currentRoute.value.query
        if (queryDataNew.messageType) {
            search.value.messageType = Number(queryDataNew.messageType)
            getData()
        }
    });

    onMounted(() => {
        getType()
    })
</script>

<style lang="scss" scoped>
    .list-card{
        :deep(.el-card__header){
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 16px;
        }
        :deep(.el-radio-group){
            .el-radio-button__inner{
                display: flex;
                align-items: center;
                .el-badge{
                    height: 14px;
                    margin-left: 3px;
                    .el-badge__content{
                        border: none;
                        height: 14px;
                    }
                }
            }
        }
        .right-btn{
            span{
                cursor: pointer;
                margin-left: 15px;
            }
            svg{
                vertical-align: sub;
            }
        }
    }
    :deep(.el-card__body){
        display: flex;
        flex-direction: column;
    }
    .content{
        overflow: auto;
        flex: 1;
        padding-right: 20px;
        .notice-box{
            border-bottom: 1px solid #F0F0F0;
            min-height: 80px;
            display: flex;
            cursor: pointer;
            .avatar{
                margin-top: 14px;
                margin-right: 8px;
            }
            .system-icon{
                width: 32px;
                height: 32px;
                line-height: 32px;
                text-align: center;
                background: #1874FF;
                border-radius: 50%;
            }
            .AvatarX{
                width: 32px;
                height: 32px;
            }
            .detail-notice{
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex: 1;
                padding: 5px 0;
                .bold{
                    color: #262626;
                    font-weight: bold;
                }
                .light{
                    color: #8C8C8C;
                }
                .mb6{
                    margin-bottom: 6px;
                }
                .time{
                    text-align: right;
                }
            }
        }
        .no-data-box{
            align-items: center;
            justify-content: center;
            cursor: default;
            border: none;
        }
    }
</style>