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 12:06:33 +08:00
parent b7545173c6
commit d00f0b7412
83 changed files with 3901 additions and 2354 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
pages/mall/admin/user/management/index.uvue
View File

@@ -1,46 +1,46 @@
<template>
<template>
<view class="user-list-page">
<!-- 筛选面板 -->
<!-- 绛涢€夐潰鏉?-->
<view class="filter-card">
<view class="filter-row">
<view class="filter-item">
<text class="label">用户搜索：</text>
<text class="label">鐢ㄦ埛鎼滅储锛?/text>
<view class="input-group">
<view class="compact-select">
<text>请选择</text>
<text class="arrow">▼</text>
<text>璇烽€夋嫨</text>
<text class="arrow">鈻?/text>
</view>
<input class="filter-input" placeholder="请输入用户" />
<input class="filter-input" placeholder="璇疯緭鍏ョ敤鎴? />
</view>
</view>
<view class="filter-item">
<text class="label">用户等级：</text>
<text class="label">鐢ㄦ埛绛夌骇锛?/text>
<view class="filter-select">
<text class="select-placeholder">请选择用户等级</text>
<text class="arrow">▼</text>
<text class="select-placeholder">璇烽€夋嫨鐢ㄦ埛绛夌骇</text>
<text class="arrow">鈻?/text>
</view>
</view>
<view class="filter-item">
<text class="label">用户分组：</text>
<text class="label">鐢ㄦ埛鍒嗙粍锛?/text>
<view class="filter-select">
<text class="select-placeholder">请选择用户分组</text>
<text class="arrow">▼</text>
<text class="select-placeholder">璇烽€夋嫨鐢ㄦ埛鍒嗙粍</text>
<text class="arrow">鈻?/text>
</view>
</view>
<view class="filter-btns">
<button class="btn primary" @click="onSearch">搜索</button>
<button class="btn" @click="onReset">重置</button>
<text class="expand-btn">展开 ∨</text>
<button class="btn primary" @click="onSearch">鎼滅储</button>
<button class="btn" @click="onReset">閲嶇疆</button>
<text class="expand-btn">灞曞紑 鈭?/text>
</view>
</view>
</view>
<!-- 内容卡片 -->
<!-- 鍐呭鍗＄墖 -->
<view class="content-card">
<!-- 平台切换 Tabs -->
<!-- 骞冲彴鍒囨崲 Tabs -->
<view class="tabs-row">
<view
v-for="(tab, index) in tabs"
@@ -53,45 +53,45 @@
</view>
</view>
<!-- 操作按钮行 -->
<!-- 鎿嶄綔鎸夐挳琛?-->
<view class="action-bar">
<button class="btn primary small" @click="onAddUser">添加用户</button>
<button class="btn ghost small">发送优惠券</button>
<button class="btn ghost small">发送图文消息</button>
<button class="btn ghost small">批量设置分组</button>
<button class="btn ghost small">批量设置标签</button>
<button class="btn ghost small">导出</button>
<button class="btn primary small" @click="onAddUser">娣诲姞鐢ㄦ埛</button>
<button class="btn ghost small">鍙戦€佷紭鎯犲埜</button>
<button class="btn ghost small">鍙戦€佸浘鏂囨秷鎭?/button>
<button class="btn ghost small">鎵归噺璁剧疆鍒嗙粍</button>
<button class="btn ghost small">鎵归噺璁剧疆鏍囩</button>
<button class="btn ghost small">瀵煎嚭</button>
</view>
<!-- 用户列表表格 -->
<!-- 鐢ㄦ埛鍒楄〃琛ㄦ牸 -->
<view class="table-container">
<!-- 表头 -->
<!-- 琛ㄥご -->
<view class="table-header">
<view class="col col-check"><checkbox :checked="isAllChecked" /></view>
<view class="col col-expand"></view>
<view class="col col-id"><text>用户ID</text></view>
<view class="col col-avatar"><text>头像</text></view>
<view class="col col-name"><text>姓名</text></view>
<view class="col col-member"><text>付费会员</text></view>
<view class="col col-level"><text>用户等级</text></view>
<view class="col col-group"><text>分组</text></view>
<view class="col col-spread"><text>分销等级</text></view>
<view class="col col-phone"><text>手机号</text></view>
<view class="col col-type"><text>用户类型</text></view>
<view class="col col-id"><text>鐢ㄦ埛ID</text></view>
<view class="col col-avatar"><text>澶村儚</text></view>
<view class="col col-name"><text>濮撳悕</text></view>
<view class="col col-member"><text>浠樿垂浼氬憳</text></view>
<view class="col col-level"><text>鐢ㄦ埛绛夌骇</text></view>
<view class="col col-group"><text>鍒嗙粍</text></view>
<view class="col col-spread"><text>鍒嗛攢绛夌骇</text></view>
<view class="col col-phone"><text>鎵嬫満鍙?/text></view>
<view class="col col-type"><text>鐢ㄦ埛绫诲瀷</text></view>
<view class="col col-balance sortable">
<text>余额</text>
<text class="sort-icon">↕</text>
<text>浣欓</text>
<text class="sort-icon">鈫?/text>
</view>
<view class="col col-ops"><text>操作</text></view>
<view class="col col-ops"><text>鎿嶄綔</text></view>
</view>
<!-- 表格内容 -->
<!-- 琛ㄦ牸鍐呭 -->
<view class="table-body">
<view v-for="user in userList" :key="user.id" class="table-row"
:style="{ zIndex: activeDropdownId === user.id ? 1000 : 1 }"
>
<view class="col col-check"><checkbox :checked="user.checked" /></view>
<view class="col col-expand"><text class="expand-arrow">›</text></view>
<view class="col col-expand"><text class="expand-arrow">鈥?/text></view>
<view class="col col-id"><text>{{ user.id }}</text></view>
<view class="col col-avatar">
<image class="avatar-img" :src="user.avatar" mode="aspectFill" />
@@ -100,7 +100,7 @@
<text class="name-text">{{ user.nickname }}</text>
</view>
<view class="col col-member">
<text :class="user.isMember === '是' ? 'status-yes' : 'status-no'">{{ user.isMember }}</text>
<text :class="user.isMember === '鏄? ? 'status-yes' : 'status-no'">{{ user.isMember }}</text>
</view>
<view class="col col-level"><text>{{ user.level }}</text></view>
<view class="col col-group"><text>{{ user.group }}</text></view>
@@ -109,7 +109,7 @@
<view class="col col-type"><text>{{ user.userType }}</text></view>
<view class="col col-balance"><text>{{ user.balance }}</text></view>
<view class="col col-ops">
<text class="op-link" @click.stop="onDetail(user)">详情</text>
<text class="op-link" @click.stop="onDetail(user)">璇︽儏</text>
<view class="op-divider">|</view>
<view class="more-hover-container"
@mouseover="activeDropdownId = user.id"
@@ -117,18 +117,18 @@
@click.stop="activeDropdownId = (activeDropdownId === user.id ? null : user.id)"
>
<view class="more-trigger pointer">
<text class="op-link">更多</text>
<text class="arrow">∨</text>
<text class="op-link">鏇村</text>
<text class="arrow">鈭?/text>
</view>
<view class="dropdown-list-box" v-if="activeDropdownId === user.id">
<view class="dropdown-arrow-top"></view>
<view class="dropdown-menu-list">
<text class="menu-item" @click.stop="uni.showToast({title:'修改余额', icon:'none'})">修改余额</text>
<text class="menu-item" @click.stop="uni.showToast({title:'修改积分', icon:'none'})">修改积分</text>
<text class="menu-item" @click.stop="uni.showToast({title:'赠送会员', icon:'none'})">赠送会员</text>
<text class="menu-item" @click.stop="uni.showToast({title:'设置分组', icon:'none'})">设置分组</text>
<text class="menu-item" @click.stop="uni.showToast({title:'设置标签', icon:'none'})">设置标签</text>
<text class="menu-item" @click.stop="uni.showToast({title:'修改上级推广人', icon:'none'})">修改上级推广人</text>
<text class="menu-item" @click.stop="uni.showToast({title:'淇敼浣欓', icon:'none'})">淇敼浣欓</text>
<text class="menu-item" @click.stop="uni.showToast({title:'淇敼绉垎', icon:'none'})">淇敼绉垎</text>
<text class="menu-item" @click.stop="uni.showToast({title:'璧犻€佷細鍛?, icon:'none'})">璧犻€佷細鍛?/text>
<text class="menu-item" @click.stop="uni.showToast({title:'璁剧疆鍒嗙粍', icon:'none'})">璁剧疆鍒嗙粍</text>
<text class="menu-item" @click.stop="uni.showToast({title:'璁剧疆鏍囩', icon:'none'})">璁剧疆鏍囩</text>
<text class="menu-item" @click.stop="uni.showToast({title:'淇敼涓婄骇鎺ㄥ箍浜?, icon:'none'})">淇敼涓婄骇鎺ㄥ箍浜?/text>
</view>
</view>
</view>
@@ -137,9 +137,9 @@
</view>
</view>
<!-- 分页区域 (模拟) -->
<!-- 鍒嗛〉鍖哄煙 (妯℃嫙) -->
<view class="pagination">
<text class="page-info">共 80834 条数据</text>
<text class="page-info">鍏?80834 鏉℃暟鎹?/text>
</view>
</view>
</view>
@@ -149,47 +149,47 @@
import { ref } from 'vue'
const activeTab = ref(0)
const tabs = ['全部', '微信公众号', '微信小程序', 'H5', 'PC', 'APP']
const tabs = ['鍏ㄩ儴', '寰俊鍏紬鍙?, '寰俊灏忕▼搴?, 'H5', 'PC', 'APP']
const isAllChecked = ref(false)
const activeDropdownId = ref<string | null>(null)
const userList = ref([
{ id: '77414', avatar: '/static/logo.png', nickname: '199****0268', isMember: '否', level: '无', group: '无', spreadLevel: '', phone: '199****0268', userType: '公众号', balance: '88888.00', checked: false },
{ id: '75311', avatar: '/static/logo.png', nickname: 'wljbhg', isMember: '否', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100002.00', checked: false },
{ id: '75305', avatar: '/static/logo.png', nickname: '相见欢', isMember: '否', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
{ id: '75296', avatar: '/static/logo.png', nickname: '..', isMember: '否', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
{ id: '75293', avatar: '/static/logo.png', nickname: '钟(钏)华', isMember: '否', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
{ id: '75289', avatar: '/static/logo.png', nickname: '小二上酒', isMember: '否', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
{ id: '75257', avatar: '/static/logo.png', nickname: '5+7', isMember: '是', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
{ id: '75226', avatar: '/static/logo.png', nickname: '慢步前行', isMember: '是', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
{ id: '75211', avatar: '/static/logo.png', nickname: '难得糊涂', isMember: '否', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false }
{ id: '77414', avatar: '/static/logo.png', nickname: '199****0268', isMember: '鍚?, level: '鏃?, group: '鏃?, spreadLevel: '', phone: '199****0268', userType: '鍏紬鍙?, balance: '88888.00', checked: false },
{ id: '75311', avatar: '/static/logo.png', nickname: 'wljbhg', isMember: '鍚?, level: '鏃?, group: 'A绫诲鎴?, spreadLevel: '', phone: '', userType: '鍏紬鍙?, balance: '100002.00', checked: false },
{ id: '75305', avatar: '/static/logo.png', nickname: '鐩歌娆?, isMember: '鍚?, level: '鏃?, group: 'A绫诲鎴?, spreadLevel: '', phone: '', userType: '鍏紬鍙?, balance: '100000.00', checked: false },
{ id: '75296', avatar: '/static/logo.png', nickname: '..', isMember: '鍚?, level: '鏃?, group: 'A绫诲鎴?, spreadLevel: '', phone: '', userType: '鍏紬鍙?, balance: '100000.00', checked: false },
{ id: '75293', avatar: '/static/logo.png', nickname: '閽?閽?鍗?, isMember: '鍚?, level: '鏃?, group: 'A绫诲鎴?, spreadLevel: '', phone: '', userType: '鍏紬鍙?, balance: '100000.00', checked: false },
{ id: '75289', avatar: '/static/logo.png', nickname: '灏忎簩涓婇厭', isMember: '鍚?, level: '鏃?, group: 'A绫诲鎴?, spreadLevel: '', phone: '', userType: '鍏紬鍙?, balance: '100000.00', checked: false },
{ id: '75257', avatar: '/static/logo.png', nickname: '5+7', isMember: '鏄?, level: '鏃?, group: 'A绫诲鎴?, spreadLevel: '', phone: '', userType: '鍏紬鍙?, balance: '100000.00', checked: false },
{ id: '75226', avatar: '/static/logo.png', nickname: '鎱㈡鍓嶈', isMember: '鏄?, level: '鏃?, group: 'A绫诲鎴?, spreadLevel: '', phone: '', userType: '鍏紬鍙?, balance: '100000.00', checked: false },
{ id: '75211', avatar: '/static/logo.png', nickname: '闅惧緱绯婃秱', isMember: '鍚?, level: '鏃?, group: 'A绫诲鎴?, spreadLevel: '', phone: '', userType: '鍏紬鍙?, balance: '100000.00', checked: false }
])
function onSearch() {
uni.showToast({ title: '搜索中...', icon: 'none' })
uni.showToast({ title: '鎼滅储涓?..', icon: 'none' })
}
function onReset() {
uni.showToast({ title: '已重置', icon: 'none' })
uni.showToast({ title: '宸查噸缃?, icon: 'none' })
}
function onAddUser() {
uni.showToast({ title: '添加用户', icon: 'none' })
uni.showToast({ title: '娣诲姞鐢ㄦ埛', icon: 'none' })
}
function onDetail(user: any) {
uni.showToast({ title: '查看用户: ' + user.id, icon: 'none' })
uni.showToast({ title: '鏌ョ湅鐢ㄦ埛: ' + user.id, icon: 'none' })
}
</script>
<style scoped lang="scss">
.user-list-page {
padding: 16px;
background-color: #f0f2f5;
min-height: 100vh;
/* padding removed */
}
/* 筛选卡片 */
/* 绛涢€夊崱鐗?*/
.filter-card {
background: #fff;
border-radius: 4px;
@@ -305,12 +305,12 @@ function onDetail(user: any) {
cursor: pointer;
}
/* 内容卡片 */
/* 鍐呭鍗＄墖 */
.content-card {
background: #fff;
border-radius: 4px;
padding: 0;
overflow: visible; /* 必须 visible 以显示下拉菜单 */
overflow: visible; /* 蹇呴』 visible 浠ユ樉绀轰笅鎷夎彍鍗?*/
}
/* Tabs */
@@ -341,7 +341,7 @@ function onDetail(user: any) {
}
}
/* 操作栏 */
/* 鎿嶄綔鏍?*/
.action-bar {
padding: 16px 24px;
display: flex;
@@ -349,7 +349,7 @@ function onDetail(user: any) {
gap: 12px;
}
/* 表格 */
/* 琛ㄦ牸 */
.table-container {
padding: 0 24px 24px;
overflow: visible;
@@ -412,7 +412,7 @@ function onDetail(user: any) {
align-items: center;
justify-content: center;
height: 32px;
min-width: 46px; /* 增加点击和悬停范围 */
min-width: 46px; /* 澧炲姞鐐瑰嚮鍜屾偓鍋滆寖鍥?*/
padding: 0 4px;
cursor: pointer;
}
@@ -422,16 +422,16 @@ function onDetail(user: any) {
flex-direction: row;
align-items: center;
gap: 2px;
pointer-events: none; /* 确保事件冒泡到 container */
pointer-events: none; /* 纭繚浜嬩欢鍐掓场鍒?container */
.arrow { font-size: 10px; color: #2f54eb; margin-left: 2px; }
}
.dropdown-list-box {
position: absolute;
top: 30px;
right: -5px; /* 稍微向左移动一点 */
width: 140px; /* 增加宽度以容纳长文字 */
padding-top: 10px; /* 增加缓冲区防止鼠标移出 */
right: -5px; /* 绋嶅井鍚戝乏绉诲姩涓€鐐?*/
width: 140px; /* 澧炲姞瀹藉害浠ュ绾抽暱鏂囧瓧 */
padding-top: 10px; /* 澧炲姞缂撳啿鍖洪槻姝㈤紶鏍囩Щ鍑?*/
z-index: 9999;
}
@@ -530,3 +530,4 @@ function onDetail(user: any) {
color: #999;
}
</style>