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

<template>
    <el-card class="box-card">
        <div slot="header" class="flex justify-between items-start">
            <div class="flex flex-col justify-start items-start">
                <span>您有<em style="color: #bf2b28;padding: 0 3px;font-weight: 500">{{
                        unreadNum
                    }}</em>条未读消息</span>
                <span class="text-main pointer" @click="allRead">全部已读</span>
            </div>
            <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 pointer" @click="toDetail(item, index)">
                    {{ 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-dialog title="提示" :visible.sync="dialogVisible" width="70%">
            <el-descriptions title="报价详情" v-if="sheet && dialogVisible" border :column="1">
                <el-descriptions-item label="公司">{{ sheet.user.company.companyName }}</el-descriptions-item>
                <el-descriptions-item label="联系人">{{ sheet.user.manager.personName }}</el-descriptions-item>
                <el-descriptions-item label="联系方式">{{ sheet.user.businessCard.companyMobile }}</el-descriptions-item>
                <el-descriptions-item label="价格">{{ sheet.amount }}元</el-descriptions-item>
                <el-descriptions-item label="附件">
                    <p v-for="(item, index) in sheet.files" :key="index">
                        <a :href="item" target="_blank">预览:文件{{ index + 1 }}</a>
                    </p>
                </el-descriptions-item>
                <el-descriptions-item label="备注">{{ sheet.remark }}</el-descriptions-item>
            </el-descriptions>
            <div slot="footer" class="dialog-footer">
                <el-button @click="toContact" type="primary">去签合同</el-button>
                <el-button @click="dialogVisible = false">关闭</el-button>
            </div>
        </el-dialog>
    </el-card>
</template>

<script>
let that;
export default {
    data() {
        return {
            unreadNum: 0,
            noticeList: [],
            pageSize: 10,
            total: 0,
            dialogVisible: false,
            sheet: null,
        }
    },
    created() {
        this.getList()
        this.getUnreadNum()
    },
    methods: {
        async getList(pageIndex = 1) {
            const {rows, total} = await vk.callFunction({
                url: 'client/message/kh/getList',
                data: {
                    pageIndex,
                    pageSize: this.pageSize,
                }
            })
            this.total = total
            this.noticeList = rows
        },
        async getUnreadNum() {
            const {data} = await vk.callFunction({
                url: 'client/message/kh/getUnreadCount',
            });
            this.unreadNum = data
        },
        async setRead(index) {
            this.noticeList[index].hasRead = true
            await vk.callFunction({
                url: 'client/message/kh/setRead',
                data: {
                    id: this.noticeList[index]._id
                }
            })
        },
        del(index) {
            this.$confirm('确认删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                await vk.callFunction({
                    url: 'client/message/kh/delete',
                    data: {
                        id: this.noticeList[index]._id
                    }
                })
                this.$message({
                    type: 'success',
                    message: '删除成功'
                })
                await this.getList()
                await this.getUnreadNum()
            })

        },
        onSetting() {
            this.$emit('done', 'setting')
        },
        toDetail(item, index) {
            if (!item.hasRead) 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}`
            else if (item.type === 'contract') url = `/pages/contract/index?tab=1`
            else if (item.type === 'self-support') url = `/pages/index/self-support/quote?id=${item.pk}`
            else if (item.type === 'self-product') url = `/pages/order/order`
            else if (item.type === 'self-support-quote') {
                this.getQuoteDetail(item.pk)
            }
            if (url) vk.navigateTo({url})
        },
        async allRead() {
            await vk.callFunction({
                url: 'client/message/kh/setAllRead'
            })
            await this.getList(1)
            await this.getUnreadNum()
        },
        async getQuoteDetail(_id){
            await vk.callFunction({
                url: 'client/selfSupport/kh/getQuoteDetail',
                data: {
                    _id
                },
                success: ({rows}) => {
                    this.sheet = rows
                    this.dialogVisible = true
                }
            });
        },
        toContact(){
            this.dialogVisible = false
            vk.navigateTo({url: '/pages/contract/index?tab=1'})
        }
    }
}
</script>

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

.notice-list {
    .item {
        display: flex;
        flex-direction: column;
        padding: 10px 0;
        border-bottom: 1px solid #ddd;

        .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>