534 lines
15 KiB
Plaintext
534 lines
15 KiB
Plaintext
<template>
|
|
<view class="user-list-page">
|
|
<!-- 绛涢€夐潰鏉?-->
|
|
<view class="filter-card">
|
|
<view class="filter-row">
|
|
<view class="filter-item">
|
|
<text class="label">鐢ㄦ埛鎼滅储锛?/text>
|
|
<view class="input-group">
|
|
<view class="compact-select">
|
|
<text>璇烽€夋嫨</text>
|
|
<text class="arrow">鈻?/text>
|
|
</view>
|
|
<input class="filter-input" placeholder="璇疯緭鍏ョ敤鎴? />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="filter-item">
|
|
<text class="label">鐢ㄦ埛绛夌骇锛?/text>
|
|
<view class="filter-select">
|
|
<text class="select-placeholder">璇烽€夋嫨鐢ㄦ埛绛夌骇</text>
|
|
<text class="arrow">鈻?/text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="filter-item">
|
|
<text class="label">鐢ㄦ埛鍒嗙粍锛?/text>
|
|
<view class="filter-select">
|
|
<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>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 鍐呭鍗＄墖 -->
|
|
<view class="content-card">
|
|
<!-- 骞冲彴鍒囨崲 Tabs -->
|
|
<view class="tabs-row">
|
|
<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="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>
|
|
</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-balance sortable">
|
|
<text>浣欓</text>
|
|
<text class="sort-icon">鈫?/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-id"><text>{{ user.id }}</text></view>
|
|
<view class="col col-avatar">
|
|
<image class="avatar-img" :src="user.avatar" mode="aspectFill" />
|
|
</view>
|
|
<view class="col col-name">
|
|
<text class="name-text">{{ user.nickname }}</text>
|
|
</view>
|
|
<view class="col col-member">
|
|
<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>
|
|
<view class="col col-spread"><text>{{ user.spreadLevel }}</text></view>
|
|
<view class="col col-phone"><text>{{ user.phone }}</text></view>
|
|
<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>
|
|
<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>
|
|
</view>
|
|
|
|
<!-- 鍒嗛〉鍖哄煙 (妯℃嫙) -->
|
|
<view class="pagination">
|
|
<text class="page-info">鍏?80834 鏉℃暟鎹?/text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
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: '/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' })
|
|
}
|
|
|
|
function onReset() {
|
|
uni.showToast({ title: '宸查噸缃?, icon: 'none' })
|
|
}
|
|
|
|
function onAddUser() {
|
|
uni.showToast({ title: '娣诲姞鐢ㄦ埛', icon: 'none' })
|
|
}
|
|
|
|
function onDetail(user: any) {
|
|
uni.showToast({ title: '鏌ョ湅鐢ㄦ埛: ' + user.id, icon: 'none' })
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.user-list-page {
|
|
/* padding removed */
|
|
|
|
|
|
}
|
|
|
|
/* 绛涢€夊崱鐗?*/
|
|
.filter-card {
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
padding: 24px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.filter-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 24px;
|
|
}
|
|
|
|
.filter-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.label {
|
|
font-size: 14px;
|
|
color: #333;
|
|
width: 70px;
|
|
}
|
|
|
|
.input-group {
|
|
display: flex;
|
|
flex-direction: row;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 2px;
|
|
height: 32px;
|
|
width: 260px;
|
|
}
|
|
|
|
.compact-select {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: 0 12px;
|
|
border-right: 1px solid #d9d9d9;
|
|
background: #fafafa;
|
|
text { font-size: 14px; color: #666; }
|
|
.arrow { font-size: 10px; margin-left: 4px; color: #bfbfbf; }
|
|
}
|
|
|
|
.filter-input {
|
|
flex: 1;
|
|
height: 30px;
|
|
padding: 0 12px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.filter-select {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 2px;
|
|
height: 32px;
|
|
width: 220px;
|
|
padding: 0 12px;
|
|
background: #fff;
|
|
}
|
|
|
|
.select-placeholder { font-size: 14px; color: #bfbfbf; }
|
|
.arrow { font-size: 10px; color: #bfbfbf; }
|
|
|
|
.filter-btns {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.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: #2f54eb;
|
|
border-color: #2f54eb;
|
|
background: #fff;
|
|
}
|
|
|
|
.btn.small {
|
|
height: 28px;
|
|
padding: 0 12px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.expand-btn {
|
|
font-size: 14px;
|
|
color: #2f54eb;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 鍐呭鍗＄墖 */
|
|
.content-card {
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
padding: 0;
|
|
overflow: visible; /* 蹇呴』 visible 浠ユ樉绀轰笅鎷夎彍鍗?*/
|
|
}
|
|
|
|
/* Tabs */
|
|
.tabs-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 0 24px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.tab-item {
|
|
padding: 16px 20px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
text { font-size: 15px; color: #666; }
|
|
|
|
&.active {
|
|
text { color: #2f54eb; font-weight: 500; }
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: #2f54eb;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 鎿嶄綔鏍?*/
|
|
.action-bar {
|
|
padding: 16px 24px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 12px;
|
|
}
|
|
|
|
/* 琛ㄦ牸 */
|
|
.table-container {
|
|
padding: 0 24px 24px;
|
|
overflow: visible;
|
|
}
|
|
|
|
.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: 16px 0;
|
|
align-items: center;
|
|
position: relative;
|
|
overflow: visible;
|
|
|
|
&:hover {
|
|
background: #fafafa;
|
|
}
|
|
}
|
|
|
|
.col {
|
|
padding: 0 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
|
|
.col-check { width: 40px; justify-content: center; }
|
|
.col-expand { width: 30px; justify-content: center; }
|
|
.col-id { width: 80px; }
|
|
.col-avatar { width: 80px; justify-content: center; }
|
|
.col-name { width: 140px; }
|
|
.col-member { width: 90px; justify-content: center; }
|
|
.col-level { width: 90px; justify-content: center; }
|
|
.col-group { width: 110px; justify-content: center; }
|
|
.col-spread { width: 110px; justify-content: center; }
|
|
.col-phone { width: 130px; }
|
|
.col-type { width: 90px; }
|
|
.col-balance { width: 110px; }
|
|
.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;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.sort-icon {
|
|
font-size: 12px;
|
|
margin-left: 4px;
|
|
color: #bfbfbf;
|
|
}
|
|
|
|
.expand-arrow {
|
|
color: #bfbfbf;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.avatar-img {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 4px;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.name-text {
|
|
font-weight: 400;
|
|
}
|
|
|
|
.status-yes { color: #52c41a; }
|
|
.status-no { color: #ff4d4f; }
|
|
|
|
.op-link {
|
|
color: #2f54eb;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.op-divider {
|
|
color: #e8e8e8;
|
|
font-size: 12px;
|
|
margin: 0 8px;
|
|
}
|
|
|
|
.pagination {
|
|
padding: 16px 24px;
|
|
border-top: 1px solid #f0f0f0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.page-info {
|
|
font-size: 14px;
|
|
color: #999;
|
|
}
|
|
</style>
|
|
|