taskManagePage.vue
3.52 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!--
* @Date: 2025-11-19 10:18:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-11-19 20:25:40
* @FilePath: /mlaj/src/views/teacher/taskManagePage.vue
* @Description: 教师端作业管理页面（列表展示作业名称与开始/截止时间，数据先Mock）
-->
<template>
<div class="TaskManagePage">
<!-- 页面头部 -->
<!-- <div class="pageHeader bg-white rounded-lg shadow px-4 py-3">
<div class="flex items-center justify-between">
<div class="title text-base font-semibold text-gray-800">作业管理</div>
</div>
</div> -->
<!-- 作业列表 -->
<div class="listWrapper mt-4">
<div v-for="task in task_list" :key="task.id" class="taskItem bg-white rounded-lg shadow px-4 py-3 mb-3">
<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">{{ format_date_range(task.begin_date, task.end_date) }}</div>
</div>
<!-- 右侧按钮：占用较小空间，右对齐 -->
<div class="right flex items-center justify-end w-20 ml-3">
<van-button type="primary" size="small" round class="w-full">查看</van-button>
</div>
</div>
</div>
</div>
</div>
<!--
页面说明：
- 列表项显示作业名称与开始/截止时间，样式参考项目统一风格（白卡片+阴影+圆角）。
- 数据暂用Mock，后续可替换为真实API。
-->
</template>
<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { useTitle } from '@vueuse/core'
const $route = useRoute()
useTitle($route.meta.title)
//
// Mock数据：作业列表
//
const task_list = ref([
{ id: '101', title: '英语口语练习', begin_date: '2025-11-01', end_date: '2025-11-30' },
{ id: '102', title: '语文古诗背诵', begin_date: '2025-11-05', end_date: '2025-11-25' },
{ id: '103', title: '数学口算巩固', begin_date: '2025-11-10', end_date: '2025-12-10' }
])
/**
* 格式化日期范围
* @param {string} begin_date - 开始时间
* @param {string} end_date - 截止时间
* @returns {string} 格式化后的日期范围文案
* 注释：按“开始时间 至 截止时间”展示，字段为空时返回“-”。
*/
const format_date_range = (begin_date, end_date) => {
const start = begin_date || '-'
const end = end_date || '-'
return `${start} 至 ${end}`
}
</script>
<style lang="less" scoped>
.TaskManagePage {
min-height: 100vh;
background: linear-gradient(to bottom right, #f0fdf4, #f0fdfa, #eff6ff);
padding: 1rem;
padding-bottom: 6rem;
.pageHeader {
.title {
color: #4caf50;
line-height: 1.4;
}
}
.listWrapper {
.taskItem {
.taskTitle {
line-height: 1.5;
}
.taskDates {
color: #6b7280;
}
}
}
}
</style>