184 lines
13 KiB
Plaintext
184 lines
13 KiB
Plaintext
<template>
|
|
<view class="admin-page">
|
|
<view class="filter-card">
|
|
<view class="filter-row">
|
|
<view class="filter-item">
|
|
<text class="label">时间选择：</text>
|
|
<view class="date-picker-mock">
|
|
<text class="placeholder">开始日期 - 结束日期</text>
|
|
<text class="icon-calendar">📅</text>
|
|
</view>
|
|
</view>
|
|
<view class="filter-item">
|
|
<text class="label">搜索：</text>
|
|
<input class="filter-input" placeholder="请输入姓名、电话、UID" />
|
|
</view>
|
|
<view class="filter-btns">
|
|
<button class="btn primary" @click="onSearch">查询</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content-card">
|
|
<view class="action-bar">
|
|
<button class="btn ghost small" @click="onExport">导出</button>
|
|
</view>
|
|
<view class="table-container">
|
|
<view class="table-header">
|
|
<view class="col col-id"><text>ID</text></view>
|
|
<view class="col col-img"><text>头像</text></view>
|
|
<view class="col col-info"><text>用户信息</text></view>
|
|
<view class="col col-level"><text>分销等级</text></view>
|
|
<view class="col col-stat"><text>推广用户数量</text></view>
|
|
<view class="col col-stat"><text>推广订单数量</text></view>
|
|
<view class="col col-stat"><text>推广订单金额</text></view>
|
|
<view class="col col-stat"><text>佣金总金额</text></view>
|
|
<view class="col col-stat"><text>已提现金额</text></view>
|
|
<view class="col col-stat"><text>提现次数</text></view>
|
|
<view class="col col-stat"><text>未提现金额</text></view>
|
|
<view class="col col-ops"><text>操作</text></view>
|
|
</view>
|
|
<view class="table-body">
|
|
<view v-for="item in pagedList" :key="item.id" class="table-row">
|
|
<view class="col col-id"><text>{{ item.id }}</text></view>
|
|
<view class="col col-img">
|
|
<image class="table-img" src="/static/logo.png" mode="aspectFill" />
|
|
</view>
|
|
<view class="col col-info">
|
|
<view class="user-info-box">
|
|
<text class="info-text">昵称:{{ item.nickname }}</text>
|
|
<text class="info-text">姓名:{{ item.name }}</text>
|
|
<text class="info-text">电话:{{ item.phone }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="col col-level"><text>{{ item.level }}</text></view>
|
|
<view class="col col-stat"><text>{{ item.userCount }}</text></view>
|
|
<view class="col col-stat"><text>{{ item.orderCount }}</text></view>
|
|
<view class="col col-stat"><text>{{ item.orderAmount }}</text></view>
|
|
<view class="col col-stat"><text>{{ item.commissionTotal }}</text></view>
|
|
<view class="col col-stat"><text>{{ item.withdrawnAmount }}</text></view>
|
|
<view class="col col-stat"><text>{{ item.withdrawCount }}</text></view>
|
|
<view class="col col-stat"><text>{{ item.unwithdrawnAmount }}</text></view>
|
|
<view class="col col-ops">
|
|
<text class="op-link" @click="onPromoter(item)">推广人</text>
|
|
<text class="op-divider">|</text>
|
|
<text class="op-link" @click="onMore(item)">更多</text>
|
|
<text class="arrow-down">▼</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<CommonPagination
|
|
v-if="total > 0"
|
|
:total="total"
|
|
:loading="false"
|
|
:currentPage="currentPage"
|
|
:pageSize="pageSize"
|
|
:pageSizeOptionLabels="pageSizeOptionLabels"
|
|
:pageSizeIndex="pageSizeIndex"
|
|
:visiblePages="visiblePages"
|
|
:totalPage="totalPage"
|
|
:jumpPageInput="jumpPageInput"
|
|
@page-size-change="handlePageSizeChange"
|
|
@page-change="handlePageChange"
|
|
@update:jumpPageInput="(val: string) => { jumpPageInput.value = val }"
|
|
@jump-page="handleJumpPage"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref, computed } from 'vue'
|
|
import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
|
|
|
|
// ========== MOCK DATA START ==========
|
|
// TODO: 接真实接口时替换此处 promoterList 为 fetchPromoterList() 调用
|
|
const promoterList = ref([
|
|
{ id: '82764', nickname: '183****5762', name: '-', phone: '183****5762', level: '--', userCount: 0, orderCount: 0, orderAmount: '0.00', commissionTotal: '0.00', withdrawnAmount: 0, withdrawCount: 0, unwithdrawnAmount: 0 },
|
|
{ id: '82765', nickname: '张小明', name: '张小明', phone: '138****1234', level: '一级', userCount: 12, orderCount: 8, orderAmount: '2560.00', commissionTotal: '256.00', withdrawnAmount: 200, withdrawCount: 2, unwithdrawnAmount: 56 },
|
|
{ id: '82766', nickname: '李美丽', name: '李美丽', phone: '139****5678', level: '二级', userCount: 5, orderCount: 3, orderAmount: '980.00', commissionTotal: '98.00', withdrawnAmount: 50, withdrawCount: 1, unwithdrawnAmount: 48 },
|
|
{ id: '82767', nickname: '王大力', name: '王大力', phone: '150****9876', level: '一级', userCount: 28, orderCount: 20, orderAmount: '8800.00', commissionTotal: '880.00', withdrawnAmount: 800, withdrawCount: 5, unwithdrawnAmount: 80 },
|
|
{ id: '82768', nickname: '赵小红', name: '赵小红', phone: '186****1111', level: '三级', userCount: 3, orderCount: 2, orderAmount: '450.00', commissionTotal: '22.50', withdrawnAmount: 0, withdrawCount: 0, unwithdrawnAmount: 22.5 },
|
|
{ id: '82769', nickname: '陈风', name: '陈风', phone: '177****2222', level: '二级', userCount: 15, orderCount: 10, orderAmount: '3200.00', commissionTotal: '320.00', withdrawnAmount: 300, withdrawCount: 3, unwithdrawnAmount: 20 },
|
|
{ id: '82770', nickname: '刘明亮', name: '刘明亮', phone: '133****3333', level: '一级', userCount: 42, orderCount: 35, orderAmount: '15600.00', commissionTotal: '1560.00', withdrawnAmount: 1500, withdrawCount: 8, unwithdrawnAmount: 60 },
|
|
{ id: '82771', nickname: '黄小花', name: '黄小花', phone: '155****4444', level: '--', userCount: 1, orderCount: 0, orderAmount: '0.00', commissionTotal: '0.00', withdrawnAmount: 0, withdrawCount: 0, unwithdrawnAmount: 0 },
|
|
{ id: '82772', nickname: '周建国', name: '周建国', phone: '188****5555', level: '二级', userCount: 9, orderCount: 6, orderAmount: '2100.00', commissionTotal: '210.00', withdrawnAmount: 200, withdrawCount: 2, unwithdrawnAmount: 10 },
|
|
{ id: '82773', nickname: '吴晓燕', name: '吴晓燕', phone: '137****6666', level: '一级', userCount: 20, orderCount: 15, orderAmount: '6300.00', commissionTotal: '630.00', withdrawnAmount: 600, withdrawCount: 4, unwithdrawnAmount: 30 },
|
|
{ id: '82774', nickname: '郑强', name: '郑强', phone: '150****7777', level: '三级', userCount: 2, orderCount: 1, orderAmount: '320.00', commissionTotal: '16.00', withdrawnAmount: 0, withdrawCount: 0, unwithdrawnAmount: 16 },
|
|
{ id: '82775', nickname: '孙月', name: '孙月', phone: '182****8888', level: '一级', userCount: 35, orderCount: 28, orderAmount: '11200.00', commissionTotal: '1120.00', withdrawnAmount: 1000, withdrawCount: 6, unwithdrawnAmount: 120 },
|
|
{ id: '82776', nickname: '冯磊', name: '冯磊', phone: '136****9999', level: '二级', userCount: 8, orderCount: 5, orderAmount: '1800.00', commissionTotal: '180.00', withdrawnAmount: 150, withdrawCount: 2, unwithdrawnAmount: 30 },
|
|
{ id: '82777', nickname: '陈小丽', name: '陈小丽', phone: '159****0000', level: '--', userCount: 0, orderCount: 0, orderAmount: '0.00', commissionTotal: '0.00', withdrawnAmount: 0, withdrawCount: 0, unwithdrawnAmount: 0 },
|
|
{ id: '82778', nickname: '蒋涛', name: '蒋涛', phone: '178****1234', level: '一级', userCount: 18, orderCount: 12, orderAmount: '4500.00', commissionTotal: '450.00', withdrawnAmount: 400, withdrawCount: 3, unwithdrawnAmount: 50 },
|
|
{ id: '82779', nickname: '卫芳', name: '卫芳', phone: '132****5678', level: '三级', userCount: 4, orderCount: 3, orderAmount: '750.00', commissionTotal: '37.50', withdrawnAmount: 30, withdrawCount: 1, unwithdrawnAmount: 7.5 },
|
|
{ id: '82780', nickname: '韩超', name: '韩超', phone: '156****9876', level: '二级', userCount: 11, orderCount: 8, orderAmount: '2800.00', commissionTotal: '280.00', withdrawnAmount: 250, withdrawCount: 3, unwithdrawnAmount: 30 },
|
|
{ id: '82781', nickname: '杨静', name: '杨静', phone: '199****1111', level: '一级', userCount: 25, orderCount: 18, orderAmount: '7200.00', commissionTotal: '720.00', withdrawnAmount: 700, withdrawCount: 5, unwithdrawnAmount: 20 },
|
|
{ id: '82782', nickname: '秦刚', name: '秦刚', phone: '135****2222', level: '--', userCount: 0, orderCount: 0, orderAmount: '0.00', commissionTotal: '0.00', withdrawnAmount: 0, withdrawCount: 0, unwithdrawnAmount: 0 },
|
|
{ id: '82783', nickname: '许丽华', name: '许丽华', phone: '180****3333', level: '二级', userCount: 7, orderCount: 4, orderAmount: '1400.00', commissionTotal: '140.00', withdrawnAmount: 100, withdrawCount: 1, unwithdrawnAmount: 40 },
|
|
])
|
|
// ========== MOCK DATA END ==========
|
|
|
|
// ========== PAGINATION STATE ==========
|
|
const currentPage = ref(1)
|
|
const pageSize = ref(15)
|
|
const jumpPageInput = ref('')
|
|
const pageSizeOptions = [10, 15, 20, 30, 50]
|
|
const pageSizeOptionLabels = computed(() => pageSizeOptions.map((n: number) => `${n}条/页`))
|
|
const pageSizeIndex = computed(() => { const idx = pageSizeOptions.indexOf(pageSize.value); return idx >= 0 ? idx : 0 })
|
|
const total = computed(() => promoterList.value.length)
|
|
const totalPage = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)))
|
|
const pagedList = computed(() => {
|
|
const start = (currentPage.value - 1) * pageSize.value
|
|
return promoterList.value.slice(start, start + pageSize.value)
|
|
})
|
|
const visiblePages = computed((): number[] => {
|
|
const t = totalPage.value; const cur = currentPage.value
|
|
if (t <= 7) return Array.from({ length: t }, (_: any, i: number) => i + 1)
|
|
if (cur <= 4) return [1, 2, 3, 4, 5, -1, t]
|
|
if (cur >= t - 3) return [1, -1, t - 4, t - 3, t - 2, t - 1, t]
|
|
return [1, -1, cur - 1, cur, cur + 1, -1, t]
|
|
})
|
|
const handlePageChange = (p: number) => { currentPage.value = p }
|
|
const handlePageSizeChange = (e: any) => {
|
|
const idx = Number(e.detail.value)
|
|
pageSize.value = pageSizeOptions[idx] ?? pageSizeOptions[0]
|
|
currentPage.value = 1
|
|
}
|
|
const handleJumpPage = () => {
|
|
const p = parseInt(jumpPageInput.value)
|
|
if (!isNaN(p) && p >= 1 && p <= totalPage.value) currentPage.value = p
|
|
}
|
|
// ========== END PAGINATION STATE ==========
|
|
|
|
function onSearch() { uni.showToast({ title: '查询中...', icon: 'none' }) }
|
|
function onExport() { uni.showToast({ title: '开始导出', icon: 'none' }) }
|
|
function onPromoter(item: any) { uni.showToast({ title: '推广人: ' + item.id, icon: 'none' }) }
|
|
function onMore(item: any) { uni.showToast({ title: '更多: ' + item.id, icon: 'none' }) }
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.admin-page { padding: 0; }
|
|
.filter-card { background: #fff; padding: 24px; margin-bottom: 16px; border-radius: 4px; }
|
|
.filter-row { display: flex; flex-direction: row; align-items: center; gap: 24px; }
|
|
.label { font-size: 14px; color: #333; }
|
|
.date-picker-mock { display: flex; flex-direction: row; align-items: center; justify-content: space-between; border: 1px solid #d9d9d9; border-radius: 2px; height: 32px; width: 260px; padding: 0 12px; background: #fff; .placeholder { font-size: 14px; color: #bfbfbf; } .icon-calendar { font-size: 14px; color: #bfbfbf; } }
|
|
.filter-input { border: 1px solid #d9d9d9; height: 32px; width: 220px; padding: 0 12px; font-size: 14px; }
|
|
.btn { height: 32px; padding: 0 16px; font-size: 14px; border-radius: 2px; border: 1px solid #d9d9d9; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
|
|
.btn.primary { background: #1890ff; border-color: #1890ff; color: #fff; }
|
|
.btn.ghost { color: #666; background: #fff; }
|
|
.btn.small { height: 28px; padding: 0 12px; font-size: 13px; }
|
|
.content-card { background: #fff; border-radius: 4px; }
|
|
.action-bar { padding: 16px 24px; }
|
|
.table-container { padding: 0 24px 24px; }
|
|
.table-header { display: flex; flex-direction: row; background: #f8faff; border-bottom: 1px solid #f0f0f0; padding: 12px 0; }
|
|
.table-row { display: flex; flex-direction: row; border-bottom: 1px solid #f0f0f0; padding: 12px 0; align-items: center; &:hover { background: #fafafa; } }
|
|
.col { padding: 0 8px; display: flex; align-items: center; font-size: 14px; color: #333; }
|
|
.col-id { width: 60px; } .col-img { width: 80px; justify-content: center; } .col-info { width: 180px; } .col-level { width: 100px; justify-content: center; } .col-stat { width: 110px; justify-content: center; } .col-ops { flex: 1; justify-content: flex-end; padding-right: 16px; }
|
|
.table-img { width: 40px; height: 40px; border-radius: 4px; }
|
|
.user-info-box { display: flex; flex-direction: column; }
|
|
.info-text { font-size: 12px; color: #666; margin-bottom: 2px; }
|
|
.op-link { color: #1890ff; cursor: pointer; }
|
|
.op-divider { color: #e8e8e8; margin: 0 8px; }
|
|
.arrow-down { font-size: 10px; color: #1890ff; margin-left: 4px; }
|
|
.pagination { padding: 16px 24px; border-top: 1px solid #f0f0f0; }
|
|
.page-info { font-size: 14px; color: #999; }
|
|
</style> |