hookehuyr

refactor(打卡): 优化文件哈希计算和补打卡功能

- 使用 qiniuFileHash 替代浏览器MD5方案计算文件哈希
- 添加补打卡标识和日期处理逻辑
- 优化日历组件中已打卡和补打卡的样式显示
......@@ -3,7 +3,7 @@ import { useRoute, useRouter } from 'vue-router'
import { showToast, showLoadingToast } from 'vant'
import { qiniuTokenAPI, qiniuUploadAPI, saveFileAPI } from '@/api/common'
import { addUploadTaskAPI, getUploadTaskInfoAPI, editUploadTaskInfoAPI } from "@/api/checkin"
import BMF from 'browser-md5-file'
import { qiniuFileHash } from '@/utils/qiniuFileHash';
import { useAuth } from '@/contexts/auth'
/**
......@@ -45,21 +45,13 @@ export function useCheckin() {
})
/**
* 获取文件MD5值
* @param {File} file - 文件对象
* @returns {Promise<string>} MD5值
* 获取文件哈希(与七牛云ETag一致)
* @param {File} file 文件对象
* @returns {Promise<string>} 哈希字符串
* 注释:使用 qiniuFileHash 进行计算,替代浏览器MD5方案。
*/
const getFileMD5 = (file) => {
return new Promise((resolve, reject) => {
const bmf = new BMF()
bmf.md5(file, (err, md5) => {
if (err) {
reject(err)
return
}
resolve(md5)
})
})
const getFileMD5 = async (file) => {
return await qiniuFileHash(file)
}
/**
......@@ -290,7 +282,8 @@ export function useCheckin() {
task_id: route.query.id,
note: message.value,
file_type: activeType.value,
meta_id: []
meta_id: [],
makeup_time: route.query.is_patch ? route.query.date : '',
}
// 如果有文件,添加文件ID
......
<!--
* @Date: 2025-05-29 15:34:17
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-11-10 10:38:27
* @LastEditTime: 2025-11-13 17:22:35
* @FilePath: /mlaj/src/views/checkin/IndexCheckInPage.vue
* @Description: 文件描述
-->
......@@ -72,11 +72,18 @@
<div class="post-header">
<van-row>
<van-col span="3">
<van-image round width="2.5rem" height="2.5rem" :src="post.user.avatar || 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'" fit="cover" />
<van-image round width="2.5rem" height="2.5rem" :src="post.user.avatar || 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg?imageMogr2/thumbnail/200x/strip/quality/70'" fit="cover" />
</van-col>
<van-col span="18">
<div class="user-info">
<div class="username">{{ post.user.name }}</div>
<div class="username">
{{ post.user.name }}
<!-- 补打卡标识标签 -->
<span
v-if="post.user.is_makeup"
class="MakeupTag inline-flex items-center ml-2 px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-600 border border-green-300"
>补打卡</span>
</div>
<div class="post-time">{{ post.user.time }}</div>
</div>
</van-col>
......@@ -99,7 +106,7 @@
<div v-for="(v, idx) in post.videoList" :key="idx">
<!-- 视频封面和播放按钮 -->
<div v-if="v.video && !v.isPlaying" class="relative w-full rounded-lg overflow-hidden" style="aspect-ratio: 16/9; margin-bottom: 1rem;">
<img :src="v.videoCover || 'https://cdn.ipadbiz.cn/mlaj/images/cover_video_2.png'"
<img :src="v.videoCover || 'https://cdn.ipadbiz.cn/mlaj/images/cover_video_2.png?imageMogr2/thumbnail/200x/strip/quality/70'"
:alt="v.content" class="w-full h-full object-cover" />
<div class="absolute inset-0 flex items-center justify-center cursor-pointer bg-black/20"
@click="startPlay(v)">
......@@ -444,15 +451,13 @@ const formatter = (day) => {
// 检查是否已打卡
if (checkin_days.includes(formattedDate)) {
day.type = 'selected';
day.bottomInfo = '已打卡';
// 如果是当前选中的已打卡日期,使用特殊样式
if (selectedDate.value === formattedDate) {
day.className = 'calendar-selected';
day.type = 'selected';
day.bottomInfo = '已打卡';
} else {
day.className = 'calendar-checkin';
day.type = 'selected';
day.bottomInfo = '已打卡';
}
}
}
......@@ -464,14 +469,14 @@ const formatter = (day) => {
// 检查是否已补卡
if (fill_checkin_days.includes(formattedDate)) {
// 如果是当前选中的已补卡日期,使用特殊样式
if (selectedDate.value === formattedDate) {
day.className = 'calendar-selected';
day.type = 'selected';
day.bottomInfo = '待补卡';
if (selectedDate.value === formattedDate) {
day.className = 'calendar-selected';
// 选中的是补卡日期
isPatchCheckin.value = true;
} else {
day.className = 'calendar-fill-checkin';
day.type = 'selected';
day.bottomInfo = '待补卡';
}
}
}
......@@ -564,7 +569,8 @@ const goToCheckinDetailPage = () => {
path: '/checkin/detail',
query: {
id: route.query.id,
date: current_date
date: current_date,
is_patch: isPatchCheckin.value ? '1' : '0',
}
})
}
......@@ -674,6 +680,8 @@ const myCheckinDates = ref([]);
const myFillCheckinDates = ref([]);
const checkinDataList = ref([]);
const showProgress = ref(true);
// 是否为补卡模式
const isPatchCheckin = ref(false);
// 作品类型选项
const attachmentTypeOptions = ref([]);
......@@ -783,6 +791,7 @@ const formatData = (data) => {
name: item.username,
avatar: item.avatar,
time: item.created_time_desc,
is_makeup: item.is_makeup,
},
content: item.note,
images,
......