hookehuyr

feat(teacher/formPage): 添加时间选择器组件并优化表单布局

- 添加 VanDatetimePicker 和 VanTimePicker 组件声明
- 将日期选择器改为日期时间选择器组合
- 调整表单布局,合并作业频次和每周期提交数量到同一行
- 优化目标总数输入框宽度和样式
......@@ -44,6 +44,7 @@ declare module 'vue' {
VanCol: typeof import('vant/es')['Col']
VanConfigProvider: typeof import('vant/es')['ConfigProvider']
VanDatePicker: typeof import('vant/es')['DatePicker']
VanDatetimePicker: typeof import('vant/es')['DatetimePicker']
VanDialog: typeof import('vant/es')['Dialog']
VanDivider: typeof import('vant/es')['Divider']
VanDropdownItem: typeof import('vant/es')['DropdownItem']
......@@ -74,6 +75,7 @@ declare module 'vue' {
VanTabbarItem: typeof import('vant/es')['TabbarItem']
VanTabs: typeof import('vant/es')['Tabs']
VanTag: typeof import('vant/es')['Tag']
VanTimePicker: typeof import('vant/es')['TimePicker']
VanUploader: typeof import('vant/es')['Uploader']
VideoPlayer: typeof import('./components/ui/VideoPlayer.vue')['default']
WechatPayment: typeof import('./components/payment/WechatPayment.vue')['default']
......
......@@ -2,7 +2,7 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2025-01-20 10:00:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-09-30 16:22:57
* @LastEditTime: 2025-10-14 11:32:42
* @FilePath: /mlaj/src/views/teacher/formPage.vue
* @Description: 教师作业新增表单页面
-->
......@@ -57,9 +57,9 @@
</van-checkbox-group>
</div>
<!-- 作业周期 -->
<!-- 作业频次和每周期提交数量 -->
<van-row gutter="10" class="mb-4">
<van-col span="24">
<van-col span="12">
<label class="setting-label">{{ pageTitle === '设置作业' ? '作业' : '打卡' }}频次</label>
<van-field
v-model="formData.cycle_text"
......@@ -72,10 +72,6 @@
class="cycle-field"
/>
</van-col>
</van-row>
<!-- 每周期提交数量和目标总数 -->
<van-row gutter="10">
<van-col span="12">
<label class="setting-label">每周期提交数量</label>
<div class="target-count-container">
......@@ -90,7 +86,11 @@
<span class="target-unit">次</span>
</div>
</van-col>
<van-col span="12">
</van-row>
<!-- 目标总数 -->
<van-row gutter="10" class="mb-4">
<van-col span="24">
<label class="setting-label">目标总数</label>
<div class="target-count-container">
<van-stepper
......@@ -99,7 +99,7 @@
max="100"
integer
button-size="24px"
input-width="50%"
input-width="80%"
/>
<span class="target-unit">次</span>
</div>
......@@ -212,14 +212,44 @@
<!-- 开始时间选择器 -->
<van-popup v-model:show="showStartTimePicker" position="bottom">
<van-date-picker v-model="startDate" title="选择开始时间" :min-date="minDate" :max-date="maxDate"
@confirm="onStartTimeConfirm" @cancel="showStartTimePicker = false" />
<van-picker-group
title="选择开始时间"
:tabs="['选择日期', '选择时间']"
next-step-text="下一步"
@confirm="onStartTimeConfirm"
@cancel="showStartTimePicker = false"
>
<van-date-picker
v-model="startDate"
:min-date="minDate"
:max-date="maxDate"
/>
<van-time-picker
v-model="startTime"
:columns-type="['hour', 'minute', 'second']"
/>
</van-picker-group>
</van-popup>
<!-- 结束时间选择器 -->
<van-popup v-model:show="showEndTimePicker" position="bottom">
<van-date-picker v-model="endDate" title="选择结束时间" :min-date="minDate" :max-date="maxDate"
@confirm="onEndTimeConfirm" @cancel="showEndTimePicker = false" />
<van-picker-group
title="选择结束时间"
:tabs="['选择日期', '选择时间']"
next-step-text="下一步"
@confirm="onEndTimeConfirm"
@cancel="showEndTimePicker = false"
>
<van-date-picker
v-model="endDate"
:min-date="minDate"
:max-date="maxDate"
/>
<van-time-picker
v-model="endTime"
:columns-type="['hour', 'minute', 'second']"
/>
</van-picker-group>
</van-popup>
<!-- 课程选择器 -->
......@@ -404,6 +434,8 @@ const showClassPicker = ref(false);
// 日期选择器相关
const startDate = ref(['2024', '01', '01']);
const endDate = ref(['2024', '12', '31']);
const startTime = ref(['00', '00', '00']);
const endTime = ref(['23', '59', '59']);
const minDate = new Date(2020, 0, 1);
const maxDate = new Date(2035, 11, 31);
......@@ -541,7 +573,10 @@ const formatDateTime = (date) => {
const year = d.getFullYear();
const month = String(d.getMonth() + 1).padStart(2, '0');
const day = String(d.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
const hour = String(d.getHours()).padStart(2, '0');
const minute = String(d.getMinutes()).padStart(2, '0');
const second = String(d.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
};
/**
......@@ -566,6 +601,11 @@ const openStartTimePicker = () => {
(date.getMonth() + 1).toString().padStart(2, '0'),
date.getDate().toString().padStart(2, '0')
];
startTime.value = [
date.getHours().toString().padStart(2, '0'),
date.getMinutes().toString().padStart(2, '0'),
date.getSeconds().toString().padStart(2, '0')
];
}
showStartTimePicker.value = true;
};
......@@ -575,7 +615,15 @@ const openStartTimePicker = () => {
*/
const onStartTimeConfirm = () => {
const [year, month, day] = startDate.value;
formData.value.start_time = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
const [hour, minute, second] = startTime.value;
formData.value.start_time = new Date(
parseInt(year),
parseInt(month) - 1,
parseInt(day),
parseInt(hour),
parseInt(minute),
parseInt(second)
);
showStartTimePicker.value = false;
};
......@@ -591,6 +639,11 @@ const openEndTimePicker = () => {
(date.getMonth() + 1).toString().padStart(2, '0'),
date.getDate().toString().padStart(2, '0')
];
endTime.value = [
date.getHours().toString().padStart(2, '0'),
date.getMinutes().toString().padStart(2, '0'),
date.getSeconds().toString().padStart(2, '0')
];
}
showEndTimePicker.value = true;
};
......@@ -600,7 +653,15 @@ const openEndTimePicker = () => {
*/
const onEndTimeConfirm = () => {
const [year, month, day] = endDate.value;
formData.value.end_time = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
const [hour, minute, second] = endTime.value;
formData.value.end_time = new Date(
parseInt(year),
parseInt(month) - 1,
parseInt(day),
parseInt(hour),
parseInt(minute),
parseInt(second)
);
showEndTimePicker.value = false;
};
......@@ -985,18 +1046,19 @@ onMounted(async () => {
.target-count-container {
display: flex;
align-items: center;
justify-content: space-around;
gap: 8px;
}
.target-unit {
font-size: 14px;
color: #666;
flex-shrink: 0;
}
:deep(.van-stepper) {
background: #f5f5f5;
border-radius: 8px;
flex: 1;
}
/* 时间设置 */
......