496 lines
13 KiB
Vue
496 lines
13 KiB
Vue
<template>
|
||
<view class="ciy-page container">
|
||
<!-- 页面头部：搜索栏 + 新增按钮 -->
|
||
<ciy-header title="成员管理" ref="header"></ciy-header>
|
||
<view class="main-header bg-white px4 py3 flex flex-center justify-between shadow-sm">
|
||
<!-- 搜索框区域 -->
|
||
<view class="search-container flex flex1 mr3 relative">
|
||
<icon class="search-icon" type="search" size="14" color="#999" />
|
||
<input
|
||
type="text"
|
||
v-model="searchKey"
|
||
placeholder="请输入姓名/头衔搜索"
|
||
class="flex1 px4 py2 pl-12 bg-gray-50 border border-gray-200 rounded-lg focus-border-primary focus-ring-1"
|
||
@confirm="getMemberList"
|
||
/>
|
||
<button class="btn btn-primary ml2" @click="getMemberList">搜索</button>
|
||
</view>
|
||
<!-- 新增成员按钮（缩小尺寸） -->
|
||
<button class="btn btn-success btn-sm" @click="goToAddMember">新增成员</button>
|
||
</view>
|
||
|
||
<!-- 状态筛选栏：按成员状态过滤（缩小按钮尺寸） -->
|
||
<view class="status-filter bg-white px4 py3 flex overflow-x-auto scrollbar-hide border-b border-gray-100">
|
||
<button
|
||
v-for="(item, key) in statusMap"
|
||
:key="key"
|
||
class="status-btn mr2 flex-none rounded-full py1 px3 transition-all duration-300"
|
||
:class="activeStatus === key ? 'status-btn-active' : 'status-btn-default'"
|
||
@click="handleStatusChange(key)"
|
||
>
|
||
{{ item }}
|
||
</button>
|
||
</view>
|
||
|
||
<!-- 成员列表区域：卡片式展示，每页6条（缩小卡片及内部元素） -->
|
||
<view class="main bg-gray-50 flex1 overflow-auto px4 py4">
|
||
<!-- 无数据提示（缩小尺寸） -->
|
||
<view v-if="memberList.length === 0" class="empty-tip txt-center py12 bg-white rounded-xl shadow-sm mx-auto w-4-5">
|
||
<view class="empty-icon bg-gray-100 w-12 h-12 rounded-full flex flex-center justify-center mx-auto mb3">
|
||
<text class="text-gray-400 text-xl">👤</text>
|
||
</view>
|
||
<view class="text-gray-400 text-base">暂无当前状态的成员数据</view>
|
||
</view>
|
||
|
||
<!-- 成员卡片网格：3列布局（缩小间距） -->
|
||
<view class="ciy-grid grid3 gap-3" v-else>
|
||
<view class="grid-item" v-for="(member, index) in memberList" :key="member.id">
|
||
<!-- 成员卡片（缩小整体尺寸） -->
|
||
<view class="member-card bg-white rounded-xl shadow-md transition-all duration-300 overflow-hidden">
|
||
<!-- 文字头像（缩小尺寸） -->
|
||
<view class="card-avatar txt-center py3">
|
||
<view
|
||
class="avatar-placeholder w-16 h-16 rounded-full border-3 border-white shadow-sm mx-auto flex flex-center justify-center"
|
||
:style="{ backgroundColor: getAvatarBgColor(member.role) }"
|
||
>
|
||
<text class="text-lg font-bold text-white">{{ member.name.substring(0, 1) }}</text>
|
||
</view>
|
||
</view>
|
||
<!-- 成员信息（缩小文字及内边距） -->
|
||
<view class="card-info txt-center px3 py4">
|
||
<view class="member-name text-lg font-bold text-gray-800 mb1">{{ member.name }}</view>
|
||
<view class="member-title text-sm text-gray-500 mb2">{{ getTitleText(member.usertitle) }}</view>
|
||
<!-- 状态标签（缩小尺寸） -->
|
||
<view class="member-status">
|
||
<span
|
||
class="px2 py1 rounded-full text-xs font-medium"
|
||
:style="{
|
||
backgroundColor: getTagBgColor(member.role),
|
||
color: '#FFFFFF'
|
||
}"
|
||
>
|
||
{{ statusMap[member.role] }}
|
||
</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 滚动加载提示（缩小尺寸） -->
|
||
<view v-if="hasMoreData" class="load-more txt-center py4 text-gray-400">
|
||
<view class="flex flex-center justify-center">
|
||
<loading class="mr2" size="12"></loading>
|
||
<text class="text-sm">下拉加载更多...</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
searchKey: '', // 搜索关键词
|
||
activeStatus: '', // 选中的状态筛选
|
||
memberList: [], // 成员列表数据
|
||
page: 1, // 当前页码
|
||
pageSize: 6, // 每页条数
|
||
hasMoreData: true, // 是否还有更多数据
|
||
|
||
// 成员状态映射
|
||
statusMap: {
|
||
10: '负责人',
|
||
20: '科研秘书',
|
||
30: '在册成员',
|
||
40: '历史成员',
|
||
50: '外部成员'
|
||
},
|
||
|
||
// 头衔映射
|
||
titleMap: {
|
||
10: '主任',
|
||
20: '副主任',
|
||
30: '顾问',
|
||
40: '名誉主任',
|
||
50: '教授',
|
||
60: '副教授',
|
||
70: '讲师',
|
||
80: '研究员',
|
||
0: '无头衔'
|
||
},
|
||
|
||
// 状态对应颜色
|
||
roleColors: {
|
||
10: '#2563EB', // 负责人-深蓝
|
||
20: '#9333EA', // 科研秘书-深紫
|
||
30: '#10B981', // 在册成员-深绿
|
||
40: '#9CA3AF', // 历史成员-灰色
|
||
50: '#F97316' // 外部成员-橙红
|
||
}
|
||
};
|
||
},
|
||
onLoad() {
|
||
// 初始化加载数据
|
||
this.activeStatus = '';
|
||
this.getMemberList();
|
||
|
||
// 绑定滚动加载事件
|
||
const main = uni.createSelectorQuery().in(this).select('.main');
|
||
main.onScroll((res) => {
|
||
const { scrollTop, scrollHeight, clientHeight } = res;
|
||
if (scrollTop + clientHeight >= scrollHeight - 100 && this.hasMoreData) {
|
||
this.page++;
|
||
this.getMemberList(true);
|
||
}
|
||
}).exec();
|
||
},
|
||
methods: {
|
||
// 获取成员列表（支持追加数据）
|
||
async getMemberList(isAppend = false) {
|
||
// 模拟数据（后续替换为后端接口）
|
||
const mockData = [
|
||
{ id: 1, name: '张三', usertitle: 10, role: 10 },
|
||
{ id: 2, name: '李四', usertitle: 50, role: 20 },
|
||
{ id: 3, name: '王五', usertitle: 80, role: 30 },
|
||
{ id: 4, name: '赵六', usertitle: 20, role: 40 },
|
||
{ id: 5, name: '孙七', usertitle: 60, role: 50 },
|
||
{ id: 6, name: '周八', usertitle: 70, role: 30 },
|
||
];
|
||
|
||
// 筛选数据（状态+搜索关键词）
|
||
let filteredData = mockData.filter(item => {
|
||
const statusMatch = this.activeStatus === '' || item.role === this.activeStatus;
|
||
const searchMatch = item.name.includes(this.searchKey) || this.titleMap[item.usertitle].includes(this.searchKey);
|
||
return statusMatch && searchMatch;
|
||
});
|
||
|
||
// 分页处理
|
||
const paginatedData = filteredData.slice((this.page - 1) * this.pageSize, this.page * this.pageSize);
|
||
|
||
// 更新列表
|
||
if (isAppend) {
|
||
this.memberList = [...this.memberList, ...paginatedData];
|
||
} else {
|
||
this.memberList = paginatedData;
|
||
}
|
||
|
||
// 判断是否还有更多数据
|
||
this.hasMoreData = this.memberList.length < filteredData.length;
|
||
},
|
||
|
||
// 切换状态筛选
|
||
handleStatusChange(status) {
|
||
this.activeStatus = status;
|
||
this.page = 1;
|
||
this.getMemberList();
|
||
},
|
||
|
||
// 跳转到新增成员页面
|
||
goToAddMember() {
|
||
uni.navigateTo({ url: '/pages/lab/useradd' });
|
||
},
|
||
|
||
// 转换头衔文本
|
||
getTitleText(usertitle) {
|
||
return this.titleMap[usertitle] || '未知头衔';
|
||
},
|
||
|
||
// 获取状态标签背景色
|
||
getTagBgColor(role) {
|
||
return this.roleColors[role] || '#E5E7EB';
|
||
},
|
||
|
||
// 获取头像背景色
|
||
getAvatarBgColor(role) {
|
||
return this.roleColors[role] || '#165DFF';
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 全局变量定义 */
|
||
:root {
|
||
--primary: #165DFF;
|
||
--success: #00B42A;
|
||
--gray-50: #F9FAFB;
|
||
--gray-100: #F3F4F6;
|
||
--gray-200: #E5E7EB;
|
||
--gray-400: #9CA3AF;
|
||
--gray-500: #6B7280;
|
||
--gray-800: #1F2937;
|
||
}
|
||
|
||
/* 容器布局 */
|
||
.container {
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 头部样式 */
|
||
.main-header {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 10;
|
||
background-color: white;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||
padding: 12px 16px;
|
||
}
|
||
|
||
.search-container {
|
||
align-items: center;
|
||
}
|
||
|
||
.search-icon {
|
||
position: absolute;
|
||
left: 12px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.pl-12 {
|
||
padding-left: 2.5rem; /* 缩小内边距 */
|
||
}
|
||
|
||
/* 按钮样式（整体缩小） */
|
||
.btn {
|
||
border-radius: 8px;
|
||
font-weight: 500;
|
||
transition: all 0.3s ease;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.btn-primary {
|
||
background-color: var(--primary);
|
||
color: white;
|
||
padding: 6px 12px; /* 缩小内边距 */
|
||
border: none;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background-color: #0E4BDB;
|
||
}
|
||
|
||
.btn-success {
|
||
background-color: var(--success);
|
||
color: white;
|
||
border: none;
|
||
}
|
||
|
||
.btn-sm {
|
||
padding: 6px 12px; /* 小按钮内边距 */
|
||
font-size: 13px;
|
||
}
|
||
|
||
.btn-success:hover {
|
||
background-color: #009A22;
|
||
}
|
||
|
||
/* 状态筛选栏（缩小整体尺寸） */
|
||
.status-filter {
|
||
position: sticky;
|
||
top: 52px; /* 对应头部缩小后的高度 */
|
||
z-index: 9;
|
||
background-color: white;
|
||
border-bottom: 1px solid var(--gray-200);
|
||
padding: 12px 16px;
|
||
}
|
||
|
||
.scrollbar-hide::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.status-btn {
|
||
border: none;
|
||
font-weight: 500;
|
||
border-radius: 10px;
|
||
padding: 4px 12px; /* 缩小按钮内边距 */
|
||
margin-right: 8px; /* 缩小按钮间距 */
|
||
transition: all 0.3s ease;
|
||
font-size: 13px; /* 缩小文字尺寸 */
|
||
}
|
||
|
||
.status-btn-default {
|
||
background-color: var(--gray-50);
|
||
color: var(--gray-500);
|
||
}
|
||
|
||
.status-btn-default:hover {
|
||
background-color: var(--gray-100);
|
||
}
|
||
|
||
.status-btn-active {
|
||
background-color: #165DFF !important;
|
||
color: #FFFFFF !important;
|
||
}
|
||
|
||
/* 成员列表（缩小内边距） */
|
||
.main {
|
||
flex: 1;
|
||
background-color: var(--gray-50);
|
||
padding: 16px; /* 缩小内边距 */
|
||
}
|
||
|
||
.grid3 {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 16px; /* 缩小网格间距 */
|
||
}
|
||
|
||
/* 成员卡片（缩小整体尺寸） */
|
||
.member-card {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
background-color: white;
|
||
border-radius: 10px; /* 缩小圆角 */
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||
}
|
||
|
||
.member-card:hover {
|
||
box-shadow: 0 6px 16px -5px rgba(0, 0, 0, 0.05), 0 4px 8px -6px rgba(0, 0, 0, 0.03);
|
||
transform: translateY(-1px); /* 缩小hover上移距离 */
|
||
}
|
||
|
||
/* 头像区域（缩小尺寸） */
|
||
.card-avatar {
|
||
width: 100%;
|
||
background: linear-gradient(to bottom, #EFF6FF, #EEF2FF);
|
||
padding: 12px 0; /* 缩小内边距 */
|
||
text-align: center;
|
||
}
|
||
|
||
.avatar-placeholder {
|
||
width: 4rem; /* 缩小头像尺寸 */
|
||
height: 4rem;
|
||
border-radius: 50%;
|
||
border: 3px solid white;
|
||
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1rem; /* 缩小文字尺寸 */
|
||
}
|
||
|
||
/* 成员信息（缩小内边距和文字尺寸） */
|
||
.card-info {
|
||
padding: 16px 12px; /* 缩小内边距 */
|
||
text-align: center;
|
||
}
|
||
|
||
.member-name {
|
||
font-size: 1rem; /* 缩小姓名文字 */
|
||
font-weight: 700;
|
||
color: var(--gray-800);
|
||
margin-bottom: 4px; /* 缩小间距 */
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.member-title {
|
||
font-size: 12px; /* 缩小头衔文字 */
|
||
color: var(--gray-500);
|
||
margin-bottom: 8px; /* 缩小间距 */
|
||
line-height: 1.2;
|
||
}
|
||
|
||
/* 无数据提示（缩小尺寸） */
|
||
.empty-tip {
|
||
padding: 32px 16px; /* 缩小内边距 */
|
||
width: 80%;
|
||
margin: 0 auto;
|
||
background-color: white;
|
||
border-radius: 10px; /* 缩小圆角 */
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||
text-align: center;
|
||
}
|
||
|
||
.empty-icon {
|
||
width: 3rem; /* 缩小图标尺寸 */
|
||
height: 3rem;
|
||
border-radius: 50%;
|
||
background-color: var(--gray-100);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 auto 12px; /* 缩小间距 */
|
||
font-size: 1rem; /* 缩小图标文字 */
|
||
}
|
||
|
||
/* 滚动加载（缩小尺寸） */
|
||
.load-more {
|
||
margin-top: 16px; /* 缩小间距 */
|
||
font-size: 12px; /* 缩小文字尺寸 */
|
||
color: var(--gray-400);
|
||
text-align: center;
|
||
}
|
||
|
||
/* 聚焦样式 */
|
||
.focus-border-primary:focus {
|
||
border-color: var(--primary);
|
||
}
|
||
|
||
.focus-ring-1:focus {
|
||
box-shadow: 0 0 0 1px var(--primary);
|
||
}
|
||
|
||
/* 文本颜色辅助类（新增小尺寸文字类） */
|
||
.text-white {
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.text-gray-400 {
|
||
color: #9CA3AF;
|
||
}
|
||
|
||
.text-gray-500 {
|
||
color: #6B7280;
|
||
}
|
||
|
||
.text-gray-800 {
|
||
color: #1F2937;
|
||
}
|
||
|
||
.text-xl {
|
||
font-size: 1.25rem;
|
||
}
|
||
|
||
.text-lg {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.text-base {
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.text-sm {
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
.text-xs {
|
||
font-size: 0.625rem;
|
||
}
|
||
|
||
/* 内边距辅助类（缩小尺寸） */
|
||
.px2 {
|
||
padding-left: 0.5rem;
|
||
padding-right: 0.5rem;
|
||
}
|
||
|
||
.py1 {
|
||
padding-top: 0.25rem;
|
||
padding-bottom: 0.25rem;
|
||
}
|
||
|
||
.mb1 {
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.mb2 {
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
</style> |