hookehuyr

feat(打卡): 实现打卡类型切换时保留文件列表功能

添加文件列表记忆功能,在切换打卡类型时保存当前类型的文件列表并恢复新类型的文件列表
......@@ -23,6 +23,14 @@ export function useCheckin() {
const activeType = ref('text') // 当前选中的打卡类型
const maxCount = ref(5)
// 用于记忆不同类型的文件列表
const fileListMemory = ref({
text: [],
image: [],
video: [],
audio: []
})
/**
* 是否可以提交
*/
......@@ -323,9 +331,14 @@ export function useCheckin() {
*/
const switchType = (type) => {
if (activeType.value !== type) {
// 保存当前类型的文件列表到记忆中
fileListMemory.value[activeType.value] = [...fileList.value]
// 切换到新类型
activeType.value = type
// 切换类型时清空文件列表
fileList.value = []
// 恢复新类型的文件列表
fileList.value = [...fileListMemory.value[type]]
}
}
......@@ -338,6 +351,13 @@ export function useCheckin() {
activeType.value = 'text'
uploading.value = false
loading.value = false
// 清空文件列表记忆
fileListMemory.value = {
text: [],
image: [],
video: [],
audio: []
}
}
/**
......@@ -353,7 +373,7 @@ export function useCheckin() {
// 如果有文件数据,初始化文件列表 - 使用data.files而不是data.meta
if (data.files && data.files.length > 0) {
fileList.value = data.files.map(item => {
const files = data.files.map(item => {
const fileItem = {
url: item.value,
status: 'done',
......@@ -374,6 +394,10 @@ export function useCheckin() {
return fileItem
})
// 将文件列表保存到当前类型的记忆中
fileList.value = files
fileListMemory.value[activeType.value] = [...files]
}
}
} catch (error) {
......
......@@ -31,9 +31,8 @@
<div class="tab-title">选择打卡类型</div>
<div class="tabs-nav">
<div v-for="option in attachmentTypeOptions" :key="option.key"
@click="!isEditMode ? switchType(option.key) : null" :class="['tab-item', {
active: activeType === option.key,
disabled: isEditMode && activeType !== option.key
@click="switchType(option.key)" :class="['tab-item', {
active: activeType === option.key
}]">
<van-icon :name="getIconName(option.key)" size="1.2rem" />
<span class="tab-text">{{ option.value }}</span>
......