652 lines
34 KiB
HTML
652 lines
34 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: 1600px;
|
||
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;
|
||
}
|
||
|
||
.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.warning { color: #E6A23C; }
|
||
.stat-icon.info { color: #909399; }
|
||
|
||
.stat-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 14px;
|
||
color: #909399;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 32px;
|
||
font-weight: bold;
|
||
color: #303133;
|
||
}
|
||
|
||
.main-card {
|
||
background: white;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.search-form {
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.money-text {
|
||
color: #E6A23C;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.commission-text {
|
||
color: #67C23A;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.detail-section {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.detail-section h4 {
|
||
margin-bottom: 10px;
|
||
color: #303133;
|
||
}
|
||
|
||
@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="stat-cards">
|
||
<div class="stat-card">
|
||
<div class="stat-content">
|
||
<i class="el-icon-s-order stat-icon primary"></i>
|
||
<div class="stat-info">
|
||
<div class="stat-label">分销订单总数</div>
|
||
<div class="stat-value">{{ orderStats.totalCount }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-content">
|
||
<i class="el-icon-s-goods stat-icon success"></i>
|
||
<div class="stat-info">
|
||
<div class="stat-label">订单总金额(元)</div>
|
||
<div class="stat-value">{{ orderStats.totalMoney }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-content">
|
||
<i class="el-icon-wallet stat-icon warning"></i>
|
||
<div class="stat-info">
|
||
<div class="stat-label">佣金总额(元)</div>
|
||
<div class="stat-value">{{ orderStats.totalCommission }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-content">
|
||
<i class="el-icon-pie-chart stat-icon info"></i>
|
||
<div class="stat-info">
|
||
<div class="stat-label">佣金比例</div>
|
||
<div class="stat-value">{{ orderStats.commissionRate }}%</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 主内容 -->
|
||
<div class="main-card">
|
||
<el-tabs v-model="activeTab">
|
||
<!-- 订单明细Tab -->
|
||
<el-tab-pane label="订单明细" name="order">
|
||
<!-- 搜索表单 -->
|
||
<el-form :inline="true" :model="orderQuery" size="small" class="search-form">
|
||
<el-form-item label="订单编号">
|
||
<el-input v-model="orderQuery.orderNo" placeholder="请输入订单编号" clearable style="width: 200px"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="分销商">
|
||
<el-input v-model="orderQuery.distributorName" placeholder="请输入分销商姓名" clearable style="width: 150px"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="订单状态">
|
||
<el-select v-model="orderQuery.status" placeholder="请选择订单状态" clearable style="width: 120px">
|
||
<el-option label="未完成" :value="0"></el-option>
|
||
<el-option label="已完成" :value="1"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="handleOrderSearch">查询</el-button>
|
||
<el-button @click="handleOrderReset">重置</el-button>
|
||
<el-button type="success" @click="exportOrders">导出订单</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<!-- 订单列表表格 -->
|
||
<el-table
|
||
:data="filteredOrderList"
|
||
border
|
||
style="width: 100%"
|
||
:header-cell-style="{ background: '#F5F7FA', color: '#606266' }">
|
||
<el-table-column prop="orderNo" label="订单编号" align="center" width="180"></el-table-column>
|
||
<el-table-column prop="unitOrderNo" label="市场订单号" align="center" width="180"></el-table-column>
|
||
<el-table-column prop="distributorName" label="分销商" align="center" width="120"></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="orderSharingRatio" label="分佣比例" align="center" width="100">
|
||
<template slot-scope="scope">
|
||
<span>{{ scope.row.orderSharingRatio }}%</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="140">
|
||
<template slot-scope="scope">
|
||
<span class="commission-text">{{ scope.row.myCommission }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="superiorCommission" label="上级佣金(元)" align="center" width="130">
|
||
<template slot-scope="scope">
|
||
<span class="commission-text">{{ scope.row.superiorCommission }}</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" width="180"></el-table-column>
|
||
<el-table-column label="操作" align="center" width="120" fixed="right">
|
||
<template slot-scope="scope">
|
||
<el-button size="mini" type="primary" @click="viewOrderDetail(scope.row)">详情</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<!-- 分页 -->
|
||
<div style="text-align: right; margin-top: 20px;">
|
||
<el-pagination
|
||
background
|
||
@current-change="handleOrderPageChange"
|
||
:current-page.sync="orderPage.current"
|
||
:page-size="orderPage.size"
|
||
layout="total, prev, pager, next"
|
||
:total="filteredOrderList.length">
|
||
</el-pagination>
|
||
</div>
|
||
</el-tab-pane>
|
||
|
||
<!-- 佣金统计Tab -->
|
||
<el-tab-pane label="佣金统计" name="commission">
|
||
<!-- 搜索表单 -->
|
||
<el-form :inline="true" :model="commissionQuery" size="small" class="search-form">
|
||
<el-form-item label="分销商">
|
||
<el-input v-model="commissionQuery.distributorName" placeholder="请输入分销商姓名" clearable style="width: 200px"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="等级">
|
||
<el-select v-model="commissionQuery.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="handleCommissionSearch">查询</el-button>
|
||
<el-button @click="handleCommissionReset">重置</el-button>
|
||
<el-button type="success" @click="exportCommission">导出佣金</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<!-- 佣金统计列表 -->
|
||
<el-table
|
||
:data="filteredCommissionList"
|
||
border
|
||
show-summary
|
||
:summary-method="getSummaries"
|
||
style="width: 100%"
|
||
:header-cell-style="{ background: '#F5F7FA', color: '#606266' }">
|
||
<el-table-column prop="distributorName" 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="orderCount" label="订单数量" align="center" width="100"></el-table-column>
|
||
<el-table-column prop="orderTotalMoney" label="订单总额(元)" align="center" width="140">
|
||
<template slot-scope="scope">
|
||
<span class="money-text">{{ scope.row.orderTotalMoney }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="totalCommission" label="总佣金(元)" align="center" width="140">
|
||
<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="140">
|
||
<template slot-scope="scope">
|
||
<span class="commission-text">{{ scope.row.myCommission }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="superiorCommission" label="上级佣金(元)" align="center" width="140">
|
||
<template slot-scope="scope">
|
||
<span class="commission-text">{{ scope.row.superiorCommission }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="commissionRate" label="佣金率" align="center" width="100">
|
||
<template slot-scope="scope">
|
||
<span>{{ scope.row.commissionRate }}%</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" align="center" width="120" fixed="right">
|
||
<template slot-scope="scope">
|
||
<el-button size="mini" type="primary" @click="viewCommissionDetail(scope.row)">详情</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<!-- 分页 -->
|
||
<div style="text-align: right; margin-top: 20px;">
|
||
<el-pagination
|
||
background
|
||
@current-change="handleCommissionPageChange"
|
||
:current-page.sync="commissionPage.current"
|
||
:page-size="commissionPage.size"
|
||
layout="total, prev, pager, next"
|
||
:total="filteredCommissionList.length">
|
||
</el-pagination>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</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>
|
||
new Vue({
|
||
el: '#app',
|
||
data() {
|
||
return {
|
||
activeTab: 'order',
|
||
|
||
// 统计数据
|
||
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;
|
||
},
|
||
|
||
// 工具方法
|
||
getLevelType(level) {
|
||
const map = { 1: 'info', 2: 'success', 3: 'warning' };
|
||
return map[level] || 'info';
|
||
},
|
||
getLevelText(level) {
|
||
const map = { 1: '普通分销商', 2: '高级分销商', 3: '精英分销商' };
|
||
return map[level] || '未知';
|
||
}
|
||
},
|
||
mounted() {
|
||
this.$message({
|
||
message: '欢迎使用分销订单与佣金管理系统!',
|
||
type: 'success'
|
||
});
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|