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-03 21:35:57 +08:00
parent 93b42a277a
commit 3922409a25
105 changed files with 14758 additions and 5861 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
pages/mall/admin/user/list.uvue
View File

@@ -87,7 +87,9 @@
<!-- 表格内容 -->
<view class="table-body">
<view v-for="user in userList" :key="user.id" class="table-row">
<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-id"><text>{{ user.id }}</text></view>
@@ -107,9 +109,29 @@
<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="onDetail(user)">详情</text>
<view class="op-divider"></view>
<text class="op-link more">更多 ⌵</text>
<text class="op-link" @click.stop="onDetail(user)">详情</text>
<view class="op-divider">|</view>
<view class="more-hover-container"
@mouseover="activeDropdownId = user.id"
@mouseleave="activeDropdownId = null"
@click.stop="activeDropdownId = (activeDropdownId === user.id ? null : user.id)"
>
<view class="more-trigger pointer">
<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>
</view>
</view>
</view>
</view>
</view>
</view>
@@ -129,6 +151,7 @@ import { ref } from 'vue'
const activeTab = ref(0)
const tabs = ['全部', '微信公众号', '微信小程序', 'H5', 'PC', 'APP']
const isAllChecked = ref(false)
const activeDropdownId = ref<string | null>(null)
const userList = ref([
{ id: '77414', avatar: 'https://img.crmeb.com/crmeb_demo/77414.png', nickname: '199****0268', isMember: '否', level: '无', group: '无', spreadLevel: '', phone: '199****0268', userType: '公众号', balance: '88888.00', checked: false },
@@ -287,7 +310,7 @@ function onDetail(user: any) {
background: #fff;
border-radius: 4px;
padding: 0;
overflow: hidden;
overflow: visible; /* 必须 visible 以显示下拉菜单 */
}
/* Tabs */
@@ -329,6 +352,7 @@ function onDetail(user: any) {
/* 表格 */
.table-container {
padding: 0 24px 24px;
overflow: visible;
}
.table-header {
@@ -345,6 +369,8 @@ function onDetail(user: any) {
border-bottom: 1px solid #f0f0f0;
padding: 16px 0;
align-items: center;
position: relative;
overflow: visible;
&:hover {
background: #fafafa;
@@ -371,7 +397,83 @@ function onDetail(user: any) {
.col-phone { width: 130px; }
.col-type { width: 90px; }
.col-balance { width: 110px; }
.col-ops { flex: 1; min-width: 120px; justify-content: flex-end; padding-right: 16px; }
.col-ops {
display: flex;
flex-direction: row;
width: 130px;
justify-content: flex-end;
padding-right: 16px;
align-items: center;
}
.more-hover-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 32px;
min-width: 46px; /* 增加点击和悬停范围 */
padding: 0 4px;
cursor: pointer;
}
.more-trigger {
display: flex;
flex-direction: row;
align-items: center;
gap: 2px;
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; /* 增加缓冲区防止鼠标移出 */
z-index: 9999;
}
.dropdown-arrow-top {
position: absolute;
top: 2px;
right: 25px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
}
.dropdown-menu-list {
background: #fff;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
padding: 6px 0;
}
.menu-item {
padding: 10px 16px;
font-size: 14px;
color: #606266;
text-align: center;
line-height: 1.4;
&:hover {
background-color: #f5f7fa;
color: #2f54eb;
}
}
.danger-item {
&:hover {
color: #ff4d4f !important;
}
}
.pointer { cursor: pointer; }
.table-header .col {
color: #5c5c5c;
@@ -407,16 +509,11 @@ function onDetail(user: any) {
color: #2f54eb;
cursor: pointer;
font-size: 14px;
&.more {
margin-left: 4px;
}
}
.op-divider {
width: 1px;
height: 14px;
background: #e8e8e8;
color: #e8e8e8;
font-size: 12px;
margin: 0 8px;
}