qimall/backend/modules/mall/views/statistics/user-data.php

<div id="app" v-cloak>
    <el-card shadow="never" style="border:0" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>会员数据</span>
        </div>
        <div class="table-body">

            <el-select size="small" v-model="member_level" @change='vipSearch($event,"select")' class="select">
                <el-option key="0" label="全部会员" value="-1"></el-option>
                <el-option key="-1" label="普通会员" value="0"></el-option>
                <el-option :key="item.level" :label="item.name" :value="item.level" v-for="item in member"></el-option>
            </el-select>
            <div class="input-item">
                <el-input @keyup.enter.native="vipSearch" size="small" placeholder="请输入ID/昵称/手机号" v-model="keyword"
                          clearable @clear="vipSearch">
                    <el-button slot="append" icon="el-icon-search" @click="vipSearch"></el-button>
                </el-input>
            </div>


            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-table :data="list" v-loading="loading" size="small" style="margin-bottom: 15px;" :row-class-name="tableRowClassName"
                          @selection-change="handleSelectionChange">
                    <!-- <el-table-column prop="id" label="排行" width="60" align="center">
                        <template slot-scope="{row: {ranking}}">
                            <img src="statics/img/mall/first.png" alt="" v-if="+ranking === 1">
                            <img src="statics/img/mall/sec.png" alt="" v-else-if="+ranking === 2">
                            <img src="statics/img/mall/third.png" alt=""  v-else-if="+ranking === 3">
                            <span v-else>{{ranking}}</span>
                        </template>
                    </el-table-column> -->
                    <el-table-column prop="id"  label="会员ID" align="center" min-width="100">
                        <template slot-scope="scope">
                            <div>{{scope.row.id}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="nickname"  label="昵称" min-width="200">
                        <template slot-scope="scope">
                            <div class="table-info-img-text">
                                <el-image class="table-info-img circle" :src="scope.row.avatar_url">
                                    <div slot="error" class="image-slot">
                                        <com-image src="/resources/img/common/default-avatar.png"></com-image>
                                    </div>
                                </el-image>
                                <div class="table-info-text">
                                    <div>{{scope.row.nickname|emptyFilled}}</div>
                                    <div>{{scope.row.mobile|emptyFilled}}</div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="level"  label="会员类型" align="center" min-width="200">
                        <template slot-scope="scope">
                            <div>{{levels[scope.row.level] || '普通会员'}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="pay_num"  label="订单数" align="center" min-width="100">
                        <template slot-scope="scope">
                            <div>{{scope.row.pay_num || 0}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="pay_money"  label="订单金额" align="center" min-width="100">
                        <template slot-scope="scope">
                            <div>{{scope.row.pay_money || 0}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="finish_order_num"  label="已完成订单数" align="center" min-width="100">
                        <template slot-scope="scope">
                            <div>{{scope.row.finish_order_num || 0}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="finish_order_money"  label="已完成订单金额" align="center" min-width="100">
                        <template slot-scope="scope">
                            <div>{{scope.row.finish_order_money || 0}}</div>
                        </template>
                    </el-table-column>

                </el-table>
            </el-tabs>
            <!-- 分页器 -->
            <div flex="box:last cross:center">
                <div></div>
                <div>
                    <el-pagination
                        v-if="list.length > 0"
                        style="display: inline-block;float: right;"
                        background :page-size="pagination.pageSize"
                        @current-change="pageChange"
                        layout="prev, pager, next"
                        :current-page="page" :page-count="pageCount"
                        >
                    </el-pagination>
                </div>
            </div>
        </div>
    </el-card>


</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            page:1,
            pageCount: 0,
            user_id:'',
            mobile:'',
            avatar_url: '',
            level: '',
            nickname: '',
            order_num: '',
            order_money: '',
            order_complete_num: '',
            order_pay_money: '',
            search: {
                keyword: '',
            },
            keyword: '',
            member_level: '-1',
            member: [],
            time:[],	//本地存时间，请求时不发送
            loading: false,
            activeName: '-1',
            list: [],
            pagination: null,
            dialogChild: false,
            dialogLoading: false,
            select: {
                nickname: '',
                status: 'first',
            },
            dialogContent: false,
            lableLoading: false,
            levels:{}
        },
        mounted() {
            this.loadData(1);
            //this.getMember();
        },

        methods: {
            // 0.0.1 关闭推荐标签--根据索引删除当前项
            handleClose(tag) {
                this.recommend.splice(this.recommend.indexOf(tag), 1);
            },


            // 1.0 获取列表数据
            loadData(page,level) {
                this.loading = true;
                request({
                    method: 'get',
                    params: {
                        r: 'mall/statistics/user-data',
                        page:page,
                        level:level,
                        keyword:this.keyword
                    },
                    // data: {
                    //     page,
                    //     level,
                    //     keyword:this.keyword
                    // }
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        this.list = e.data.data.list;
                        this.pagination = e.data.data.pagination;
                        this.page = e.data.data.page;
                        this.pageCount = e.data.data.page_count;
                        this.levels = e.data.data.levels;
                        if (e.data.data.levels) {
                            this.member = [];
                            for (i in e.data.data.levels) {
                                this.member.push({name:e.data.data.levels[i],level:i})
                            }
                        }
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                });
            },


            //
            vipSearch(e,str) {
                this.page = 1;
                if(str == 'select'){
                    this.select_level = e;
                }
                this.loadData(this.page,this.select_level);
            },

            // getMember() {
            //     let self = this;
            //     request({
            //         params: {
            //             r: 'mall/team/level',
            //             page: self.member_page
            //         },
            //         method: 'get',
            //     }).then(e => {
            //         if (e.data.data.list.length > 0) {
            //             self.member_page++;
            //             this.member.push(...e.data.data.list);
            //         }
            //     }).catch(e => {
            //         console.log(e);
            //     });
            // },


            pageChange(page) {
                this.page = page;
                this.loadData(this.page,this.select_level);
            },
            handleClick(tab, event) {
                this.page = 1;
                this.search.status = this.activeName;
                this.loadData(this.page,this.search);
            },
            handleSelectionChange(val) {
                let self = this;
                self.choose_list = [];
                val.forEach(function (item) {
                    self.choose_list.push(item.id);
                })
            },
            addClick(row) {
                this.dialogContent = true;

            },
			tableRowClassName({row, rowIndex}) {
			       if (rowIndex%2=== 1)  //=>这里可以改成 rowIndex%2=== 1，后面直接else即可达到隔行变色效果。
			       {
			         return 'warning-row';
			       } else {
			         return 'success-row';
			       }
			       return '';
			     }
        },
    });
</script>
<style>
    .el-tabs__header {
        font-size: 16px;
    }

    .table-body {
        padding: 20px;
        background-color: #fff;
    }

    .table-body .el-button {
        padding: 0 !important;
        border: 0;
        margin: 0 5px;
    }

    .input-item {
        width: 250px;
        margin: 0 0 20px;
        display: inline-block;
    }

    .input-item .el-input__inner {
        border-right: 0;
    }

    .input-item .el-input__inner:hover {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input__inner:focus {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input-group__append {
        background-color: #fff;
        border-left: 0;
        width: 10%;
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        margin: 0;
    }

    .batch {
        margin: 0 0 20px;
        display: inline-block;
    }

    .batch .el-button {
        padding: 9px 15px !important;
    }

    .item-box{
        margin-right: 20px;
    }
    .item-box .label{
        margin-right: 8px;
    }

    .el-tag + .el-tag {
        margin-left: 10px;
    }

	.el-table th>.cell{
		color: #333;
		font-weight: bold;
		font-size: 14px;
	}
	.el-table__footer-wrapper, .el-table__header-wrapper{
		border-bottom: 1.4px solid #D6D6D6;
	}
	 .el-table .warning-row {
	    background: #F5F7FC;
	  }

	  .el-table .success-row {
	    background: #ffffff;
	  }
    .default-avatar{
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
</style>