|  | @@ -0,0 +1,285 @@
 | 
	
		
			
				|  |  | +<template>
 | 
	
		
			
				|  |  | +     
 | 
	
		
			
				|  |  | +    <div class="app-container">
 | 
	
		
			
				|  |  | +        <el-card class="filter-container" shadow="never">
 | 
	
		
			
				|  |  | +            <div>
 | 
	
		
			
				|  |  | +                <i class="el-icon-search"></i>
 | 
	
		
			
				|  |  | +                <span>筛选搜索</span>
 | 
	
		
			
				|  |  | +                <el-button style="float: right" type="primary" @click="handleSearchList()" size="small">
 | 
	
		
			
				|  |  | +                    查询搜索
 | 
	
		
			
				|  |  | +                </el-button>
 | 
	
		
			
				|  |  | +                <el-button style="float: right; margin-right: 15px" @click="handleResetSearch()" size="small">
 | 
	
		
			
				|  |  | +                    重置
 | 
	
		
			
				|  |  | +                </el-button>
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +            <div style="margin-top: 15px">
 | 
	
		
			
				|  |  | +                <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
 | 
	
		
			
				|  |  | +                    <el-form-item label="分销员姓名:">
 | 
	
		
			
				|  |  | +                        <el-input v-model="listQuery.userName" class="input-width" placeholder="请输入用户名称"
 | 
	
		
			
				|  |  | +                            clearable></el-input>
 | 
	
		
			
				|  |  | +                    </el-form-item>
 | 
	
		
			
				|  |  | +                    <el-form-item label="手机号:">
 | 
	
		
			
				|  |  | +                        <el-input v-model="listQuery.phone" class="input-width" placeholder="请输入手机号码"
 | 
	
		
			
				|  |  | +                            clearable></el-input>
 | 
	
		
			
				|  |  | +                    </el-form-item>
 | 
	
		
			
				|  |  | +                    <el-form-item label="分销员层级:">
 | 
	
		
			
				|  |  | +                        <el-select v-model="listQuery.value" clearable placeholder="请选择">
 | 
	
		
			
				|  |  | +                            <el-option v-for="item in options" :key="item.value" :label="item.label"
 | 
	
		
			
				|  |  | +                                :value="item.value">
 | 
	
		
			
				|  |  | +                            </el-option>
 | 
	
		
			
				|  |  | +                        </el-select>
 | 
	
		
			
				|  |  | +                    </el-form-item>
 | 
	
		
			
				|  |  | +                    <el-form-item label="更新时间:">
 | 
	
		
			
				|  |  | +                        <el-date-picker v-model="date" size="small" value-format="yyyy-MM-dd"
 | 
	
		
			
				|  |  | +                            class="item-width-350 ml10" type="datetimerange" range-separator="至"
 | 
	
		
			
				|  |  | +                            start-placeholder="开始日期" end-placeholder="结束日期">
 | 
	
		
			
				|  |  | +                        </el-date-picker>
 | 
	
		
			
				|  |  | +                    </el-form-item>
 | 
	
		
			
				|  |  | +                </el-form>
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +        </el-card>
 | 
	
		
			
				|  |  | +        <el-card class="operate-container" shadow="never">
 | 
	
		
			
				|  |  | +            <i class="el-icon-tickets"></i>
 | 
	
		
			
				|  |  | +            <span>数据列表</span>
 | 
	
		
			
				|  |  | +        </el-card>
 | 
	
		
			
				|  |  | +        <div class="table-container">
 | 
	
		
			
				|  |  | +            <el-table ref="adminTable" :data="list" style="width: 100%" v-loading="listLoading" border>
 | 
	
		
			
				|  |  | +                <el-table-column label="分销员编号" width="100" align="center" prop="number"></el-table-column>
 | 
	
		
			
				|  |  | +                <el-table-column label="分销员姓名" align="center" prop="userName"></el-table-column>
 | 
	
		
			
				|  |  | +                <el-table-column label="分销员层级" align="center">
 | 
	
		
			
				|  |  | +                    <template slot-scope="scope">
 | 
	
		
			
				|  |  | +                        <el-tag v-if="scope.row.type == 1" type="info">普通用户</el-tag>
 | 
	
		
			
				|  |  | +                        <el-tag v-else-if="scope.row.type == 2" type="success">一级分销</el-tag>
 | 
	
		
			
				|  |  | +                        <el-tag v-else="scope.row.type == 3" type="warning">二级分销</el-tag>
 | 
	
		
			
				|  |  | +                    </template>
 | 
	
		
			
				|  |  | +                </el-table-column>
 | 
	
		
			
				|  |  | +                <el-table-column label="手机号" align="center" prop="phone"></el-table-column>
 | 
	
		
			
				|  |  | +                <el-table-column label="身份证号码" align="center" prop="card"></el-table-column>
 | 
	
		
			
				|  |  | +                <el-table-column label="银行卡号" align="center" prop="bankCard"></el-table-column>
 | 
	
		
			
				|  |  | +                <el-table-column label="开户行" align="center" prop="depositBank"></el-table-column>
 | 
	
		
			
				|  |  | +                <el-table-column label="佣金比例%" align="center" prop="level"></el-table-column>
 | 
	
		
			
				|  |  | +                <el-table-column label="更新人" align="center" prop="updateBy"></el-table-column>
 | 
	
		
			
				|  |  | +                <el-table-column label="更新时间" align="center" prop="updateTime"></el-table-column>
 | 
	
		
			
				|  |  | +                <el-table-column label="操作" width="300" align="center">
 | 
	
		
			
				|  |  | +                    <template slot-scope="scope">
 | 
	
		
			
				|  |  | +                        <el-button size="mini" type="primary" plain @click="checkQrCode(scope.row)">
 | 
	
		
			
				|  |  | +                            查看二维码</el-button>
 | 
	
		
			
				|  |  | +                        <el-button size="mini" type="success" plain @click="checkJunior(scope.$index, scope.row)">查看下级</el-button>
 | 
	
		
			
				|  |  | +                        <el-button size="mini" type="info" plain @click="userEdit(scope.row)">编辑</el-button>
 | 
	
		
			
				|  |  | +                    </template>
 | 
	
		
			
				|  |  | +                </el-table-column>
 | 
	
		
			
				|  |  | +            </el-table>
 | 
	
		
			
				|  |  | +        </div>
 | 
	
		
			
				|  |  | +        <div class="pagination-container">
 | 
	
		
			
				|  |  | +            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
 | 
	
		
			
				|  |  | +                layout="total, sizes,prev, pager, next,jumper" :current-page.sync="listQuery.pageNum"
 | 
	
		
			
				|  |  | +                :page-size="listQuery.pageSize" :page-sizes="[10, 15, 20]" :total="total">
 | 
	
		
			
				|  |  | +            </el-pagination>
 | 
	
		
			
				|  |  | +        </div>
 | 
	
		
			
				|  |  | +        <el-dialog title="编辑分销员" :visible.sync="forbiddenDialogVisible" width="30%">
 | 
	
		
			
				|  |  | +            <el-form :model="admin" ref="adminForm" label-width="150px" size="small">
 | 
	
		
			
				|  |  | +                <el-form-item label="分销员编号:">
 | 
	
		
			
				|  |  | +                    <el-input disabled v-model="admin.number" style="width: 250px"></el-input>
 | 
	
		
			
				|  |  | +                </el-form-item>
 | 
	
		
			
				|  |  | +                <el-form-item label="分销员姓名:">
 | 
	
		
			
				|  |  | +                    <el-input v-model="admin.userName" style="width: 250px"></el-input>
 | 
	
		
			
				|  |  | +                </el-form-item>
 | 
	
		
			
				|  |  | +                <el-form-item label="分销员层级:">
 | 
	
		
			
				|  |  | +                    <el-input type="text" disabled v-if="admin.type == 1" value="普通用户" style="width: 250px"></el-input>
 | 
	
		
			
				|  |  | +                    <el-input type="text" disabled v-else-if="admin.type == 2" value="一级分销" style="width: 250px"></el-input>
 | 
	
		
			
				|  |  | +                    <el-input type="text" disabled v-else="admin.type == 3" value="二级分销" style="width: 250px"></el-input>
 | 
	
		
			
				|  |  | +                </el-form-item>
 | 
	
		
			
				|  |  | +                <el-form-item label="手机号:">
 | 
	
		
			
				|  |  | +                    <el-input v-model="admin.phone" type="number" style="width: 250px"></el-input>
 | 
	
		
			
				|  |  | +                </el-form-item>
 | 
	
		
			
				|  |  | +                <el-form-item label="身份证号码:">
 | 
	
		
			
				|  |  | +                    <el-input v-model="admin.card" type="text" :rows="5" style="width: 250px"></el-input>
 | 
	
		
			
				|  |  | +                </el-form-item>
 | 
	
		
			
				|  |  | +                <el-form-item label="银行卡号:">
 | 
	
		
			
				|  |  | +                    <el-input v-model="admin.bankCard" type="text" :rows="5" style="width: 250px"></el-input>
 | 
	
		
			
				|  |  | +                </el-form-item>
 | 
	
		
			
				|  |  | +                <el-form-item label="开户行:">
 | 
	
		
			
				|  |  | +                    <el-input v-model="admin.depositBank" type="text" :rows="5" style="width: 250px"></el-input>
 | 
	
		
			
				|  |  | +                </el-form-item>
 | 
	
		
			
				|  |  | +                <el-form-item label="佣金比例:">
 | 
	
		
			
				|  |  | +                    <el-input disabled v-model="admin.level" type="text" :rows="5"
 | 
	
		
			
				|  |  | +                        style="width: 250px"></el-input>
 | 
	
		
			
				|  |  | +                </el-form-item>
 | 
	
		
			
				|  |  | +            </el-form>
 | 
	
		
			
				|  |  | +            <span slot="footer" class="dialog-footer">
 | 
	
		
			
				|  |  | +                <el-button @click="forbiddenDialogVisible = false" size="small">取 消</el-button>
 | 
	
		
			
				|  |  | +                <el-button type="primary" @click="handleDialogConfirm()" size="small">确 定</el-button>
 | 
	
		
			
				|  |  | +            </span>
 | 
	
		
			
				|  |  | +        </el-dialog>
 | 
	
		
			
				|  |  | +        <el-dialog title="查看下级分销员" :visible.sync="checkDialogVisible" width="80%">
 | 
	
		
			
				|  |  | +            <el-table ref="adminTable" :data="juniorlist" style="width: 100%" v-loading="listLoading" border>
 | 
	
		
			
				|  |  | +                <el-table-column label="分销员编号" width="100" align="center" prop="number"></el-table-column>
 | 
	
		
			
				|  |  | +                <el-table-column label="分销员姓名" align="center" prop="userName"></el-table-column>
 | 
	
		
			
				|  |  | +                <el-table-column label="分销员层级" align="center">
 | 
	
		
			
				|  |  | +                </el-table-column>
 | 
	
		
			
				|  |  | +                <el-table-column label="手机号" align="center" prop="phone"></el-table-column>
 | 
	
		
			
				|  |  | +                <el-table-column label="身份证号码" align="center" prop="card"></el-table-column>
 | 
	
		
			
				|  |  | +                <el-table-column label="银行卡号" align="center" prop="bankCard"></el-table-column>
 | 
	
		
			
				|  |  | +                <el-table-column label="开户行" align="center" prop="depositBank"></el-table-column>
 | 
	
		
			
				|  |  | +                <el-table-column label="佣金比例%" align="center" prop="level"></el-table-column>
 | 
	
		
			
				|  |  | +            </el-table>
 | 
	
		
			
				|  |  | +            <div class="peoplePagination">
 | 
	
		
			
				|  |  | +                <el-pagination background @size-change="juniorhandleSizeChange" @current-change="juniorhandleCurrentChange"
 | 
	
		
			
				|  |  | +                layout="total, sizes,prev, pager, next,jumper" :current-page.sync="juniorQuery.pageNum"
 | 
	
		
			
				|  |  | +                :page-size="juniorQuery.pageSize" :page-sizes="[10, 15, 20]" :total="juniorTotal">
 | 
	
		
			
				|  |  | +            </el-pagination>
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +        </el-dialog>
 | 
	
		
			
				|  |  | +        <el-dialog title="查看二维码" :visible.sync="checkQrCodeDialogVisible" width="20%">
 | 
	
		
			
				|  |  | +            <span>二维码</span>
 | 
	
		
			
				|  |  | +            <el-button type="primary" @click="handleDialogConfirm()" size="mini">下载二维码</el-button>
 | 
	
		
			
				|  |  | +        </el-dialog>
 | 
	
		
			
				|  |  | +    </div>
 | 
	
		
			
				|  |  | +</template>
 | 
	
		
			
				|  |  | +<script>
 | 
	
		
			
				|  |  | +import { peopleList,getJuniorList,getQrcode } from "@/api/distribution";
 | 
	
		
			
				|  |  | +import { formatDate } from "@/utils/date";
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +const defaultListQuery = {
 | 
	
		
			
				|  |  | +    pageNum: 1,
 | 
	
		
			
				|  |  | +    pageSize: 10,
 | 
	
		
			
				|  |  | +    userName: null,
 | 
	
		
			
				|  |  | +    phone: null,
 | 
	
		
			
				|  |  | +    startTime: '',
 | 
	
		
			
				|  |  | +    endTime: '',
 | 
	
		
			
				|  |  | +    value: ''
 | 
	
		
			
				|  |  | +};
 | 
	
		
			
				|  |  | +const juniorListQuery = {
 | 
	
		
			
				|  |  | +    pageNum: 1,
 | 
	
		
			
				|  |  | +    pageSize: 10,
 | 
	
		
			
				|  |  | +    userId: null,
 | 
	
		
			
				|  |  | +};
 | 
	
		
			
				|  |  | +const defaultAdmin = {
 | 
	
		
			
				|  |  | +    id: null,
 | 
	
		
			
				|  |  | +    username: null,
 | 
	
		
			
				|  |  | +    password: null,
 | 
	
		
			
				|  |  | +    nickName: null,
 | 
	
		
			
				|  |  | +    email: null,
 | 
	
		
			
				|  |  | +    note: null,
 | 
	
		
			
				|  |  | +    status: 1,
 | 
	
		
			
				|  |  | +};
 | 
	
		
			
				|  |  | +export default {
 | 
	
		
			
				|  |  | +    name: "upCheck",
 | 
	
		
			
				|  |  | +    data() {
 | 
	
		
			
				|  |  | +        return {
 | 
	
		
			
				|  |  | +            date: "",
 | 
	
		
			
				|  |  | +            listQuery: Object.assign({}, defaultListQuery),
 | 
	
		
			
				|  |  | +            juniorQuery: Object.assign({}, juniorListQuery),
 | 
	
		
			
				|  |  | +            list: null,
 | 
	
		
			
				|  |  | +            juniorlist: null,
 | 
	
		
			
				|  |  | +            total: null,
 | 
	
		
			
				|  |  | +            juniorTotal: null,
 | 
	
		
			
				|  |  | +            listLoading: false,
 | 
	
		
			
				|  |  | +            admin: Object.assign({}, defaultAdmin),
 | 
	
		
			
				|  |  | +            forbiddenDialogVisible: false,
 | 
	
		
			
				|  |  | +            checkDialogVisible: false,
 | 
	
		
			
				|  |  | +            checkQrCodeDialogVisible: false,
 | 
	
		
			
				|  |  | +            options: [{
 | 
	
		
			
				|  |  | +                value: 1,
 | 
	
		
			
				|  |  | +                label: '普通用户'
 | 
	
		
			
				|  |  | +            }, {
 | 
	
		
			
				|  |  | +                value: 2,
 | 
	
		
			
				|  |  | +                label: '一级'
 | 
	
		
			
				|  |  | +            },{
 | 
	
		
			
				|  |  | +                value: 3,
 | 
	
		
			
				|  |  | +                label: '二级'
 | 
	
		
			
				|  |  | +            }],
 | 
	
		
			
				|  |  | +        };
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    watch: {
 | 
	
		
			
				|  |  | +        date(val) {
 | 
	
		
			
				|  |  | +            if (val) {
 | 
	
		
			
				|  |  | +                this.listQuery.startTime = Date.parse(val[0]);
 | 
	
		
			
				|  |  | +                this.listQuery.endTime = Date.parse(val[1]);
 | 
	
		
			
				|  |  | +            } else {
 | 
	
		
			
				|  |  | +                this.listQuery.startTime = "";
 | 
	
		
			
				|  |  | +                this.listQuery.endTime = "";
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    created() {
 | 
	
		
			
				|  |  | +        this.getList();
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    filters: {
 | 
	
		
			
				|  |  | +        formatDateTime(time) {
 | 
	
		
			
				|  |  | +            if (time == null || time === "") {
 | 
	
		
			
				|  |  | +                return "N/A";
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +            let date = new Date(time);
 | 
	
		
			
				|  |  | +            return formatDate(date, "yyyy-MM-dd hh:mm:ss");
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    methods: {
 | 
	
		
			
				|  |  | +        // 编辑
 | 
	
		
			
				|  |  | +        userEdit(row){
 | 
	
		
			
				|  |  | +            this.forbiddenDialogVisible= true;
 | 
	
		
			
				|  |  | +            this.admin=row;
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        // 查看二维码
 | 
	
		
			
				|  |  | +        checkQrCode(row){
 | 
	
		
			
				|  |  | +            this.checkQrCodeDialogVisible = true;
 | 
	
		
			
				|  |  | +            getQrcode({adminUserId:row.adminUserId,userId:row.id}).then((res) => {
 | 
	
		
			
				|  |  | +                if (res.code == 200) {
 | 
	
		
			
				|  |  | +                    
 | 
	
		
			
				|  |  | +                }
 | 
	
		
			
				|  |  | +            })
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        // 查看下级
 | 
	
		
			
				|  |  | +        checkJunior(index, row) {
 | 
	
		
			
				|  |  | +            this.juniorQuery.userId=row.id
 | 
	
		
			
				|  |  | +            this.checkDialogVisible = true;
 | 
	
		
			
				|  |  | +            getJuniorList(this.juniorQuery).then((res) => {
 | 
	
		
			
				|  |  | +                if (res.code == 200) {
 | 
	
		
			
				|  |  | +                    this.juniorList = res.data.list;
 | 
	
		
			
				|  |  | +                }
 | 
	
		
			
				|  |  | +            })
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        handleResetSearch() {
 | 
	
		
			
				|  |  | +            this.listQuery = Object.assign({}, defaultListQuery);
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        handleSearchList() {
 | 
	
		
			
				|  |  | +            this.listQuery.pageNum = 1;
 | 
	
		
			
				|  |  | +            this.getList();
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        handleSizeChange(val) {
 | 
	
		
			
				|  |  | +            this.listQuery.pageNum = 1;
 | 
	
		
			
				|  |  | +            this.listQuery.pageSize = val;
 | 
	
		
			
				|  |  | +            this.getList();
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        handleCurrentChange(val) {
 | 
	
		
			
				|  |  | +            this.listQuery.pageNum = val;
 | 
	
		
			
				|  |  | +            this.getList();
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        juniorhandleSizeChange(val) {
 | 
	
		
			
				|  |  | +            this.juniorQuery.pageNum = 1;
 | 
	
		
			
				|  |  | +            this.juniorQuery.pageSize = val;
 | 
	
		
			
				|  |  | +            // this.getList();
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        juniorhandleCurrentChange(val) {
 | 
	
		
			
				|  |  | +            this.juniorQuery.pageNum = val;
 | 
	
		
			
				|  |  | +            // this.getList();
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        getList() {
 | 
	
		
			
				|  |  | +            this.listLoading = true;
 | 
	
		
			
				|  |  | +            peopleList(this.listQuery).then((response) => {
 | 
	
		
			
				|  |  | +                this.listLoading = false;
 | 
	
		
			
				|  |  | +                this.list = response.data.list;
 | 
	
		
			
				|  |  | +                this.total = response.data.total;
 | 
	
		
			
				|  |  | +            });
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +};
 | 
	
		
			
				|  |  | +</script>
 | 
	
		
			
				|  |  | +<style scoped>
 | 
	
		
			
				|  |  | +.peoplePagination{
 | 
	
		
			
				|  |  | +    margin-top: 10px;
 | 
	
		
			
				|  |  | +    display: flex;
 | 
	
		
			
				|  |  | +    justify-content: right;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +</style>
 |