qimall/backend/modules/mall/views/user-member-label/index.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-image');
?>
<style>

</style>
<div id="app" v-cloak>
    <el-card shadow="never" style="border:0;min-width: 1000px;"
             body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <div class="all_flex" style="margin-bottom: 30px;align-items: flex-end;">
                <div class="top_title">会员分析</div>
                <div style="font-size:12px;color: #919191;flex:1;"></div>
                <div>
                    <el-button class="all_button" type="primary" size="small" @click="exportUser"
                               style=" margin-left: 0px;">批量导出
                    </el-button>
                </div>
            </div>
            <el-form :inline="true" :model="search" class="demo-form-inline">
                <el-form-item label="注册时间">
                    <el-date-picker
                            v-model="addTime"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            @change="addTimeChange"
                            :default-time="['00:00:00', '23:59:59']"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="会员">
                    <el-input v-model="search.nickname" placeholder="请输入会员昵称" clearable></el-input>
                </el-form-item>
                <el-form-item label="会员id">
                    <el-input v-model="search.user_id" placeholder="请输入会员会员id" clearable></el-input>
                </el-form-item>
                <el-form-item>
<!--                    <el-collapse v-model="activeNames" @change="handleChange">-->
<!--                        <el-collapse-item title="标签筛选" name="2">-->
<!--                            <el-tabs v-model="activeName" @tab-click="handleClick">-->
<!--                                <el-tab-pane :label="item.name" :name="item.key"-->
<!--                                             v-for="(item,index) in memberLabelList">-->
<!--                                    <el-checkbox-group v-model="checkList" @change="checkboxGroupChange">-->
<!--                                        <el-checkbox :label="val.id" v-for="(val,k) in item.list">-->
<!--                                            <template v-if="showType==1||val.cate_id===12"> {{val.name}}</template>-->
<!--                                            <template v-if="showType==2 && val.cate_id!=12"> {{val.content}}</template>-->
<!--                                        </el-checkbox>-->
<!--                                    </el-checkbox-group>-->
<!---->
<!--                                </el-tab-pane>-->
<!--                            </el-tabs>-->
<!--                        </el-collapse-item>-->
<!--                    </el-collapse>-->

                    <el-checkbox-group v-model="cateIds">
                        <el-checkbox-button  v-for="(item,index) in memberLabelList" :label="item.id" :key="item.id" @change="changeCheckGroup">{{item.name}}</el-checkbox-button>
                    </el-checkbox-group>

                    <el-checkbox-group v-model="checkList" @change="checkboxGroupChange" v-for="(item,index) in memberLabelList">
                        <el-checkbox :label="item.id+'_'+val.id" v-for="(val,k) in item.list" v-if="cateIds.includes(item.id)">
                            <template v-if="showType==1"> {{val.name}}</template>
                            <template v-if="showType==2"> {{val.content}}</template>
                        </el-checkbox>
                    </el-checkbox-group>

                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" style="padding: 9px 15px !important;" @click="onSubmit">搜索
                    </el-button>
                    <el-button type="primary" size="small" style="padding: 9px 15px !important;" @click="showContent">
                        <template v-if="showType==1">显示内容</template>
                        <template v-if="showType==2">显示标签</template>
                    </el-button>
                </el-form-item>
            </el-form>
            <el-table :data="list"  v-loading="loading" size="small" style="margin-bottom: 15px;">
                <el-table-column
                        label="序号"
                        type="index"
                        width="50">
                </el-table-column>
                <el-table-column prop="user_id" label="会员id" align="center" width="150">
                    <template slot-scope="scope">
                    <el-button type="text" @click="navUserDetail(scope.row.user_id)" class="all_text">
                        {{scope.row.user_id}}
                    </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="会员信息" width="200">
                    <template slot-scope="scope">
                        <div class="user_img" flex="cross:center">
                            <el-image class="default-avatar" :src="scope.row.avatar_url">
                                <div slot="error" class="image-slot">
                                    <com-image src="resources/img/mall/default_avatar_url.png"></com-image>
                                </div>
                            </el-image>
                            <div class="table-info-text">
                                <div class="uer-nickname over1" v-if="scope.row.nickname">{{scope.row.nickname}}</div>
                                <div class="uer-nickname over1" v-else>ID:{{scope.row.id}}</div>
                                <div>{{scope.row.mobile}}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="标签" prop="mobile" align="center" >
                    <template slot-scope="scope">
                        <div class="label-box" v-if="showType==1">
                            <el-tag
                                    v-for="item in scope.row.userMemberLabelList"
                                    :key="item.id"
                                    :color="item.color"
                                    size="small"
                                    effect="dark"
                                    :closable="false"
                                    :hit="false"
                                    style="margin-left:10px"
                            >
                                <template v-if="showType==1"> {{item.name}}</template>
                            </el-tag>
                        </div>

                        <div v-if="showType==2">
                            <span v-for="sss in scope.row.userMemberLabelList" :key="sss.id">{{sss.content}}；</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="注册时间" align="center" width="200">
                    <template slot-scope="scope">
                        {{scope.row.register_time|dateTimeFormat('Y-m-d H:i:s')}}
                    </template>
                </el-table-column>
                </el-table-column>
            </el-table>
            <div flex="box:last cross:center">
                <div>
                </div>
                <div>
                    <el-input style="width:200px; float: left; text-align: center; margin-right: 10px;padding: 0;"
                              :disabled="true" v-model="total"></el-input>
                    <el-select style="width:150px; float: left; text-align: center; margin: 0;padding: 0;"
                               v-model="value" placeholder="请选择" @change="selectChange">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    <!--                    <el-input  v-model="page" placeholder="" size="small"  @change="pageChange" style="width:50px; float: right; text-align: center; margin: 0;padding: 0;"></el-input>-->
                    <el-pagination v-if="pagination" :page-size="pagination.defaultPageSize"
                                   style="display: inline-block;float: right;" background @current-change="pageChange"
                                   layout="prev, pager, next" :total="pagination.totalCount">
                    </el-pagination>
                </div>
            </div>
        </div>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            value1: '',
            formInline: {
                user: '',
                region: ''
            },
            options: [{
                value: '10',
                label: '10条/页'
            }, {
                value: '100',
                label: '100条/页'
            }, {
                value: '200',
                label: '200条/页'
            }, {
                value: '300',
                label: '300条/页'
            }, {
                value: '400',
                label: '400条/页'
            }],
            value: '10条/页',
            limit: 10,
            total: 10,
            search: {
                user_id: '',
                nickname: '',
                page: 1,
                start: '',
                end: '',
                cate_id: '',
                cateIds: '',
            },
            loading: false,
            list: [],
            page: 1,
            pagination: null,
            addTime: '',//注册时间
            exportList: {},
            export_url: 'agent/default/index',     // 导出路径
            memberLabelList: [
                {'id': 1, 'name': 'xxxxx'}
            ],
            activeNames: ['2'],
            activeName: '1',
            checkList: [],
            showType: 1,
            cateIds: [],
            isShow:0,
        },
        mounted() {
            this.loadData();
            this.loadMemberLabelList();
        },
        methods: {
            loadData() {
                this.loading = true;
                let params = {
                    r: 'mall/user-member-label/index',
                };
                this.search.limit = this.limit;
                this.search.cateIds = this.cateIds;
                this.search.memberLabelIds = this.checkList;
                params = Object.assign(params, this.search);
                request({
                    params: params,
                    method: 'get',
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        this.list = e.data.data.list;
                        this.total = e.data.data.total;
                        this.pagination = e.data.data.pagination;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.loading = false;
                });
            },
            pageChange(page) {
                this.page = page;
                this.search.page = page;
                this.loadData();
            },

            toSearch() {
                this.search.page = 1;
                this.loadData();
            },
            selectChange(value) {
                this.limit = value;
                this.loadData();

            },
            onSubmit() {
                this.loadData();
            },
            addTimeChange(v) {
                this.search.start = v ? v[0] : '';
                this.search.end = v ? v[1] : '';
            },
            loadMemberLabelList() {
                let params = {
                    r: 'mall/user-member-label/member-label-list',
                };
                request({
                    params: params,
                    method: 'get',
                }).then(e => {
                    if (e.data.code == 0) {
                        this.memberLabelList = e.data.data;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                });
            },
            handleChange(val) {
            },
            handleClick(tab, event) {
                this.search.cate_id = tab.name;

                this.checkList = []
            },
            checkboxGroupChange(event) {
            },
            showContent() {
                if (this.showType == 1) {
                    this.showType = 2;
                } else {
                    this.showType = 1;
                }
            },
            exportUser() {
                request({
                    params: {
                        r: 'mall/user-member-label/export',
                    },
                    method: 'post',
                    data: {
                        showType: this.showType,
                        user_id: this.search.user_id,
                        nickname: this.search.nickname,
                        start: this.search.start,
                        end: this.search.end,
                    }
                }).then(e => {
                    if (e.data.code == 0) {
                        this.$message.success(e.data.msg);
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.$message.error(e);
                })
            },
            changeCheckGroup(){
            },
            changeCheckBox(val,ee){

            },
            navUserDetail(id){
                this.$navigate({
                    r: 'mall/user/user-detail',
                    id: id
                })
            },
        }
    });
</script>
<style>
    .top_title{
        font-weight: 600;
        font-size: 18px;
        margin-right: 12px;
    }
    .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;
    }

    .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 th > .cell {
        color: #333;
        font-weight: bold;
        font-size: 14px;
    }

    .table1 .el-table__footer-wrapper,
    .table1 .el-table__header-wrapper {
        border-bottom: 1.4px solid #D6D6D6;
    }

    .user_img {
        position: relative;
        margin-right: 8px;
        /* height: 50px;
        width: 50px; */
    }

    .default-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 8px;
    }

    .uer-nickname {
        flex: 1;
    }

    .all_flex {
        display: flex;
    }
    .label-box .el-tag--dark {
        border-color: #ffffff00;
    }
</style>