重构分销商审核和订单管理页面
- 移除Element UI和Vue.js依赖，改用原生HTML/CSS/JS实现 - 为分销商审核和订单管理页面添加Tab选项卡功能 - 实现自定义表单、表格、按钮等UI组件的样式 - 将动态数据绑定替换为静态数据展示 Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
parent
8f31b9a105
commit
e405208130
|
|
@ -4,7 +4,6 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>分销商审核和管理系统</title>
|
<title>分销商审核和管理系统</title>
|
||||||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
|
||||||
<style>
|
<style>
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -63,13 +62,6 @@
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
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 {
|
.stat-content {
|
||||||
|
|
@ -103,8 +95,151 @@
|
||||||
color: #303133;
|
color: #303133;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
border-bottom: 2px solid #E4E7ED;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-item {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 12px 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-bottom: 2px solid transparent;
|
||||||
|
margin-bottom: -2px;
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-item.active {
|
||||||
|
color: #409EFF;
|
||||||
|
border-bottom-color: #409EFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
.search-form {
|
.search-form {
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
|
padding: 20px;
|
||||||
|
background: #f5f7fa;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 20px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item label {
|
||||||
|
margin-right: 8px;
|
||||||
|
color: #606266;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item input, .form-item select {
|
||||||
|
padding: 8px 12px;
|
||||||
|
border: 1px solid #DCDFE6;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 9px 15px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: #409EFF;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-default {
|
||||||
|
background: white;
|
||||||
|
color: #606266;
|
||||||
|
border: 1px solid #DCDFE6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-success {
|
||||||
|
background: #67C23A;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger {
|
||||||
|
background: #F56C6C;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-warning {
|
||||||
|
background: #E6A23C;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
table th, table td {
|
||||||
|
border: 1px solid #EBEEF5;
|
||||||
|
padding: 12px 8px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
table th {
|
||||||
|
background: #F5F7FA;
|
||||||
|
color: #606266;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
table tr:hover {
|
||||||
|
background: #F5F7FA;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 4px 12px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-success {
|
||||||
|
background: #f0f9ff;
|
||||||
|
color: #67C23A;
|
||||||
|
border: 1px solid #c6f6d5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-warning {
|
||||||
|
background: #fffbeb;
|
||||||
|
color: #E6A23C;
|
||||||
|
border: 1px solid #fef3c7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-danger {
|
||||||
|
background: #fef2f2;
|
||||||
|
color: #F56C6C;
|
||||||
|
border: 1px solid #fecaca;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-info {
|
||||||
|
background: #f4f4f5;
|
||||||
|
color: #909399;
|
||||||
|
border: 1px solid #e4e4e7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
text-align: right;
|
||||||
|
margin-top: 20px;
|
||||||
|
color: #606266;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 1200px) {
|
@media screen and (max-width: 1200px) {
|
||||||
|
|
@ -121,7 +256,7 @@
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app" class="container">
|
<div class="container">
|
||||||
<!-- 页面标题 -->
|
<!-- 页面标题 -->
|
||||||
<div class="header-card">
|
<div class="header-card">
|
||||||
<h1 class="page-title">分销商审核与管理系统</h1>
|
<h1 class="page-title">分销商审核与管理系统</h1>
|
||||||
|
|
@ -130,509 +265,347 @@
|
||||||
|
|
||||||
<!-- 主内容 -->
|
<!-- 主内容 -->
|
||||||
<div class="main-card">
|
<div class="main-card">
|
||||||
<el-tabs v-model="activeTab" @tab-click="handleTabChange">
|
<!-- Tab选项卡 -->
|
||||||
|
<div class="tabs">
|
||||||
|
<div class="tab-item active" onclick="switchTab('apply')">申请审核</div>
|
||||||
|
<div class="tab-item" onclick="switchTab('distributor')">分销商列表</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 申请审核Tab -->
|
<!-- 申请审核Tab -->
|
||||||
<el-tab-pane label="申请审核" name="apply">
|
<div id="tab-apply" class="tab-content active">
|
||||||
<!-- 搜索表单 -->
|
<!-- 搜索表单 -->
|
||||||
<el-form :inline="true" :model="applyQuery" size="small" class="search-form">
|
<div class="search-form">
|
||||||
<el-form-item label="审核状态">
|
<div class="form-item">
|
||||||
<el-select v-model="applyQuery.status" placeholder="请选择审核状态" clearable style="width: 150px">
|
<label>审核状态</label>
|
||||||
<el-option label="待审核" :value="0"></el-option>
|
<select style="width: 150px">
|
||||||
<el-option label="已通过" :value="1"></el-option>
|
<option value="">全部</option>
|
||||||
<el-option label="已拒绝" :value="-1"></el-option>
|
<option value="0">待审核</option>
|
||||||
</el-select>
|
<option value="1">已通过</option>
|
||||||
</el-form-item>
|
<option value="-1">已拒绝</option>
|
||||||
<el-form-item label="申请人">
|
</select>
|
||||||
<el-input v-model="applyQuery.userName" placeholder="请输入申请人姓名" clearable style="width: 200px"></el-input>
|
</div>
|
||||||
</el-form-item>
|
<div class="form-item">
|
||||||
<el-form-item>
|
<label>申请人</label>
|
||||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
<input type="text" placeholder="请输入申请人姓名" style="width: 200px">
|
||||||
<el-button @click="handleReset">重置</el-button>
|
</div>
|
||||||
<el-button v-if="hasWaitingApproval" type="success" @click="handlePassAll">一键通过</el-button>
|
<div class="form-item">
|
||||||
</el-form-item>
|
<button class="btn btn-primary">查询</button>
|
||||||
</el-form>
|
<button class="btn btn-default">重置</button>
|
||||||
|
<button class="btn btn-success">一键通过</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 申请列表表格 -->
|
<!-- 申请列表表格 -->
|
||||||
<el-table
|
<table>
|
||||||
:data="filteredApplyList"
|
<thead>
|
||||||
border
|
<tr>
|
||||||
style="width: 100%"
|
<th>申请人</th>
|
||||||
:header-cell-style="{ background: '#F5F7FA', color: '#606266' }">
|
<th>手机号</th>
|
||||||
<el-table-column prop="userName" label="申请人" align="center" width="120"></el-table-column>
|
<th>申请时间</th>
|
||||||
<el-table-column prop="mobile" label="手机号" align="center" width="130"></el-table-column>
|
<th>审核时间</th>
|
||||||
<el-table-column prop="createTime" label="申请时间" align="center" width="180"></el-table-column>
|
<th>审核状态</th>
|
||||||
<el-table-column prop="auditTime" label="审核时间" align="center" width="180"></el-table-column>
|
<th>拒绝理由</th>
|
||||||
<el-table-column prop="status" label="审核状态" align="center" width="100">
|
<th>操作</th>
|
||||||
<template slot-scope="scope">
|
</tr>
|
||||||
<el-tag :type="getStatusType(scope.row.status)">
|
</thead>
|
||||||
{{ getStatusText(scope.row.status) }}
|
<tbody>
|
||||||
</el-tag>
|
<tr>
|
||||||
</template>
|
<td>张三</td>
|
||||||
</el-table-column>
|
<td>13800138001</td>
|
||||||
<el-table-column prop="refuseReason" label="拒绝理由" align="center" min-width="200">
|
<td>2024-01-15 10:30:00</td>
|
||||||
<template slot-scope="scope">
|
<td>-</td>
|
||||||
<span v-if="scope.row.status === -1">{{ scope.row.refuseReason }}</span>
|
<td><span class="tag tag-warning">待审核</span></td>
|
||||||
<span v-else>-</span>
|
<td>-</td>
|
||||||
</template>
|
<td>
|
||||||
</el-table-column>
|
<button class="btn btn-success" style="margin: 0; padding: 5px 12px;">通过</button>
|
||||||
<el-table-column label="操作" align="center" width="180" fixed="right">
|
<button class="btn btn-danger" style="margin: 0; padding: 5px 12px;">拒绝</button>
|
||||||
<template slot-scope="scope">
|
</td>
|
||||||
<el-button v-if="scope.row.status === 0" size="mini" type="success" @click="handleApprove(scope.row)">通过</el-button>
|
</tr>
|
||||||
<el-button v-if="scope.row.status === 0" size="mini" type="danger" @click="handleReject(scope.row)">拒绝</el-button>
|
<tr>
|
||||||
<el-button v-else size="mini" type="primary" @click="handleDetail(scope.row)">详情</el-button>
|
<td>李四</td>
|
||||||
</template>
|
<td>13800138002</td>
|
||||||
</el-table-column>
|
<td>2024-01-16 14:20:00</td>
|
||||||
</el-table>
|
<td>-</td>
|
||||||
|
<td><span class="tag tag-warning">待审核</span></td>
|
||||||
|
<td>-</td>
|
||||||
|
<td>
|
||||||
|
<button class="btn btn-success" style="margin: 0; padding: 5px 12px;">通过</button>
|
||||||
|
<button class="btn btn-danger" style="margin: 0; padding: 5px 12px;">拒绝</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>王五</td>
|
||||||
|
<td>13800138003</td>
|
||||||
|
<td>2024-01-17 09:15:00</td>
|
||||||
|
<td>2024-01-17 16:20:00</td>
|
||||||
|
<td><span class="tag tag-success">已通过</span></td>
|
||||||
|
<td>-</td>
|
||||||
|
<td>
|
||||||
|
<button class="btn btn-primary" style="margin: 0; padding: 5px 12px;">详情</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>赵六</td>
|
||||||
|
<td>13800138004</td>
|
||||||
|
<td>2024-01-18 11:45:00</td>
|
||||||
|
<td>2024-01-18 15:30:00</td>
|
||||||
|
<td><span class="tag tag-danger">已拒绝</span></td>
|
||||||
|
<td>资料不完整</td>
|
||||||
|
<td>
|
||||||
|
<button class="btn btn-primary" style="margin: 0; padding: 5px 12px;">详情</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>钱七</td>
|
||||||
|
<td>13800138005</td>
|
||||||
|
<td>2024-01-19 08:00:00</td>
|
||||||
|
<td>-</td>
|
||||||
|
<td><span class="tag tag-warning">待审核</span></td>
|
||||||
|
<td>-</td>
|
||||||
|
<td>
|
||||||
|
<button class="btn btn-success" style="margin: 0; padding: 5px 12px;">通过</button>
|
||||||
|
<button class="btn btn-danger" style="margin: 0; padding: 5px 12px;">拒绝</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>孙八</td>
|
||||||
|
<td>13800138006</td>
|
||||||
|
<td>2024-01-20 13:25:00</td>
|
||||||
|
<td>2024-01-20 17:10:00</td>
|
||||||
|
<td><span class="tag tag-success">已通过</span></td>
|
||||||
|
<td>-</td>
|
||||||
|
<td>
|
||||||
|
<button class="btn btn-primary" style="margin: 0; padding: 5px 12px;">详情</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
<!-- 分页 -->
|
<!-- 分页 -->
|
||||||
<div style="text-align: right; margin-top: 20px;">
|
<div class="pagination">
|
||||||
<el-pagination
|
共 6 条
|
||||||
background
|
</div>
|
||||||
@current-change="handleApplyPageChange"
|
|
||||||
:current-page.sync="applyPage.current"
|
|
||||||
:page-size="applyPage.size"
|
|
||||||
layout="total, prev, pager, next"
|
|
||||||
:total="filteredApplyList.length">
|
|
||||||
</el-pagination>
|
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
|
||||||
|
|
||||||
<!-- 分销商列表Tab -->
|
<!-- 分销商列表Tab -->
|
||||||
<el-tab-pane label="分销商列表" name="distributor">
|
<div id="tab-distributor" class="tab-content">
|
||||||
<!-- 统计卡片 -->
|
<!-- 统计卡片 -->
|
||||||
<div class="stat-cards">
|
<div class="stat-cards">
|
||||||
<div class="stat-card">
|
<div class="stat-card">
|
||||||
<div class="stat-content">
|
<div class="stat-content">
|
||||||
<i class="el-icon-user stat-icon primary"></i>
|
<div class="stat-icon primary">👥</div>
|
||||||
<div class="stat-info">
|
<div class="stat-info">
|
||||||
<div class="stat-label">总分销商数</div>
|
<div class="stat-label">总分销商数</div>
|
||||||
<div class="stat-value">{{ distributorStats.total }}</div>
|
<div class="stat-value">8</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-card">
|
<div class="stat-card">
|
||||||
<div class="stat-content">
|
<div class="stat-content">
|
||||||
<i class="el-icon-check stat-icon success"></i>
|
<div class="stat-icon success">✅</div>
|
||||||
<div class="stat-info">
|
<div class="stat-info">
|
||||||
<div class="stat-label">启用中</div>
|
<div class="stat-label">启用中</div>
|
||||||
<div class="stat-value">{{ distributorStats.active }}</div>
|
<div class="stat-value">6</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-card">
|
<div class="stat-card">
|
||||||
<div class="stat-content">
|
<div class="stat-content">
|
||||||
<i class="el-icon-close stat-icon danger"></i>
|
<div class="stat-icon danger">❌</div>
|
||||||
<div class="stat-info">
|
<div class="stat-info">
|
||||||
<div class="stat-label">已禁用</div>
|
<div class="stat-label">已禁用</div>
|
||||||
<div class="stat-value">{{ distributorStats.disabled }}</div>
|
<div class="stat-value">2</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-card">
|
<div class="stat-card">
|
||||||
<div class="stat-content">
|
<div class="stat-content">
|
||||||
<i class="el-icon-star-on stat-icon warning"></i>
|
<div class="stat-icon warning">⭐</div>
|
||||||
<div class="stat-info">
|
<div class="stat-info">
|
||||||
<div class="stat-label">高级分销商</div>
|
<div class="stat-label">高级分销商</div>
|
||||||
<div class="stat-value">{{ distributorStats.advanced }}</div>
|
<div class="stat-value">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 搜索表单 -->
|
<!-- 搜索表单 -->
|
||||||
<el-form :inline="true" :model="distributorQuery" size="small" class="search-form">
|
<div class="search-form">
|
||||||
<el-form-item label="姓名">
|
<div class="form-item">
|
||||||
<el-input v-model="distributorQuery.userName" placeholder="请输入姓名" clearable style="width: 150px"></el-input>
|
<label>姓名</label>
|
||||||
</el-form-item>
|
<input type="text" placeholder="请输入姓名" style="width: 150px">
|
||||||
<el-form-item label="手机号">
|
</div>
|
||||||
<el-input v-model="distributorQuery.mobile" placeholder="请输入手机号" clearable style="width: 150px"></el-input>
|
<div class="form-item">
|
||||||
</el-form-item>
|
<label>手机号</label>
|
||||||
<el-form-item label="状态">
|
<input type="text" placeholder="请输入手机号" style="width: 150px">
|
||||||
<el-select v-model="distributorQuery.status" placeholder="请选择状态" clearable style="width: 120px">
|
</div>
|
||||||
<el-option label="启用" :value="1"></el-option>
|
<div class="form-item">
|
||||||
<el-option label="禁用" :value="0"></el-option>
|
<label>状态</label>
|
||||||
</el-select>
|
<select style="width: 120px">
|
||||||
</el-form-item>
|
<option value="">全部</option>
|
||||||
<el-form-item label="等级">
|
<option value="1">启用</option>
|
||||||
<el-select v-model="distributorQuery.level" placeholder="请选择等级" clearable style="width: 150px">
|
<option value="0">禁用</option>
|
||||||
<el-option label="普通分销商" :value="1"></el-option>
|
</select>
|
||||||
<el-option label="高级分销商" :value="2"></el-option>
|
</div>
|
||||||
<el-option label="精英分销商" :value="3"></el-option>
|
<div class="form-item">
|
||||||
</el-select>
|
<label>等级</label>
|
||||||
</el-form-item>
|
<select style="width: 150px">
|
||||||
<el-form-item>
|
<option value="">全部</option>
|
||||||
<el-button type="primary" @click="handleDistributorSearch">查询</el-button>
|
<option value="1">普通分销商</option>
|
||||||
<el-button @click="handleDistributorReset">重置</el-button>
|
<option value="2">高级分销商</option>
|
||||||
</el-form-item>
|
<option value="3">精英分销商</option>
|
||||||
</el-form>
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-item">
|
||||||
|
<button class="btn btn-primary">查询</button>
|
||||||
|
<button class="btn btn-default">重置</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 分销商列表表格 -->
|
<!-- 分销商列表表格 -->
|
||||||
<el-table
|
<table>
|
||||||
:data="filteredDistributorList"
|
<thead>
|
||||||
border
|
<tr>
|
||||||
style="width: 100%"
|
<th>姓名</th>
|
||||||
:header-cell-style="{ background: '#F5F7FA', color: '#606266' }">
|
<th>手机号</th>
|
||||||
<el-table-column prop="userName" label="姓名" align="center" width="120"></el-table-column>
|
<th>等级</th>
|
||||||
<el-table-column prop="mobile" label="手机号" align="center" width="130"></el-table-column>
|
<th>进店量</th>
|
||||||
<el-table-column prop="level" label="等级" align="center" width="120">
|
<th>成为分销商时间</th>
|
||||||
<template slot-scope="scope">
|
<th>状态</th>
|
||||||
<el-tag :type="getLevelType(scope.row.level)">
|
<th>禁用原因</th>
|
||||||
{{ getLevelText(scope.row.level) }}
|
<th>操作</th>
|
||||||
</el-tag>
|
</tr>
|
||||||
</template>
|
</thead>
|
||||||
</el-table-column>
|
<tbody>
|
||||||
<el-table-column prop="visitTimes" label="进店量" align="center" width="100"></el-table-column>
|
<tr>
|
||||||
<el-table-column prop="createTime" label="成为分销商时间" align="center" width="180"></el-table-column>
|
<td>张三</td>
|
||||||
<el-table-column prop="status" label="状态" align="center" width="100">
|
<td>13800138001</td>
|
||||||
<template slot-scope="scope">
|
<td><span class="tag tag-info">普通分销商</span></td>
|
||||||
<el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
|
<td>120</td>
|
||||||
{{ scope.row.status === 1 ? '启用' : '禁用' }}
|
<td>2024-01-15 10:30:00</td>
|
||||||
</el-tag>
|
<td><span class="tag tag-success">启用</span></td>
|
||||||
</template>
|
<td>-</td>
|
||||||
</el-table-column>
|
<td>
|
||||||
<el-table-column prop="disableReason" label="禁用原因" align="center" min-width="200">
|
<button class="btn btn-primary" style="margin: 0; padding: 5px 12px;">详情</button>
|
||||||
<template slot-scope="scope">
|
<button class="btn btn-warning" style="margin: 0; padding: 5px 12px;">禁用</button>
|
||||||
<span v-if="scope.row.status === 0">{{ scope.row.disableReason }}</span>
|
</td>
|
||||||
<span v-else>-</span>
|
</tr>
|
||||||
</template>
|
<tr>
|
||||||
</el-table-column>
|
<td>李四</td>
|
||||||
<el-table-column label="操作" align="center" width="200" fixed="right">
|
<td>13800138002</td>
|
||||||
<template slot-scope="scope">
|
<td><span class="tag tag-success">高级分销商</span></td>
|
||||||
<el-button size="mini" type="primary" @click="viewDistributorDetail(scope.row)">详情</el-button>
|
<td>350</td>
|
||||||
<el-button
|
<td>2024-01-16 14:20:00</td>
|
||||||
v-if="scope.row.status === 1"
|
<td><span class="tag tag-success">启用</span></td>
|
||||||
size="mini"
|
<td>-</td>
|
||||||
type="warning"
|
<td>
|
||||||
@click="handleDisable(scope.row)">禁用</el-button>
|
<button class="btn btn-primary" style="margin: 0; padding: 5px 12px;">详情</button>
|
||||||
<el-button
|
<button class="btn btn-warning" style="margin: 0; padding: 5px 12px;">禁用</button>
|
||||||
v-else
|
</td>
|
||||||
size="mini"
|
</tr>
|
||||||
type="success"
|
<tr>
|
||||||
@click="handleEnable(scope.row)">启用</el-button>
|
<td>王五</td>
|
||||||
</template>
|
<td>13800138003</td>
|
||||||
</el-table-column>
|
<td><span class="tag tag-warning">精英分销商</span></td>
|
||||||
</el-table>
|
<td>680</td>
|
||||||
|
<td>2024-01-17 09:15:00</td>
|
||||||
|
<td><span class="tag tag-success">启用</span></td>
|
||||||
|
<td>-</td>
|
||||||
|
<td>
|
||||||
|
<button class="btn btn-primary" style="margin: 0; padding: 5px 12px;">详情</button>
|
||||||
|
<button class="btn btn-warning" style="margin: 0; padding: 5px 12px;">禁用</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>赵六</td>
|
||||||
|
<td>13800138004</td>
|
||||||
|
<td><span class="tag tag-info">普通分销商</span></td>
|
||||||
|
<td>45</td>
|
||||||
|
<td>2024-01-18 11:45:00</td>
|
||||||
|
<td><span class="tag tag-danger">禁用</span></td>
|
||||||
|
<td>违规推广</td>
|
||||||
|
<td>
|
||||||
|
<button class="btn btn-primary" style="margin: 0; padding: 5px 12px;">详情</button>
|
||||||
|
<button class="btn btn-success" style="margin: 0; padding: 5px 12px;">启用</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>孙八</td>
|
||||||
|
<td>13800138006</td>
|
||||||
|
<td><span class="tag tag-success">高级分销商</span></td>
|
||||||
|
<td>280</td>
|
||||||
|
<td>2024-01-20 13:25:00</td>
|
||||||
|
<td><span class="tag tag-success">启用</span></td>
|
||||||
|
<td>-</td>
|
||||||
|
<td>
|
||||||
|
<button class="btn btn-primary" style="margin: 0; padding: 5px 12px;">详情</button>
|
||||||
|
<button class="btn btn-warning" style="margin: 0; padding: 5px 12px;">禁用</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>周九</td>
|
||||||
|
<td>13800138007</td>
|
||||||
|
<td><span class="tag tag-info">普通分销商</span></td>
|
||||||
|
<td>95</td>
|
||||||
|
<td>2024-01-21 16:00:00</td>
|
||||||
|
<td><span class="tag tag-success">启用</span></td>
|
||||||
|
<td>-</td>
|
||||||
|
<td>
|
||||||
|
<button class="btn btn-primary" style="margin: 0; padding: 5px 12px;">详情</button>
|
||||||
|
<button class="btn btn-warning" style="margin: 0; padding: 5px 12px;">禁用</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>吴十</td>
|
||||||
|
<td>13800138008</td>
|
||||||
|
<td><span class="tag tag-warning">精英分销商</span></td>
|
||||||
|
<td>520</td>
|
||||||
|
<td>2024-01-22 10:15:00</td>
|
||||||
|
<td><span class="tag tag-success">启用</span></td>
|
||||||
|
<td>-</td>
|
||||||
|
<td>
|
||||||
|
<button class="btn btn-primary" style="margin: 0; padding: 5px 12px;">详情</button>
|
||||||
|
<button class="btn btn-warning" style="margin: 0; padding: 5px 12px;">禁用</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>郑十一</td>
|
||||||
|
<td>13800138009</td>
|
||||||
|
<td><span class="tag tag-success">高级分销商</span></td>
|
||||||
|
<td>310</td>
|
||||||
|
<td>2024-01-23 14:30:00</td>
|
||||||
|
<td><span class="tag tag-danger">禁用</span></td>
|
||||||
|
<td>不符合资质要求</td>
|
||||||
|
<td>
|
||||||
|
<button class="btn btn-primary" style="margin: 0; padding: 5px 12px;">详情</button>
|
||||||
|
<button class="btn btn-success" style="margin: 0; padding: 5px 12px;">启用</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
<!-- 分页 -->
|
<!-- 分页 -->
|
||||||
<div style="text-align: right; margin-top: 20px;">
|
<div class="pagination">
|
||||||
<el-pagination
|
共 8 条
|
||||||
background
|
</div>
|
||||||
@current-change="handleDistributorPageChange"
|
</div>
|
||||||
:current-page.sync="distributorPage.current"
|
|
||||||
:page-size="distributorPage.size"
|
|
||||||
layout="total, prev, pager, next"
|
|
||||||
:total="filteredDistributorList.length">
|
|
||||||
</el-pagination>
|
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</div>
|
</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>
|
<script>
|
||||||
new Vue({
|
function switchTab(tabName) {
|
||||||
el: '#app',
|
// 移除所有active类
|
||||||
data() {
|
document.querySelectorAll('.tab-item').forEach(item => {
|
||||||
return {
|
item.classList.remove('active');
|
||||||
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('已取消操作');
|
|
||||||
});
|
});
|
||||||
},
|
document.querySelectorAll('.tab-content').forEach(content => {
|
||||||
handleReject(row) {
|
content.classList.remove('active');
|
||||||
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);
|
|
||||||
},
|
|
||||||
|
|
||||||
// 分销商列表相关方法
|
// 添加active类到当前tab
|
||||||
handleDistributorSearch() {
|
event.target.classList.add('active');
|
||||||
this.$message.success('查询成功');
|
document.getElementById('tab-' + tabName).classList.add('active');
|
||||||
},
|
|
||||||
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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,6 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>分销订单与佣金管理系统</title>
|
<title>分销订单与佣金管理系统</title>
|
||||||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
|
||||||
<style>
|
<style>
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -56,13 +55,6 @@
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
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 {
|
.stat-content {
|
||||||
|
|
@ -103,8 +95,129 @@
|
||||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
border-bottom: 2px solid #E4E7ED;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-item {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 12px 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-bottom: 2px solid transparent;
|
||||||
|
margin-bottom: -2px;
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-item.active {
|
||||||
|
color: #409EFF;
|
||||||
|
border-bottom-color: #409EFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
.search-form {
|
.search-form {
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
|
padding: 20px;
|
||||||
|
background: #f5f7fa;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 20px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item label {
|
||||||
|
margin-right: 8px;
|
||||||
|
color: #606266;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item input, .form-item select {
|
||||||
|
padding: 8px 12px;
|
||||||
|
border: 1px solid #DCDFE6;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 9px 15px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: #409EFF;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-default {
|
||||||
|
background: white;
|
||||||
|
color: #606266;
|
||||||
|
border: 1px solid #DCDFE6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-success {
|
||||||
|
background: #67C23A;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
table th, table td {
|
||||||
|
border: 1px solid #EBEEF5;
|
||||||
|
padding: 12px 8px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
table th {
|
||||||
|
background: #F5F7FA;
|
||||||
|
color: #606266;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
table tr:hover {
|
||||||
|
background: #F5F7FA;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 4px 12px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-success {
|
||||||
|
background: #f0f9ff;
|
||||||
|
color: #67C23A;
|
||||||
|
border: 1px solid #c6f6d5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-warning {
|
||||||
|
background: #fffbeb;
|
||||||
|
color: #E6A23C;
|
||||||
|
border: 1px solid #fef3c7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-info {
|
||||||
|
background: #f4f4f5;
|
||||||
|
color: #909399;
|
||||||
|
border: 1px solid #e4e4e7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.money-text {
|
.money-text {
|
||||||
|
|
@ -117,13 +230,10 @@
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-section {
|
.pagination {
|
||||||
|
text-align: right;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
color: #606266;
|
||||||
|
|
||||||
.detail-section h4 {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
color: #303133;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 1200px) {
|
@media screen and (max-width: 1200px) {
|
||||||
|
|
@ -140,7 +250,7 @@
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app" class="container">
|
<div class="container">
|
||||||
<!-- 页面标题 -->
|
<!-- 页面标题 -->
|
||||||
<div class="header-card">
|
<div class="header-card">
|
||||||
<h1 class="page-title">分销订单与佣金管理系统</h1>
|
<h1 class="page-title">分销订单与佣金管理系统</h1>
|
||||||
|
|
@ -151,37 +261,37 @@
|
||||||
<div class="stat-cards">
|
<div class="stat-cards">
|
||||||
<div class="stat-card">
|
<div class="stat-card">
|
||||||
<div class="stat-content">
|
<div class="stat-content">
|
||||||
<i class="el-icon-s-order stat-icon primary"></i>
|
<div class="stat-icon primary">📊</div>
|
||||||
<div class="stat-info">
|
<div class="stat-info">
|
||||||
<div class="stat-label">分销订单总数</div>
|
<div class="stat-label">分销订单总数</div>
|
||||||
<div class="stat-value">{{ orderStats.totalCount }}</div>
|
<div class="stat-value">1250</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-card">
|
<div class="stat-card">
|
||||||
<div class="stat-content">
|
<div class="stat-content">
|
||||||
<i class="el-icon-s-goods stat-icon success"></i>
|
<div class="stat-icon success">💰</div>
|
||||||
<div class="stat-info">
|
<div class="stat-info">
|
||||||
<div class="stat-label">订单总金额(元)</div>
|
<div class="stat-label">订单总金额(元)</div>
|
||||||
<div class="stat-value">{{ orderStats.totalMoney }}</div>
|
<div class="stat-value">125680.50</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-card">
|
<div class="stat-card">
|
||||||
<div class="stat-content">
|
<div class="stat-content">
|
||||||
<i class="el-icon-wallet stat-icon warning"></i>
|
<div class="stat-icon warning">💳</div>
|
||||||
<div class="stat-info">
|
<div class="stat-info">
|
||||||
<div class="stat-label">佣金总额(元)</div>
|
<div class="stat-label">佣金总额(元)</div>
|
||||||
<div class="stat-value">{{ orderStats.totalCommission }}</div>
|
<div class="stat-value">12568.05</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-card">
|
<div class="stat-card">
|
||||||
<div class="stat-content">
|
<div class="stat-content">
|
||||||
<i class="el-icon-pie-chart stat-icon info"></i>
|
<div class="stat-icon info">📈</div>
|
||||||
<div class="stat-info">
|
<div class="stat-info">
|
||||||
<div class="stat-label">佣金比例</div>
|
<div class="stat-label">佣金比例</div>
|
||||||
<div class="stat-value">{{ orderStats.commissionRate }}%</div>
|
<div class="stat-value">10%</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -189,463 +299,310 @@
|
||||||
|
|
||||||
<!-- 主内容 -->
|
<!-- 主内容 -->
|
||||||
<div class="main-card">
|
<div class="main-card">
|
||||||
<el-tabs v-model="activeTab">
|
<!-- Tab选项卡 -->
|
||||||
|
<div class="tabs">
|
||||||
|
<div class="tab-item active" onclick="switchTab('order')">订单明细</div>
|
||||||
|
<div class="tab-item" onclick="switchTab('commission')">佣金统计</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 订单明细Tab -->
|
<!-- 订单明细Tab -->
|
||||||
<el-tab-pane label="订单明细" name="order">
|
<div id="tab-order" class="tab-content active">
|
||||||
<!-- 搜索表单 -->
|
<!-- 搜索表单 -->
|
||||||
<el-form :inline="true" :model="orderQuery" size="small" class="search-form">
|
<div class="search-form">
|
||||||
<el-form-item label="订单编号">
|
<div class="form-item">
|
||||||
<el-input v-model="orderQuery.orderNo" placeholder="请输入订单编号" clearable style="width: 200px"></el-input>
|
<label>订单编号</label>
|
||||||
</el-form-item>
|
<input type="text" placeholder="请输入订单编号" style="width: 200px">
|
||||||
<el-form-item label="分销商">
|
</div>
|
||||||
<el-input v-model="orderQuery.distributorName" placeholder="请输入分销商姓名" clearable style="width: 150px"></el-input>
|
<div class="form-item">
|
||||||
</el-form-item>
|
<label>分销商</label>
|
||||||
<el-form-item label="订单状态">
|
<input type="text" placeholder="请输入分销商姓名" style="width: 150px">
|
||||||
<el-select v-model="orderQuery.status" placeholder="请选择订单状态" clearable style="width: 120px">
|
</div>
|
||||||
<el-option label="未完成" :value="0"></el-option>
|
<div class="form-item">
|
||||||
<el-option label="已完成" :value="1"></el-option>
|
<label>订单状态</label>
|
||||||
</el-select>
|
<select style="width: 120px">
|
||||||
</el-form-item>
|
<option value="">全部</option>
|
||||||
<el-form-item>
|
<option value="0">未完成</option>
|
||||||
<el-button type="primary" @click="handleOrderSearch">查询</el-button>
|
<option value="1">已完成</option>
|
||||||
<el-button @click="handleOrderReset">重置</el-button>
|
</select>
|
||||||
<el-button type="success" @click="exportOrders">导出订单</el-button>
|
</div>
|
||||||
</el-form-item>
|
<div class="form-item">
|
||||||
</el-form>
|
<button class="btn btn-primary">查询</button>
|
||||||
|
<button class="btn btn-default">重置</button>
|
||||||
|
<button class="btn btn-success">导出订单</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 订单列表表格 -->
|
<!-- 订单列表表格 -->
|
||||||
<el-table
|
<table>
|
||||||
:data="filteredOrderList"
|
<thead>
|
||||||
border
|
<tr>
|
||||||
style="width: 100%"
|
<th>订单编号</th>
|
||||||
:header-cell-style="{ background: '#F5F7FA', color: '#606266' }">
|
<th>市场订单号</th>
|
||||||
<el-table-column prop="orderNo" label="订单编号" align="center" width="180"></el-table-column>
|
<th>分销商</th>
|
||||||
<el-table-column prop="unitOrderNo" label="市场订单号" align="center" width="180"></el-table-column>
|
<th>订单金额(元)</th>
|
||||||
<el-table-column prop="distributorName" label="分销商" align="center" width="120"></el-table-column>
|
<th>分佣比例</th>
|
||||||
<el-table-column prop="totalMoney" label="订单金额(元)" align="center" width="120">
|
<th>总佣金(元)</th>
|
||||||
<template slot-scope="scope">
|
<th>分销商佣金(元)</th>
|
||||||
<span class="money-text">{{ scope.row.totalMoney }}</span>
|
<th>上级佣金(元)</th>
|
||||||
</template>
|
<th>订单状态</th>
|
||||||
</el-table-column>
|
<th>下单时间</th>
|
||||||
<el-table-column prop="orderSharingRatio" label="分佣比例" align="center" width="100">
|
<th>操作</th>
|
||||||
<template slot-scope="scope">
|
</tr>
|
||||||
<span>{{ scope.row.orderSharingRatio }}%</span>
|
</thead>
|
||||||
</template>
|
<tbody>
|
||||||
</el-table-column>
|
<tr>
|
||||||
<el-table-column prop="totalCommission" label="总佣金(元)" align="center" width="120">
|
<td>ORD20240101001</td>
|
||||||
<template slot-scope="scope">
|
<td>UNIT20240101001</td>
|
||||||
<span class="commission-text">{{ scope.row.totalCommission }}</span>
|
<td>张三</td>
|
||||||
</template>
|
<td><span class="money-text">299.00</span></td>
|
||||||
</el-table-column>
|
<td>10%</td>
|
||||||
<el-table-column prop="myCommission" label="分销商佣金(元)" align="center" width="140">
|
<td><span class="commission-text">29.90</span></td>
|
||||||
<template slot-scope="scope">
|
<td><span class="commission-text">20.93</span></td>
|
||||||
<span class="commission-text">{{ scope.row.myCommission }}</span>
|
<td><span class="commission-text">8.97</span></td>
|
||||||
</template>
|
<td><span class="tag tag-success">已完成</span></td>
|
||||||
</el-table-column>
|
<td>2024-01-01 10:30:00</td>
|
||||||
<el-table-column prop="superiorCommission" label="上级佣金(元)" align="center" width="130">
|
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
||||||
<template slot-scope="scope">
|
</tr>
|
||||||
<span class="commission-text">{{ scope.row.superiorCommission }}</span>
|
<tr>
|
||||||
</template>
|
<td>ORD20240102002</td>
|
||||||
</el-table-column>
|
<td>UNIT20240102002</td>
|
||||||
<el-table-column prop="status" label="订单状态" align="center" width="100">
|
<td>李四</td>
|
||||||
<template slot-scope="scope">
|
<td><span class="money-text">499.00</span></td>
|
||||||
<el-tag :type="scope.row.status === 1 ? 'success' : 'warning'">
|
<td>10%</td>
|
||||||
{{ scope.row.status === 1 ? '已完成' : '未完成' }}
|
<td><span class="commission-text">49.90</span></td>
|
||||||
</el-tag>
|
<td><span class="commission-text">49.90</span></td>
|
||||||
</template>
|
<td><span class="commission-text">0.00</span></td>
|
||||||
</el-table-column>
|
<td><span class="tag tag-warning">未完成</span></td>
|
||||||
<el-table-column prop="createTime" label="下单时间" align="center" width="180"></el-table-column>
|
<td>2024-01-02 14:20:00</td>
|
||||||
<el-table-column label="操作" align="center" width="120" fixed="right">
|
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
||||||
<template slot-scope="scope">
|
</tr>
|
||||||
<el-button size="mini" type="primary" @click="viewOrderDetail(scope.row)">详情</el-button>
|
<tr>
|
||||||
</template>
|
<td>ORD20240103003</td>
|
||||||
</el-table-column>
|
<td>UNIT20240103003</td>
|
||||||
</el-table>
|
<td>王五</td>
|
||||||
|
<td><span class="money-text">688.00</span></td>
|
||||||
|
<td>10%</td>
|
||||||
|
<td><span class="commission-text">68.80</span></td>
|
||||||
|
<td><span class="commission-text">48.16</span></td>
|
||||||
|
<td><span class="commission-text">20.64</span></td>
|
||||||
|
<td><span class="tag tag-success">已完成</span></td>
|
||||||
|
<td>2024-01-03 09:15:00</td>
|
||||||
|
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>ORD20240104004</td>
|
||||||
|
<td>UNIT20240104004</td>
|
||||||
|
<td>张三</td>
|
||||||
|
<td><span class="money-text">358.00</span></td>
|
||||||
|
<td>10%</td>
|
||||||
|
<td><span class="commission-text">35.80</span></td>
|
||||||
|
<td><span class="commission-text">25.06</span></td>
|
||||||
|
<td><span class="commission-text">10.74</span></td>
|
||||||
|
<td><span class="tag tag-success">已完成</span></td>
|
||||||
|
<td>2024-01-04 16:45:00</td>
|
||||||
|
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>ORD20240105005</td>
|
||||||
|
<td>UNIT20240105005</td>
|
||||||
|
<td>王五</td>
|
||||||
|
<td><span class="money-text">799.00</span></td>
|
||||||
|
<td>10%</td>
|
||||||
|
<td><span class="commission-text">79.90</span></td>
|
||||||
|
<td><span class="commission-text">55.93</span></td>
|
||||||
|
<td><span class="commission-text">23.97</span></td>
|
||||||
|
<td><span class="tag tag-success">已完成</span></td>
|
||||||
|
<td>2024-01-05 11:20:00</td>
|
||||||
|
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>ORD20240106006</td>
|
||||||
|
<td>UNIT20240106006</td>
|
||||||
|
<td>李四</td>
|
||||||
|
<td><span class="money-text">428.00</span></td>
|
||||||
|
<td>10%</td>
|
||||||
|
<td><span class="commission-text">42.80</span></td>
|
||||||
|
<td><span class="commission-text">42.80</span></td>
|
||||||
|
<td><span class="commission-text">0.00</span></td>
|
||||||
|
<td><span class="tag tag-warning">未完成</span></td>
|
||||||
|
<td>2024-01-06 13:50:00</td>
|
||||||
|
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>ORD20240107007</td>
|
||||||
|
<td>UNIT20240107007</td>
|
||||||
|
<td>赵六</td>
|
||||||
|
<td><span class="money-text">568.00</span></td>
|
||||||
|
<td>10%</td>
|
||||||
|
<td><span class="commission-text">56.80</span></td>
|
||||||
|
<td><span class="commission-text">56.80</span></td>
|
||||||
|
<td><span class="commission-text">0.00</span></td>
|
||||||
|
<td><span class="tag tag-success">已完成</span></td>
|
||||||
|
<td>2024-01-07 15:30:00</td>
|
||||||
|
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>ORD20240108008</td>
|
||||||
|
<td>UNIT20240108008</td>
|
||||||
|
<td>张三</td>
|
||||||
|
<td><span class="money-text">268.00</span></td>
|
||||||
|
<td>10%</td>
|
||||||
|
<td><span class="commission-text">26.80</span></td>
|
||||||
|
<td><span class="commission-text">18.76</span></td>
|
||||||
|
<td><span class="commission-text">8.04</span></td>
|
||||||
|
<td><span class="tag tag-success">已完成</span></td>
|
||||||
|
<td>2024-01-08 08:15:00</td>
|
||||||
|
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
<!-- 分页 -->
|
<!-- 分页 -->
|
||||||
<div style="text-align: right; margin-top: 20px;">
|
<div class="pagination">
|
||||||
<el-pagination
|
共 8 条
|
||||||
background
|
</div>
|
||||||
@current-change="handleOrderPageChange"
|
|
||||||
:current-page.sync="orderPage.current"
|
|
||||||
:page-size="orderPage.size"
|
|
||||||
layout="total, prev, pager, next"
|
|
||||||
:total="filteredOrderList.length">
|
|
||||||
</el-pagination>
|
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
|
||||||
|
|
||||||
<!-- 佣金统计Tab -->
|
<!-- 佣金统计Tab -->
|
||||||
<el-tab-pane label="佣金统计" name="commission">
|
<div id="tab-commission" class="tab-content">
|
||||||
<!-- 搜索表单 -->
|
<!-- 搜索表单 -->
|
||||||
<el-form :inline="true" :model="commissionQuery" size="small" class="search-form">
|
<div class="search-form">
|
||||||
<el-form-item label="分销商">
|
<div class="form-item">
|
||||||
<el-input v-model="commissionQuery.distributorName" placeholder="请输入分销商姓名" clearable style="width: 200px"></el-input>
|
<label>分销商</label>
|
||||||
</el-form-item>
|
<input type="text" placeholder="请输入分销商姓名" style="width: 200px">
|
||||||
<el-form-item label="等级">
|
</div>
|
||||||
<el-select v-model="commissionQuery.level" placeholder="请选择等级" clearable style="width: 150px">
|
<div class="form-item">
|
||||||
<el-option label="普通分销商" :value="1"></el-option>
|
<label>等级</label>
|
||||||
<el-option label="高级分销商" :value="2"></el-option>
|
<select style="width: 150px">
|
||||||
<el-option label="精英分销商" :value="3"></el-option>
|
<option value="">全部</option>
|
||||||
</el-select>
|
<option value="1">普通分销商</option>
|
||||||
</el-form-item>
|
<option value="2">高级分销商</option>
|
||||||
<el-form-item>
|
<option value="3">精英分销商</option>
|
||||||
<el-button type="primary" @click="handleCommissionSearch">查询</el-button>
|
</select>
|
||||||
<el-button @click="handleCommissionReset">重置</el-button>
|
</div>
|
||||||
<el-button type="success" @click="exportCommission">导出佣金</el-button>
|
<div class="form-item">
|
||||||
</el-form-item>
|
<button class="btn btn-primary">查询</button>
|
||||||
</el-form>
|
<button class="btn btn-default">重置</button>
|
||||||
|
<button class="btn btn-success">导出佣金</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 佣金统计列表 -->
|
<!-- 佣金统计列表 -->
|
||||||
<el-table
|
<table>
|
||||||
:data="filteredCommissionList"
|
<thead>
|
||||||
border
|
<tr>
|
||||||
show-summary
|
<th>分销商</th>
|
||||||
:summary-method="getSummaries"
|
<th>手机号</th>
|
||||||
style="width: 100%"
|
<th>等级</th>
|
||||||
:header-cell-style="{ background: '#F5F7FA', color: '#606266' }">
|
<th>订单数量</th>
|
||||||
<el-table-column prop="distributorName" label="分销商" align="center" width="120"></el-table-column>
|
<th>订单总额(元)</th>
|
||||||
<el-table-column prop="mobile" label="手机号" align="center" width="130"></el-table-column>
|
<th>总佣金(元)</th>
|
||||||
<el-table-column prop="level" label="等级" align="center" width="120">
|
<th>本人佣金(元)</th>
|
||||||
<template slot-scope="scope">
|
<th>上级佣金(元)</th>
|
||||||
<el-tag :type="getLevelType(scope.row.level)">
|
<th>佣金率</th>
|
||||||
{{ getLevelText(scope.row.level) }}
|
<th>操作</th>
|
||||||
</el-tag>
|
</tr>
|
||||||
</template>
|
</thead>
|
||||||
</el-table-column>
|
<tbody>
|
||||||
<el-table-column prop="orderCount" label="订单数量" align="center" width="100"></el-table-column>
|
<tr>
|
||||||
<el-table-column prop="orderTotalMoney" label="订单总额(元)" align="center" width="140">
|
<td>张三</td>
|
||||||
<template slot-scope="scope">
|
<td>13800138001</td>
|
||||||
<span class="money-text">{{ scope.row.orderTotalMoney }}</span>
|
<td><span class="tag tag-success">高级分销商</span></td>
|
||||||
</template>
|
<td>25</td>
|
||||||
</el-table-column>
|
<td><span class="money-text">7475.00</span></td>
|
||||||
<el-table-column prop="totalCommission" label="总佣金(元)" align="center" width="140">
|
<td><span class="commission-text">747.50</span></td>
|
||||||
<template slot-scope="scope">
|
<td><span class="commission-text">523.25</span></td>
|
||||||
<span class="commission-text">{{ scope.row.totalCommission }}</span>
|
<td><span class="commission-text">224.25</span></td>
|
||||||
</template>
|
<td>10%</td>
|
||||||
</el-table-column>
|
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
||||||
<el-table-column prop="myCommission" label="本人佣金(元)" align="center" width="140">
|
</tr>
|
||||||
<template slot-scope="scope">
|
<tr>
|
||||||
<span class="commission-text">{{ scope.row.myCommission }}</span>
|
<td>李四</td>
|
||||||
</template>
|
<td>13800138002</td>
|
||||||
</el-table-column>
|
<td><span class="tag tag-info">普通分销商</span></td>
|
||||||
<el-table-column prop="superiorCommission" label="上级佣金(元)" align="center" width="140">
|
<td>15</td>
|
||||||
<template slot-scope="scope">
|
<td><span class="money-text">4485.00</span></td>
|
||||||
<span class="commission-text">{{ scope.row.superiorCommission }}</span>
|
<td><span class="commission-text">448.50</span></td>
|
||||||
</template>
|
<td><span class="commission-text">448.50</span></td>
|
||||||
</el-table-column>
|
<td><span class="commission-text">0.00</span></td>
|
||||||
<el-table-column prop="commissionRate" label="佣金率" align="center" width="100">
|
<td>10%</td>
|
||||||
<template slot-scope="scope">
|
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
||||||
<span>{{ scope.row.commissionRate }}%</span>
|
</tr>
|
||||||
</template>
|
<tr>
|
||||||
</el-table-column>
|
<td>王五</td>
|
||||||
<el-table-column label="操作" align="center" width="120" fixed="right">
|
<td>13800138003</td>
|
||||||
<template slot-scope="scope">
|
<td><span class="tag tag-warning">精英分销商</span></td>
|
||||||
<el-button size="mini" type="primary" @click="viewCommissionDetail(scope.row)">详情</el-button>
|
<td>38</td>
|
||||||
</template>
|
<td><span class="money-text">11378.00</span></td>
|
||||||
</el-table-column>
|
<td><span class="commission-text">1137.80</span></td>
|
||||||
</el-table>
|
<td><span class="commission-text">796.46</span></td>
|
||||||
|
<td><span class="commission-text">341.34</span></td>
|
||||||
|
<td>10%</td>
|
||||||
|
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>赵六</td>
|
||||||
|
<td>13800138004</td>
|
||||||
|
<td><span class="tag tag-info">普通分销商</span></td>
|
||||||
|
<td>12</td>
|
||||||
|
<td><span class="money-text">3592.00</span></td>
|
||||||
|
<td><span class="commission-text">359.20</span></td>
|
||||||
|
<td><span class="commission-text">359.20</span></td>
|
||||||
|
<td><span class="commission-text">0.00</span></td>
|
||||||
|
<td>10%</td>
|
||||||
|
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>孙八</td>
|
||||||
|
<td>13800138006</td>
|
||||||
|
<td><span class="tag tag-success">高级分销商</span></td>
|
||||||
|
<td>28</td>
|
||||||
|
<td><span class="money-text">8384.00</span></td>
|
||||||
|
<td><span class="commission-text">838.40</span></td>
|
||||||
|
<td><span class="commission-text">586.88</span></td>
|
||||||
|
<td><span class="commission-text">251.52</span></td>
|
||||||
|
<td>10%</td>
|
||||||
|
<td><button class="btn btn-primary" style="margin: 0; padding: 5px 15px;">详情</button></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
|
<tr style="font-weight: bold; background: #F5F7FA;">
|
||||||
|
<td>合计</td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td>118</td>
|
||||||
|
<td><span class="money-text">35314.00</span></td>
|
||||||
|
<td><span class="commission-text">3531.40</span></td>
|
||||||
|
<td><span class="commission-text">2714.29</span></td>
|
||||||
|
<td><span class="commission-text">817.11</span></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
|
||||||
<!-- 分页 -->
|
<!-- 分页 -->
|
||||||
<div style="text-align: right; margin-top: 20px;">
|
<div class="pagination">
|
||||||
<el-pagination
|
共 5 条
|
||||||
background
|
</div>
|
||||||
@current-change="handleCommissionPageChange"
|
</div>
|
||||||
:current-page.sync="commissionPage.current"
|
|
||||||
:page-size="commissionPage.size"
|
|
||||||
layout="total, prev, pager, next"
|
|
||||||
:total="filteredCommissionList.length">
|
|
||||||
</el-pagination>
|
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 订单详情对话框 -->
|
|
||||||
<el-dialog title="订单详情" :visible.sync="orderDetailVisible" width="60%">
|
|
||||||
<el-descriptions :column="2" border v-if="orderDetail">
|
|
||||||
<el-descriptions-item label="订单编号">{{ orderDetail.orderNo }}</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="市场订单号">{{ orderDetail.unitOrderNo }}</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="分销商">{{ orderDetail.distributorName }}</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="用户ID">{{ orderDetail.userId }}</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="订单金额">
|
|
||||||
<span class="money-text">{{ orderDetail.totalMoney }} 元</span>
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="分佣比例">{{ orderDetail.orderSharingRatio }}%</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="总佣金">
|
|
||||||
<span class="commission-text">{{ orderDetail.totalCommission }} 元</span>
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="分销商佣金">
|
|
||||||
<span class="commission-text">{{ orderDetail.myCommission }} 元</span>
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="上级佣金">
|
|
||||||
<span class="commission-text">{{ orderDetail.superiorCommission }} 元</span>
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="分销商佣金比例">{{ orderDetail.mySharingPercent }}%</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="订单状态">
|
|
||||||
<el-tag :type="orderDetail.status === 1 ? 'success' : 'warning'">
|
|
||||||
{{ orderDetail.status === 1 ? '已完成' : '未完成' }}
|
|
||||||
</el-tag>
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="下单时间">{{ orderDetail.createTime }}</el-descriptions-item>
|
|
||||||
</el-descriptions>
|
|
||||||
|
|
||||||
<!-- 佣金计算说明 -->
|
|
||||||
<div class="detail-section">
|
|
||||||
<h4>💡 佣金计算逻辑</h4>
|
|
||||||
<el-alert type="info" :closable="false">
|
|
||||||
<div style="line-height: 1.8;">
|
|
||||||
<p><strong>总佣金</strong> = 订单金额 × 分佣比例 = {{ orderDetail.totalMoney }} × {{ orderDetail.orderSharingRatio }}% = <span class="commission-text">{{ orderDetail.totalCommission }} 元</span></p>
|
|
||||||
<p><strong>分销商佣金</strong> = 总佣金 × 分销商佣金比例 = {{ orderDetail.totalCommission }} × {{ orderDetail.mySharingPercent }}% = <span class="commission-text">{{ orderDetail.myCommission }} 元</span></p>
|
|
||||||
<p><strong>上级佣金</strong> = 总佣金 - 分销商佣金 = {{ orderDetail.totalCommission }} - {{ orderDetail.myCommission }} = <span class="commission-text">{{ orderDetail.superiorCommission }} 元</span></p>
|
|
||||||
</div>
|
|
||||||
</el-alert>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<span slot="footer" class="dialog-footer">
|
|
||||||
<el-button @click="orderDetailVisible = false">关 闭</el-button>
|
|
||||||
</span>
|
|
||||||
</el-dialog>
|
|
||||||
|
|
||||||
<!-- 佣金详情对话框 -->
|
|
||||||
<el-dialog title="佣金详情" :visible.sync="commissionDetailVisible" width="70%">
|
|
||||||
<el-descriptions :column="2" border v-if="commissionDetail">
|
|
||||||
<el-descriptions-item label="分销商">{{ commissionDetail.distributorName }}</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="手机号">{{ commissionDetail.mobile }}</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="等级">
|
|
||||||
<el-tag :type="getLevelType(commissionDetail.level)">
|
|
||||||
{{ getLevelText(commissionDetail.level) }}
|
|
||||||
</el-tag>
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="订单数量">{{ commissionDetail.orderCount }}</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="订单总额">
|
|
||||||
<span class="money-text">{{ commissionDetail.orderTotalMoney }} 元</span>
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="总佣金">
|
|
||||||
<span class="commission-text">{{ commissionDetail.totalCommission }} 元</span>
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="本人佣金">
|
|
||||||
<span class="commission-text">{{ commissionDetail.myCommission }} 元</span>
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="上级佣金">
|
|
||||||
<span class="commission-text">{{ commissionDetail.superiorCommission }} 元</span>
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="佣金率">{{ commissionDetail.commissionRate }}%</el-descriptions-item>
|
|
||||||
</el-descriptions>
|
|
||||||
|
|
||||||
<!-- 订单明细表格 -->
|
|
||||||
<div class="detail-section">
|
|
||||||
<h4>订单明细</h4>
|
|
||||||
<el-table :data="commissionDetailOrders" border style="width: 100%">
|
|
||||||
<el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
|
|
||||||
<el-table-column prop="orderNo" label="订单编号" align="center" width="180"></el-table-column>
|
|
||||||
<el-table-column prop="totalMoney" label="订单金额" align="center" width="120">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<span class="money-text">{{ scope.row.totalMoney }} 元</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column prop="totalCommission" label="总佣金" align="center" width="120">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<span class="commission-text">{{ scope.row.totalCommission }} 元</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column prop="myCommission" label="本人佣金" align="center" width="120">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<span class="commission-text">{{ scope.row.myCommission }} 元</span>
|
|
||||||
</template>
|
|
||||||
</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' : 'warning'">
|
|
||||||
{{ scope.row.status === 1 ? '已完成' : '未完成' }}
|
|
||||||
</el-tag>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column prop="createTime" label="下单时间" align="center"></el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<span slot="footer" class="dialog-footer">
|
|
||||||
<el-button @click="commissionDetailVisible = 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>
|
<script>
|
||||||
new Vue({
|
function switchTab(tabName) {
|
||||||
el: '#app',
|
// 移除所有active类
|
||||||
data() {
|
document.querySelectorAll('.tab-item').forEach(item => {
|
||||||
return {
|
item.classList.remove('active');
|
||||||
activeTab: 'order',
|
});
|
||||||
|
document.querySelectorAll('.tab-content').forEach(content => {
|
||||||
// 统计数据
|
content.classList.remove('active');
|
||||||
orderStats: {
|
|
||||||
totalCount: 1250,
|
|
||||||
totalMoney: 125680.50,
|
|
||||||
totalCommission: 12568.05,
|
|
||||||
commissionRate: 10
|
|
||||||
},
|
|
||||||
|
|
||||||
// 订单数据
|
|
||||||
orderQuery: {
|
|
||||||
orderNo: '',
|
|
||||||
distributorName: '',
|
|
||||||
status: null
|
|
||||||
},
|
|
||||||
orderList: [
|
|
||||||
{ id: 1, orderNo: 'ORD20240101001', unitOrderNo: 'UNIT20240101001', distributorName: '张三', userId: 1001, totalMoney: 299.00, orderSharingRatio: 10, totalCommission: 29.90, myCommission: 20.93, superiorCommission: 8.97, mySharingPercent: 70, status: 1, createTime: '2024-01-01 10:30:00' },
|
|
||||||
{ id: 2, orderNo: 'ORD20240102002', unitOrderNo: 'UNIT20240102002', distributorName: '李四', userId: 1002, totalMoney: 499.00, orderSharingRatio: 10, totalCommission: 49.90, myCommission: 49.90, superiorCommission: 0, mySharingPercent: 100, status: 0, createTime: '2024-01-02 14:20:00' },
|
|
||||||
{ id: 3, orderNo: 'ORD20240103003', unitOrderNo: 'UNIT20240103003', distributorName: '王五', userId: 1003, totalMoney: 688.00, orderSharingRatio: 10, totalCommission: 68.80, myCommission: 48.16, superiorCommission: 20.64, mySharingPercent: 70, status: 1, createTime: '2024-01-03 09:15:00' },
|
|
||||||
{ id: 4, orderNo: 'ORD20240104004', unitOrderNo: 'UNIT20240104004', distributorName: '张三', userId: 1004, totalMoney: 358.00, orderSharingRatio: 10, totalCommission: 35.80, myCommission: 25.06, superiorCommission: 10.74, mySharingPercent: 70, status: 1, createTime: '2024-01-04 16:45:00' },
|
|
||||||
{ id: 5, orderNo: 'ORD20240105005', unitOrderNo: 'UNIT20240105005', distributorName: '王五', userId: 1005, totalMoney: 799.00, orderSharingRatio: 10, totalCommission: 79.90, myCommission: 55.93, superiorCommission: 23.97, mySharingPercent: 70, status: 1, createTime: '2024-01-05 11:20:00' },
|
|
||||||
{ id: 6, orderNo: 'ORD20240106006', unitOrderNo: 'UNIT20240106006', distributorName: '李四', userId: 1006, totalMoney: 428.00, orderSharingRatio: 10, totalCommission: 42.80, myCommission: 42.80, superiorCommission: 0, mySharingPercent: 100, status: 0, createTime: '2024-01-06 13:50:00' },
|
|
||||||
{ id: 7, orderNo: 'ORD20240107007', unitOrderNo: 'UNIT20240107007', distributorName: '赵六', userId: 1007, totalMoney: 568.00, orderSharingRatio: 10, totalCommission: 56.80, myCommission: 56.80, superiorCommission: 0, mySharingPercent: 100, status: 1, createTime: '2024-01-07 15:30:00' },
|
|
||||||
{ id: 8, orderNo: 'ORD20240108008', unitOrderNo: 'UNIT20240108008', distributorName: '张三', userId: 1008, totalMoney: 268.00, orderSharingRatio: 10, totalCommission: 26.80, myCommission: 18.76, superiorCommission: 8.04, mySharingPercent: 70, status: 1, createTime: '2024-01-08 08:15:00' },
|
|
||||||
],
|
|
||||||
orderPage: { current: 1, size: 10 },
|
|
||||||
|
|
||||||
// 佣金统计数据
|
|
||||||
commissionQuery: {
|
|
||||||
distributorName: '',
|
|
||||||
level: null
|
|
||||||
},
|
|
||||||
commissionList: [
|
|
||||||
{ distributorId: 1, distributorName: '张三', mobile: '13800138001', level: 2, orderCount: 25, orderTotalMoney: 7475.00, totalCommission: 747.50, myCommission: 523.25, superiorCommission: 224.25, commissionRate: 10 },
|
|
||||||
{ distributorId: 2, distributorName: '李四', mobile: '13800138002', level: 1, orderCount: 15, orderTotalMoney: 4485.00, totalCommission: 448.50, myCommission: 448.50, superiorCommission: 0, commissionRate: 10 },
|
|
||||||
{ distributorId: 3, distributorName: '王五', mobile: '13800138003', level: 3, orderCount: 38, orderTotalMoney: 11378.00, totalCommission: 1137.80, myCommission: 796.46, superiorCommission: 341.34, commissionRate: 10 },
|
|
||||||
{ distributorId: 4, distributorName: '赵六', mobile: '13800138004', level: 1, orderCount: 12, orderTotalMoney: 3592.00, totalCommission: 359.20, myCommission: 359.20, superiorCommission: 0, commissionRate: 10 },
|
|
||||||
{ distributorId: 5, distributorName: '孙八', mobile: '13800138006', level: 2, orderCount: 28, orderTotalMoney: 8384.00, totalCommission: 838.40, myCommission: 586.88, superiorCommission: 251.52, commissionRate: 10 },
|
|
||||||
],
|
|
||||||
commissionPage: { current: 1, size: 10 },
|
|
||||||
commissionDetailOrders: [],
|
|
||||||
|
|
||||||
// 对话框
|
|
||||||
orderDetailVisible: false,
|
|
||||||
commissionDetailVisible: false,
|
|
||||||
orderDetail: null,
|
|
||||||
commissionDetail: null
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
filteredOrderList() {
|
|
||||||
let list = this.orderList;
|
|
||||||
if (this.orderQuery.orderNo) {
|
|
||||||
list = list.filter(item => item.orderNo.includes(this.orderQuery.orderNo));
|
|
||||||
}
|
|
||||||
if (this.orderQuery.distributorName) {
|
|
||||||
list = list.filter(item => item.distributorName.includes(this.orderQuery.distributorName));
|
|
||||||
}
|
|
||||||
if (this.orderQuery.status !== null && this.orderQuery.status !== '') {
|
|
||||||
list = list.filter(item => item.status === this.orderQuery.status);
|
|
||||||
}
|
|
||||||
return list;
|
|
||||||
},
|
|
||||||
filteredCommissionList() {
|
|
||||||
let list = this.commissionList;
|
|
||||||
if (this.commissionQuery.distributorName) {
|
|
||||||
list = list.filter(item => item.distributorName.includes(this.commissionQuery.distributorName));
|
|
||||||
}
|
|
||||||
if (this.commissionQuery.level !== null && this.commissionQuery.level !== '') {
|
|
||||||
list = list.filter(item => item.level === this.commissionQuery.level);
|
|
||||||
}
|
|
||||||
return list;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 订单相关方法
|
|
||||||
handleOrderSearch() {
|
|
||||||
this.$message.success('查询成功');
|
|
||||||
},
|
|
||||||
handleOrderReset() {
|
|
||||||
this.orderQuery = { orderNo: '', distributorName: '', status: null };
|
|
||||||
this.$message.info('已重置查询条件');
|
|
||||||
},
|
|
||||||
viewOrderDetail(row) {
|
|
||||||
this.orderDetail = row;
|
|
||||||
this.orderDetailVisible = true;
|
|
||||||
},
|
|
||||||
exportOrders() {
|
|
||||||
this.$message.success('订单数据导出成功!');
|
|
||||||
},
|
|
||||||
handleOrderPageChange(page) {
|
|
||||||
console.log('订单页码变化:', page);
|
|
||||||
},
|
|
||||||
|
|
||||||
// 佣金相关方法
|
|
||||||
handleCommissionSearch() {
|
|
||||||
this.$message.success('查询成功');
|
|
||||||
},
|
|
||||||
handleCommissionReset() {
|
|
||||||
this.commissionQuery = { distributorName: '', level: null };
|
|
||||||
this.$message.info('已重置查询条件');
|
|
||||||
},
|
|
||||||
viewCommissionDetail(row) {
|
|
||||||
this.commissionDetail = row;
|
|
||||||
// 获取该分销商的订单明细
|
|
||||||
this.commissionDetailOrders = this.orderList.filter(
|
|
||||||
order => order.distributorName === row.distributorName
|
|
||||||
);
|
|
||||||
this.commissionDetailVisible = true;
|
|
||||||
},
|
|
||||||
exportCommission() {
|
|
||||||
this.$message.success('佣金数据导出成功!');
|
|
||||||
},
|
|
||||||
handleCommissionPageChange(page) {
|
|
||||||
console.log('佣金页码变化:', page);
|
|
||||||
},
|
|
||||||
|
|
||||||
// 合计计算
|
|
||||||
getSummaries(param) {
|
|
||||||
const { columns, data } = param;
|
|
||||||
const sums = [];
|
|
||||||
columns.forEach((column, index) => {
|
|
||||||
if (index === 0) {
|
|
||||||
sums[index] = '合计';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const values = data.map(item => Number(item[column.property]));
|
|
||||||
if (!values.every(value => isNaN(value))) {
|
|
||||||
if (['orderCount', 'orderTotalMoney', 'totalCommission', 'myCommission', 'superiorCommission'].includes(column.property)) {
|
|
||||||
sums[index] = values.reduce((prev, curr) => {
|
|
||||||
const value = Number(curr);
|
|
||||||
if (!isNaN(value)) {
|
|
||||||
return prev + curr;
|
|
||||||
} else {
|
|
||||||
return prev;
|
|
||||||
}
|
|
||||||
}, 0);
|
|
||||||
if (column.property !== 'orderCount') {
|
|
||||||
sums[index] = sums[index].toFixed(2);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
sums[index] = '';
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
sums[index] = '';
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
return sums;
|
|
||||||
},
|
|
||||||
|
|
||||||
// 工具方法
|
// 添加active类到当前tab
|
||||||
getLevelType(level) {
|
event.target.classList.add('active');
|
||||||
const map = { 1: 'info', 2: 'success', 3: 'warning' };
|
document.getElementById('tab-' + tabName).classList.add('active');
|
||||||
return map[level] || 'info';
|
|
||||||
},
|
|
||||||
getLevelText(level) {
|
|
||||||
const map = { 1: '普通分销商', 2: '高级分销商', 3: '精英分销商' };
|
|
||||||
return map[level] || '未知';
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.$message({
|
|
||||||
message: '欢迎使用分销订单与佣金管理系统!',
|
|
||||||
type: 'success'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue