qimall/backend/modules/mall/views/notice/index.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('component/notice-item', __DIR__);

?>
<div id="app" v-cloak>
    <el-card shadow="never" style="border:0">
        <div slot="header">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: 'mall/overview/index' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>消息列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <!-- body -->
        <div class="body">
            <template v-if="list.length > 0" v-loading="listLoading">
                <div class="notice-list">
                    <notice-item
                        v-for="(item, index) in list" :key="index"
                        :item="item"
                        :index="index"
                        :show="action === index"
                        @reading="handerRead"
                    ></notice-item>
                </div>
                <!-- 分页 -->
                <el-row type="flex" class="page" justify="end" style="margin-top: 15px">
                    <el-pagination 
                        @current-change="pagination" 
                        background 
                        layout="prev, pager, next" 
                        :page-count="pageCount" 
                        v-if="list"
                    ></el-pagination>
                </el-row>
            </template>

            <template v-else>
                <el-empty description="暂无消息"></el-empty>
            </template>
        </div>
    </el-card>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                action: "",
                listLoading: false,
                page: 1,
                limit: 20,
                list: [],
                pageCount: 0,
                currentPage: null,
            }
        },
        created() {
            this.getList()
        },
        methods: {
            getList() {
                this.listLoading = true;

                let params = {
                    r: 'mall/notice/index',
                    page: this.page,
                    limit: this.limit
                }
                params = Object.assign(params, this.searchData)
                
                request({
                    params: params,
                    method: 'get',
                }).then(e => {
                    if (e.data.code === 0) {
                        this.list           = e.data.data.list
                        this.pageCount      = e.data.data.page_count
                        this.currentPage    = e.data.data.pagination.current_page
                    } else {
                        this.$message.error(e.data.msg)
                    }
                    this.listLoading = false
                }).catch(e => {
                    this.listLoading = false
                })
            },
            pagination(currentPage) {
                this.page = currentPage
                this.action = ""
                this.getList()
            },
            handerRead(i) {
                this.action = i
            },
        }
    })
</script>

<style>

</style>