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

<div id="app" v-cloak>
    <!-- body-style="background-color: #f3f3f3;" shadow="never" style="border:0" -->
    <el-card shadow="never" style="border:0;background-color: #f3f3f3;padding:0">
        <div class="card_header">
            <span>海报列表</span> 
        <el-button type="primary" style="width:100px;height:40px;float: right; margin: -10px 0" @click="hadel">设置</el-button>
            <el-button type="primary" style="width:100px;height:40px;float: right; margin: -10px 10px -10px 0" @click="clearCache">清除缓存</el-button>
        </div>
        <!--  -->
        <div class="card_body">
            <div class="flex flex-x-between flex-y-center" style="margin-bottom: 30px;">
                <div class="add_poster flex flex-y-center">
                    <div style="margin-right: 30px;">海报列表</div>
                    <el-button type="primary" style="width:162px;height:40px" @click="$navigate({r: 'mall/poster/edit'})">添加海报</el-button>
                </div>
                <div style="width: 500px;height:40px;margin-right:80px">
                    <el-input placeholder="输入页面关键词搜索" v-model="keyword" @change='search'>
                        <i slot="suffix" class="el-input__icon el-icon-search"></i>
                    </el-input>
                </div>
            </div>
            <div class="flex flex-y-center" style="margin-bottom: 30px;">
                <div style="margin-right:30px">统计周期</div>
                <div>
                    <el-select v-model="cycle" placeholder="请选择" @change="changeDate">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </div>
            </div>
            <div>
                <el-table :data="tableData" v-loading="listLoading" @sort-change="sortChange" :default-sort="{ prop: 'sort', order: 'descending' }" style="width: 100%">
                    <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
                    <el-table-column prop="name" label="海报名称" align="center"></el-table-column>
                    <el-table-column prop="share_url" label="预览" width="150" align="center">
                        <template slot-scope="scope">
                            <el-popover placement="right" trigger="hover">
                                <div class="from_img2">
                                    <img style="width: 300px;" :src="scope.row.share_url" alt="">
                                </div>
                                <div class="preview_img" slot="reference">
                                    <img style="width: 100%;" :src="scope.row.share_url" alt="">
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop="key_word" label="关键词" align="center"></el-table-column>
                    <el-table-column prop="look_num" label="浏览次数" align="center"></el-table-column>
                    <el-table-column prop="scan_code_num" label="扫码次数" align="center"></el-table-column>
                    <el-table-column prop="sort" label="排序" sortable="sort" align="center"></el-table-column>
                    <el-table-column prop="created_at" label="创建时间" align="center"></el-table-column>
                    <el-table-column prop="status" label="状态" align="center">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.status" :active-value='1' :inactive-value='0' @change="changeStatus(scope.row.id)"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="操作" fixed="right" align="center">
                        <template slot-scope="scope">
                            <div class="operation flex flex-x-center">
                                <p style="margin-right:24px" @click="handle('edit',scope.row)">编辑</p>
                                <p @click="handle('destroy',scope.row)">删除</p>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!-- 分页 -->
            <div style="text-align: right;margin: 20px 0;">
                <el-pagination @current-change="pagination" background layout="prev, pager, next" :page-count="pageCount"></el-pagination>
            </div>
        </div>
    </el-card>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                listLoading: false,
                tableData: [],

                options: [{
                    value: '7',
                    label: '最近7天'
                }, {
                    value: '15',
                    label: '最近15天'
                }, {
                    value: '30',
                    label: '最近30天'
                }],
                value: '',

                page: 1,
                keyword: '',
                sort: 'desc',
                cycle: '',
                total_count: 0,
                pageCount: 0,
            }
        },
        created() {
            this.getList();
        },
        methods: {
            changeDate() {
                this.page = 1;
                var params = {
                    cycle: this.cycle
                }
                this.getList(params);
            },
            sortChange(val) {
                this.sort=val.order === 'ascending' ? 'asc' : 'desc';
                this.search();
            },
            search() {
                this.page = 1;
                var params = {
                    keyword: this.keyword
                }
                this.getList(params);
            },
            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.getList();
            },
            // 获取海报列表
            getList(search = {}) {
                let self = this;
                self.listLoading = true;
                let basic_data = {
                    page: self.page,
                    sort_type: self.sort,
                };
                data = Object.assign(basic_data,search);
                request({
                    params: {
                        r: 'mall/poster/index',
                    },
                    method: 'post',
                    data: data
                }).then(e => {
                    self.listLoading = false;
                    if (e.data.code == 0) {
                        this.tableData = e.data.data.list;
                        this.tableData.forEach(item => {
                            var dates = new Date(item.created_at * 1000);
                            var y = dates.getFullYear(),
                                m = dates.getMonth() + 1,
                                d = dates.getDate(),
                                h = dates.getHours(),
                                mm = dates.getMinutes(),
                                s = dates.getSeconds();
                            item.created_at = y + '-' + this.add0(m) + '-' + this.add0(d) + ' ' + this.add0(h) + ':' + this.add0(mm) + ':' + this.add0(s)
                        });
                        self.pageCount = e.data.data.page_count;
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    self.$message.error(e.data.msg);
                    self.listLoading = false;
                });

            },
            handle(type, data = null, extra = null) {
                console.log(type);
                switch (type) {
                    case 'edit':
                        id = data ? parseInt(data.id) : '';
                        param = {
                            r: 'mall/poster/edit'
                        };
                        if (id) param = Object.assign(param, {
                            id: id
                        });
                        navigateTo(param);
                        break;
                    case 'destroy':
                        param = {
                            id: data.id,
                            type
                        };
                        this.$confirm('删除该条数据后不可以恢复, 是否继续?', '警告', {
                            type: 'warning'
                        }).then(() => {
                            this.send(param, 'mall/poster/operate');
                        })
                        break;
                    case 'change_status':
                        param = {
                            id: data.id,
                            status: extra,
                            type
                        };
                        this.send(param, 'mall/poster/operate');
                        break;
                }
            },
            /**
             * 修改状态
             */
            changeStatus(id) {
                request({
                    params: {
                        r: 'mall/poster/change-status',
                        id: id,
                    }
                }).then(e => {
                    if (e.data.code == 0) {
                        this.$message.success(e.data.msg);
                    }
                })
            },
            send(params, url) {
                let self = this;
                request({
                    params: {
                        r: url,
                    },
                    method: 'post',
                    data: params
                }).then(e => {
                    if (e.data.code == 0) {
                        self.$message.success(e.data.msg);
                        self.getList();
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            add0(val) {
                return val < 10 ? '0' + val : val;
            },
            //跳转
            hadel(id) {
                id = parseInt(id);
                let params = {
                    r: 'mall/poster/setting'
                };
                if (id) params = Object.assign(params, {
                    id: id
                });
                navigateTo(params);
            },
            // 清除海报缓存
            clearCache(){
                this.$confirm('此操作不能恢复，确定清除吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request({
                        params: {
                            r: 'mall/poster/clear-cache'
                        },
                        method: 'post'
                    }).then(res => {
                        this.$message.success("清除成功");
                    }).catch(e => {
                        this.$message.error("清除失败");
                    });
                })
            },
        }
    })
</script>

<style scoped>
    img {
        display: block;
    }

    .card_header {
        margin-bottom: 10px;
        background: #ffffff;
        padding: 24px;
        border-radius: 5px;
    }

    .card_body {
        border-radius: 5px;
        background: #ffffff;
        padding: 24px;
    }

    .select_height {
        height: 30px;
        line-height: 30px;
    }

    .preview_img {
        width: 30px;
        height: 54px;
        overflow: hidden;
        text-align: center;
        margin:auto;
    }

    .preview_img2 {
        width: 149px;
        height: 232px;
        overflow: hidden;
    }

    .operation {
        cursor: pointer;
    }


    /* 公共样式 */
    .flex {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
    }

    .flex-x-center {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .flex-x-between {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        -webkit-box-pack: space-between;
        -webkit-justify-content: space-between;
        -ms-flex-pack: space-between;
        justify-content: space-between;
    }

    .flex-y-center {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        -ms-grid-row-align: center;
        align-items: center;
    }

    /* 溢出隐藏 */
    .over1 {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .over2 {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .el-card__body{
        padding: 0;
    }
</style>