qimall/backend/modules/mall/views/notice/component/notice-item.php

<template id="notice-item">
    <div class="notice-body">
        <div class="notice-box" :style="shadow()" @click="showNotice">
            <div class="notice-header">
                <div class="notice-title">
                    <span v-if="checkIsRead()" style="color: red">*</span>
                    <span>
                        {{ item.title }}
                    </span>
                </div>

                <div class="notice-time">
                    {{ item.created_at | dateTimeFormat('Y-m-d H:i') }}
                </div>
            </div>
            <el-collapse-transition>
                <div class="notice-content" v-if="show">
                    {{ item.content }}
                </div>
            </el-collapse-transition>
        </div>
    </div>
</template>

<script>
    Vue.component('notice-item', {
        template: '#notice-item',
        props: {
            item: {
                type: Object,
                default: {},
            },
            show: {
                type: Boolean,
                default: false,
            },
            index: {
                type: Number,
                default: 0
            }
        },
        data() {
            return {
                isRead: false,
            }
        },
        methods: {
            shadow() {
                return this.show ? 'box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)' : ''
            },

            checkIsRead() {
                if (this.item.is_read) {
                    return false
                }
                if (this.isRead) {
                    return false
                }
                return true
            },

            showNotice() {
                if (this.item.is_read == 0) {
                    this.readNotice(this.item.id)
                }
                this.$emit('reading', this.show ? '' : this.index)
            },

            readNotice(id) {
                if (!this.isRead) {
                    this.isRead = true  
                    request({
                        params: {
                            r: 'mall/notice/read',
                            id: id,
                        },
                        method: 'get',
                    })
                }
            },
        }
    });
</script>

<style>

    .notice-body::after {
        display: block;
        content: "";
        border-top: 1px solid #eee;
    }

    .notice-box {
        padding: 20px 20px;
        cursor: pointer;
    }

    .notice-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .notice-title {
        font-size: 14px;
        /* font-weight: 400; */
    }

    .notice-content::before {
        content: "";
        display: block;
        height: 10px;
    }

    .notice-content {
        color: #999;
    }
</style>