1224 行
76 KiB
HTML
1224 行
76 KiB
HTML
{include file="/shopro/common/script" /}
|
||
|
||
<script src="__CDN__/assets/addons/shopro/libs/echarts.min.js?v={$site.version|htmlentities}"></script>
|
||
|
||
<style>
|
||
.dashboard-index .dashboard-index-main {
|
||
--el-main-padding: 0;
|
||
}
|
||
|
||
.dashboard-index .el-scrollbar__wrap {
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.dashboard-index .el-scrollbar__bar.is-horizontal {
|
||
display: none;
|
||
}
|
||
|
||
.dashboard-index .card {
|
||
line-height: 1;
|
||
background: var(--sa-background-assist);
|
||
border-radius: 8px;
|
||
border: 1px solid var(--sa-space);
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||
padding: 14px 16px;
|
||
font-size: 12px;
|
||
color: var(--sa-font);
|
||
margin-bottom: 16px;
|
||
transition: all .2s;
|
||
}
|
||
|
||
.dashboard-index .card:hover {
|
||
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
/* 顶部财富卡片 */
|
||
.dashboard-index .wealth-kpi-card {
|
||
padding: 16px 18px;
|
||
}
|
||
|
||
.dashboard-index .wealth-kpi-card:hover {
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.dashboard-index .kpi-title {
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: var(--sa-subtitle);
|
||
}
|
||
|
||
.dashboard-index .kpi-main-num {
|
||
font-size: 26px;
|
||
font-weight: 700;
|
||
margin: 12px 0 8px 0;
|
||
line-height: 1.1;
|
||
}
|
||
|
||
.dashboard-index .kpi-main-num .currency {
|
||
font-size: 16px;
|
||
margin-right: 2px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.dashboard-index .kpi-main-num .unit {
|
||
font-size: 12px;
|
||
margin-left: 2px;
|
||
font-weight: 400;
|
||
color: var(--sa-subfont);
|
||
}
|
||
|
||
.dashboard-index .kpi-sub-row {
|
||
font-size: 12px;
|
||
color: var(--sa-subfont);
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.dashboard-index .kpi-footer {
|
||
padding-top: 10px;
|
||
border-top: 1px dashed var(--sa-space);
|
||
font-size: 12px;
|
||
color: var(--sa-subfont);
|
||
}
|
||
|
||
.dashboard-index .text-primary { color: #806af6 !important; }
|
||
.dashboard-index .text-warning { color: #fa8c16 !important; }
|
||
.dashboard-index .text-success { color: #52c41a !important; }
|
||
.dashboard-index .text-cyan { color: #13c2c2 !important; }
|
||
.dashboard-index .text-purple { color: #722ed1 !important; }
|
||
.dashboard-index .text-danger { color: #f5222d !important; }
|
||
.dashboard-index .text-dark { color: var(--sa-subtitle) !important; font-weight: 600; }
|
||
.dashboard-index .font-bold { font-weight: 600; }
|
||
.dashboard-index .cursor-pointer { cursor: pointer; }
|
||
|
||
/* 收益中心网络与角色身份矩阵卡片 */
|
||
.dashboard-index .network-card {
|
||
padding: 14px 16px;
|
||
min-height: 98px;
|
||
}
|
||
|
||
.dashboard-index .network-badge {
|
||
width: 26px;
|
||
height: 26px;
|
||
line-height: 26px;
|
||
text-align: center;
|
||
border-radius: 6px;
|
||
color: #fff;
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.dashboard-index .bg-primary { background: #806af6; }
|
||
.dashboard-index .bg-cyan { background: #13c2c2; }
|
||
.dashboard-index .bg-orange { background: #fa8c16; }
|
||
.dashboard-index .bg-purple { background: #722ed1; }
|
||
|
||
.dashboard-index .role-table-card {
|
||
padding: 16px 20px;
|
||
margin-top: 14px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.dashboard-index #userTotal,
|
||
.dashboard-index #agentTotal,
|
||
.dashboard-index #shareTotal {
|
||
width: 100%;
|
||
height: 60px;
|
||
}
|
||
|
||
/* 走势图面板 */
|
||
.dashboard-index .bar-card {
|
||
min-height: 388px;
|
||
}
|
||
|
||
.dashboard-index #chartContent {
|
||
width: 100%;
|
||
height: 310px;
|
||
}
|
||
|
||
.dashboard-index .tab-item {
|
||
height: 32px;
|
||
line-height: 32px;
|
||
margin-right: 20px;
|
||
font-size: 14px;
|
||
color: var(--sa-subfont);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.dashboard-index .tab-item:last-of-type {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.dashboard-index .tab-item.is-active {
|
||
color: var(--sa-subtitle);
|
||
font-weight: bold;
|
||
border-bottom: 2px solid #806af6;
|
||
}
|
||
|
||
/* 分成透视 */
|
||
.dashboard-index .split-panel {
|
||
min-height: 388px;
|
||
}
|
||
|
||
.dashboard-index #splitPieContent {
|
||
width: 100%;
|
||
height: 180px;
|
||
}
|
||
|
||
.dashboard-index .split-stat-item {
|
||
padding: 6px 0;
|
||
font-size: 12px;
|
||
border-bottom: 1px solid #f6f8fa;
|
||
}
|
||
|
||
.dashboard-index .split-stat-item:last-of-type {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.dashboard-index .split-color-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
display: inline-block;
|
||
margin-right: 6px;
|
||
}
|
||
|
||
/* 排行榜 */
|
||
.dashboard-index .partner-ranking-card,
|
||
.dashboard-index .goods-card,
|
||
.dashboard-index .hot-search-card {
|
||
min-height: 340px;
|
||
}
|
||
|
||
.dashboard-index .card-header-title {
|
||
line-height: 16px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: var(--sa-subtitle);
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.dashboard-index .rank-badge {
|
||
display: inline-block;
|
||
width: 20px;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
text-align: center;
|
||
border-radius: 50%;
|
||
font-size: 11px;
|
||
font-weight: bold;
|
||
background: #f0f2f5;
|
||
color: #909399;
|
||
}
|
||
|
||
.dashboard-index .rank-badge.top-1 { background: #fadb14; color: #fff; }
|
||
.dashboard-index .rank-badge.top-2 { background: #bfbfbf; color: #fff; }
|
||
.dashboard-index .rank-badge.top-3 { background: #d48806; color: #fff; }
|
||
|
||
.dashboard-index .todo-stat-card {
|
||
padding: 12px 14px;
|
||
border-radius: 6px;
|
||
background: #fafbfc;
|
||
border: 1px solid #ebedf0;
|
||
cursor: pointer;
|
||
transition: all .2s;
|
||
}
|
||
|
||
.dashboard-index .todo-stat-card:hover {
|
||
background: #f0f5ff;
|
||
border-color: #adc6ff;
|
||
}
|
||
|
||
.dashboard-index .daily-report-box {
|
||
padding: 12px 14px;
|
||
background: #fbfbfe;
|
||
border: 1px solid #e8eafc;
|
||
border-radius: 6px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.dashboard-index #rankingContent {
|
||
width: 192px;
|
||
height: 192px;
|
||
}
|
||
|
||
.dashboard-index .top {
|
||
width: 18px;
|
||
height: 20px;
|
||
}
|
||
|
||
/* CFO 财务中枢与资产负债卡片 */
|
||
.dashboard-index .finance-hub-card {
|
||
padding: 16px 18px;
|
||
min-height: 200px;
|
||
}
|
||
|
||
.dashboard-index .finance-sub-metric {
|
||
padding: 8px 12px;
|
||
background: #fbfbfc;
|
||
border: 1px solid #f0f2f5;
|
||
border-radius: 6px;
|
||
margin-bottom: 8px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* COO 运营全貌与雷达卡片 */
|
||
.dashboard-index .coo-panel-card {
|
||
padding: 16px 18px;
|
||
min-height: 280px;
|
||
}
|
||
|
||
.dashboard-index .funnel-stage {
|
||
flex: 1;
|
||
padding: 10px 8px;
|
||
background: #fafafa;
|
||
border-radius: 6px;
|
||
text-align: center;
|
||
margin-right: 6px;
|
||
position: relative;
|
||
}
|
||
|
||
.dashboard-index .funnel-stage:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.dashboard-index .radar-stat-pill {
|
||
padding: 8px 10px;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
transition: all .2s;
|
||
}
|
||
|
||
.dashboard-index .radar-stat-pill:hover {
|
||
opacity: 0.9;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.dashboard-index .health-score-dial {
|
||
text-align: center;
|
||
padding: 14px 10px;
|
||
background: linear-gradient(135deg, #f8faff 0%, #f0f5ff 100%);
|
||
border: 1px solid #d6e4ff;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.dashboard-index .health-score-val {
|
||
font-size: 34px;
|
||
font-weight: 800;
|
||
line-height: 1.1;
|
||
color: #1890ff;
|
||
}
|
||
|
||
.dashboard-index .warning-alert-row {
|
||
background: #fffbe6;
|
||
border: 1px solid #ffe58f;
|
||
padding: 8px 12px;
|
||
border-radius: 6px;
|
||
font-size: 12px;
|
||
color: #d46b08;
|
||
}
|
||
|
||
.dashboard-index .low-stock-tag {
|
||
display: inline-block;
|
||
padding: 2px 6px;
|
||
border-radius: 3px;
|
||
background: #fff1f0;
|
||
color: #cf1322;
|
||
border: 1px solid #ffa39e;
|
||
font-weight: bold;
|
||
}
|
||
</style>
|
||
|
||
<div id="index" class="dashboard-index panel panel-default panel-intro" v-cloak>
|
||
<el-container class="panel-block">
|
||
<el-main class="dashboard-index-main">
|
||
<el-scrollbar height="100%">
|
||
{if $auth->check('shopro/dashboard/total')}
|
||
<!-- ================= 1. 全局财富大盘与资金安全核心 KPI ================= -->
|
||
<el-row :gutter="16">
|
||
<!-- 商城实收营业额 GMV -->
|
||
<el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
|
||
<div class="wealth-kpi-card card">
|
||
<div class="sa-flex sa-row-between">
|
||
<span class="kpi-title">商城实收营业额 (GMV)</span>
|
||
<el-tag size="small" type="primary" effect="plain">实付到账</el-tag>
|
||
</div>
|
||
<div class="kpi-main-num text-primary">
|
||
<span class="currency">¥</span>{{ state.wealth.total_gmv }}
|
||
</div>
|
||
<div class="kpi-sub-row sa-flex sa-row-between">
|
||
<span>今日实付：<strong class="text-dark">¥{{ state.wealth.today_gmv }}</strong></span>
|
||
<span>净收款 (扣退款)：<strong class="text-success">¥{{ state.wealth.net_gmv }}</strong></span>
|
||
</div>
|
||
<div class="kpi-footer sa-flex sa-row-between">
|
||
<span>累计支付：<strong>{{ state.wealth.paid_order_count }} 单</strong></span>
|
||
<span>累计退款：<strong class="text-dark">¥{{ state.wealth.total_refund_amount }}</strong></span>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
|
||
<!-- 现金分成支出与分发占比 -->
|
||
<el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
|
||
<div class="wealth-kpi-card card">
|
||
<div class="sa-flex sa-row-between">
|
||
<span class="kpi-title">分成奖励支出与占比</span>
|
||
<el-tooltip content="分成支出占商城净收款(扣退款后)的百分比，评估平台分发模型健康度" placement="top">
|
||
<el-tag size="small" :type="parseFloat(state.wealth.payout_rate) <= 35 ? 'success' : (parseFloat(state.wealth.payout_rate) <= 50 ? 'warning' : 'danger')" effect="plain">
|
||
支出占比 {{ state.wealth.payout_rate }}%
|
||
</el-tag>
|
||
</el-tooltip>
|
||
</div>
|
||
<div class="kpi-main-num text-warning">
|
||
<span class="currency">¥</span>{{ state.wealth.total_payout }}
|
||
</div>
|
||
<div class="kpi-sub-row sa-flex sa-row-between">
|
||
<span>平台收益结余：<strong class="text-success">¥{{ state.wealth.net_retention }}</strong></span>
|
||
<span class="cursor-pointer text-primary" @click="onOpenReward('')">明细 →</span>
|
||
</div>
|
||
<div class="kpi-footer sa-flex sa-row-between">
|
||
<span>今日分成支出</span>
|
||
<span class="font-bold text-warning">¥{{ state.wealth.today_payout }}</span>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
|
||
<!-- dmepa积分池 -->
|
||
<el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
|
||
<div class="wealth-kpi-card card">
|
||
<div class="sa-flex sa-row-between">
|
||
<span class="kpi-title">dmepa积分总池</span>
|
||
<el-tooltip content="基于每日订单利润按规则均分释放，用于商城生态赋能，非现金回购" placement="top">
|
||
<el-tag size="small" type="success" effect="plain">日结均分</el-tag>
|
||
</el-tooltip>
|
||
</div>
|
||
<div class="kpi-main-num text-purple">
|
||
{{ state.madow.total_madow }} <span class="unit">dmepa</span>
|
||
</div>
|
||
<div class="kpi-sub-row sa-flex sa-row-between">
|
||
<span>单价：<strong>{{ state.madow.current_rate }}</strong></span>
|
||
<span>每万dmepa价值：<strong class="text-purple">¥{{ state.madow.rate_per_wan }}</strong></span>
|
||
</div>
|
||
<div class="kpi-footer sa-flex sa-row-between">
|
||
<span>累计结算订单数：<strong>{{ state.madow.history_order_n }} 单</strong></span>
|
||
<span class="cursor-pointer text-primary" @click="onOpenDaily">日结池 →</span>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
|
||
<!-- 购物兑换券补贴池 -->
|
||
<el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
|
||
<div class="wealth-kpi-card card">
|
||
<div class="sa-flex sa-row-between">
|
||
<span class="kpi-title">购物兑换券补贴池</span>
|
||
<el-tooltip content="1.5倍购物抵扣补贴券，仅限商城消费抵扣使用，非现金兑付" placement="top">
|
||
<el-tag size="small" type="info" effect="plain">1.5倍补贴</el-tag>
|
||
</el-tooltip>
|
||
</div>
|
||
<div class="kpi-main-num text-danger">
|
||
{{ state.voucher.total_voucher }} <span class="sa-m-l-4" style="font-size: 14px; font-weight: normal;">个</span>
|
||
</div>
|
||
<div class="kpi-sub-row sa-flex sa-row-between">
|
||
<span>已释放：<strong>{{ state.voucher.released_voucher }} 个</strong></span>
|
||
<span>待释放补贴券：<strong class="text-danger">{{ state.voucher.pending_voucher }} 个</strong></span>
|
||
</div>
|
||
<div class="kpi-footer sa-flex sa-row-between">
|
||
<span>已消费抵扣：<strong>{{ state.voucher.used_voucher }} 个</strong></span>
|
||
<span class="cursor-pointer text-primary" @click="onOpenVoucher">计划 →</span>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- ================= 1.1 平台资金全貌 · 商户号结余、提现打款与应兑备付金 ================= -->
|
||
<el-row :gutter="16">
|
||
<!-- 商户可用资金预估结余 -->
|
||
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
||
<div class="finance-hub-card card">
|
||
<div class="sa-flex sa-row-between mb-2">
|
||
<div class="sa-flex">
|
||
<span class="network-badge bg-primary mr-2" style="background: #1890ff;">资</span>
|
||
<span class="font-bold text-dark" style="font-size: 14px;">商户账户可用资金 (预估结余)</span>
|
||
</div>
|
||
<el-tag size="small" type="success" effect="light">商户资金结余</el-tag>
|
||
</div>
|
||
<div class="kpi-main-num text-primary" style="font-size: 24px; margin: 8px 0;">
|
||
<span class="currency">¥</span>{{ state.finance.real_net_cash_flow }}
|
||
</div>
|
||
<div class="finance-sub-metric sa-flex sa-row-between">
|
||
<span>会员未提现收益 (随时可申请)：</span>
|
||
<strong class="text-warning">¥{{ state.finance.commission_float }}</strong>
|
||
</div>
|
||
<div class="finance-sub-metric sa-flex sa-row-between">
|
||
<span>会员账户钱包余额 (可消费/提现)：</span>
|
||
<strong class="text-dark">¥{{ state.finance.user_balance_float }}</strong>
|
||
</div>
|
||
<div class="sa-flex sa-row-between pt-2" style="font-size: 12px; color: var(--sa-subfont); border-top: 1px dashed var(--sa-space);">
|
||
<span>计算公式：实收总额 - 累计退款 - 已打款总额</span>
|
||
<span class="text-success font-bold">资金流动性充足</span>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
|
||
<!-- 提现打款与审核管理 -->
|
||
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
||
<div class="finance-hub-card card">
|
||
<div class="sa-flex sa-row-between mb-2">
|
||
<div class="sa-flex">
|
||
<span class="network-badge bg-warning mr-2" style="background: #fa8c16;">提</span>
|
||
<span class="font-bold text-dark" style="font-size: 14px;">提现打款与审核管理</span>
|
||
</div>
|
||
<span class="cursor-pointer text-primary" style="font-size: 12px;" @click="onOpenWithdraw('all')">提现流水 →</span>
|
||
</div>
|
||
<div class="kpi-main-num text-warning" style="font-size: 24px; margin: 8px 0;">
|
||
<span class="currency">¥</span>{{ state.finance.total_withdraw_paid }}
|
||
<span class="unit" style="font-size: 12px; font-weight: normal; color: var(--sa-subfont);">已成功打款</span>
|
||
</div>
|
||
<div class="finance-sub-metric sa-flex sa-row-between" :style="state.finance.pending_withdraw_count > 0 ? 'background: #fff2e8; border-color: #ffbb96;' : ''">
|
||
<span>待审核打款金额：</span>
|
||
<div class="sa-flex">
|
||
<strong :class="state.finance.pending_withdraw_count > 0 ? 'text-danger' : 'text-dark'">¥{{ state.finance.pending_withdraw_amount }}</strong>
|
||
<el-badge v-if="state.finance.pending_withdraw_count > 0" :value="state.finance.pending_withdraw_count + '笔'" class="ml-1" type="danger" />
|
||
<el-button v-if="state.finance.pending_withdraw_count > 0" type="danger" link size="mini" class="ml-1" @click="onOpenWithdraw(0)">审核</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="finance-sub-metric sa-flex sa-row-between">
|
||
<span>累计申请总额：¥{{ state.finance.total_withdraw_applied }}</span>
|
||
<span>提现打款处理率：<strong class="text-purple">{{ state.finance.withdraw_audit_rate }}%</strong></span>
|
||
</div>
|
||
<div class="sa-flex sa-row-between pt-2" style="font-size: 12px; color: var(--sa-subfont); border-top: 1px dashed var(--sa-space);">
|
||
<span>累计退款：¥{{ state.finance.total_refund_amount }} ({{ state.finance.total_refund_count }}笔)</span>
|
||
<span>退款率：<strong>{{ state.finance.refund_rate }}%</strong></span>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
|
||
<!-- dmepa价值与汇率核算 -->
|
||
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
||
<div class="finance-hub-card card">
|
||
<div class="sa-flex sa-row-between mb-2">
|
||
<div class="sa-flex">
|
||
<span class="network-badge mr-2" style="background: #722ed1;">dmepa</span>
|
||
<span class="font-bold text-dark" style="font-size: 14px;">dmepa价值与汇率核算</span>
|
||
</div>
|
||
<el-tag size="small" type="success" effect="light">汇率动态增值</el-tag>
|
||
</div>
|
||
<div class="kpi-main-num text-purple" style="font-size: 24px; margin: 8px 0;">
|
||
<span class="currency">¥</span>{{ state.madow.total_madow_cny }}
|
||
<span class="unit" style="font-size: 12px; font-weight: normal; color: var(--sa-subfont);">当前折合总价值</span>
|
||
</div>
|
||
<div class="finance-sub-metric sa-flex sa-row-between">
|
||
<span>① 全网持仓总量：</span>
|
||
<strong class="text-purple">{{ state.madow.total_madow }} dmepa</strong>
|
||
</div>
|
||
<div class="finance-sub-metric sa-flex sa-row-between">
|
||
<span>② 当前汇率单价 (1 dmepa)：</span>
|
||
<div>
|
||
<strong class="text-dark">¥{{ state.madow.current_rate }}</strong>
|
||
<span style="font-size: 11px; color: var(--sa-subfont); margin-left: 4px;">(每万dmepa约 ¥{{ state.madow.rate_per_wan }})</span>
|
||
</div>
|
||
</div>
|
||
<div class="finance-sub-metric sa-flex sa-row-between">
|
||
<span>③ 汇率计算公式：</span>
|
||
<strong class="text-primary" style="font-size: 12px;">
|
||
<template v-if="(state.madow.step_orders || 1) > 1">
|
||
{{ state.madow.base_rate || '0.00000075' }} × ⌊{{ state.madow.history_order_n }}/{{ state.madow.step_orders }}⌋
|
||
</template>
|
||
<template v-else>
|
||
{{ state.madow.base_rate || '0.00000075' }} × {{ state.madow.history_order_n }} 单
|
||
</template>
|
||
</strong>
|
||
</div>
|
||
<div class="sa-flex sa-row-between pt-2" style="font-size: 12px; color: var(--sa-subfont); border-top: 1px dashed var(--sa-space);">
|
||
<span>算法：基础汇率 × 累计完成单数 N</span>
|
||
<span class="cursor-pointer text-primary" @click="onOpenDaily">日结池明细 →</span>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- ================= 2. 全角色会员资产与收益统计明细 ================= -->
|
||
<!-- 2.1 三大核心板块快速指标卡 -->
|
||
<el-row :gutter="16">
|
||
<!-- 品酒师基础会员 -->
|
||
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
||
<div class="network-card card">
|
||
<div class="sa-flex sa-row-between mb-2">
|
||
<div class="sa-flex">
|
||
<span class="network-badge bg-primary mr-2">{{ (state.partner.role_names?.taster || '品').substr(0, 1) }}</span>
|
||
<span class="font-bold text-dark" style="font-size: 14px;">{{ state.partner.role_names?.taster || '品酒师' }}会员</span>
|
||
</div>
|
||
<span class="text-primary font-bold cursor-pointer" style="font-size: 18px;" @click="onOpenAgent(1)">
|
||
{{ state.partner.taster_count }} <span style="font-size: 12px; color: var(--sa-subfont);">人</span>
|
||
</span>
|
||
</div>
|
||
<div class="sa-flex sa-row-between text-muted" style="font-size: 12px;">
|
||
<span>持仓：<strong class="text-purple">{{ state.partner.role_stats?.taster?.madow_total || '0.00000000' }}</strong> dmepa</span>
|
||
<span>收益：<strong class="text-warning">¥{{ state.partner.role_stats?.taster?.reward_amount || '0.00' }}</strong> ({{ state.partner.role_stats?.taster?.reward_count || 0 }}笔)</span>
|
||
</div>
|
||
<div class="sa-flex sa-row-between text-muted" style="font-size: 12px; margin-top: 6px;">
|
||
<span>30天活跃率：<strong class="text-success">{{ state.partner.role_stats?.taster?.active_rate || 0 }}%</strong> ({{ state.partner.role_stats?.taster?.active_count || 0 }}人)</span>
|
||
<span>dmepa折合：<strong class="text-purple">¥{{ state.partner.role_stats?.taster?.madow_cny || '0.00' }}</strong></span>
|
||
</div>
|
||
<el-progress :percentage="state.partner.role_stats?.taster?.active_rate || 0" :stroke-width="5" :show-text="false" color="#52c41a" style="margin-top: 8px;"></el-progress>
|
||
</div>
|
||
</el-col>
|
||
|
||
<!-- 创客骨干梯队 -->
|
||
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
||
<div class="network-card card">
|
||
<div class="sa-flex sa-row-between mb-2">
|
||
<div class="sa-flex">
|
||
<span class="network-badge bg-cyan mr-2">{{ (state.partner.role_names?.maker || '创').substr(0, 1) }}</span>
|
||
<span class="font-bold text-dark" style="font-size: 14px;">{{ state.partner.role_names?.maker || '创客' }}骨干梯队 (V1~V6)</span>
|
||
</div>
|
||
<span class="text-cyan font-bold cursor-pointer" style="font-size: 18px;" @click="onOpenAgent('')">
|
||
{{ state.partner.maker_count }} <span style="font-size: 12px; color: var(--sa-subfont);">人</span>
|
||
</span>
|
||
</div>
|
||
<div class="sa-flex sa-row-between text-muted" style="font-size: 12px;">
|
||
<span>持仓：<strong class="text-purple">{{ state.partner.role_stats?.maker_total?.madow_total || '0.00000000' }}</strong> dmepa</span>
|
||
<span>收益：<strong class="text-warning">¥{{ state.partner.role_stats?.maker_total?.reward_amount || '0.00' }}</strong> ({{ state.partner.role_stats?.maker_total?.reward_count || 0 }}笔)</span>
|
||
</div>
|
||
<div class="sa-flex sa-row-between text-muted" style="font-size: 12px; margin-top: 6px;">
|
||
<span>dmepa折合：<strong class="text-purple">¥{{ state.partner.role_stats?.maker_total?.madow_cny || '0.00' }}</strong></span>
|
||
<span>活跃率：<strong class="text-success">{{ state.partner.role_stats?.maker_total?.active_rate || 0 }}%</strong> ({{ state.partner.role_stats?.maker_total?.active_count || 0 }}人)</span>
|
||
</div>
|
||
<div class="sa-flex sa-flex-wrap" style="margin-top: 6px;">
|
||
<el-tag size="small" class="mr-1 mb-1" effect="light" type="info" v-for="(cnt, lv) in state.partner.maker_levels" :key="lv">
|
||
{{ lv }}: {{ cnt }}人
|
||
</el-tag>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
|
||
<!-- 实体与区域渠道 -->
|
||
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
||
<div class="network-card card">
|
||
<div class="sa-flex sa-row-between mb-2">
|
||
<div class="sa-flex">
|
||
<span class="network-badge bg-orange mr-2">渠</span>
|
||
<span class="font-bold text-dark" style="font-size: 14px;">实体与区域渠道</span>
|
||
</div>
|
||
<div class="sa-flex">
|
||
<span class="text-orange font-bold mr-2" style="font-size: 14px;">{{ (state.partner.role_names?.venue || '馆').substr(0, 1) }} {{ state.partner.venue_count }} 家</span>
|
||
<span class="text-purple font-bold" style="font-size: 14px;">{{ (state.partner.role_names?.county || '县').substr(0, 1) }} {{ state.partner.county_count }} 个</span>
|
||
</div>
|
||
</div>
|
||
<div class="sa-flex sa-row-between text-muted" style="font-size: 12px;">
|
||
<span>{{ state.partner.role_names?.venue || '酒道馆' }}：持仓 <strong class="text-purple">{{ state.partner.role_stats?.venue?.madow_total || '0.00' }}</strong> / 收益 <strong class="text-warning">¥{{ state.partner.role_stats?.venue?.reward_amount || '0.00' }}</strong></span>
|
||
</div>
|
||
<div class="sa-flex sa-row-between text-muted" style="font-size: 12px; margin-top: 6px;">
|
||
<span>{{ state.partner.role_names?.county || '区县代理' }}：持仓 <strong class="text-purple">{{ state.partner.role_stats?.county?.madow_total || '0.00' }}</strong> / 收益 <strong class="text-warning">¥{{ state.partner.role_stats?.county?.reward_amount || '0.00' }}</strong></span>
|
||
</div>
|
||
<div class="sa-flex sa-row-between text-muted" style="font-size: 12px; margin-top: 6px;">
|
||
<span>享团队级差分润 + 平台日结均分池</span>
|
||
<span class="cursor-pointer text-primary" @click="onOpenAgent('')">渠道档案 →</span>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 2.2 全角色会员资产与收益明细大表 -->
|
||
<el-row :gutter="16">
|
||
<el-col :span="24">
|
||
<div class="role-table-card card">
|
||
<div class="sa-flex sa-row-between mb-3 sa-flex-wrap">
|
||
<div>
|
||
<span class="font-bold text-dark" style="font-size: 15px;">全角色会员资产与收益分布明细表</span>
|
||
<span style="font-size: 12px; color: var(--sa-subfont); margin-left: 12px;">
|
||
清晰统计各角色会员的人数、持仓总量、折合价值、专属业务收益与发放笔数
|
||
</span>
|
||
</div>
|
||
<div class="sa-flex" style="margin-top: 4px;">
|
||
<el-button size="small" type="primary" plain @click="onOpenAgent('')">成员档案 →</el-button>
|
||
<el-button size="small" type="success" plain @click="onOpenReward('')">全部收益流水 →</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<el-table class="sa-table" :data="state.partner.role_list" stripe border style="width: 100%;">
|
||
<el-table-column label="会员角色" min-width="170">
|
||
<template #default="scope">
|
||
<div class="sa-flex">
|
||
<el-tag size="small" :style="{ backgroundColor: scope.row.color, color: '#fff', borderColor: scope.row.color, marginRight: '8px', fontWeight: 'bold' }">
|
||
{{ scope.row.badge }}
|
||
</el-tag>
|
||
<span :class="scope.row.role_key.includes('total') ? 'font-bold text-dark' : 'text-dark'">
|
||
{{ scope.row.role_name }}
|
||
</span>
|
||
<el-tag size="mini" type="info" effect="plain" style="margin-left: 6px;">
|
||
{{ scope.row.category }}
|
||
</el-tag>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="人数/户数" width="120" align="center">
|
||
<template #default="scope">
|
||
<span class="font-bold text-dark" style="font-size: 15px;">{{ scope.row.user_count }}</span>
|
||
<span style="font-size: 12px; color: var(--sa-subfont); margin-left: 2px;">{{ scope.row.unit }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="持仓总量 (dmepa)" min-width="160" align="right">
|
||
<template #default="scope">
|
||
<span class="text-purple font-bold">{{ scope.row.madow_total }}</span>
|
||
<span style="font-size: 11px; color: var(--sa-subfont); margin-left: 2px;">dmepa</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="dmepa折合价值 (元)" min-width="150" align="right">
|
||
<template #default="scope">
|
||
<span class="font-bold text-purple">¥{{ scope.row.madow_cny }}</span>
|
||
<div v-if="scope.row.madow_cny === '0.00' && scope.row.madow_cny_raw > 0" style="font-size: 10px; color: #999;">
|
||
(精算值约 ¥{{ scope.row.madow_cny_raw }})
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="专属业务收益 (元)" min-width="150" align="right">
|
||
<template #header>
|
||
<span style="font-size: 13px;">专属业务收益 (元)</span>
|
||
<el-tooltip content="按各角色专属奖励类型归集（如创客级差/酒道馆/区县），杜绝一人兼多职时交叉重复计算" placement="top">
|
||
<i class="el-icon-info text-muted" style="margin-left: 2px; cursor: pointer;"></i>
|
||
</el-tooltip>
|
||
</template>
|
||
<template #default="scope">
|
||
<span class="font-bold text-warning" style="font-size: 14px;">¥{{ scope.row.reward_amount }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="发放笔数" width="100" align="center">
|
||
<template #default="scope">
|
||
<span class="font-bold">{{ scope.row.reward_count }}</span>
|
||
<span style="font-size: 11px; color: var(--sa-subfont);"> 笔</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="30天自购活跃考核" min-width="170">
|
||
<template #header>
|
||
<span style="font-size: 13px;">30天自购活跃考核</span>
|
||
<el-tooltip content="进阶角色（创客V1~V6、酒道馆、区县代理、合伙股东）需按月履行自购以维持分润资格；普通会员及品酒师属于基础会员，免自购考核" placement="top">
|
||
<i class="el-icon-info text-muted" style="margin-left: 2px; cursor: pointer;"></i>
|
||
</el-tooltip>
|
||
</template>
|
||
<template #default="scope">
|
||
<div v-if="scope.row.is_exempt_active" class="text-muted" style="font-size: 12px;">
|
||
<el-tag size="mini" type="info" effect="plain">{{ scope.row.active_text || '免自购考核 (基础会员)' }}</el-tag>
|
||
</div>
|
||
<div v-else>
|
||
<div class="sa-flex sa-row-between" style="font-size: 12px; margin-bottom: 3px;">
|
||
<span>{{ scope.row.active_count }} {{ scope.row.unit }} 达标</span>
|
||
<strong :class="scope.row.active_rate >= 60 ? 'text-success' : 'text-warning'">{{ scope.row.active_rate }}%</strong>
|
||
</div>
|
||
<el-progress :percentage="scope.row.active_rate" :stroke-width="4" :show-text="false" :color="scope.row.active_rate >= 60 ? '#52c41a' : '#fa8c16'"></el-progress>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="快捷操作" width="140" align="center">
|
||
<template #default="scope">
|
||
<el-button size="small" type="primary" link @click="onOpenRoleAgent(scope.row)">档案</el-button>
|
||
<el-button size="small" type="warning" link @click="onOpenRoleReward(scope.row)">收益</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- ================= 2.3 商城运营全貌 · 购买转化、进阶成员活跃与库存安全 ================= -->
|
||
<el-row :gutter="16">
|
||
<!-- 左侧：会员购买转化与复购分析 -->
|
||
<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
|
||
<div class="coo-panel-card card">
|
||
<div class="sa-flex sa-row-between mb-3">
|
||
<div>
|
||
<span class="font-bold text-dark" style="font-size: 14px;">会员购买转化与复购分析</span>
|
||
</div>
|
||
<span class="cursor-pointer text-primary" style="font-size: 12px;" @click="onOpenUser">会员中心 →</span>
|
||
</div>
|
||
|
||
<!-- 漏斗横向展示 -->
|
||
<div class="sa-flex sa-row-between mb-3" style="background: #f8faff; padding: 12px; border-radius: 8px; border: 1px solid #e6f7ff;">
|
||
<div class="funnel-stage">
|
||
<div style="color: var(--sa-subfont); font-size: 11px;">全网注册用户</div>
|
||
<div class="font-bold text-dark" style="font-size: 18px; margin: 4px 0;">{{ state.operation.total_registered }} <span style="font-size: 11px;">人</span></div>
|
||
<el-tag size="mini" type="info">基数 100%</el-tag>
|
||
</div>
|
||
<div style="color: #1890ff; font-weight: bold; font-size: 16px;">→</div>
|
||
<div class="funnel-stage">
|
||
<div style="color: var(--sa-subfont); font-size: 11px;">已付款买家</div>
|
||
<div class="font-bold text-primary" style="font-size: 18px; margin: 4px 0;">{{ state.operation.paid_users_count }} <span style="font-size: 11px;">人</span></div>
|
||
<el-tag size="mini" type="primary">转化 {{ state.operation.pay_conversion_rate }}%</el-tag>
|
||
</div>
|
||
<div style="color: #52c41a; font-weight: bold; font-size: 16px;">→</div>
|
||
<div class="funnel-stage">
|
||
<div style="color: var(--sa-subfont); font-size: 11px;">多次复购买家</div>
|
||
<div class="font-bold text-success" style="font-size: 18px; margin: 4px 0;">{{ state.operation.repeat_buy_users_count }} <span style="font-size: 11px;">人</span></div>
|
||
<el-tag size="mini" type="success">复购 {{ state.operation.repeat_purchase_rate }}%</el-tag>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="finance-sub-metric sa-flex sa-row-between">
|
||
<span>单次购买买家：<strong class="text-dark">{{ state.operation.single_buy_users_count }} 人</strong></span>
|
||
<span>复购买家：<strong class="text-success">{{ state.operation.repeat_buy_users_count }} 人</strong></span>
|
||
</div>
|
||
<div class="finance-sub-metric sa-flex sa-row-between">
|
||
<span>买家人均消费金额 (客单价)：</span>
|
||
<strong class="text-warning">¥{{ state.operation.arpu }}</strong>
|
||
</div>
|
||
<div class="sa-flex sa-row-between pt-2" style="font-size: 12px; color: var(--sa-subfont); border-top: 1px dashed var(--sa-space);">
|
||
<span>在架商品：<strong class="text-dark">{{ state.operation.on_sale_goods_count }} 款</strong></span>
|
||
<span>全仓总库存：<strong class="text-dark">{{ state.operation.total_stock }} 件</strong></span>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
|
||
<!-- 中间：进阶角色 30 天自购活跃与续期监控 -->
|
||
<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
|
||
<div class="coo-panel-card card">
|
||
<div class="sa-flex sa-row-between mb-3">
|
||
<div class="sa-flex">
|
||
<span class="font-bold text-dark" style="font-size: 14px;">进阶角色 30天自购活跃与续期监控</span>
|
||
<el-tooltip content="进阶角色（创客/酒道馆/区县/合伙股东）享有团队分润，需保持 30 天自购活跃；普通会员与品酒师属于基础会员，免于考核" placement="top">
|
||
<i class="el-icon-info text-muted" style="margin-left: 4px; cursor: pointer;"></i>
|
||
</el-tooltip>
|
||
</div>
|
||
<span class="cursor-pointer text-primary" style="font-size: 12px;" @click="onOpenAgent('')">成员档案 →</span>
|
||
</div>
|
||
|
||
<!-- 4状态指标标签 -->
|
||
<el-row :gutter="6" class="mb-3">
|
||
<el-col :span="6">
|
||
<div class="radar-stat-pill" style="background: #f6ffed; border: 1px solid #b7eb8f; text-align: center; padding: 6px 2px;">
|
||
<div style="font-size: 11px; color: #389e0d;">正常合格</div>
|
||
<div style="font-size: 16px; font-weight: bold; color: #52c41a; margin-top: 2px;">{{ state.operation.active_partners }}</div>
|
||
<div style="font-size: 10px; color: #8c8c8c;">>7天安全期</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<div class="radar-stat-pill" style="background: #fffbe6; border: 1px solid #ffe58f; text-align: center; padding: 6px 2px;">
|
||
<div style="font-size: 11px; color: #d46b08;">即将到期</div>
|
||
<div style="font-size: 16px; font-weight: bold; color: #fa8c16; margin-top: 2px;">{{ state.operation.warning_partners }}</div>
|
||
<div style="font-size: 10px; color: #fa8c16;">7天内需续购</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<div class="radar-stat-pill" style="background: #f0f5ff; border: 1px solid #adc6ff; text-align: center; padding: 6px 2px;">
|
||
<div style="font-size: 11px; color: #1d39c4;">已过期待续</div>
|
||
<div style="font-size: 16px; font-weight: bold; color: #2f54eb; margin-top: 2px;">{{ state.operation.pending_renew_partners }}</div>
|
||
<div style="font-size: 10px; color: #8c8c8c;">补购1单即恢复</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<div class="radar-stat-pill" style="background: #fafafa; border: 1px solid #d9d9d9; text-align: center; padding: 6px 2px;">
|
||
<div style="font-size: 11px; color: #595959;">新晋股东</div>
|
||
<div style="font-size: 16px; font-weight: bold; color: #595959; margin-top: 2px;">{{ state.operation.new_no_order_partners }}</div>
|
||
<div style="font-size: 10px; color: #8c8c8c;">待首购激活</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 7天临界断档名单列表（若有则提醒续期，若无则展示待续期列表） -->
|
||
<div v-if="state.operation.warning_partners > 0">
|
||
<div class="warning-alert-row mb-2 sa-flex sa-row-between">
|
||
<span>⚠️ <strong>到期提醒：</strong>以下进阶成员自购即将到期（7天内）</span>
|
||
<span style="font-weight: bold;">{{ state.operation.warning_partners }} 人临期</span>
|
||
</div>
|
||
<div style="max-height: 120px; overflow-y: auto;">
|
||
<div class="sa-flex sa-row-between mb-2 pb-1" v-for="wUser in state.operation.warning_list" :key="wUser.user_id" style="border-bottom: 1px dashed #f0f2f5; font-size: 12px;">
|
||
<div class="sa-flex">
|
||
<sa-image :url="wUser.avatar" size="20" style="border-radius: 50%;"></sa-image>
|
||
<div class="ml-1">
|
||
<span class="font-bold">{{ wUser.nickname }}</span>
|
||
<el-tag size="mini" type="info" class="ml-1">{{ wUser.level_text }}</el-tag>
|
||
</div>
|
||
</div>
|
||
<div class="sa-flex">
|
||
<el-tag size="mini" type="danger">剩余 {{ wUser.days_left }} 天</el-tag>
|
||
<el-button type="primary" link size="mini" class="ml-1" @click="onOpenAgent('')">提醒</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else>
|
||
<div class="sa-flex sa-row-between" style="background: #f6ffed; border: 1px solid #b7eb8f; padding: 8px 12px; border-radius: 6px; font-size: 12px; color: #389e0d; margin-bottom: 8px;">
|
||
<span>🛡️ 各进阶成员状态良好，暂无 7 天内即将到期人员</span>
|
||
<span>全部合格</span>
|
||
</div>
|
||
<div style="font-size: 11px; color: var(--sa-subfont); margin-bottom: 4px;">已超期成员 (自购 1 单即可恢复分润资格)：</div>
|
||
<div style="max-height: 100px; overflow-y: auto;">
|
||
<div class="sa-flex sa-row-between mb-1 pb-1" v-for="pUser in state.operation.pending_renew_list.slice(0, 3)" :key="pUser.user_id" style="border-bottom: 1px dashed #f0f2f5; font-size: 12px;">
|
||
<div class="sa-flex">
|
||
<span class="text-muted mr-1">#{{ pUser.user_id }}</span>
|
||
<span class="text-dark">{{ pUser.nickname }}</span>
|
||
<span class="text-muted ml-1" style="font-size: 11px;">({{ pUser.mobile }})</span>
|
||
</div>
|
||
<el-tag size="mini" type="info" effect="plain">{{ pUser.overdue_text }}</el-tag>
|
||
</div>
|
||
<div v-if="!state.operation.pending_renew_list || state.operation.pending_renew_list.length === 0" class="text-muted" style="font-size: 11px; text-align: center; padding: 8px 0;">
|
||
暂无已超期成员
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
|
||
<!-- 右侧：核心运营指标与商品库存监控 -->
|
||
<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
|
||
<div class="coo-panel-card card">
|
||
<div class="sa-flex sa-row-between mb-2">
|
||
<div>
|
||
<span class="font-bold text-dark" style="font-size: 14px;">核心运营指标与库存监控</span>
|
||
</div>
|
||
<el-tag size="small" type="success" effect="light">实时监控</el-tag>
|
||
</div>
|
||
|
||
<!-- 4大客观风控指标看板 -->
|
||
<div class="mb-3" style="background: #fafafa; border: 1px solid #f0f0f0; border-radius: 8px; padding: 10px 12px;">
|
||
<el-row :gutter="10">
|
||
<el-col :span="12" class="mb-2">
|
||
<div style="font-size: 11px; color: var(--sa-subfont);">分成支出占比</div>
|
||
<div class="sa-flex sa-row-between mt-1">
|
||
<strong class="text-dark" style="font-size: 14px;">{{ state.finance?.effective_payout_rate || state.wealth?.payout_rate || '0' }}%</strong>
|
||
<el-tag size="mini" :type="state.operation?.risk_indicators?.payout_rate?.status || 'success'">
|
||
{{ state.operation?.risk_indicators?.payout_rate?.text || '比例正常' }}
|
||
</el-tag>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12" class="mb-2">
|
||
<div style="font-size: 11px; color: var(--sa-subfont);">自购合格达标率</div>
|
||
<div class="sa-flex sa-row-between mt-1">
|
||
<strong class="text-dark" style="font-size: 14px;">{{ state.partner?.active_rate || 0 }}%</strong>
|
||
<el-tag size="mini" :type="state.operation?.risk_indicators?.partner_active_rate?.status || 'success'">
|
||
{{ state.operation?.risk_indicators?.partner_active_rate?.text || '正常' }}
|
||
</el-tag>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div style="font-size: 11px; color: var(--sa-subfont);">提现打款处理率</div>
|
||
<div class="sa-flex sa-row-between mt-1">
|
||
<strong class="text-dark" style="font-size: 14px;">{{ state.finance?.withdraw_audit_rate || 0 }}%</strong>
|
||
<el-tag size="mini" :type="state.operation?.risk_indicators?.withdraw_audit_rate?.status || 'success'">
|
||
{{ state.operation?.risk_indicators?.withdraw_audit_rate?.text || '正常' }}
|
||
</el-tag>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div style="font-size: 11px; color: var(--sa-subfont);">商城订单退款率</div>
|
||
<div class="sa-flex sa-row-between mt-1">
|
||
<strong class="text-dark" style="font-size: 14px;">{{ state.finance?.refund_rate || 0 }}%</strong>
|
||
<el-tag size="mini" :type="state.operation?.risk_indicators?.refund_rate?.status || 'success'">
|
||
{{ state.operation?.risk_indicators?.refund_rate?.text || '正常' }}
|
||
</el-tag>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
<!-- 经营建议/预警提示 -->
|
||
<div v-if="state.operation?.risk_suggestions && state.operation?.risk_suggestions.length > 0" class="mb-2" style="font-size: 11px; color: #595959; background: #fffbe6; border: 1px solid #ffe58f; padding: 6px 10px; border-radius: 6px; line-height: 1.6;">
|
||
<div v-for="(sug, sIdx) in state.operation.risk_suggestions.slice(0, 2)" :key="sIdx">
|
||
💡 {{ sug }}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 库存告急监测 -->
|
||
<div class="sa-flex sa-row-between mb-1" style="border-top: 1px dashed var(--sa-space); padding-top: 8px;">
|
||
<div class="sa-flex">
|
||
<span class="font-bold text-dark" style="font-size: 12px;">商品库存不足提醒 (≤10件)</span>
|
||
<el-badge :value="state.operation.low_stock_count" class="ml-2" :type="state.operation.low_stock_count > 0 ? 'danger' : 'info'" />
|
||
</div>
|
||
<span class="cursor-pointer text-primary" style="font-size: 11px;" @click="onOpenStockWarning">预警中心 →</span>
|
||
</div>
|
||
|
||
<div v-if="state.operation.low_stock_count > 0" style="max-height: 90px; overflow-y: auto;">
|
||
<div class="sa-flex sa-row-between mb-1 pb-1" v-for="sku in state.operation.low_stock_list" :key="sku.sku_id" style="border-bottom: 1px solid #f8f8f8; font-size: 12px;">
|
||
<div class="sa-flex" style="max-width: 70%;">
|
||
<sa-image :url="sku.goods_image" size="18" style="border-radius: 2px;"></sa-image>
|
||
<span class="ml-1 sa-table-line-1" :title="sku.goods_title">{{ sku.goods_title }}</span>
|
||
</div>
|
||
<div class="sa-flex">
|
||
<span class="low-stock-tag mr-1">{{ sku.stock }}件</span>
|
||
<el-button type="primary" link size="mini" @click="onOpenGoods(sku.goods_id)">补货</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-else class="text-muted sa-flex sa-row-center" style="font-size: 12px; padding: 6px 0;">
|
||
✅ 所有在售商品库存充足
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
{/if}
|
||
|
||
{if $auth->check('shopro/dashboard/chart')}
|
||
<!-- ================= 3. 核心动态走势与分成结构透视 ================= -->
|
||
<el-row :gutter="16">
|
||
<!-- 左侧：时段动态分析图 -->
|
||
<el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
|
||
<div class="bar-card card">
|
||
<div class="sa-flex sa-row-between sa-flex-wrap mb-2">
|
||
<div class="sa-flex">
|
||
<div class="tab-item" :class="chart.tabActive == key ? 'is-active' : ''"
|
||
v-for="(value, key) in chart.tabsData" :key="key"
|
||
@click="onChangeTabActive(key)">
|
||
{{ value }}
|
||
</div>
|
||
</div>
|
||
<div class="date-time">
|
||
<el-date-picker v-model="chart.dateTime" type="datetimerange"
|
||
value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"
|
||
:default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]"
|
||
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
|
||
:shortcuts="chart.shortcuts" @change="onChangeDateTime" :editable="false">
|
||
</el-date-picker>
|
||
</div>
|
||
</div>
|
||
<div id="chartContent"></div>
|
||
</div>
|
||
</el-col>
|
||
|
||
<!-- 右侧：收益分成类型分布 -->
|
||
<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
|
||
<div class="split-panel card">
|
||
<div class="sa-flex sa-row-between mb-2">
|
||
<span class="card-header-title" style="margin-bottom: 0;">收益分成类型分布</span>
|
||
<span class="cursor-pointer text-primary" style="font-size: 12px;" @click="onOpenReward('')">全部明细 →</span>
|
||
</div>
|
||
|
||
<div class="sa-flex sa-row-center">
|
||
<div id="splitPieContent"></div>
|
||
</div>
|
||
|
||
<div class="split-stat-list mt-2">
|
||
<div class="split-stat-item sa-flex sa-row-between" v-for="item in chart.data.splitStructure" :key="item.key">
|
||
<div class="sa-flex">
|
||
<span class="split-color-dot" :style="{ background: item.color }"></span>
|
||
<span>{{ item.name }}</span>
|
||
</div>
|
||
<div class="sa-flex">
|
||
<span class="font-bold mr-2">¥{{ item.amount }}</span>
|
||
<el-tag size="small" type="info" effect="plain">{{ item.ratio }}%</el-tag>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sa-flex sa-row-between mt-3 pt-2" style="border-top: 1px dashed var(--sa-space); font-size: 12px; color: var(--sa-subfont);">
|
||
<span>所选时段日结dmepa发放：<strong class="text-purple">{{ chart.data.periodMadow }} dmepa</strong></span>
|
||
<el-button type="primary" link size="small" @click="onOpenDaily">日结池明细</el-button>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
{/if}
|
||
|
||
{if $auth->check('shopro/dashboard/ranking')}
|
||
<!-- ================= 4. 收益中心收益排行 & 电商运营与风控监控 ================= -->
|
||
<el-row :gutter="16">
|
||
<!-- 左侧：收益排行 TOP 5 -->
|
||
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
|
||
<div class="partner-ranking-card card">
|
||
<div class="sa-flex sa-row-between mb-2">
|
||
<div class="card-header-title" style="margin-bottom: 0;">
|
||
<span>收益排行榜 (TOP 5)</span>
|
||
</div>
|
||
<span class="cursor-pointer text-primary" style="font-size: 12px;" @click="onOpenReward('')">查看全部 →</span>
|
||
</div>
|
||
|
||
<el-table class="sa-table" :data="ranking.partner" stripe>
|
||
<el-table-column label="排名" width="55" align="center">
|
||
<template #default="scope">
|
||
<span class="rank-badge" :class="`top-${scope.$index + 1}`">
|
||
{{ scope.$index + 1 }}
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="股东会员" min-width="140">
|
||
<template #default="scope">
|
||
<div class="sa-flex">
|
||
<sa-image :url="scope.row.avatar" size="24" style="border-radius: 50%;"></sa-image>
|
||
<div class="ml-2">
|
||
<div class="sa-table-line-1 font-bold">{{ scope.row.nickname }}</div>
|
||
<div style="font-size: 11px; color: var(--sa-subfont);">{{ scope.row.mobile || '' }}</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="身份" min-width="150">
|
||
<template #default="scope">
|
||
<el-tag size="small" :type="scope.row.is_partner ? 'danger' : 'info'" effect="light">
|
||
{{ scope.row.identity_text }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="累计收益" width="110" align="right">
|
||
<template #default="scope">
|
||
<span class="text-warning font-bold">¥{{ scope.row.total_income }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</el-col>
|
||
|
||
<!-- 右侧：日常业务待办与日结记录 -->
|
||
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
|
||
<div class="card" style="min-height: 340px;">
|
||
<div class="sa-flex sa-row-between mb-2">
|
||
<div class="card-header-title" style="margin-bottom: 0;">日常业务待办与日结记录</div>
|
||
<el-tag size="mini" type="danger" effect="light">实时待处理</el-tag>
|
||
</div>
|
||
|
||
<!-- 待处理订单指标卡 (全量实时统计，不受时段筛选影响，杜绝漏单) -->
|
||
<el-row :gutter="10" class="mb-3">
|
||
<el-col :span="6">
|
||
<div class="todo-stat-card" @click="onOpen('nosend')">
|
||
<div style="color: var(--sa-subfont); font-size: 11px; margin-bottom: 4px;">待发货订单</div>
|
||
<div class="sa-flex sa-row-between">
|
||
<span style="font-size: 18px; font-weight: 700;" :class="(state.operation?.todo_overview?.nosend_count ?? statistics.noSend.num) > 0 ? 'text-warning' : 'text-dark'">
|
||
{{ state.operation?.todo_overview?.nosend_count ?? statistics.noSend.num }}
|
||
</span>
|
||
<el-icon><arrow-right /></el-icon>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<div class="todo-stat-card" @click="onOpen('aftersale')">
|
||
<div style="color: var(--sa-subfont); font-size: 11px; margin-bottom: 4px;">售后维权</div>
|
||
<div class="sa-flex sa-row-between">
|
||
<span style="font-size: 18px; font-weight: 700;" :class="(state.operation?.todo_overview?.aftersale_count ?? statistics.aftersale.num) > 0 ? 'text-danger' : 'text-dark'">
|
||
{{ state.operation?.todo_overview?.aftersale_count ?? statistics.aftersale.num }}
|
||
</span>
|
||
<el-icon><arrow-right /></el-icon>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<div class="todo-stat-card" @click="onOpen('refund')">
|
||
<div style="color: var(--sa-subfont); font-size: 11px; margin-bottom: 4px;">待审退款</div>
|
||
<div class="sa-flex sa-row-between">
|
||
<span style="font-size: 18px; font-weight: 700;" :class="(state.operation?.todo_overview?.refund_apply_count ?? statistics.refund.num) > 0 ? 'text-danger' : 'text-dark'">
|
||
{{ state.operation?.todo_overview?.refund_apply_count ?? statistics.refund.num }}
|
||
</span>
|
||
<el-icon><arrow-right /></el-icon>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<div class="todo-stat-card" @click="onOpenWithdraw(0)">
|
||
<div style="color: var(--sa-subfont); font-size: 11px; margin-bottom: 4px;">待审提现</div>
|
||
<div class="sa-flex sa-row-between">
|
||
<span style="font-size: 18px; font-weight: 700;" :class="(state.operation?.todo_overview?.pending_withdraw_count ?? state.finance?.pending_withdraw_count ?? 0) > 0 ? 'text-purple' : 'text-dark'">
|
||
{{ state.operation?.todo_overview?.pending_withdraw_count ?? state.finance?.pending_withdraw_count ?? 0 }}
|
||
</span>
|
||
<el-icon><arrow-right /></el-icon>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 最新日结对账卡 -->
|
||
<div class="daily-report-box" v-if="ranking.recentReport">
|
||
<div class="sa-flex sa-row-between mb-2">
|
||
<div class="sa-flex">
|
||
<el-icon class="mr-1 text-primary"><Calendar /></el-icon>
|
||
<strong class="text-dark">最近一次日结概览 ({{ ranking.recentReport.settle_date }})</strong>
|
||
</div>
|
||
<el-tag size="small" :type="ranking.recentReport.status == 1 ? 'success' : 'danger'" effect="plain">
|
||
{{ ranking.recentReport.status_text }}
|
||
</el-tag>
|
||
</div>
|
||
<el-row :gutter="10" style="color: var(--sa-subfont); line-height: 1.8;">
|
||
<el-col :span="12">
|
||
<div>合格订单数：<strong class="text-dark">{{ ranking.recentReport.order_count }} 单</strong></div>
|
||
<div>当日营业额：<strong class="text-dark">¥{{ ranking.recentReport.gmv }}</strong></div>
|
||
<div>累计合格单数：<strong>{{ ranking.recentReport.order_count_n }} 单</strong></div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div>dmepa均分池：<strong class="text-purple">{{ ranking.recentReport.madow_pool }} dmepa</strong> ({{ ranking.recentReport.share_user_count }}人)</div>
|
||
<div>酒道馆奖励池：<strong class="text-warning">¥{{ ranking.recentReport.venue_pool }}</strong> ({{ ranking.recentReport.venue_user_count }}人)</div>
|
||
<div>区县代理奖励池：<strong class="text-warning">¥{{ ranking.recentReport.county_pool }}</strong> ({{ ranking.recentReport.county_user_count }}人)</div>
|
||
</el-col>
|
||
</el-row>
|
||
<div class="sa-flex sa-row-right mt-2">
|
||
<el-button type="primary" link size="small" @click="onOpenDaily">查看日结记录 →</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else class="text-muted sa-flex sa-row-center" style="padding: 24px 0;">
|
||
暂无日结记录数据
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- ================= 5. 商品热销榜与热搜榜 (保持原有生态) ================= -->
|
||
<el-row :gutter="16">
|
||
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
|
||
<div class="goods-card card">
|
||
<div class="card-header-title">热销商品排行榜</div>
|
||
<el-table class="sa-table" :data="ranking.goods" stripe>
|
||
<el-table-column label="排名" width="60" align="center">
|
||
<template #default="scope">
|
||
<img class="top"
|
||
:src="`/assets/addons/shopro/img/dashboard/top${scope.$index + 1}.png`" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="商品名称" min-width="200">
|
||
<template #default="scope">
|
||
<div class="sa-flex">
|
||
<sa-image :url="scope.row.image" size="20"></sa-image>
|
||
<div class="ml-2 sa-table-line-1">
|
||
{{ scope.row.title || '-' }}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="销量" width="90" align="right">
|
||
<template #default="scope">
|
||
<span>{{ scope.row.real_sales || '-' }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</el-col>
|
||
|
||
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
|
||
<div class="hot-search-card card">
|
||
<div class="card-header-title">关键词热搜榜</div>
|
||
<el-row :gutter="16">
|
||
<el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
|
||
<el-table class="sa-table" :data="ranking.hot_search" stripe>
|
||
<el-table-column label="排名" width="50" align="center">
|
||
<template #default="scope">
|
||
<span class="rank-badge" :class="`top-${scope.$index + 1}`">
|
||
{{ scope.$index + 1 }}
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="搜索词" min-width="160">
|
||
<template #default="scope">
|
||
<div class="sa-table-line-1">{{ scope.row.keyword || '-' }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="频次" width="80" align="right">
|
||
<template #default="scope">
|
||
<span>{{ scope.row.num }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
||
<div class="sa-flex sa-row-center">
|
||
<div id="rankingContent"></div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
{/if}
|
||
</el-scrollbar>
|
||
</el-main>
|
||
</el-container>
|
||
</div> |