refactor(CheckInList): 移除未使用的二级弹框代码并优化格式

清理不再使用的课程列表弹框相关代码，包括组件逻辑和模板优化模板格式以提高可读性

refactor(CheckInList): 移除未使用的二级弹框代码并优化格式
清理不再使用的课程列表弹框相关代码，包括组件逻辑和模板优化模板格式以提高可读性
hookehuyr
Commit 307597ce2177616a83c1171558dddb1e793448f6 307597ce 1 parent d1fbfad7
Showing 1 changed file with 69 additions and 66 deletions
src/components/ui/CheckInList.vue
--- a/src/components/ui/CheckInList.vue
View file @307597c
+++ b/src/components/ui/CheckInList.vue
View file @307597c
 <template>
     <!-- 列表主体 -->
     <div :class="wrapper_class" :style="scroll_style">
-        <button
+        <button v-for="item in items" :key="item.id"
-            v-for="item in items"
-            :key="item.id"
             class="CheckInListItem flex flex-col items-center p-2 rounded-lg border transition-colors bg-white/70 border-gray-100 hover:bg-white"
-            :class="{ 'is-active': selected_item?.id === item.id }"
+            :class="{ 'is-active': selected_item?.id === item.id }" @click="handle_select(item)">
-            @click="handle_select(item)"
-        >
             <div class="Icon w-12 h-12 rounded-full flex items-center justify-center mb-1 transition-colors bg-gray-100"
-                :class="{ 'is-active': selected_item?.id === item.id }"
+                :class="{ 'is-active': selected_item?.id === item.id }">
-            >
+                <van-icon v-if="item.task_type === 'checkin'" name="edit" size="1.5rem"
-                <van-icon v-if="item.task_type === 'checkin'" name="edit" size="1.5rem" :color="item.is_gray ? 'gray' : ''" />
+                    :color="item.is_gray ? 'gray' : ''" />
-                <van-icon v-if="item.task_type === 'upload'" name="tosend" size="1.5rem" :color="item.is_gray ? 'gray' : ''" />
+                <van-icon v-if="item.task_type === 'upload'" name="tosend" size="1.5rem"
-                <van-icon v-if="item.task_type === 'count'" name="point-gift-o" size="1.5rem" :color="item.is_gray ? 'gray' : ''" />
+                    :color="item.is_gray ? 'gray' : ''" />
+                <van-icon v-if="item.task_type === 'count'" name="point-gift-o" size="1.5rem"
+                    :color="item.is_gray ? 'gray' : ''" />
             </div>
             <span :class="['text-xs', item.is_gray ? 'text-gray-500' : '']">{{ item.name }}</span>
         </button>
@@ -23,9 +21,7 @@
     <div v-if="selected_item" class="mt-3">
         <button
             class="SubmitBtn mt-2 w-full bg-gradient-to-r from-green-500 to-green-600 text-white py-2 rounded-lg flex items-center justify-center"
-            @click="handle_submit"
+            @click="handle_submit" :disabled="submitting">
-            :disabled="submitting"
-        >
             <template v-if="submitting">
                 <div class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
                 提交中...
@@ -35,7 +31,7 @@
     </div>
     <!-- 二级弹框（课程列表，使用mock数据） -->
-    <van-popup
+    <!--<van-popup
         :show="inner_popup_show"
         @update:show="(v) => inner_popup_show = v"
         round
@@ -49,21 +45,21 @@
                 <h3 class="font-medium">课程列表</h3>
                 <van-icon name="cross" @click="close_inner_popup" />
             </div>
-            <!-- 简单文本列表：仅显示标题与开始/结束日期 -->
+            <!~~ 简单文本列表：仅显示标题与开始/结束日期 ~~>
             <div class="rounded-lg bg-white/80 divide-y">
                 <div v-for="task in inner_courses" :key="task.id" class="taskItem bg-white rounded-lg shadow px-4 py-3 mb-3" @click="handle_click(task)">
                     <div class="flex items-center justify-between">
