记录页面添加管理按钮,优化编辑模式交互
功能改进: - 新增管理按钮:点击管理按钮进入编辑模式 - 编辑模式切换:管理/取消按钮切换 - 条件显示:全选、复选框、一键清空仅在编辑模式下显示 - 优化交互:编辑模式下点击记录项选中/取消选中 - 隐藏删除按钮:编辑模式下隐藏单条删除按钮 - 自动清理:退出编辑模式时自动清空选中项 UI优化: - 管理按钮样式:白底蓝边框,与搜索按钮区分 - 按钮布局:搜索栏三按钮并排,间距合理 - 状态提示:按钮文字动态切换(管理/取消)
This commit is contained in:
1 parent
6d80277220
commit
bc3bf1a85c
1 file changed
+18
-25
@@ -16,12 +16,12 @@
|
||||
@confirm="handleSearch"
|
||||
/>
|
||||
<button class="search-btn" @click="handleSearch">搜索</button>
|
||||
<button class="manage-btn" @click="toggleManageMode">
|
||||
{{ isManageMode ? '取消' : '管理' }}
|
||||
<button class="manage-btn" @click="toggleEditMode">
|
||||
{{ isEditMode ? '取消' : '管理' }}
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view class="action-bar" v-if="isManageMode && records.length > 0">
|
||||
<view class="action-bar" v-if="isEditMode && records.length > 0">
|
||||
<view class="select-all" @click="toggleSelectAll">
|
||||
<view class="checkbox" :class="{ checked: isAllSelected }">
|
||||
<text v-if="isAllSelected" class="check-icon">✓</text>
|
||||
@@ -46,12 +46,12 @@
|
||||
|
||||
<view class="record-list" v-else>
|
||||
<view class="record-item" v-for="(item, index) in records" :key="item.id">
|
||||
<view class="checkbox-wrapper" v-if="isManageMode" @click="toggleSelect(item.id)">
|
||||
<view class="checkbox-wrapper" v-if="isEditMode" @click="toggleSelect(item.id)">
|
||||
<view class="checkbox" :class="{ checked: selectedIds.includes(item.id) }">
|
||||
<text v-if="selectedIds.includes(item.id)" class="check-icon">✓</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="record-content" @click="handleRecordClick(item)">
|
||||
<view class="record-content" @click="isEditMode ? toggleSelect(item.id) : viewDetail(item)">
|
||||
<view class="record-icon" :style="{ background: getTypeColor(item.type) }">
|
||||
<text class="record-icon-text">{{ getTypeIcon(item.type) }}</text>
|
||||
</view>
|
||||
@@ -60,7 +60,7 @@
|
||||
<text class="record-time">{{ formatTime(item.createTime) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="record-actions" v-if="!isManageMode">
|
||||
<view class="record-actions" v-if="!isEditMode">
|
||||
<view class="delete-btn" @click.stop="deleteRecord(item.id, index)">
|
||||
<text class="delete-text">删除</text>
|
||||
</view>
|
||||
@@ -99,7 +99,7 @@ export default {
|
||||
keyword: '',
|
||||
selectedIds: [],
|
||||
loading: false,
|
||||
isManageMode: false
|
||||
isEditMode: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -149,24 +149,16 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
handleSearch() {
|
||||
this.page = 1
|
||||
this.loadRecords()
|
||||
},
|
||||
|
||||
toggleManageMode() {
|
||||
this.isManageMode = !this.isManageMode
|
||||
if (!this.isManageMode) {
|
||||
toggleEditMode() {
|
||||
this.isEditMode = !this.isEditMode
|
||||
if (!this.isEditMode) {
|
||||
this.selectedIds = []
|
||||
}
|
||||
},
|
||||
|
||||
handleRecordClick(item) {
|
||||
if (this.isManageMode) {
|
||||
this.toggleSelect(item.id)
|
||||
} else {
|
||||
this.viewDetail(item)
|
||||
}
|
||||
handleSearch() {
|
||||
this.page = 1
|
||||
this.loadRecords()
|
||||
},
|
||||
|
||||
changePage(newPage) {
|
||||
@@ -255,6 +247,7 @@ export default {
|
||||
this.total = 0
|
||||
this.totalPages = 0
|
||||
this.selectedIds = []
|
||||
this.isEditMode = false
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: result.error || '清空失败',
|
||||
@@ -469,7 +462,7 @@ page {
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
@@ -486,17 +479,17 @@ page {
|
||||
background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 0 32rpx;
|
||||
padding: 0 24rpx;
|
||||
border-radius: 24rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.manage-btn {
|
||||
background: #F3F4F6;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
color: #3B82F6;
|
||||
border: 2rpx solid #3B82F6;
|
||||
padding: 0 32rpx;
|
||||
padding: 0 24rpx;
|
||||
border-radius: 24rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
|
||||
Reference in new issue
Block a user