huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页细节调整

Browse Source
This commit is contained in:
huangzhenbao
2026-02-06 16:18:04 +08:00
parent d00f0b7412
commit 57846534bc
86 changed files with 2751 additions and 3074 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
pages/mall/admin/distribution/division/agent.uvue
View File

@@ -1,34 +1,31 @@
<template>
<template>
<view class="admin-page">
<view class="filter-card">
<view class="filter-row">
<view class="filter-item">
<text class="label">鎼滅储锛?/text>
<input class="filter-input" placeholder="璇疯緭鍏ュ鍚嶃€乁ID" />
<text class="label">代理商查询：</text>
<input class="filter-input" placeholder="请输入姓名、手机号或UID" />
</view>
<view class="filter-btns">
<button class="btn primary" @click="onSearch">鏌ヨ</button>
<button class="btn primary" @click="onSearch">查询</button>
</view>
</view>
</view>
<view class="content-card">
<view class="action-bar">
<button class="btn primary small" @click="onAdd">娣诲姞浠ｇ悊鍟?/button>
<button class="btn primary small" @click="onAdd">添加代理商</button>
</view>
<view class="table-container">
<view class="table-header">
<view class="col col-uid"><text>鐢ㄦ埛UID</text></view>
<view class="col col-avatar"><text>澶村儚</text></view>
<view class="col col-name"><text>鍚嶇О</text></view>
<view class="col col-ratio"><text>鍒嗛攢姣斾緥</text></view>
<view class="col col-count"><text>鍛樺伐鏁伴噺</text></view>
<view class="col col-time"><text>鎴鏃堕棿</text></view>
<view class="col col-status"><text>鐘舵€?/text></view>
<view class="col col-ops"><text>鎿嶄綔</text></view>
<view class="col col-uid"><text>用户UID</text></view>
<view class="col col-avatar"><text>头像</text></view>
<view class="col col-name"><text>名称</text></view>
<view class="col col-ratio"><text>分佣比例</text></view>
<view class="col col-count"><text>员工数量</text></view>
<view class="col col-time"><text>过期时间</text></view>
<view class="col col-status"><text>状态</text></view>
<view class="col col-ops"><text>操作</text></view>
</view>
<view class="table-body">
<view v-for="item in agentList" :key="item.uid" class="table-row">
<view class="col col-uid"><text>{{ item.uid }}</text></view>
@@ -43,13 +40,13 @@
<switch :checked="item.status" color="#1890ff" scale="0.8" />
</view>
<view class="col col-ops">
<text class="op-link">娣诲姞鍛樺伐</text>
<text class="op-link">编辑</text>
<text class="op-divider">|</text>
<text class="op-link">鏌ョ湅鍛樺伐</text>
<text class="op-link">查看</text>
<text class="op-divider">|</text>
<text class="op-link">缂栬緫</text>
<text class="op-link">员工</text>
<text class="op-divider">|</text>
<text class="op-link">鍒犻櫎</text>
<text class="op-link">删除</text>
</view>
</view>
</view>
@@ -57,28 +54,16 @@
</view>
</view>
</template>
<script setup lang="uts">
import { ref } from 'vue'
const agentList = ref([
{ uid: '60569', name: 'cs2020', ratio: 50, staffCount: 1, endTime: '1970-01-01', status: true },
{ uid: '60571', name: 'www', ratio: 19, staffCount: 1, endTime: '1970-01-01', status: true },
{ uid: '60665', name: 'geyun', ratio: 15, staffCount: 1, endTime: '1970-01-01', status: true },
{ uid: '60678', name: '鏍间簯', ratio: 0, staffCount: 0, endTime: '1970-01-01', status: true }
{ uid: '60569', name: 'cs2020', ratio: 50, staffCount: 1, endTime: '2026-01-01', status: true },
])
function onSearch() {
uni.showToast({ title: '鏌ヨ涓?..', icon: 'none' })
}
function onAdd() {
uni.showToast({ title: '娣诲姞浠ｇ悊鍟?, icon: 'none' })
}
function onSearch() { uni.showToast({ title: '查询中...', icon: 'none' }) }
function onAdd() { uni.showToast({ title: '添加中...', icon: 'none' }) }
</script>
<style scoped lang="scss">
.admin-page { /* padding removed */ }
.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; }
@@ -91,17 +76,8 @@ function onAdd() {
.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; font-size: 14px; color: #333; display: flex; align-items: center; }
.col-uid { width: 80px; }
.col-avatar { width: 80px; justify-content: center; }
.col-name { width: 120px; }
.col-ratio { width: 100px; justify-content: center; }
.col-count { width: 100px; justify-content: center; }
.col-time { width: 120px; justify-content: center; }
.col-status { width: 80px; justify-content: center; }
.col-ops { flex: 1; justify-content: flex-end; }
.col-uid { width: 80px; } .col-avatar { width: 80px; justify-content: center; } .col-name { width: 120px; } .col-ratio { width: 100px; justify-content: center; } .col-count { width: 100px; justify-content: center; } .col-time { width: 120px; justify-content: center; } .col-status { width: 80px; justify-content: center; } .col-ops { flex: 1; justify-content: flex-end; }
.avatar-img { width: 32px; height: 32px; border-radius: 2px; }
.op-link { color: #1890ff; cursor: pointer; }
.op-divider { color: #e8e8e8; margin: 0 8px; }
</style>
</style>

74
pages/mall/admin/distribution/division/apply.uvue
View File

@@ -1,43 +1,34 @@
<template>
<template>
<view class="admin-page">
<view class="filter-card">
<view class="filter-row">
<view class="filter-item">
<text class="label">鎼滅储锛?/text>
<input class="filter-input" placeholder="璇疯緭鍏ュ鍚嶃€乁ID" />
<text class="label">搜索：</text>
<input class="filter-input" placeholder="请输入姓名、UID" />
</view>
<view class="filter-btns">
<button class="btn primary" @click="onSearch">鏌ヨ</button>
<button class="btn primary" @click="onSearch">查询</button>
</view>
</view>
</view>
<view class="content-card">
<view class="tabs-row">
<view
v-for="(tab, index) in tabs"
:key="index"
class="tab-item"
:class="{ active: activeTab === index }"
@click="activeTab = index"
>
<view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: activeTab === index }" @click="activeTab = index">
<text>{{ tab }}</text>
</view>
</view>
<view class="table-container">
<view class="table-header">
<view class="col col-uid"><text>鐢ㄦ埛UID</text></view>
<view class="col col-name"><text>浠ｇ悊鍟嗗悕绉?/text></view>
<view class="col col-phone"><text>浠ｇ悊鍟嗙數璇?/text></view>
<view class="col col-dept"><text>浜嬩笟閮ㄥ悕绉?/text></view>
<view class="col col-img"><text>鐢宠鍥剧墖</text></view>
<view class="col col-time"><text>鐢宠鏃堕棿</text></view>
<view class="col col-status"><text>鐢宠鐘舵€?/text></view>
<view class="col col-code"><text>閭€璇风爜</text></view>
<view class="col col-ops"><text>鎿嶄綔</text></view>
<view class="col col-uid"><text>用户UID</text></view>
<view class="col col-name"><text>代理商名称</text></view>
<view class="col col-phone"><text>代理商电话</text></view>
<view class="col col-dept"><text>事业部名称</text></view>
<view class="col col-img"><text>申请图片</text></view>
<view class="col col-time"><text>申请时间</text></view>
<view class="col col-status"><text>申请状态</text></view>
<view class="col col-code"><text>邀请码</text></view>
<view class="col col-ops"><text>操作</text></view>
</view>
<view class="table-body">
<view v-for="item in applyList" :key="item.uid" class="table-row">
<view class="col col-uid"><text>{{ item.uid }}</text></view>
@@ -53,11 +44,11 @@
</view>
<view class="col col-code"><view class="code-box"><text>{{ item.code }}</text></view></view>
<view class="col col-ops">
<text class="op-link">鍚屾剰</text>
<text class="op-link">同意</text>
<text class="op-divider">|</text>
<text class="op-link">鎷掔粷</text>
<text class="op-link">拒绝</text>
<text class="op-divider">|</text>
<text class="op-link">鍒犻櫎</text>
<text class="op-link">删除</text>
</view>
</view>
</view>
@@ -65,26 +56,17 @@
</view>
</view>
</template>
<script setup lang="uts">
import { ref } from 'vue'
const activeTab = ref(0)
const tabs = ['鍏ㄩ儴', '鐢宠涓?, '宸插悓鎰?, '宸叉嫆缁?]
const tabs = ['全部', '申请中', '已同意', '已拒绝']
const applyList = ref([
{ uid: '81806', name: '娴嬭瘯娴嬭瘯', phone: '19910205954', deptName: '26991', time: '2026-01-08 15:30:39', statusText: '鐢宠涓?, code: '70623142' },
{ uid: '82072', name: 'testttt', phone: '18613860515', deptName: '鍑岃景绉戞妧', time: '2026-01-05 12:06:39', statusText: '鐢宠涓?, code: '80889444' },
{ uid: '80586', name: '鐔?, phone: '13759402576', deptName: '鍑岃景绉戞妧', time: '2025-12-06 18:05:18', statusText: '鐢宠涓?, code: '80889444' }
{ uid: '81806', name: '测试测试', phone: '19910205954', deptName: '26991', time: '2026-01-08 15:30:39', statusText: '申请中', code: '70623142' },
])
function onSearch() {
uni.showToast({ title: '鏌ヨ涓?..', icon: 'none' })
}
function onSearch() { uni.showToast({ title: '查询中...', icon: 'none' }) }
</script>
<style scoped lang="scss">
.admin-page { /* padding removed */ }
.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; }
@@ -98,20 +80,10 @@ function onSearch() {
.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; font-size: 14px; color: #333; display: flex; align-items: center; }
.col-uid { width: 80px; }
.col-name { width: 120px; }
.col-phone { width: 120px; }
.col-dept { width: 120px; }
.col-img { width: 80px; justify-content: center; }
.col-time { width: 160px; justify-content: center; }
.col-status { width: 100px; justify-content: center; }
.col-code { width: 100px; justify-content: center; }
.col-ops { flex: 1; justify-content: flex-end; }
.col-uid { width: 80px; } .col-name { width: 120px; } .col-phone { width: 120px; } .col-dept { width: 120px; } .col-img { width: 80px; justify-content: center; } .col-time { width: 160px; justify-content: center; } .col-status { width: 100px; justify-content: center; } .col-code { width: 100px; justify-content: center; } .col-ops { flex: 1; justify-content: flex-end; }
.table-img { width: 32px; height: 32px; border-radius: 2px; }
.status-tag { border: 1px solid #1890ff; color: #1890ff; padding: 2px 8px; border-radius: 4px; font-size: 12px; }
.code-box { border: 1px solid #d9d9d9; padding: 2px 8px; border-radius: 4px; font-size: 12px; background: #fafafa; }
.op-link { color: #1890ff; cursor: pointer; }
.op-divider { color: #e8e8e8; margin: 0 8px; }
</style>
</style>

71
pages/mall/admin/distribution/division/list.uvue
View File

@@ -1,35 +1,32 @@
<template>
<template>
<view class="admin-page">
<view class="filter-card">
<view class="filter-row">
<view class="filter-item">
<text class="label">鎼滅储锛?/text>
<input class="filter-input" placeholder="璇疯緭鍏ュ鍚嶃€乁ID" />
<text class="label">搜索：</text>
<input class="filter-input" placeholder="请输入姓名、UID" />
</view>
<view class="filter-btns">
<button class="btn primary" @click="onSearch">鏌ヨ</button>
<button class="btn primary" @click="onSearch">查询</button>
</view>
</view>
</view>
<view class="content-card">
<view class="action-bar">
<button class="btn primary small" @click="onAdd">娣诲姞浜嬩笟閮?/button>
<button class="btn primary small" @click="onAdd">添加事业部</button>
</view>
<view class="table-container">
<view class="table-header">
<view class="col col-uid"><text>鐢ㄦ埛UID</text></view>
<view class="col col-avatar"><text>澶村儚</text></view>
<view class="col col-name"><text>鍚嶇О</text></view>
<view class="col col-code"><text>閭€璇风爜</text></view>
<view class="col col-ratio"><text>鍒嗛攢姣斾緥</text></view>
<view class="col col-count"><text>浠ｇ悊鍟嗘暟閲?/text></view>
<view class="col col-time"><text>鎴鏃堕棿</text></view>
<view class="col col-status"><text>鐘舵€?/text></view>
<view class="col col-ops"><text>鎿嶄綔</text></view>
<view class="col col-uid"><text>用户UID</text></view>
<view class="col col-avatar"><text>头像</text></view>
<view class="col col-name"><text>名称</text></view>
<view class="col col-code"><text>邀请码</text></view>
<view class="col col-ratio"><text>分销比例</text></view>
<view class="col col-count"><text>代理商数量</text></view>
<view class="col col-time"><text>截止时间</text></view>
<view class="col col-status"><text>状态</text></view>
<view class="col col-ops"><text>操作</text></view>
</view>
<view class="table-body">
<view v-for="item in divisionList" :key="item.uid" class="table-row">
<view class="col col-uid"><text>{{ item.uid }}</text></view>
@@ -45,11 +42,11 @@
<switch :checked="item.status" color="#1890ff" scale="0.8" />
</view>
<view class="col col-ops">
<text class="op-link">鏌ョ湅浠ｇ悊鍟?/text>
<text class="op-link">查看代理商</text>
<text class="op-divider">|</text>
<text class="op-link">缂栬緫</text>
<text class="op-link">编辑</text>
<text class="op-divider">|</text>
<text class="op-link">鍒犻櫎</text>
<text class="op-link">删除</text>
</view>
</view>
</view>
@@ -57,54 +54,30 @@
</view>
</view>
</template>
<script setup lang="uts">
import { ref } from 'vue'
const divisionList = ref([
{ uid: '26991', name: '26991', code: '70623142', ratio: 40, agentCount: 1, endTime: '2026-12-31', status: true },
{ uid: '37221', name: '鍑岃景绉戞妧', code: '80889444', ratio: 10, agentCount: 5, endTime: '2029-09-30', status: true },
{ uid: '38837', name: 'yuyuyuyu', code: '96970376', ratio: 50, agentCount: 0, endTime: '2024-09-05', status: true },
{ uid: '46444', name: '瓒呯骇浜嬩笟閮?, code: '41026828', ratio: 30, agentCount: 1, endTime: '2026-09-03', status: true }
])
function onSearch() {
uni.showToast({ title: '鏌ヨ涓?..', icon: 'none' })
}
function onAdd() {
uni.showToast({ title: '娣诲姞浜嬩笟閮?, icon: 'none' })
}
function onSearch() { uni.showToast({ title: '查询中...', icon: 'none' }) }
function onAdd() { uni.showToast({ title: '添加中...', icon: 'none' }) }
</script>
<style scoped lang="scss">
/* Use similar styles as others */
.admin-page { /* padding removed */ }
.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; }
.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: 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.small { height: 32px; }
.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; font-size: 14px; color: #333; display: flex; align-items: center; }
.col-uid { width: 80px; }
.col-avatar { width: 80px; justify-content: center; }
.col-name { width: 120px; }
.col-code { width: 100px; justify-content: center; }
.col-ratio { width: 100px; justify-content: center; }
.col-count { width: 100px; justify-content: center; }
.col-time { width: 120px; justify-content: center; }
.col-status { width: 80px; justify-content: center; }
.col-ops { flex: 1; justify-content: flex-end; }
.col-uid { width: 80px; } .col-avatar { width: 80px; justify-content: center; } .col-name { width: 120px; } .col-code { width: 100px; justify-content: center; } .col-ratio { width: 100px; justify-content: center; } .col-count { width: 100px; justify-content: center; } .col-time { width: 120px; justify-content: center; } .col-status { width: 80px; justify-content: center; } .col-ops { flex: 1; justify-content: flex-end; }
.avatar-img { width: 32px; height: 32px; border-radius: 2px; }
.op-link { color: #1890ff; cursor: pointer; }
.op-divider { color: #e8e8e8; margin: 0 8px; }
</style>
</style>

251
pages/mall/admin/distribution/level/index.uvue
View File

@@ -1,43 +1,37 @@
<template>
<template>
<view class="admin-page">
<view class="filter-card">
<view class="filter-row">
<view class="filter-item">
<text class="label">鏄惁鏄剧ず锛?/text>
<view class="select-mock">
<text>鍏ㄩ儴</text>
<text class="arrow">鈻?/text>
</view>
<text class="label">是否显示：</text>
<view class="select-mock"><text>全部</text><text class="arrow">▼</text></view>
</view>
<view class="filter-item">
<text class="label">绛夌骇鍚嶇О锛?/text>
<input class="filter-input" placeholder="璇疯緭鍏ョ瓑绾у悕绉? />
<text class="label">等级名称：</text>
<input class="filter-input" placeholder="请输入等级名称" />
</view>
<view class="filter-btns">
<button class="btn primary" @click="onSearch">鏌ヨ</button>
<button class="btn primary" @click="onSearch">查询</button>
</view>
</view>
</view>
<view class="content-card">
<view class="action-bar">
<button class="btn primary small" @click="onAdd">娣诲姞绛夌骇</button>
<button class="btn primary small" @click="onAdd">添加等级</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-name"><text>鍚嶇О</text></view>
<view class="col col-level"><text>绛夌骇</text></view>
<view class="col col-percent"><text>涓€绾у垎浣ｆ瘮渚?/text></view>
<view class="col col-percent"><text>浜岀骇鍒嗕剑姣斾緥</text></view>
<view class="col col-stat"><text>浠诲姟鎬绘暟</text></view>
<view class="col col-stat"><text>闇€瀹屾垚鏁伴噺</text></view>
<view class="col col-status"><text>鏄惁鏄剧ず</text></view>
<view class="col col-ops"><text>鎿嶄綔</text></view>
<view class="col col-img"><text>商品图片</text></view>
<view class="col col-name"><text>名称</text></view>
<view class="col col-level"><text>等级</text></view>
<view class="col col-percent"><text>一级分佣比例</text></view>
<view class="col col-percent"><text>二级分佣比例</text></view>
<view class="col col-stat"><text>任务总数</text></view>
<view class="col col-stat"><text>需完成数量</text></view>
<view class="col col-status"><text>是否显示</text></view>
<view class="col col-ops"><text>操作</text></view>
</view>
<view class="table-body">
<view v-for="item in levelList" :key="item.id" class="table-row">
<view class="col col-id"><text>{{ item.id }}</text></view>
@@ -54,205 +48,48 @@
<switch :checked="item.show" color="#1890ff" scale="0.8" />
</view>
<view class="col col-ops">
<text class="op-link">绛夌骇浠诲姟</text>
<text class="op-link">等级任务</text>
<text class="op-divider">|</text>
<text class="op-link">缂栬緫</text>
<text class="op-link">编辑</text>
<text class="op-divider">|</text>
<text class="op-link">鍒犻櫎</text>
<text class="op-link">删除</text>
</view>
</view>
</view>
</view>
<view class="pagination">
<text class="page-info">鍏?{{ levelList.length }} 鏉?/text>
<text class="page-info">共 {{ levelList.length }} 条</text>
</view>
</view>
</view>
</template>
<script setup lang="uts">
import { ref } from 'vue'
const levelList = ref([
{ id: '1', name: '涓€绾у垎閿€鍛?, level: 1, percent1: 0.00, percent2: 0.00, taskTotal: 0, taskFinish: 0, show: true },
{ id: '2', name: '浜岀骇鍒嗛攢鍛?, level: 2, percent1: 0.00, percent2: 0.00, taskTotal: 0, taskFinish: 0, show: true },
{ id: '3', name: '涓夌骇鍒嗛攢鍛?, level: 3, percent1: 0.00, percent2: 0.00, taskTotal: 0, taskFinish: 0, show: true },
{ id: '4', name: '鍥涚骇鍒嗛攢鍛?, level: 4, percent1: 0.00, percent2: 0.00, taskTotal: 0, taskFinish: 0, show: true },
{ id: '5', name: '浜旂骇鍒嗛攢鍛?, level: 5, percent1: 0.00, percent2: 0.00, taskTotal: 0, taskFinish: 0, show: true }
{ id: '1', name: '一级分销员', level: 1, percent1: 0.00, percent2: 0.00, taskTotal: 0, taskFinish: 0, show: true },
])
function onSearch() {
uni.showToast({ title: '鏌ヨ涓?..', icon: 'none' })
}
function onAdd() {
uni.showToast({ title: '寮€濮嬫坊鍔?, icon: 'none' })
}
function onSearch() { uni.showToast({ title: '查询中...', icon: 'none' }) }
function onAdd() { uni.showToast({ title: '添加中...', icon: 'none' }) }
</script>
<style scoped lang="scss">
.admin-page {
/* padding removed */
}
.filter-card {
background: #fff;
border-radius: 4px;
padding: 24px;
margin-bottom: 16px;
}
.filter-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 24px;
}
.filter-item {
display: flex;
flex-direction: row;
align-items: center;
}
.label {
font-size: 14px;
color: #333;
}
.select-mock {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border: 1px solid #d9d9d9;
border-radius: 2px;
height: 32px;
width: 160px;
padding: 0 12px;
background: #fff;
text { font-size: 14px; color: #666; }
.arrow { font-size: 10px; color: #bfbfbf; }
}
.filter-input {
border: 1px solid #d9d9d9;
border-radius: 2px;
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;
margin: 0;
}
.btn.primary {
background: #1890ff;
border-color: #1890ff;
color: #fff;
}
.btn.small {
height: 32px;
padding: 0 12px;
}
.content-card {
background: #fff;
border-radius: 4px;
padding: 0;
}
.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: 50px; }
.col-img { width: 80px; justify-content: center; }
.col-name { width: 120px; }
.col-level { width: 80px; justify-content: center; }
.col-percent { width: 120px; justify-content: center; }
.col-stat { width: 100px; justify-content: center; }
.col-status { width: 100px; justify-content: center; }
.col-ops {
flex: 1;
justify-content: flex-end;
padding-right: 16px;
}
.table-img {
width: 32px;
height: 32px;
border-radius: 2px;
}
.op-link {
color: #1890ff;
cursor: pointer;
font-size: 14px;
}
.op-divider {
color: #e8e8e8;
margin: 0 8px;
}
.pagination {
padding: 16px 24px;
border-top: 1px solid #f0f0f0;
}
.page-info {
font-size: 14px;
color: #999;
}
</style>
.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; }
.select-mock { display: flex; flex-direction: row; align-items: center; justify-content: space-between; border: 1px solid #d9d9d9; border-radius: 2px; height: 32px; width: 160px; padding: 0 12px; background: #fff; text { font-size: 14px; color: #666; } .arrow { font-size: 10px; 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; }
.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: 50px; } .col-img { width: 80px; justify-content: center; } .col-name { width: 120px; } .col-level { width: 80px; justify-content: center; } .col-percent { width: 120px; justify-content: center; } .col-stat { width: 100px; justify-content: center; } .col-status { width: 100px; justify-content: center; } .col-ops { flex: 1; justify-content: flex-end; padding-right: 16px; }
.table-img { width: 32px; height: 32px; border-radius: 2px; }
.op-link { color: #1890ff; cursor: pointer; }
.op-divider { color: #e8e8e8; margin: 0 8px; }
.pagination { padding: 16px 24px; border-top: 1px solid #f0f0f0; }
.page-info { font-size: 14px; color: #999; }
</style>

303
pages/mall/admin/distribution/promoter/index.uvue
View File

@@ -1,51 +1,42 @@
<template>
<template>
<view class="admin-page">
<!-- 绛涢€夐潰鏉?-->
<view class="filter-card">
<view class="filter-row">
<view class="filter-item">
<text class="label">鏃堕棿閫夋嫨锛?/text>
<text class="label">时间选择：</text>
<view class="date-picker-mock">
<text class="placeholder">寮€濮嬫棩鏈?- 缁撴潫鏃ユ湡</text>
<text class="icon-calendar">馃搮</text>
<text class="placeholder">开始日期 - 结束日期</text>
<text class="icon-calendar">📅</text>
</view>
</view>
<view class="filter-item">
<text class="label">鎼滅储锛?/text>
<input class="filter-input" placeholder="璇疯緭鍏ュ鍚嶃€佺數璇濄€乁ID" />
<text class="label">搜索：</text>
<input class="filter-input" placeholder="请输入姓名、电话、UID" />
</view>
<view class="filter-btns">
<button class="btn primary" @click="onSearch">鏌ヨ</button>
<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>
<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 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 promoterList" :key="item.id" class="table-row">
<view class="col col-id"><text>{{ item.id }}</text></view>
@@ -54,9 +45,9 @@
</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>
<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>
@@ -68,18 +59,16 @@
<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-link" @click="onPromoter(item)">推广人</text>
<text class="op-divider">|</text>
<text class="op-link" @click="onMore(item)">鏇村</text>
<text class="arrow-down">鈻?/text>
<text class="op-link" @click="onMore(item)">更多</text>
<text class="arrow-down">▼</text>
</view>
</view>
</view>
</view>
<!-- 鍒嗛〉 (妯℃嫙) -->
<view class="pagination">
<text class="page-info">鍏?{{ promoterList.length }} 鏉?/text>
<text class="page-info">共 {{ promoterList.length }} 条</text>
</view>
</view>
</view>
@@ -87,219 +76,39 @@
<script setup lang="uts">
import { ref } from 'vue'
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: '82763', nickname: '1', name: '-', phone: '185****4518', level: '--', userCount: 0, orderCount: 0, orderAmount: '0.00', commissionTotal: '0.00', withdrawnAmount: 0, withdrawCount: 0, unwithdrawnAmount: 0 },
{ id: '82762', nickname: 'Ronnie', name: '-', phone: '153****0391', level: '--', userCount: 0, orderCount: 0, orderAmount: '0.00', commissionTotal: '0.00', withdrawnAmount: 0, withdrawCount: 0, unwithdrawnAmount: 0 },
{ id: '82761', nickname: 'Charon', name: '-', phone: '181****6248', level: '--', userCount: 0, orderCount: 0, orderAmount: '0.00', commissionTotal: '0.00', withdrawnAmount: 0, withdrawCount: 0, unwithdrawnAmount: 0 },
{ id: '82760', nickname: '11', name: '-', phone: '177****0265', level: '--', userCount: 0, orderCount: 0, orderAmount: '0.00', commissionTotal: '0.00', withdrawnAmount: 0, withdrawCount: 0, unwithdrawnAmount: 0 }
])
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' })
}
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 removed */
}
.filter-card {
background: #fff;
border-radius: 4px;
padding: 24px;
margin-bottom: 16px;
}
.filter-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 24px;
}
.filter-item {
display: flex;
flex-direction: row;
align-items: center;
}
.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;
border-radius: 2px;
height: 32px;
width: 220px;
padding: 0 12px;
font-size: 14px;
}
.filter-btns {
display: flex;
}
.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;
margin: 0;
}
.btn.primary {
background: #2f54eb;
border-color: #2f54eb;
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;
padding: 0;
}
.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;
font-size: 14px;
}
.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>
.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>