qimall/addons/ShareRedpack/backend/views/invate/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>
        <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.user_id" 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.nickname" 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.invite_code" 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="user_id" label="ID" width="80" align="center"></el-table-column>
                    <el-table-column label="会员" >
                        <template slot-scope="scope">
                            <div flex="box:first">
                                <div style="padding-right: 10px;">
                                    <com-image mode="aspectFill" :src="scope.row.user.avatar_url"></com-image>
                                </div><br>
                                <div flex="cross:top cross:center">
                                    {{scope.row.user.nickname}}
                                    <br>
                                    {{scope.row.user.mobile}}
                                </div>
                            </div>
                        </template>
                    </el-table-column>

<!--                    <el-table-column prop="invite_code" label="邀请码" align="center"></el-table-column>-->
                    <el-table-column prop="num" label="邀请用户数" align="center"></el-table-column>
                    <el-table-column prop="created_at" label="创建时间" align="center"></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 @click="handle('edit',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: {
                    user_id: '',
                    nickname: '',
                    invite_code: '',
                },
            }
        },
        created() {
            this.getList();
        },
        computed: {
            show_clear_search_btn: function() {
                return !isEmpty(this.keywords.user_id)
                    || !isEmpty(this.keywords.nickname)
                    || !isEmpty(this.keywords.invite_code)
            }
        },
        methods: {
            resetSearch(){
                this.keywords = {
                    user_id:null,
                    nickname:null,
                    invite_code: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/invate/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/invate/edit'
                        };
                        if (id) params = Object.assign(params, {
                            id: id
                        });
                        navigateTo(params);
                        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>