hookehuyr

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

清理不再使用的课程列表弹框相关代码,包括组件逻辑和模板
优化模板格式以提高可读性
<template>
<!-- 列表主体 -->
<div :class="wrapper_class" :style="scroll_style">
<button
v-for="item in items"
:key="item.id"
<button 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 }"
@click="handle_select(item)"
>
:class="{ 'is-active': selected_item?.id === item.id }" @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 }"
>
<van-icon v-if="item.task_type === 'checkin'" name="edit" size="1.5rem" :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 === 'count'" name="point-gift-o" size="1.5rem" :color="item.is_gray ? 'gray' : ''" />
:class="{ 'is-active': selected_item?.id === item.id }">
<van-icon v-if="item.task_type === 'checkin'" name="edit" size="1.5rem"
: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 === '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"
:disabled="submitting"
>
@click="handle_submit" :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_courses = ref([])
// const inner_popup_show = ref(false)
// const inner_courses = ref([])
/**
* @function wrapper_class
......@@ -228,69 +229,71 @@ const handle_submit = async () => {
* @description 打开二级弹框并填充示例任务列表(本地构造)。
* @returns {void}
*/
const open_inner_popup = () => {
inner_courses.value = build_course_list()
inner_popup_show.value = true
}
// const open_inner_popup = () => {
// inner_courses.value = build_course_list()
// inner_popup_show.value = true
// }
/**
* @function close_inner_popup
* @description 关闭二级弹框;若处于弹框模式则重新打开父级弹框。
* @returns {void}
*/
const close_inner_popup = () => {
inner_popup_show.value = false
if (!props.plain && parent_popup && typeof parent_popup.reopenParent === 'function') {
// 略微延迟,避免与二级弹框关闭动画冲突
setTimeout(() => parent_popup.reopenParent(), 150)
}
}
// const close_inner_popup = () => {
// inner_popup_show.value = false
// if (!props.plain && parent_popup && typeof parent_popup.reopenParent === 'function') {
// // 略微延迟,避免与二级弹框关闭动画冲突
// 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 now = new Date()
/**
* @function add_days
* @description 在当前日期基础上增加指定天数。
* @param {number} days - 增加的天数(可为负数)。
* @returns {Date}
*/
const add_days = (days) => {
const d = new Date(now)
d.setDate(d.getDate() + days)
return d
}
/**
* @function to_yyyy_mm_dd
* @description 格式化日期为 YYYY-MM-DD 字符串。
* @param {Date} date - 日期对象。
* @returns {string}
*/
const to_yyyy_mm_dd = (date) => {
const y = date.getFullYear()
const m = String(date.getMonth() + 1).padStart(2, '0')
const d = String(date.getDate()).padStart(2, '0')
return `${y}-${m}-${d}`
}
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-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-4', title: '课程打卡任务四', begin_date: to_yyyy_mm_dd(add_days(1)) },
]
}
// const build_course_list = () => {
// const now = new Date()
// /**
// * @function add_days
// * @description 在当前日期基础上增加指定天数。
// * @param {number} days - 增加的天数(可为负数)。
// * @returns {Date}
// */
// const add_days = (days) => {
// const d = new Date(now)
// d.setDate(d.getDate() + days)
// return d
// }
// /**
// * @function to_yyyy_mm_dd
// * @description 格式化日期为 YYYY-MM-DD 字符串。
// * @param {Date} date - 日期对象。
// * @returns {string}
// */
// const to_yyyy_mm_dd = (date) => {
// const y = date.getFullYear()
// const m = String(date.getMonth() + 1).padStart(2, '0')
// const d = String(date.getDate()).padStart(2, '0')
// return `${y}-${m}-${d}`
// }
// 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-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-4', title: '课程打卡任务四', begin_date: to_yyyy_mm_dd(add_days(1)) },
// ]
// }
// 该组件当前不展示封面图片,移除不再使用的图片处理方法
</script>
<style lang="less" scoped>
.CheckInListWrapper {
// 列表项样式
.CheckInListItem {
// 选中态样式
&.is-active {
border-color: #bbf7d0; // 绿色边框
......