jjx-web/pages/user/components/notice.vue

<template>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>您有<em style="color: #bf2b28;padding: 0 3px;font-weight: 500">{{ unreadNum }}</em>条未读消息</span>
            <el-button style="float: right; padding: 3px 0; color: #666" type="text" @click="onSetting"
                       v-if="parseInt(vk.getVuex('$user.userInfo.userLevel')) > 0"><i
                class="el-icon-setting"></i> 消息推送设置
            </el-button>
        </div>
        <!-- 消息列表 -->
        <div class="notice-list">
            <div class="item" v-for="(item,index) in noticeList" :key="index">
                <div class="title-box">
                    <div class="title-box pointer" @click="toDetail(item, index)">
                        <el-badge is-dot class="badge" v-if="!item.hasRead"></el-badge>
                        <div class="title">{{ item.title }}</div>
                        <div class="time">{{ item._add_time_str }}</div>
                    </div>
                    <div class="right">
                        <div class="btn" @click="setRead(index)" v-if="!item.hasRead">
                            <i class="el-icon-sunset"></i>标记为已读
                        </div>
                        <div class="btn" @click="del(index)">
                            <i class="el-icon-delete"></i>删除
                        </div>
                    </div>
                </div>
                <div class="desc">
                    {{ item.content }}
                </div>
            </div>
            <div class="text-center mt-20">
                <el-pagination @current-change="getList" background layout="prev, pager, next"
                               :total="total"></el-pagination>
            </div>
        </div>

        <!-- 添加或编辑的弹窗结束 -->
    </el-card>
</template>

<script>
let that;
export default {
    data() {
        return {
            unreadNum: 0,
            noticeList: [],
            pageSize: 20,
            total: 0
        }
    },
    created() {
        this.getList()
    },
    methods: {
        async getList(pageIndex = 1) {
            const {rows} = await vk.callFunction({
                url: 'client/message/kh/getList',
                data: {
                    pageIndex,
                    pageSize: this.pageSize,
                }
            })
            this.unreadNum = 0
            this.noticeList = rows
            this.noticeList.forEach(item => {
                if (!item.hasRead) this.unreadNum++
            })
        },
        async setRead(index) {
            this.noticeList[index].hasRead = true
            await vk.callFunction({
                url: 'client/message/kh/setRead',
                data: {
                    id: this.noticeList[index]._id
                }
            })
        },
        async del(index) {
            await vk.callFunction({
                url: 'client/message/kh/delete',
                data: {
                    id: this.noticeList[index]._id
                }
            })
            this.$message({
                type: 'success',
                message: '删除成功'
            })
            await this.getList()
        },
        onSetting() {
            this.$emit('done', 'setting')
        },
        toDetail(item, index) {
            this.setRead(index)
            let url = null
            if (item.type === 'old') url = `/pages/index/old/detail?id=${item.pk}`
            else if (item.type === 'enquiry') url = `/pages/enquiry/detail?id=${item.pk}`
            else if (item.type === 'process') url = `/pages/process/detail?id=${item.pk}`
            if (url) vk.navigateTo({url})
        }
    }
}
</script>

<style lang="less">
.el-icon-setting {
    padding: 0 5px;
}

.notice-list {
    .item {
        display: flex;
        flex-direction: column;

        .title-box {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .title {
                font-size: 14px;
            }

            .time {
                margin-left: 10px;
                color: #999999;
            }

            .badge {
                display: flex;
                flex-direction: column;
                margin-right: 10px;
            }
        }

        .desc {
            color: #999999;
            line-height: 2em;
        }

        .right {
            display: flex;

            .btn {
                color: #bf2b28;
                cursor: pointer;

                i {
                    padding: 0 5px;
                    margin-left: 10px;
                }
            }

            .active {
            }
        }
    }
}
</style>