qimall/addons/LuckyGroup/backend/views/group-user/index.php

<?php
use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('group-edit', dirname(__DIR__) . '/components');
?>

<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>
                <span>团长列表</span>
                <div style="float: right;margin: -5px 10px;">
                    <el-button type="primary" size="small" style="padding: 9px 15px !important;" @click="editClick">添加团长
                    </el-button>
                </div>


            </div>
        </div>
        <div class="table-body">
            <el-form size="small" :inline="true" flex="dir:left cross:center" style="margin-bottom: 20px;">
                <div class="item-box" flex="dir:left cross:center">
                    <div style="margin-right: 5px; margin-left: 25px;">会员 ID</div>
                    <el-input size="small" style="width: 200px" v-model="searchData.user_id" placeholder="请输入会员ID"></el-input>
                </div>
                <div class="item-box" flex="dir:left cross:center">
                    <div style="margin-right: 5px; margin-left: 25px;">会员昵称</div>
                    <el-input size="small" style="width: 200px" v-model="searchData.user_keyword" placeholder="请输入用户昵称 / 手机号"></el-input>
                </div>
                <div class="item-box" flex="dir:left cross:center">
                    <div style="margin-right: 5px; margin-left: 25px;">创建时间</div>
                    <el-date-picker @change="selectedDateTime" size="small" v-model="date" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </div>
                <div class="item-box" flex="dir:left cross:center">
                    <el-button size="small" type="primary" style="padding: 9px 15px !important;margin-right: 5px; margin-left: 25px;" @click="search">搜索
                    </el-button>
                </div>
                <div class="item-box" flex="dir:left cross:center">
                    <el-button size="small" type="warning" v-if="searchData.user_id || searchData.user_keyword || searchData.start_time || searchData.end_time" @click="resetForm">清除搜索条件
                    </el-button>
                </div>
            </el-form>

            <el-table class="table-info" :data="form" stripe style="width: 100%" v-loading="listLoading">
                <el-table-column prop="user_id" label="会员ID" width="160" align="center"></el-table-column>
                <el-table-column label="会员" width="180">
                    <!-- <template slot-scope="scope">
                        <div style="display: flex;align-items: center;">
                            <com-image style="margin-right: 5px;display: block;flex-shrink: 0;border-radius:5px" mode="aspectFill" :src="scope.row.avatar_url ? scope.row.avatar_url : ''"></com-image>
                            <div v-if="scope.row" style="line-height: 18px;">
                                <div>昵称：{{scope.row.nickname}}</div>
                                <div>ID:{{scope.row.user_id}}</div>
                            </div>
                        </div>
                    </template> -->
                    <template slot-scope="scope">
                        <div style="display: flex;align-items: center;">
                            <com-image style="margin-right: 5px;display: block;flex-shrink: 0;border-radius:80px;overflow: hidden;" mode="aspectFill" :src="scope.row.avatar_url"></com-image>
                            <div style="line-height: 18px;">
                                <div>昵称：{{scope.row.nickname}}</div>
                                <!-- <div v-else>{{scope.row.parent_mobile}}</div> -->
                                <div>ID:{{scope.row.user_id}}</div>
                            </div>
                        </div>
                        <div style="display: flex;align-items: center;" v-else align="center">--</div>
                    </template>
                </el-table-column>
                <el-table-column prop="mobile" label="联系电话" width="120" align="center">
                    <template slot-scope="scope">{{scope.row.mobile ? scope.row.mobile :'--'}}</template>
                </el-table-column>
                <el-table-column label="上级推荐人" width="180">
                    <template slot-scope="scope">
                        <div style="display: flex;align-items: center;" v-if="scope.row.parent_id">
                            <com-image style="margin-right: 5px;display: block;flex-shrink: 0;border-radius:80px;overflow: hidden;" mode="aspectFill" :src="scope.row.parent_avatar_url"></com-image>
                            <div style="line-height: 18px;">
                                <div>昵称：{{scope.row.parent_nickname}}</div>
                                <!-- <div v-else>{{scope.row.parent_mobile}}</div> -->
                                <div>ID:{{scope.row.parent_id}}</div>
                            </div>
                        </div>
                        <div style="display: flex;align-items: center;" v-else align="center">--</div>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="拼团等级" width="120" align="center">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.level_name">{{scope.row.level_name}}</el-tag>
                        <el-tag v-else-if="scope.row.level == 0">普通用户</el-tag>
                        <el-tag v-else>游客</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="has_attend_times" label="已参团次数" width="120" align="center">
                </el-table-column>
                <el-table-column prop="attend_times" label="剩余参团次数" width="120" align="center">
                    <template slot-scope="scope">
                        {{scope.row.attend_times}}
                    </template>
                </el-table-column>
                <el-table-column prop="win_num" label="拼中次数" width="120" align="center">
                </el-table-column>
                <el-table-column prop="score" label="加入时间" width="160px" align="center">
                    <template slot-scope="scope">
                        {{scope.row.created_at|dateTimeFormat('Y-m-d H:i:s')}}
                    </template>
                </el-table-column>
                <el-table-column label="操作"   align="center">
                    <template slot-scope="scope">
                        <el-button  type="text" size="mini"  circle style="margin-left: 10px;margin-top: 10px" @click="handleIntegral(scope.row)">增加参团次数</el-button>
                        <el-button type="text" size="mini" circle style="margin-left: 10px;margin-top: 10px" @click.native="editLevel(scope.row)">修改等级</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <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-dialog title="增加参团次数" :visible.sync="dialogIntegral" width="30%">
            <el-form :model="integralForm" label-width="110px" :rules="integralFormRules" ref="integralForm">
                <el-form-item label="会员" prop="type">
                    <com-image mode="aspectFill" style="float: left;margin-right: 8px" :src="integralForm.avatar_url"></com-image>
                    <div>{{integralForm.nickname}}(id：{{integralForm.user_id}})</div>
                </el-form-item>
                <el-form-item label="增加参团次数" prop="num" size="small">
                    <el-input oninput="this.value = this.value.replace(/[^-0-9]/g, '');" v-model="integralForm.num" :max="999999999" style="width: 80%;"></el-input> 次
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogIntegral = false">取消</el-button>
                <el-button :loading="btnLoading" type="primary" @click="integralSubmit">确定</el-button>
            </div>
        </el-dialog>
        <!-- 修改等级 -->
        <el-dialog :visible.sync="level.show" width="20%" title="修改拼团等级">
            <div v-loading="edit.loading">
                <el-form size="small" label-width="150px">
                    <el-form-item label="等级名称">
                        <el-select size="small" v-model="level.current_level" class="select">
                            <el-option :key="index" :label="item.name" :value="item.level" 
                                    v-for="(item, index) in level_list"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="level.show = false" type="default" size="small">取消</el-button>
                <el-button type="primary" :loading="edit.btnLoading" style="margin-bottom: 10px;" size="small" @click="editLevelSubmit">保存</el-button>
            </span>
        </el-dialog>
    </el-card>

    <group-edit v-model="edit.show"></group-edit>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                level_list:{},
                searchData: {
                    user_id:'',
                    user_keyword:'',
                    start_time:'',
                    end_time:''
                },
                date: [],
                form: [],
                member: [],
                pageCount: 0,
                page: 1,
                member_page: 1,
                currentPage: null,
                listLoading: false,
                btnLoading: false,

                // 导出
                exportList: [],

                //积分
                dialogIntegral: false,
                integralForm: {
                    type: '1',
                    num: '',
                    pic_url: '',
                    remark: '',
                    user_id: '',
                },
                integralFormRules: {
                    type: [{
                        required: true,
                        message: '操作不能为空',
                        trigger: 'blur'
                    }, ],
                    num: [{
                        required: true,
                        message: '参团次数不能为空',
                        trigger: 'blur'
                    }, ],
                },

                edit: {
                    show: false,
                },
                level: {
                    show: false,
                    group_user: null,
                    current_level:null
                },
            };
        },
        methods: {
            openId(index) {
                let item = this.form;
                item[index].is_open_id = !item[index].is_open_id;
                this.form = JSON.parse(JSON.stringify(this.form));
            },
           
            //积分
            integralPicUrl(e) {
                if (e.length) {
                    this.integralForm.pic_url = e[0].url;
                }
            },
            handleIntegral(row) {
                console.log(row);


                this.integralForm = Object.assign(this.integralForm, {
                    user_id: row.user_id,
                    nickname: row.nickname,
                    avatar_url: row.avatar_url
                });
                this.dialogIntegral = true;
            },
            integralSubmit() {
                this.$refs.integralForm.validate((valid) => {
                    if (valid) {
                        let para = Object.assign({}, this.integralForm);
                        this.btnLoading = true;
                        request({
                            params: {
                                r: 'lucky-group/group-team/add-attend-times',
                            },
                            method: 'post',
                            data: para,
                        }).then(e => {
                            if (e.data.code === 0) {
                                // console.log(e.data);
                                this.$message.success(e.data.msg);
                                location.reload();
                                this.dialogIntegral = false;
                            } else {
                                this.$message.error(e.data.msg);
                            }
                            this.btnLoading = false;
                        }).catch(e => {
                            this.btnLoading = false;
                        });
                    }
                });
            },
            editLevel(row) {
                this.level.show = true;
                this.level.group_user = row;
                this.level.current_level = row.level;
            },
            editLevelSubmit(){
                request({
                    params: {
                        r: 'lucky-group/group-team/edit-level',
                    },
                    method: 'post',
                    data: {
                        id:this.level.group_user.id,
                        level:this.level.current_level
                    },
                }).then(e => {
                    if (e.data.code === 0) {
                        // console.log(e.data);
                        this.$message.success(e.data.msg);
                        location.reload();
                        this.dialogIntegral = false;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                    this.btnLoading = false;
                }).catch(e => {
                    this.btnLoading = false;
                });
            },

            //搜索
            search() {
                this.page = 1;
                this.getList();
            },
            pagination(currentPage) {
                this.page = currentPage;
                this.getList();
            },
            getList() {
                this.listLoading = true;
                request({
                    params: {
                        r: 'lucky-group/group-team/index',
                        page: this.page,
                        pagesize:10 ,
                        ...this.searchData,
                    },
                }).then(e => {
                    if (e.data.code === 0) {
                        this.form = e.data.data.list;
                        this.pageCount = e.data.data.page_count;
                        this.currentPage = e.data.data.pagination.current_page;
                        this.exportList = e.data.data.exportList;
                        this.mall_members = e.data.data.mall_members;
                        this.level_list = e.data.data.level_list;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                    this.listLoading = false;
                }).catch(e => {
                    this.listLoading = false;
                });
            },
            

            // 时间搜索触发
            selectedDateTime(e) {
                console.log(e);
                if (e != null) {
                    this.searchData.start_time = e[0];
                    this.searchData.end_time = e[1];
                } else {
                    this.searchData.start_time = '';
                    this.searchData.end_time = '';
                    this.date = [];
                }
                this.search();
            },

            //重置
            resetForm() {
                this.searchData.user_id = '';
                this.searchData.user_keyword = '';
                this.searchData.start_time = '';
                this.searchData.end_time = '';
                this.date = [];
                this.search();
            },

            editClick() {
                this.edit.show = true;
            },

        },
        mounted: function() {
            this.page = getQuery('page') ? getQuery('page') : 1;
            this.getList();
        }
    });
</script>
<style>
    .table-body {
        padding: 20px;
        background-color: #fff;
    }

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

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

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

    .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;
    }

    .select {
        float: left;
        width: 100px;
        margin-right: 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;
    }
</style>