qimall/addons/ShareRedpack/backend/views/default/index.php

<?php

/**
 * Created by PhpStorm.
 * User: 阿源
 * Date: 2020/11/26
 * Time: 11:06
 */
?>
<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">
            海报列表
            <div style="float: right; margin: -5px 0">
                <el-button type="primary" @click="$navigate({r: 'share-redpack/default/edit'})" size="small">创建活动</el-button>
<!--                <el-button type="primary" style="width:162px;height:40px" @click="$navigate({r: 'mall/poster/edit'})">添加海报</el-button>-->
            </div>
        </div>
        <div class="card_body">

            <el-form size="small" :inline="true" flex="dir:left cross:center" style="margin-bottom: 12px;">
                <div class="item-box" flex="dir:left cross:center" style="margin-right: 20px; margin-left: 20px;">
                    <div class="label">海报名称：</div>
                    <el-input style="width: 150px" v-model="keywords.name" placeholder="海报名称"></el-input>
                </div>
                <div class="item-box" flex="dir:left cross:center" style="margin-right: 20px">
                    <div class="label">编号：</div>
                    <el-input style="width: 150px" v-model="keywords.id" placeholder="编号"></el-input>
                </div>
                <div class="item-box" flex="dir:left cross:center">
                    <el-button type="primary" style="padding: 10px 20px !important;" @click="search">搜索
                    </el-button>
                    <el-button type="danger" size="small" style="padding: 10px 20px !important;" @click="resetSearch" v-if="show_clear_search_btn">清除条件</el-button>
                </div>
            </el-form>

            <div>
                <el-table :data="tableData" v-loading="listLoading" 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="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="handle('change_status', scope.row, $event)"></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: [],

                value: '',

                page: 1,
                cycle: '',
                total_count: 0,
                pageCount: 0,
                keywords: {
                    id: '',
                    name: '',
                },
            }
        },
        created() {
            this.getList();
        },
        computed: {
            show_clear_search_btn: function() {
                return !isEmpty(this.keywords.id)
                    || !isEmpty(this.keywords.name)
            }
        },
        methods: {
            resetSearch(){
                this.keywords = {
                    id:null,
                    name:null,
                };
                this.page = 1;
                this.getList();
            },
            changeDate() {
                this.page = 1;
                var params = {
                    cycle: this.cycle
                }
                this.getList(params);
            },
            search() {// 清空查询条件
                this.page = 1;
                this.getList(this.keywords);
            },
            // search() {
            //     this.page = 1;
            //     var params = {
            //         keyword: this.keywords
            //     }
            //     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,
                };
                data = Object.assign(basic_data,search);
                request({
                    params: {
                        r: 'share-redpack/default/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) : '';
                        params = {
                            r: 'share-redpack/default/edit'
                        };
                        if (id) params = Object.assign(params, {
                            id: id
                        });
                        navigateTo(params);
                        break;
                    case 'destroy':
                        param = {
                            id: data.id,
                            type
                        };
                        this.$confirm('删除该条数据后不可以恢复, 是否继续?', '警告', {
                            type: 'warning'
                        }).then(() => {
                            this.send(param, 'share-redpack/default/operate');
                        })
                        break;
                    case 'change_status':
                        param = {
                            id: data.id,
                            status: extra,
                            type
                        };
                        this.send(param, 'share-redpack/default/operate');
                        break;
                }
            },
            send(params, url) {
                console.log(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);
                        self.getList();
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            add0(val) {
                return val < 10 ? '0' + val : val;
            },
        }
    })
</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>