-                        <!-- 左侧图标：垂直居中，占用较小空间 -->
+                        <!~~ 左侧图标：垂直居中，占用较小空间 ~~>
                         <div class="iconWrapper flex items-center justify-center w-8 mr-3 text-gray-500">
                             <van-icon name="notes-o" size="1.2rem" />
                         </div>
-                        <!-- 中间内容：占据剩余空间 -->
+                        <!~~ 中间内容：占据剩余空间 ~~>
                         <div class="left flex-1">
                             <div class="taskTitle text-sm font-semibold text-gray-800">{{ task.title }}</div>
                             <div class="taskDates text-xs text-gray-600 mt-1">开始时间：{{ dayjs(task.begin_date).format('YYYY-MM-DD') }}</div>
                             <div v-if="task.end_date" class="taskDates text-xs text-gray-600 mt-1">截止时间：{{ dayjs(task.end_date).format('YYYY-MM-DD') }}</div>
                         </div>
-                        <!-- 右侧按钮：占用较小空间，右对齐 -->
+                        <!~~ 右侧按钮：占用较小空间，右对齐 ~~>
                         <div class="right flex items-center justify-end w-20 ml-3">
                             <van-button type="success" size="small" round class="w-full" @click="go_task_home(task.id)">查看</van-button>
                         </div>
@@ -71,7 +67,7 @@
                 </div>
             </div>
         </div>
-    </van-popup>
+    </van-popup>-->
 </template>
 <script setup>
