列表页面美化
This commit is contained in:
WindowBird
parent
d7d8489e2b
commit
d2f989b9c1
|
|
@ -88,7 +88,12 @@
|
|||
<!-- 操作按钮 -->
|
||||
<view class="action-buttons">
|
||||
<uv-button type="primary" size="small" @click="handleSearch">搜索</uv-button>
|
||||
<uv-button type="default" size="small" @click="handleReset">重置</uv-button>
|
||||
<uv-button type="primary" :plain="true" size="small" @click="handleReset">重置</uv-button>
|
||||
<template v-if="isAdmin">
|
||||
<uv-button type="primary" size="small" @click="handleCreate">+ 新增</uv-button>
|
||||
<uv-button type="warning" size="small" @click="handleEdit">修改</uv-button>
|
||||
<uv-button type="error" size="small" @click="handleDelete">删除</uv-button>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
|
@ -99,37 +104,35 @@
|
|||
@scrolltolower="handleScrollToLower"
|
||||
>
|
||||
<view class="notice-container">
|
||||
<template v-if="isAdmin">
|
||||
<!-- 管理员操作按钮 -->
|
||||
<view class="admin-action-row">
|
||||
<uv-button type="primary" size="small" @click="handleCreate">+ 新增</uv-button>
|
||||
<uv-button type="warning" size="small" @click="handleEdit">修改</uv-button>
|
||||
<uv-button type="error" size="small" plain @click="handleDelete">删除</uv-button>
|
||||
</view>
|
||||
<!-- 公告卡片列表 -->
|
||||
<view
|
||||
class="notice-card"
|
||||
v-for="notice in notices"
|
||||
:key="notice.id"
|
||||
:class="{
|
||||
'admin-selectable': isAdmin,
|
||||
'selected': isAdmin && isNoticeSelected(notice.id)
|
||||
}"
|
||||
@click="goToNoticeDetail(notice)"
|
||||
>
|
||||
|
||||
<!-- 管理员表格视图 -->
|
||||
<view class="notice-table">
|
||||
<view class="table-header">
|
||||
<text class="table-cell select" @click.stop="handleSelectAll">
|
||||
<view class="checkbox-indicator" :class="{ checked: isAllSelected }"></view>
|
||||
</text>
|
||||
<text class="table-cell title">标题</text>
|
||||
<text class="table-cell level">重要程度</text>
|
||||
<!-- <text class="table-cell receive">接收对象</text>-->
|
||||
<!-- <text class="table-cell creator">创建人</text>-->
|
||||
<text class="table-cell time">创建时间</text>
|
||||
</view>
|
||||
<view
|
||||
class="table-row"
|
||||
v-for="notice in notices"
|
||||
:key="notice.id"
|
||||
:class="{ selected: isNoticeSelected(notice.id) }"
|
||||
@click="goToNoticeDetail(notice)"
|
||||
>
|
||||
<view class="table-cell select" @click.stop="toggleNoticeSelection(notice.id)">
|
||||
<view class="checkbox-indicator" :class="{ checked: isNoticeSelected(notice.id) }"></view>
|
||||
</view>
|
||||
<text class="table-cell title" :class="{ pinned: notice.top }">
|
||||
|
||||
<!-- 标题和标签行 -->
|
||||
<view class="notice-header">
|
||||
|
||||
<view class="notice-title-row">
|
||||
<template v-if="isAdmin">
|
||||
<view
|
||||
class="card-select-btn"
|
||||
@click.stop="toggleNoticeSelection(notice.id)"
|
||||
>
|
||||
<view
|
||||
class="checkbox-indicator"
|
||||
:class="{ checked: isNoticeSelected(notice.id) }"
|
||||
></view>
|
||||
</view>
|
||||
</template>
|
||||
<text class="notice-title" :class="{ 'pinned': notice.top }">
|
||||
{{ notice.title }}
|
||||
</text>
|
||||
<view class="notice-tags">
|
||||
|
|
@ -138,97 +141,63 @@
|
|||
<view v-if="notice.level === '2'" class="notice-tag tag-important">重要</view>
|
||||
<view v-if="notice.level === '3'" class="notice-tag tag-urgent">紧急</view>
|
||||
</view>
|
||||
<!-- <text class="table-cell receive">-->
|
||||
<!-- {{ formatReceiveInfo(notice) }}-->
|
||||
<!-- </text>-->
|
||||
<!-- <text class="table-cell creator">-->
|
||||
<!-- {{ notice.userName || '未知' }}-->
|
||||
<!-- </text>-->
|
||||
<text class="table-cell time">
|
||||
{{ formatTime(notice.createTime) }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<!-- 公告卡片列表 -->
|
||||
<view
|
||||
class="notice-card"
|
||||
v-for="notice in notices"
|
||||
:key="notice.id"
|
||||
@click="goToNoticeDetail(notice)"
|
||||
>
|
||||
<!-- 标题和标签行 -->
|
||||
<view class="notice-header">
|
||||
<view class="notice-title-row">
|
||||
<text class="notice-title" :class="{ 'pinned': notice.top }">
|
||||
{{ notice.title }}
|
||||
|
||||
<!-- 内容预览 -->
|
||||
<view class="notice-content">
|
||||
<text class="notice-content-text">{{ truncateText(notice.content, 50) }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 元信息 -->
|
||||
<view class="notice-meta">
|
||||
<view class="meta-item">
|
||||
<text class="meta-icon">👤</text>
|
||||
<text class="meta-text">{{ notice.userName || '未知' }}</text>
|
||||
</view>
|
||||
<view class="meta-item">
|
||||
<text class="meta-icon">🕐</text>
|
||||
<text class="meta-text">{{ formatTime(notice.createTime) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 接收信息 -->
|
||||
<view class="notice-receive" v-if="notice.receiveUserList?.length > 0 || notice.receiveDeptList?.length > 0">
|
||||
<view class="receive-item" v-if="notice.receiveUserList?.length > 0">
|
||||
<text class="receive-label">接收用户:</text>
|
||||
<view class="receive-users">
|
||||
<view
|
||||
class="user-avatar"
|
||||
v-for="(user, index) in notice.receiveUserList.slice(0, 3)"
|
||||
:key="user.userId"
|
||||
>
|
||||
<image
|
||||
v-if="user.avatar"
|
||||
:src="user.avatar"
|
||||
class="avatar-img"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<text v-else class="avatar-text">{{ user.nickName?.charAt(0) || '?' }}</text>
|
||||
</view>
|
||||
<text v-if="notice.receiveUserList.length > 3" class="more-text">
|
||||
等{{ notice.receiveUserList.length }}项
|
||||
</text>
|
||||
<view class="notice-tags">
|
||||
<view v-if="notice.top" class="notice-tag tag-pinned">置顶</view>
|
||||
<view v-if="notice.level === '1'" class="notice-tag tag-general">一般</view>
|
||||
<view v-if="notice.level === '2'" class="notice-tag tag-important">重要</view>
|
||||
<view v-if="notice.level === '3'" class="notice-tag tag-urgent">紧急</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 内容预览 -->
|
||||
<view class="notice-content">
|
||||
<text class="notice-content-text">{{ truncateText(notice.content, 50) }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 元信息 -->
|
||||
<view class="notice-meta">
|
||||
<view class="meta-item">
|
||||
<text class="meta-icon">👤</text>
|
||||
<text class="meta-text">{{ notice.userName || '未知' }}</text>
|
||||
</view>
|
||||
<view class="meta-item">
|
||||
<text class="meta-icon">🕐</text>
|
||||
<text class="meta-text">{{ formatTime(notice.createTime) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 接收信息 -->
|
||||
<view class="notice-receive" v-if="notice.receiveUserList?.length > 0 || notice.receiveDeptList?.length > 0">
|
||||
<view class="receive-item" v-if="notice.receiveUserList?.length > 0">
|
||||
<text class="receive-label">接收用户:</text>
|
||||
<view class="receive-users">
|
||||
<view
|
||||
class="user-avatar"
|
||||
v-for="(user, index) in notice.receiveUserList.slice(0, 3)"
|
||||
:key="user.userId"
|
||||
>
|
||||
<image
|
||||
v-if="user.avatar"
|
||||
:src="user.avatar"
|
||||
class="avatar-img"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<text v-else class="avatar-text">{{ user.nickName?.charAt(0) || '?' }}</text>
|
||||
</view>
|
||||
<text v-if="notice.receiveUserList.length > 3" class="more-text">
|
||||
等{{ notice.receiveUserList.length }}项
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="receive-item" v-if="notice.receiveDeptList?.length > 0">
|
||||
<text class="receive-label">接收部门:</text>
|
||||
<view class="receive-depts">
|
||||
<view
|
||||
class="dept-tag"
|
||||
v-for="dept in notice.receiveDeptList"
|
||||
:key="dept.deptId"
|
||||
>
|
||||
{{ dept.deptName }}
|
||||
</view>
|
||||
<view class="receive-item" v-if="notice.receiveDeptList?.length > 0">
|
||||
<text class="receive-label">接收部门:</text>
|
||||
<view class="receive-depts">
|
||||
<view
|
||||
class="dept-tag"
|
||||
v-for="dept in notice.receiveDeptList"
|
||||
:key="dept.deptId"
|
||||
>
|
||||
{{ dept.deptName }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<view class="empty-state" v-if="loading">
|
||||
|
|
@ -600,7 +569,7 @@ onBeforeUnmount(() => {
|
|||
background: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px;
|
||||
min-height: 36px;
|
||||
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
|
|
@ -629,7 +598,7 @@ onBeforeUnmount(() => {
|
|||
justify-content: center;
|
||||
background: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px;
|
||||
|
||||
border: 2px solid transparent;
|
||||
|
||||
&.active {
|
||||
|
|
@ -639,6 +608,7 @@ onBeforeUnmount(() => {
|
|||
}
|
||||
|
||||
.radio-text {
|
||||
padding:4px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
|
@ -669,54 +639,7 @@ onBeforeUnmount(() => {
|
|||
.admin-action-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.notice-table {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.table-header,
|
||||
.table-row {
|
||||
display: grid;
|
||||
grid-template-columns: 0.6fr 1fr 1fr 2fr;
|
||||
gap: 12px;
|
||||
padding: 14px 16px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
background: #f8fafc;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
border-top: 1px solid #f0f0f0;
|
||||
background: #fff;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.table-row:active {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.table-row.selected {
|
||||
background: #f0f6ff;
|
||||
}
|
||||
|
||||
.table-cell {
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.table-cell.select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkbox-indicator {
|
||||
|
|
@ -747,25 +670,6 @@ onBeforeUnmount(() => {
|
|||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.table-cell.title {
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.table-cell.title.pinned {
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
.table-cell.level {
|
||||
color: #ff9800;
|
||||
}
|
||||
|
||||
.table-cell.time,
|
||||
.table-cell.creator {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.notice-card {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
|
|
@ -782,6 +686,34 @@ onBeforeUnmount(() => {
|
|||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.notice-card.admin-selectable {
|
||||
position: relative;
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
.notice-card.selected {
|
||||
box-shadow: 0 4px 18px rgba(40, 133, 255, 0.18);
|
||||
}
|
||||
|
||||
.card-select-btn {
|
||||
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.card-select-btn:active {
|
||||
transform: scale(0.92);
|
||||
}
|
||||
|
||||
.notice-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -1043,7 +975,7 @@ onBeforeUnmount(() => {
|
|||
gap: 12px;
|
||||
margin-top: 20px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
|
||||
}
|
||||
|
||||
.modal-btn {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user