hookehuyr

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

添加文件列表记忆功能,在切换打卡类型时保存当前类型的文件列表并恢复新类型的文件列表
...@@ -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>
......