@@ -92,6 +88,10 @@ import dayjs from 'dayjs'
 /**
  * @function props
  * @description 组件接收的属性定义。
+ * @property {CheckInItem[]} items - 打卡项列表。
+ * @property {boolean} [dense] - 是否紧凑模式，默认 `false`。
+ * @property {boolean} [scroll] - 是否启用滚动区域，默认 `false`。
+ * @property {boolean} [plain] - 是否普通模式，默认 `false`。
  */
 const props = defineProps({
     items: { type: Array, default: () => [] },
@@ -103,6 +103,7 @@ const props = defineProps({
 /**
  * @function emits
  * @description 组件对外抛出的事件。
+ * @event submit-success - 提交成功时触发，携带打卡项ID。
  */
 const emit = defineEmits(['submit-success'])
@@ -110,10 +111,10 @@ const router = useRouter()
 const selected_item = ref(null)
 const submitting = ref(false)
 // 父弹框联动（仅弹框模式下有效）
-const parent_popup = inject('parent_popup_control', null)
+// const parent_popup = inject('parent_popup_control', null)
 // 二级弹框与数据
-const inner_popup_show = ref(false)
+// const inner_popup_show = ref(false)
-const inner_courses = ref([])
+// const inner_courses = ref([])
 /**
  * @function wrapper_class
@@ -228,69 +229,71 @@ const handle_submit = async () => {
  * @description 打开二级弹框并填充示例任务列表（本地构造）。
  * @returns {void}
  */
-const open_inner_popup = () => {
+// const open_inner_popup = () => {
-    inner_courses.value = build_course_list()
+//     inner_courses.value = build_course_list()
-    inner_popup_show.value = true
+//     inner_popup_show.value = true
-}
+// }
 /**
  * @function close_inner_popup
  * @description 关闭二级弹框；若处于弹框模式则重新打开父级弹框。
  * @returns {void}
  */
-const close_inner_popup = () => {
+// const close_inner_popup = () => {
-    inner_popup_show.value = false
+//     inner_popup_show.value = false
-    if (!props.plain && parent_popup && typeof parent_popup.reopenParent === 'function') {
+//     if (!props.plain && parent_popup && typeof parent_popup.reopenParent === 'function') {
-        // 略微延迟，避免与二级弹框关闭动画冲突
+//         // 略微延迟，避免与二级弹框关闭动画冲突
-        setTimeout(() => parent_popup.reopenParent(), 150)
+//         setTimeout(() => parent_popup.reopenParent(), 150)
-    }
+//     }
-}
+// }
 /**
  * @function build_course_list
  * @description 构造示例任务数据（仅标题与开始/结束日期）。
  * @returns {Array<{id:string,title:string,begin_date:string,end_date?:string}>}
  */
-const build_course_list = () => {
+// const build_course_list = () => {
-    const now = new Date()
+//     const now = new Date()
-    /**
+//     /**
-     * @function add_days
+//      * @function add_days
-     * @description 在当前日期基础上增加指定天数。
+//      * @description 在当前日期基础上增加指定天数。
-     * @param {number} days - 增加的天数（可为负数）。
+//      * @param {number} days - 增加的天数（可为负数）。
-     * @returns {Date}
+//      * @returns {Date}
-     */
+//      */
-    const add_days = (days) => {
+//     const add_days = (days) => {
-        const d = new Date(now)
+//         const d = new Date(now)
-        d.setDate(d.getDate() + days)
+//         d.setDate(d.getDate() + days)
-        return d
+//         return d
-    }
+//     }
-    /**
+//     /**
-     * @function to_yyyy_mm_dd
+//      * @function to_yyyy_mm_dd
-     * @description 格式化日期为 YYYY-MM-DD 字符串。
+//      * @description 格式化日期为 YYYY-MM-DD 字符串。
-     * @param {Date} date - 日期对象。
+//      * @param {Date} date - 日期对象。
-     * @returns {string}
+//      * @returns {string}
-     */
+//      */
-    const to_yyyy_mm_dd = (date) => {
+//     const to_yyyy_mm_dd = (date) => {
-        const y = date.getFullYear()
+//         const y = date.getFullYear()
-        const m = String(date.getMonth() + 1).padStart(2, '0')
+//         const m = String(date.getMonth() + 1).padStart(2, '0')
-        const d = String(date.getDate()).padStart(2, '0')
+//         const d = String(date.getDate()).padStart(2, '0')
-        return `${y}-${m}-${d}`
+//         return `${y}-${m}-${d}`
-    }
+//     }
-    return [
+//     return [
-        { id: 'task-1', title: '课程打卡任务一', begin_date: to_yyyy_mm_dd(add_days(-2)), end_date: to_yyyy_mm_dd(add_days(5)) },
+//         { id: 'task-1', title: '课程打卡任务一', begin_date: to_yyyy_mm_dd(add_days(-2)), end_date: to_yyyy_mm_dd(add_days(5)) },
-        { id: 'task-2', title: '课程打卡任务二', begin_date: to_yyyy_mm_dd(add_days(-1)), end_date: to_yyyy_mm_dd(add_days(6)) },
+//         { id: 'task-2', title: '课程打卡任务二', begin_date: to_yyyy_mm_dd(add_days(-1)), end_date: to_yyyy_mm_dd(add_days(6)) },
-        { id: 'task-3', title: '课程打卡任务三', begin_date: to_yyyy_mm_dd(add_days(0)), end_date: to_yyyy_mm_dd(add_days(7)) },
+//         { id: 'task-3', title: '课程打卡任务三', begin_date: to_yyyy_mm_dd(add_days(0)), end_date: to_yyyy_mm_dd(add_days(7)) },
-        { id: 'task-4', title: '课程打卡任务四', begin_date: to_yyyy_mm_dd(add_days(1)) },
+//         { id: 'task-4', title: '课程打卡任务四', begin_date: to_yyyy_mm_dd(add_days(1)) },
-    ]
+//     ]
-}
+// }
 // 该组件当前不展示封面图片，移除不再使用的图片处理方法
 </script>
 <style lang="less" scoped>
 .CheckInListWrapper {
+
     // 列表项样式
     .CheckInListItem {
+
         // 选中态样式
         &.is-active {
             border-color: #bbf7d0; // 绿色边框