Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
mlaj
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
hookehuyr
2025-12-13 19:30:43 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
307597ce2177616a83c1171558dddb1e793448f6
307597ce
1 parent
d1fbfad7
refactor(CheckInList): 移除未使用的二级弹框代码并优化格式
清理不再使用的课程列表弹框相关代码,包括组件逻辑和模板 优化模板格式以提高可读性
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
69 additions
and
66 deletions
src/components/ui/CheckInList.vue
src/components/ui/CheckInList.vue
View file @
307597c
<
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
;
// 绿色边框
...
...
Please
register
or
login
to post a comment