Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
a8291d09 1 parent 025a76ed

feat(checkin): 添加编辑打卡时合并附件类型的功能 

在编辑打卡记录时，合并attachment_type和file_type数组以适配前后打卡类型不一致的情况
Inline Side-by-side
Showing 1 changed file with 36 additions and 87 deletions
......@@ -20,15 +20,9 @@
<div class="section-content">
<!-- 文本输入区域 -->
<div class="text-input-area">
<van-field
v-model="message"
rows="6"
autosize
type="textarea"
<van-field v-model="message" rows="6" autosize type="textarea"
:placeholder="activeType === 'text' ? '请输入打卡留言，至少需要10个字符' : '请输入打卡留言（可选）'"
:maxlength="activeType === 'text' ? 500 : 200"
show-word-limit
/>
:maxlength="activeType === 'text' ? 500 : 200" show-word-limit />
</div>
<!-- 打卡类型选项卡 -->
......@@ -36,19 +30,12 @@
<div class="tabs-header">
<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', {
<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
}]"
>
<van-icon
:name="getIconName(option.key)"
size="1.2rem"
/>
}]">
<van-icon :name="getIconName(option.key)" size="1.2rem" />
<span class="tab-text">{{ option.value }}</span>
</div>
</div>
......@@ -56,19 +43,10 @@
<!-- 文件上传区域 -->
<div v-if="activeType !== 'text'" class="upload-area">
<van-uploader
v-model="fileList"
:max-count="maxCount"
:max-size="20 * 1024 * 1024"
:before-read="beforeRead"
:after-read="afterRead"
@delete="onDelete"
@click-preview="onClickPreview"
multiple
:accept="getAcceptType()"
result-type="file"
:deletable="false"
/>
<van-uploader v-model="fileList" :max-count="maxCount" :max-size="20 * 1024 * 1024"
:before-read="beforeRead" :after-read="afterRead" @delete="onDelete"
@click-preview="onClickPreview" multiple :accept="getAcceptType()" result-type="file"
:deletable="false" />
<!-- 文件列表显示 -->
<div v-if="fileList.length > 0" class="file-list">
......@@ -78,12 +56,7 @@
<span class="file-name">{{ item.name || item.file?.name }}</span>
<span class="file-status" :class="item.status">{{ item.message }}</span>
</div>
<van-icon
name="clear"
size="1rem"
@click="delItem(item)"
class="delete-icon"
/>
<van-icon name="clear" size="1rem" @click="delItem(item)" class="delete-icon" />
</div>
</div>
......@@ -98,14 +71,8 @@
<!-- 提交按钮 -->
<div v-if="!taskDetail.is_finish || route.query.status === 'edit'" class="submit-area">
<van-button
type="primary"
block
size="large"
:loading="uploading"
:disabled="!canSubmit"
@click="onSubmit"
>
<van-button type="primary" block size="large" :loading="uploading" :disabled="!canSubmit"
@click="onSubmit">
{{ route.query.status === 'edit' ? '保存修改' : '提交打卡' }}
</van-button>
</div>
......@@ -119,41 +86,24 @@
</van-overlay>
<!-- 音频播放器弹窗 -->
<van-popup
v-model:show="audioShow"
position="bottom"
round
closeable
:style="{ height: '60%', width: '100%' }"
>
<van-popup v-model:show="audioShow" position="bottom" round closeable :style="{ height: '60%', width: '100%' }">
<div class="p-4">
<h3 class="text-lg font-medium mb-4 text-center">{{ audioTitle }}</h3>
<AudioPlayer
v-if="audioShow && audioUrl"
:songs="[{ title: audioTitle, url: audioUrl }]"
class="w-full"
/>
<AudioPlayer v-if="audioShow && audioUrl" :songs="[{ title: audioTitle, url: audioUrl }]"
class="w-full" />
</div>
</van-popup>
<!-- 视频播放器弹窗 -->
<van-popup
v-model:show="videoShow"
position="center"
round
closeable
:style="{ width: '95%', maxHeight: '80vh' }"
@close="stopVideoPlay"
>
<van-popup v-model:show="videoShow" position="center" round closeable
:style="{ width: '95%', maxHeight: '80vh' }" @close="stopVideoPlay">
<div class="p-4">
<h3 class="text-lg font-medium mb-4 text-center">视频预览</h3>
<div class="relative w-full bg-black rounded-lg overflow-hidden" style="aspect-ratio: 16/9;">
<!-- 视频封面 -->
<div
v-show="!isVideoPlaying"
<div v-show="!isVideoPlaying"
class="absolute inset-0 flex items-center justify-center cursor-pointer"
@click="startVideoPlay"
>
@click="startVideoPlay">
<img :src="videoCover || 'https://cdn.ipadbiz.cn/mlaj/images/cover_video_2.png'"
:alt="videoTitle" class="w-full h-full object-cover" />
<div class="absolute inset-0 flex items-center justify-center bg-black/20">
......@@ -164,34 +114,23 @@
</div>
</div>
<!-- 视频播放器 -->
<VideoPlayer
v-show="isVideoPlaying"
ref="videoPlayerRef"
:video-url="videoUrl"
:video-id="videoTitle"
:autoplay="false"
class="w-full h-full"
@play="handleVideoPlay"
@pause="handleVideoPause"
/>
<VideoPlayer v-show="isVideoPlaying" ref="videoPlayerRef" :video-url="videoUrl"
:video-id="videoTitle" :autoplay="false" class="w-full h-full" @play="handleVideoPlay"
@pause="handleVideoPause" />
</div>
</div>
</van-popup>
<!-- 图片预览弹窗 -->
<van-image-preview
v-model:show="imageShow"
:images="imageList"
:start-position="imageIndex"
:show-index="true"
/>
<van-image-preview v-model:show="imageShow" :images="imageList" :start-position="imageIndex"
:show-index="true" />
</div>
</template>
<script setup>
import { ref, computed, onMounted, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getTaskDetailAPI } from "@/api/checkin"
import { getTaskDetailAPI, getUploadTaskInfoAPI } from "@/api/checkin"
import { getTeacherFindSettingsAPI } from '@/api/teacher'
import { useTitle } from '@vueuse/core'
import { useCheckin } from '@/composables/useCheckin'
......@@ -325,6 +264,16 @@ const getTaskDetail = async (month) => {
'video': '视频'
}
// attachment_type 和 file_type 合并成一个数组 合并以后的数组，就是学员编辑的时候，可以使用的类型
// 主要是适配先前打卡类型和后期打卡类型不一致的情况
if (route.query.status === 'edit') {
const info = await getUploadTaskInfoAPI({ i: route.query.post_id });
if (info.code) {
// 合并 attachment_type 和 file_type 数组, 里面数据需要去重复
data.attachment_type = [...new Set([...data.attachment_type, info.data.file_type])];
}
}
// 如果是数组格式，转换为对象格式
if (Array.isArray(data.attachment_type)) {
attachmentTypeOptions.value = data.attachment_type.map(key => ({
......