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

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>