channel_manage/src/views/distribution/peopleManage/index.vue

<!--
 * @Descripttion: 分销员管理
 * @version: 1.0
 * @Author: zzx
 * @Date: 2024-11-09 16:08:16
 * @LastEditors: zzx tigerzouzx@foxmail.com
 * @LastEditTime: 2024-11-19 16:08:16
-->
<template>
    <div class="app-container">
        <el-card class="filter-container" shadow="hover">
            <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.ecName" 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.level" 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 HH:mm:ss"
                            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="hover">
            <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">
                    <template slot-scope="scope">
                        {{ scope.row.userName }}
                    </template>
                </el-table-column>
                <el-table-column label="分销员层级" align="center">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.type == 1 || scope.row.type == null" 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="400" 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)" v-if="scope.row.type != 3">查看下级</el-button>
                        <el-button :disabled="scope.row.isWithdraw==0?isWithdraw=false:isWithdraw=true" size="mini" v-if="scope.row.isSelf == 1" type="info" plain
                            @click="userEdit(scope.row)">编辑</el-button>
                            <span v-if="isAdmin!=3">
                                <el-button size="mini" v-if="scope.row.isSelf !=1" type="warning" plain @click="settingsCommission(scope.row)">
                                {{ isAdmin!=3?'设置分销佣金':'查看分销佣金' }}
                            </el-button>
                            </span>
                    </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="40%" :before-close="handleClose">
            <div class="tips" style="margin-bottom: 20px;margin-left: 52px;">请仔细核对个人信息，提现一次后，则不能进行修改，信息不对，会造成打款失败</div>
            <el-form :model="admin" ref="adminForm" :rules="rules" 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="分销员姓名：" prop="userName">
                    <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 || admin.type == null" 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" disabled type="number" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="身份证号码：" prop="card">
                    <el-input v-model="admin.card" type="text" :rows="5" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="银行卡号：" prop="bankCard">
                    <el-input v-model="admin.bankCard" type="text" :rows="5" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="开户行：" prop="depositBank">
                    <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="cancelEdit" size="small">取 消</el-button>
                <el-button type="primary" @click="confirmEdit" size="small">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="查看二维码" :visible.sync="checkQrCodeDialogVisible" width="40%">
            <div ref="posterContainer" class="qrCodeBox">
                <div class="bigImgBox">
                    <img :src="qrCode_bg" class="qrCodeBg">
                    <el-image class="qrCode" style="" :src="qrCodeImg">
                        <div slot="error" class="image-slot">
                            <i class="el-icon-loading"></i>
                        </div>
                    </el-image>
                </div>
            </div>
            <div style="text-align: center;margin-top: 20px;">
                <el-button type="success" @click="downloadQrCode" :loading="downloadingQrCode" lazy size="mini">下载二维码</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { peopleList, getQrcode, peopleEdit } from "@/api/distribution";
import { formatDate } from "@/utils/date";
import html2canvas from 'html2canvas';
import qrCode_bg from '@/assets/images/qrCode_bg.jpg'

const defaultListQuery = {
    pageNum: 1,
    pageSize: 10,
    ecName: null,
    phone: null,
    startTime: '',
    endTime: '',
    level: ''
};
const defaultAdmin = {
    id: null,
    username: null,
    password: null,
    nickName: null,
    email: null,
    note: null,
    status: 1,
};
export default {
    name: "peopleManage",
    data() {
        return {
            isAdmin: null,
            isWithdraw: false,
            date: "",
            qrCodeImg: "",
            listQuery: Object.assign({}, defaultListQuery),
            list: null,
            total: null,
            listLoading: false,
            admin: Object.assign({}, defaultAdmin),
            forbiddenDialogVisible: false,
            checkQrCodeDialogVisible: false,
            options: [{
                value: 2,
                label: '一级'
            }, {
                value: 3,
                label: '二级'
            }],
            qrCode_bg,
            downloadingQrCode: false,
            rules: {
                userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                card: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
                bankCard: [{ required: true, message: '请输入银行卡号', trigger: 'blur' }],
                depositBank: [{ required: true, message: '请输入开户行', trigger: 'blur' }],
            }
        };
    },
    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.isAdmin = localStorage.getItem("isAdmin");
        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;
        },
        cancelEdit() {
            this.$refs["adminForm"].resetFields();
            this.forbiddenDialogVisible = false;
        },
        handleClose(){
            this.$refs["adminForm"].resetFields();
            this.forbiddenDialogVisible = false;
        },
        confirmEdit() {
            this.$refs.adminForm.validate(valid => {
                if (valid) {
                    let data = {
                        userName: this.admin.userName,
                        adminUserId: this.admin.adminUserId,
                        bankCard: this.admin.bankCard,
                        card: this.admin.card,
                        depositBank: this.admin.depositBank,
                    }
                    peopleEdit({ ...data }).then(res => {
                        if (res.code == 200) {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            this.forbiddenDialogVisible = false;
                            this.getList();
                        }
                    })
                }
            })

        },

        // 查看二维码
        checkQrCode(row) {
            this.checkQrCodeDialogVisible = true;
            getQrcode({ adminUserId: row.adminUserId, userId: row.id }).then(res => {
                const blob = new Blob([res.data], { type: 'image/png' });
                const objectUrl = URL.createObjectURL(blob);
                this.qrCodeImg = objectUrl;
            })
        },

        // 下载
        downloadQrCode() {
            this.downloadingQrCode = true;
            const posterContainer = this.$refs.posterContainer;
            html2canvas(posterContainer, {
                scale: 4 // 设置下载图片的分辨率
            }).then(canvas => {
                this.downloadingQrCode = false;
                const dataURL = canvas.toDataURL('image/png');
                const a = document.createElement('a');
                a.href = dataURL;
                a.download = '二维码海报.jpg';
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            });
        },

        // 查看下级
        checkJunior(index, row) {
            this.$router.push({
                name: "junior",
                query: {
                    adminUserId: row.adminUserId,
                },
            });
        },
        settingsCommission(row){
            this.$router.push({
                name: "setCommission",
                query: {
                    adminUserId: row.adminUserId,
                }
            })
        },
        handleResetSearch() {
            this.date = ''
            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();
        },
        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;
}

.qrCodeBox {
    display: flex;
    align-items: center;
    justify-self: center;
}

.bigImgBox {
    position: relative;
    width: 260px;
}

.qrCodeBg {
    width: 260px;
    height: auto;
    /* border-radius: 6px; */
}

.qrCode {
    width: 100px;
    height:100px;
    position: absolute;
    top:233px;
    left: 80px;
}
</style>