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

- 添加 VanDatetimePicker 和 VanTimePicker 组件声明 - 将日期选择器改为日期时间选择器组合 - 调整表单布局，合并作业频次和每周期提交数量到同一行 - 优化目标总数输入框宽度和样式

feat(teacher/formPage): 添加时间选择器组件并优化表单布局
- 添加 VanDatetimePicker 和 VanTimePicker 组件声明 - 将日期选择器改为日期时间选择器组合 - 调整表单布局，合并作业频次和每周期提交数量到同一行 - 优化目标总数输入框宽度和样式
hookehuyr
Commit ba42faae4800aef80ffe1ebdd24394f16db421be ba42faae 1 parent 72ab56f9
Showing 2 changed files with 81 additions and 17 deletions
src/components.d.ts
src/views/teacher/formPage.vue
--- a/src/components.d.ts
View file @ba42faa
+++ b/src/components.d.ts
View file @ba42faa
@@ -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']
--- a/src/views/teacher/formPage.vue
View file @ba42faa
+++ b/src/views/teacher/formPage.vue
View file @ba42faa
@@ -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"
+      <van-picker-group
-        @confirm="onStartTimeConfirm" @cancel="showStartTimePicker = false" />
+        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"
+      <van-picker-group
-        @confirm="onEndTimeConfirm" @cancel="showEndTimePicker = false" />
+        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;
 }
 /* 时间设置 */