feat(打卡): 实现打卡类型切换时保留文件列表功能
添加文件列表记忆功能,在切换打卡类型时保存当前类型的文件列表并恢复新类型的文件列表
Showing
2 changed files
with
29 additions
and
6 deletions
| ... | @@ -23,6 +23,14 @@ export function useCheckin() { | ... | @@ -23,6 +23,14 @@ export function useCheckin() { |
| 23 | const activeType = ref('text') // 当前选中的打卡类型 | 23 | const activeType = ref('text') // 当前选中的打卡类型 |
| 24 | const maxCount = ref(5) | 24 | const maxCount = ref(5) |
| 25 | 25 | ||
| 26 | + // 用于记忆不同类型的文件列表 | ||
| 27 | + const fileListMemory = ref({ | ||
| 28 | + text: [], | ||
| 29 | + image: [], | ||
| 30 | + video: [], | ||
| 31 | + audio: [] | ||
| 32 | + }) | ||
| 33 | + | ||
| 26 | /** | 34 | /** |
| 27 | * 是否可以提交 | 35 | * 是否可以提交 |
| 28 | */ | 36 | */ |
| ... | @@ -323,9 +331,14 @@ export function useCheckin() { | ... | @@ -323,9 +331,14 @@ export function useCheckin() { |
| 323 | */ | 331 | */ |
| 324 | const switchType = (type) => { | 332 | const switchType = (type) => { |
| 325 | if (activeType.value !== type) { | 333 | if (activeType.value !== type) { |
| 334 | + // 保存当前类型的文件列表到记忆中 | ||
| 335 | + fileListMemory.value[activeType.value] = [...fileList.value] | ||
| 336 | + | ||
| 337 | + // 切换到新类型 | ||
| 326 | activeType.value = type | 338 | activeType.value = type |
| 327 | - // 切换类型时清空文件列表 | 339 | + |
| 328 | - fileList.value = [] | 340 | + // 恢复新类型的文件列表 |
| 341 | + fileList.value = [...fileListMemory.value[type]] | ||
| 329 | } | 342 | } |
| 330 | } | 343 | } |
| 331 | 344 | ||
| ... | @@ -338,6 +351,13 @@ export function useCheckin() { | ... | @@ -338,6 +351,13 @@ export function useCheckin() { |
| 338 | activeType.value = 'text' | 351 | activeType.value = 'text' |
| 339 | uploading.value = false | 352 | uploading.value = false |
| 340 | loading.value = false | 353 | loading.value = false |
| 354 | + // 清空文件列表记忆 | ||
| 355 | + fileListMemory.value = { | ||
| 356 | + text: [], | ||
| 357 | + image: [], | ||
| 358 | + video: [], | ||
| 359 | + audio: [] | ||
| 360 | + } | ||
| 341 | } | 361 | } |
| 342 | 362 | ||
| 343 | /** | 363 | /** |
| ... | @@ -353,7 +373,7 @@ export function useCheckin() { | ... | @@ -353,7 +373,7 @@ export function useCheckin() { |
| 353 | 373 | ||
| 354 | // 如果有文件数据,初始化文件列表 - 使用data.files而不是data.meta | 374 | // 如果有文件数据,初始化文件列表 - 使用data.files而不是data.meta |
| 355 | if (data.files && data.files.length > 0) { | 375 | if (data.files && data.files.length > 0) { |
| 356 | - fileList.value = data.files.map(item => { | 376 | + const files = data.files.map(item => { |
| 357 | const fileItem = { | 377 | const fileItem = { |
| 358 | url: item.value, | 378 | url: item.value, |
| 359 | status: 'done', | 379 | status: 'done', |
| ... | @@ -374,6 +394,10 @@ export function useCheckin() { | ... | @@ -374,6 +394,10 @@ export function useCheckin() { |
| 374 | 394 | ||
| 375 | return fileItem | 395 | return fileItem |
| 376 | }) | 396 | }) |
| 397 | + | ||
| 398 | + // 将文件列表保存到当前类型的记忆中 | ||
| 399 | + fileList.value = files | ||
| 400 | + fileListMemory.value[activeType.value] = [...files] | ||
| 377 | } | 401 | } |
| 378 | } | 402 | } |
| 379 | } catch (error) { | 403 | } catch (error) { | ... | ... |
| ... | @@ -31,9 +31,8 @@ | ... | @@ -31,9 +31,8 @@ |
| 31 | <div class="tab-title">选择打卡类型</div> | 31 | <div class="tab-title">选择打卡类型</div> |
| 32 | <div class="tabs-nav"> | 32 | <div class="tabs-nav"> |
| 33 | <div v-for="option in attachmentTypeOptions" :key="option.key" | 33 | <div v-for="option in attachmentTypeOptions" :key="option.key" |
| 34 | - @click="!isEditMode ? switchType(option.key) : null" :class="['tab-item', { | 34 | + @click="switchType(option.key)" :class="['tab-item', { |
| 35 | - active: activeType === option.key, | 35 | + active: activeType === option.key |
| 36 | - disabled: isEditMode && activeType !== option.key | ||
| 37 | }]"> | 36 | }]"> |
| 38 | <van-icon :name="getIconName(option.key)" size="1.2rem" /> | 37 | <van-icon :name="getIconName(option.key)" size="1.2rem" /> |
| 39 | <span class="tab-text">{{ option.value }}</span> | 38 | <span class="tab-text">{{ option.value }}</span> | ... | ... |
-
Please register or login to post a comment