639 lines
32 KiB
HTML
639 lines
32 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>分销商审核和管理系统</title>
|
|
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
|
|
'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
background: #f0f2f5;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.header-card {
|
|
background: white;
|
|
padding: 30px;
|
|
border-radius: 8px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
color: #303133;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.page-desc {
|
|
font-size: 14px;
|
|
color: #909399;
|
|
}
|
|
|
|
.main-card {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.stat-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.stat-card {
|
|
background: white;
|
|
padding: 24px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.stat-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.stat-content {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.stat-icon {
|
|
font-size: 48px;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.stat-icon.primary { color: #409EFF; }
|
|
.stat-icon.success { color: #67C23A; }
|
|
.stat-icon.danger { color: #F56C6C; }
|
|
.stat-icon.warning { color: #E6A23C; }
|
|
|
|
.stat-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 14px;
|
|
color: #909399;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 32px;
|
|
font-weight: bold;
|
|
color: #303133;
|
|
}
|
|
|
|
.search-form {
|
|
margin: 20px 0;
|
|
}
|
|
|
|
@media screen and (max-width: 1200px) {
|
|
.stat-cards {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.stat-cards {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app" class="container">
|
|
<!-- 页面标题 -->
|
|
<div class="header-card">
|
|
<h1 class="page-title">分销商审核与管理系统</h1>
|
|
<p class="page-desc">管理分销商申请审核、查看分销商列表及相关统计数据</p>
|
|
</div>
|
|
|
|
<!-- 主内容 -->
|
|
<div class="main-card">
|
|
<el-tabs v-model="activeTab" @tab-click="handleTabChange">
|
|
<!-- 申请审核Tab -->
|
|
<el-tab-pane label="申请审核" name="apply">
|
|
<!-- 搜索表单 -->
|
|
<el-form :inline="true" :model="applyQuery" size="small" class="search-form">
|
|
<el-form-item label="审核状态">
|
|
<el-select v-model="applyQuery.status" placeholder="请选择审核状态" clearable style="width: 150px">
|
|
<el-option label="待审核" :value="0"></el-option>
|
|
<el-option label="已通过" :value="1"></el-option>
|
|
<el-option label="已拒绝" :value="-1"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="申请人">
|
|
<el-input v-model="applyQuery.userName" placeholder="请输入申请人姓名" clearable style="width: 200px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="handleSearch">查询</el-button>
|
|
<el-button @click="handleReset">重置</el-button>
|
|
<el-button v-if="hasWaitingApproval" type="success" @click="handlePassAll">一键通过</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<!-- 申请列表表格 -->
|
|
<el-table
|
|
:data="filteredApplyList"
|
|
border
|
|
style="width: 100%"
|
|
:header-cell-style="{ background: '#F5F7FA', color: '#606266' }">
|
|
<el-table-column prop="userName" label="申请人" align="center" width="120"></el-table-column>
|
|
<el-table-column prop="mobile" label="手机号" align="center" width="130"></el-table-column>
|
|
<el-table-column prop="createTime" label="申请时间" align="center" width="180"></el-table-column>
|
|
<el-table-column prop="auditTime" label="审核时间" align="center" width="180"></el-table-column>
|
|
<el-table-column prop="status" label="审核状态" align="center" width="100">
|
|
<template slot-scope="scope">
|
|
<el-tag :type="getStatusType(scope.row.status)">
|
|
{{ getStatusText(scope.row.status) }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="refuseReason" label="拒绝理由" align="center" min-width="200">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.status === -1">{{ scope.row.refuseReason }}</span>
|
|
<span v-else>-</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" align="center" width="180" fixed="right">
|
|
<template slot-scope="scope">
|
|
<el-button v-if="scope.row.status === 0" size="mini" type="success" @click="handleApprove(scope.row)">通过</el-button>
|
|
<el-button v-if="scope.row.status === 0" size="mini" type="danger" @click="handleReject(scope.row)">拒绝</el-button>
|
|
<el-button v-else size="mini" type="primary" @click="handleDetail(scope.row)">详情</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<!-- 分页 -->
|
|
<div style="text-align: right; margin-top: 20px;">
|
|
<el-pagination
|
|
background
|
|
@current-change="handleApplyPageChange"
|
|
:current-page.sync="applyPage.current"
|
|
:page-size="applyPage.size"
|
|
layout="total, prev, pager, next"
|
|
:total="filteredApplyList.length">
|
|
</el-pagination>
|
|
</div>
|
|
</el-tab-pane>
|
|
|
|
<!-- 分销商列表Tab -->
|
|
<el-tab-pane label="分销商列表" name="distributor">
|
|
<!-- 统计卡片 -->
|
|
<div class="stat-cards">
|
|
<div class="stat-card">
|
|
<div class="stat-content">
|
|
<i class="el-icon-user stat-icon primary"></i>
|
|
<div class="stat-info">
|
|
<div class="stat-label">总分销商数</div>
|
|
<div class="stat-value">{{ distributorStats.total }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-content">
|
|
<i class="el-icon-check stat-icon success"></i>
|
|
<div class="stat-info">
|
|
<div class="stat-label">启用中</div>
|
|
<div class="stat-value">{{ distributorStats.active }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-content">
|
|
<i class="el-icon-close stat-icon danger"></i>
|
|
<div class="stat-info">
|
|
<div class="stat-label">已禁用</div>
|
|
<div class="stat-value">{{ distributorStats.disabled }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-content">
|
|
<i class="el-icon-star-on stat-icon warning"></i>
|
|
<div class="stat-info">
|
|
<div class="stat-label">高级分销商</div>
|
|
<div class="stat-value">{{ distributorStats.advanced }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 搜索表单 -->
|
|
<el-form :inline="true" :model="distributorQuery" size="small" class="search-form">
|
|
<el-form-item label="姓名">
|
|
<el-input v-model="distributorQuery.userName" placeholder="请输入姓名" clearable style="width: 150px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="手机号">
|
|
<el-input v-model="distributorQuery.mobile" placeholder="请输入手机号" clearable style="width: 150px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="状态">
|
|
<el-select v-model="distributorQuery.status" placeholder="请选择状态" clearable style="width: 120px">
|
|
<el-option label="启用" :value="1"></el-option>
|
|
<el-option label="禁用" :value="0"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="等级">
|
|
<el-select v-model="distributorQuery.level" placeholder="请选择等级" clearable style="width: 150px">
|
|
<el-option label="普通分销商" :value="1"></el-option>
|
|
<el-option label="高级分销商" :value="2"></el-option>
|
|
<el-option label="精英分销商" :value="3"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="handleDistributorSearch">查询</el-button>
|
|
<el-button @click="handleDistributorReset">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<!-- 分销商列表表格 -->
|
|
<el-table
|
|
:data="filteredDistributorList"
|
|
border
|
|
style="width: 100%"
|
|
:header-cell-style="{ background: '#F5F7FA', color: '#606266' }">
|
|
<el-table-column prop="userName" label="姓名" align="center" width="120"></el-table-column>
|
|
<el-table-column prop="mobile" label="手机号" align="center" width="130"></el-table-column>
|
|
<el-table-column prop="level" label="等级" align="center" width="120">
|
|
<template slot-scope="scope">
|
|
<el-tag :type="getLevelType(scope.row.level)">
|
|
{{ getLevelText(scope.row.level) }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="visitTimes" label="进店量" align="center" width="100"></el-table-column>
|
|
<el-table-column prop="createTime" label="成为分销商时间" align="center" width="180"></el-table-column>
|
|
<el-table-column prop="status" label="状态" align="center" width="100">
|
|
<template slot-scope="scope">
|
|
<el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
|
|
{{ scope.row.status === 1 ? '启用' : '禁用' }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="disableReason" label="禁用原因" align="center" min-width="200">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.status === 0">{{ scope.row.disableReason }}</span>
|
|
<span v-else>-</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" align="center" width="200" fixed="right">
|
|
<template slot-scope="scope">
|
|
<el-button size="mini" type="primary" @click="viewDistributorDetail(scope.row)">详情</el-button>
|
|
<el-button
|
|
v-if="scope.row.status === 1"
|
|
size="mini"
|
|
type="warning"
|
|
@click="handleDisable(scope.row)">禁用</el-button>
|
|
<el-button
|
|
v-else
|
|
size="mini"
|
|
type="success"
|
|
@click="handleEnable(scope.row)">启用</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<!-- 分页 -->
|
|
<div style="text-align: right; margin-top: 20px;">
|
|
<el-pagination
|
|
background
|
|
@current-change="handleDistributorPageChange"
|
|
:current-page.sync="distributorPage.current"
|
|
:page-size="distributorPage.size"
|
|
layout="total, prev, pager, next"
|
|
:total="filteredDistributorList.length">
|
|
</el-pagination>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
|
|
<!-- 拒绝原因对话框 -->
|
|
<el-dialog title="拒绝申请" :visible.sync="rejectDialogVisible" width="30%">
|
|
<el-form :model="rejectForm" ref="rejectForm" label-width="100px">
|
|
<el-form-item label="拒绝理由" required>
|
|
<el-input type="textarea" :rows="4" placeholder="请输入拒绝理由" v-model="rejectForm.reason"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="rejectDialogVisible = false">取 消</el-button>
|
|
<el-button type="primary" @click="confirmReject">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
<!-- 禁用原因对话框 -->
|
|
<el-dialog title="禁用分销商" :visible.sync="disableDialogVisible" width="30%">
|
|
<el-form :model="disableForm" ref="disableForm" label-width="100px">
|
|
<el-form-item label="禁用理由" required>
|
|
<el-input type="textarea" :rows="4" placeholder="请输入禁用理由" v-model="disableForm.reason"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="disableDialogVisible = false">取 消</el-button>
|
|
<el-button type="primary" @click="confirmDisable">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
<!-- 申请详情对话框 -->
|
|
<el-dialog title="申请详情" :visible.sync="detailDialogVisible" width="50%">
|
|
<el-descriptions :column="2" border v-if="detailData">
|
|
<el-descriptions-item label="申请人">{{ detailData.userName }}</el-descriptions-item>
|
|
<el-descriptions-item label="手机号">{{ detailData.mobile }}</el-descriptions-item>
|
|
<el-descriptions-item label="申请时间">{{ detailData.createTime }}</el-descriptions-item>
|
|
<el-descriptions-item label="审核时间">{{ detailData.auditTime }}</el-descriptions-item>
|
|
<el-descriptions-item label="审核状态">
|
|
<el-tag :type="getStatusType(detailData.status)">
|
|
{{ getStatusText(detailData.status) }}
|
|
</el-tag>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="拒绝理由" v-if="detailData.status === -1" :span="2">
|
|
{{ detailData.refuseReason }}
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="detailDialogVisible = false">关 闭</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
<!-- 分销商详情对话框 -->
|
|
<el-dialog title="分销商详情" :visible.sync="distributorDetailVisible" width="60%">
|
|
<el-descriptions :column="2" border v-if="distributorDetail">
|
|
<el-descriptions-item label="姓名">{{ distributorDetail.userName }}</el-descriptions-item>
|
|
<el-descriptions-item label="手机号">{{ distributorDetail.mobile }}</el-descriptions-item>
|
|
<el-descriptions-item label="等级">
|
|
<el-tag :type="getLevelType(distributorDetail.level)">
|
|
{{ getLevelText(distributorDetail.level) }}
|
|
</el-tag>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="状态">
|
|
<el-tag :type="distributorDetail.status === 1 ? 'success' : 'danger'">
|
|
{{ distributorDetail.status === 1 ? '启用' : '禁用' }}
|
|
</el-tag>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="进店量">{{ distributorDetail.visitTimes || 0 }}</el-descriptions-item>
|
|
<el-descriptions-item label="成为分销商时间">{{ distributorDetail.createTime }}</el-descriptions-item>
|
|
<el-descriptions-item label="禁用原因" v-if="distributorDetail.status === 0" :span="2">
|
|
{{ distributorDetail.disableReason }}
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="distributorDetailVisible = false">关 闭</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
|
|
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
|
|
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
activeTab: 'apply',
|
|
|
|
// 申请审核数据
|
|
applyQuery: {
|
|
status: null,
|
|
userName: ''
|
|
},
|
|
applyList: [
|
|
{ id: 1, userName: '张三', mobile: '13800138001', createTime: '2024-01-15 10:30:00', auditTime: '', status: 0, refuseReason: '' },
|
|
{ id: 2, userName: '李四', mobile: '13800138002', createTime: '2024-01-16 14:20:00', auditTime: '', status: 0, refuseReason: '' },
|
|
{ id: 3, userName: '王五', mobile: '13800138003', createTime: '2024-01-17 09:15:00', auditTime: '2024-01-17 16:20:00', status: 1, refuseReason: '' },
|
|
{ id: 4, userName: '赵六', mobile: '13800138004', createTime: '2024-01-18 11:45:00', auditTime: '2024-01-18 15:30:00', status: -1, refuseReason: '资料不完整' },
|
|
{ id: 5, userName: '钱七', mobile: '13800138005', createTime: '2024-01-19 08:00:00', auditTime: '', status: 0, refuseReason: '' },
|
|
{ id: 6, userName: '孙八', mobile: '13800138006', createTime: '2024-01-20 13:25:00', auditTime: '2024-01-20 17:10:00', status: 1, refuseReason: '' },
|
|
],
|
|
applyPage: { current: 1, size: 10 },
|
|
|
|
// 分销商列表数据
|
|
distributorQuery: {
|
|
userName: '',
|
|
mobile: '',
|
|
status: null,
|
|
level: null
|
|
},
|
|
distributorList: [
|
|
{ id: 1, userName: '张三', mobile: '13800138001', level: 1, visitTimes: 120, status: 1, createTime: '2024-01-15 10:30:00', disableReason: '' },
|
|
{ id: 2, userName: '李四', mobile: '13800138002', level: 2, visitTimes: 350, status: 1, createTime: '2024-01-16 14:20:00', disableReason: '' },
|
|
{ id: 3, userName: '王五', mobile: '13800138003', level: 3, visitTimes: 680, status: 1, createTime: '2024-01-17 09:15:00', disableReason: '' },
|
|
{ id: 4, userName: '赵六', mobile: '13800138004', level: 1, visitTimes: 45, status: 0, createTime: '2024-01-18 11:45:00', disableReason: '违规推广' },
|
|
{ id: 5, userName: '孙八', mobile: '13800138006', level: 2, visitTimes: 280, status: 1, createTime: '2024-01-20 13:25:00', disableReason: '' },
|
|
{ id: 6, userName: '周九', mobile: '13800138007', level: 1, visitTimes: 95, status: 1, createTime: '2024-01-21 16:00:00', disableReason: '' },
|
|
{ id: 7, userName: '吴十', mobile: '13800138008', level: 3, visitTimes: 520, status: 1, createTime: '2024-01-22 10:15:00', disableReason: '' },
|
|
{ id: 8, userName: '郑十一', mobile: '13800138009', level: 2, visitTimes: 310, status: 0, createTime: '2024-01-23 14:30:00', disableReason: '不符合资质要求' },
|
|
],
|
|
distributorPage: { current: 1, size: 10 },
|
|
distributorStats: {
|
|
total: 8,
|
|
active: 6,
|
|
disabled: 2,
|
|
advanced: 4
|
|
},
|
|
|
|
// 对话框
|
|
rejectDialogVisible: false,
|
|
disableDialogVisible: false,
|
|
detailDialogVisible: false,
|
|
distributorDetailVisible: false,
|
|
|
|
// 表单数据
|
|
rejectForm: { reason: '' },
|
|
disableForm: { reason: '' },
|
|
currentRow: null,
|
|
detailData: null,
|
|
distributorDetail: null
|
|
};
|
|
},
|
|
computed: {
|
|
filteredApplyList() {
|
|
let list = this.applyList;
|
|
if (this.applyQuery.status !== null && this.applyQuery.status !== '') {
|
|
list = list.filter(item => item.status === this.applyQuery.status);
|
|
}
|
|
if (this.applyQuery.userName) {
|
|
list = list.filter(item => item.userName.includes(this.applyQuery.userName));
|
|
}
|
|
return list;
|
|
},
|
|
filteredDistributorList() {
|
|
let list = this.distributorList;
|
|
if (this.distributorQuery.userName) {
|
|
list = list.filter(item => item.userName.includes(this.distributorQuery.userName));
|
|
}
|
|
if (this.distributorQuery.mobile) {
|
|
list = list.filter(item => item.mobile.includes(this.distributorQuery.mobile));
|
|
}
|
|
if (this.distributorQuery.status !== null && this.distributorQuery.status !== '') {
|
|
list = list.filter(item => item.status === this.distributorQuery.status);
|
|
}
|
|
if (this.distributorQuery.level !== null && this.distributorQuery.level !== '') {
|
|
list = list.filter(item => item.level === this.distributorQuery.level);
|
|
}
|
|
return list;
|
|
},
|
|
hasWaitingApproval() {
|
|
return this.filteredApplyList.some(item => item.status === 0);
|
|
}
|
|
},
|
|
methods: {
|
|
handleTabChange(tab) {
|
|
console.log('切换到Tab:', tab.name);
|
|
},
|
|
|
|
// 申请审核相关方法
|
|
handleSearch() {
|
|
this.$message.success('查询成功');
|
|
},
|
|
handleReset() {
|
|
this.applyQuery = { status: null, userName: '' };
|
|
this.$message.info('已重置查询条件');
|
|
},
|
|
handleApprove(row) {
|
|
this.$confirm('确定通过该分销商申请?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
row.status = 1;
|
|
row.auditTime = new Date().toLocaleString();
|
|
this.$message.success('审核通过成功!');
|
|
}).catch(() => {
|
|
this.$message.info('已取消操作');
|
|
});
|
|
},
|
|
handleReject(row) {
|
|
this.currentRow = row;
|
|
this.rejectForm.reason = '';
|
|
this.rejectDialogVisible = true;
|
|
},
|
|
confirmReject() {
|
|
if (!this.rejectForm.reason) {
|
|
this.$message.warning('请输入拒绝理由');
|
|
return;
|
|
}
|
|
this.currentRow.status = -1;
|
|
this.currentRow.auditTime = new Date().toLocaleString();
|
|
this.currentRow.refuseReason = this.rejectForm.reason;
|
|
this.rejectDialogVisible = false;
|
|
this.$message.success('已拒绝该申请');
|
|
},
|
|
handlePassAll() {
|
|
const waitingList = this.applyList.filter(item => item.status === 0);
|
|
this.$confirm(`确定要一键通过所有 ${waitingList.length} 条待审核的申请?`, '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
waitingList.forEach(item => {
|
|
item.status = 1;
|
|
item.auditTime = new Date().toLocaleString();
|
|
});
|
|
this.$message.success(`成功通过 ${waitingList.length} 条申请记录!`);
|
|
}).catch(() => {
|
|
this.$message.info('已取消操作');
|
|
});
|
|
},
|
|
handleDetail(row) {
|
|
this.detailData = row;
|
|
this.detailDialogVisible = true;
|
|
},
|
|
handleApplyPageChange(page) {
|
|
console.log('申请审核页码变化:', page);
|
|
},
|
|
|
|
// 分销商列表相关方法
|
|
handleDistributorSearch() {
|
|
this.$message.success('查询成功');
|
|
},
|
|
handleDistributorReset() {
|
|
this.distributorQuery = { userName: '', mobile: '', status: null, level: null };
|
|
this.$message.info('已重置查询条件');
|
|
},
|
|
viewDistributorDetail(row) {
|
|
this.distributorDetail = row;
|
|
this.distributorDetailVisible = true;
|
|
},
|
|
handleDisable(row) {
|
|
this.currentRow = row;
|
|
this.disableForm.reason = '';
|
|
this.disableDialogVisible = true;
|
|
},
|
|
confirmDisable() {
|
|
if (!this.disableForm.reason) {
|
|
this.$message.warning('请输入禁用理由');
|
|
return;
|
|
}
|
|
this.currentRow.status = 0;
|
|
this.currentRow.disableReason = this.disableForm.reason;
|
|
this.disableDialogVisible = false;
|
|
this.updateStats();
|
|
this.$message.success('已禁用该分销商');
|
|
},
|
|
handleEnable(row) {
|
|
this.$confirm('确定要启用该分销商?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
row.status = 1;
|
|
row.disableReason = '';
|
|
this.updateStats();
|
|
this.$message.success('已启用该分销商');
|
|
}).catch(() => {
|
|
this.$message.info('已取消操作');
|
|
});
|
|
},
|
|
handleDistributorPageChange(page) {
|
|
console.log('分销商列表页码变化:', page);
|
|
},
|
|
updateStats() {
|
|
this.distributorStats.total = this.distributorList.length;
|
|
this.distributorStats.active = this.distributorList.filter(item => item.status === 1).length;
|
|
this.distributorStats.disabled = this.distributorList.filter(item => item.status === 0).length;
|
|
this.distributorStats.advanced = this.distributorList.filter(item => item.level >= 2 && item.status === 1).length;
|
|
},
|
|
|
|
// 工具方法
|
|
getStatusType(status) {
|
|
const map = { 0: 'warning', 1: 'success', '-1': 'danger' };
|
|
return map[status] || 'info';
|
|
},
|
|
getStatusText(status) {
|
|
const map = { 0: '待审核', 1: '已通过', '-1': '已拒绝' };
|
|
return map[status] || '未知';
|
|
},
|
|
getLevelType(level) {
|
|
const map = { 1: 'info', 2: 'success', 3: 'warning' };
|
|
return map[level] || 'info';
|
|
},
|
|
getLevelText(level) {
|
|
const map = { 1: '普通分销商', 2: '高级分销商', 3: '精英分销商' };
|
|
return map[level] || '未知';
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|