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

- 使用 qiniuFileHash 替代浏览器MD5方案计算文件哈希 - 添加补打卡标识和日期处理逻辑 - 优化日历组件中已打卡和补打卡的样式显示

refactor(打卡): 优化文件哈希计算和补打卡功能
- 使用 qiniuFileHash 替代浏览器MD5方案计算文件哈希 - 添加补打卡标识和日期处理逻辑 - 优化日历组件中已打卡和补打卡的样式显示
hookehuyr
Commit 3ae7b4a5f70bceb73b66d54b32dc3228c932e28c 3ae7b4a5 1 parent aa5c5763
Showing 2 changed files with 31 additions and 29 deletions
src/composables/useCheckin.js
src/views/checkin/IndexCheckInPage.vue
--- a/src/composables/useCheckin.js
View file @3ae7b4a
+++ b/src/composables/useCheckin.js
View file @3ae7b4a
@@ -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值
+     * 获取文件哈希（与七牛云ETag一致）
-     * @param {File} file - 文件对象
+     * @param {File} file 文件对象
-     * @returns {Promise<string>} MD5值
+     * @returns {Promise<string>} 哈希字符串
+     * 注释：使用 qiniuFileHash 进行计算，替代浏览器MD5方案。
      */
-    const getFileMD5 = (file) => {
+    const getFileMD5 = async (file) => {
-        return new Promise((resolve, reject) => {
+        return await qiniuFileHash(file)
-            const bmf = new BMF()
-            bmf.md5(file, (err, md5) => {
-                if (err) {
-                    reject(err)
-                    return
-                }
-                resolve(md5)
-            })
-        })
     }
     /**
@@ -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
--- a/src/views/checkin/IndexCheckInPage.vue
View file @3ae7b4a
+++ b/src/views/checkin/IndexCheckInPage.vue
View file @3ae7b4a
 <!--
   * @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)) {
       // 如果是当前选中的已补卡日期，使用特殊样式
+      day.type = 'selected';
+      day.bottomInfo = '待补卡';
       if (selectedDate.value === formattedDate) {
         day.className = 'calendar-selected';
-        day.type = 'selected';
+        // 选中的是补卡日期
-        day.bottomInfo = '待补卡';
+        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,