浏览代码

feat: 新增预约取件的时间选择器

YuJing 1 月之前
父节点
当前提交
6aa8a9a1c7

+ 69 - 0
features/feature/src/main/ets/components/AppointmentTimeComp.ets

@@ -0,0 +1,69 @@
+import { DiaLogSheetControl, YTAvoid } from "basic"
+import { CustomTextStyle } from "../style/CustomTextStyle"
+
+@ComponentV2
+export struct AppointmentTimeComp {
+  @Param @Require control: DiaLogSheetControl
+
+
+  @Local selectDay: number = 0
+  @Local selectTime: number = 0
+  safeBottom: number = AppStorage.get(YTAvoid.SAFE_BOTTOM_KEY) as number
+
+  // 选择时间
+  onselectTime(index: number){
+    this.selectTime = index
+    this.control._onBackPress()
+  }
+
+  build() {
+    Column(){
+      Row(){
+        Text('期望上门时间')
+          .attributeModifier(new CustomTextStyle({size: 16, weight: 500, color: '#FF333333'}))
+
+        Image($r('[basic].media.icon_close'))
+          .width(22)
+          .aspectRatio(1)
+      }.width('100%')
+      .padding(15)
+      .justifyContent(FlexAlign.SpaceBetween)
+      .border({ width: { bottom: 1 }, color: '#F7F9FA' })
+
+      Row(){
+        // 今天 or 明天
+        Column(){
+          ForEach(['今天', '明天'], (item: string, index) => {
+            Text(item)
+              .padding({left: 27, top: 14, right: 27, bottom: 14})
+              .backgroundColor(this.selectDay == index ? Color.White : Color.Transparent)
+              .attributeModifier(new CustomTextStyle({size: 18, weight: 500, color: '#FF333333'}))
+              .onClick(() => { this.selectDay = index })
+          })
+        }.height('100%')
+        .backgroundColor('#F7F9FA')
+        .justifyContent(FlexAlign.Start)
+
+        //
+        List(){
+          ForEach(['8:00-9:00', '9:00-10:00', '10:00-11:00', '11:00-12:00', '13:00-16:00', '16:00-18:00'], (item: string, index) => {
+            ListItem(){
+              Row(){
+                Text(item)
+                  .attributeModifier(new CustomTextStyle({ size: 15, weight: 400, color: this.selectTime == index ? '#FFFDB818' : '#FF333333' }))
+              }.justifyContent(FlexAlign.Start)
+              .padding({left: 20, top: 14, right: 20, bottom: 14})
+              .onClick(() => { this.selectTime = index })
+            }
+          })
+        }.height('100%')
+        .width('100%')
+        .divider({ strokeWidth: 1, color: '#F7F9FA', startMargin: 20, endMargin: 20 })
+      }.width('100%')
+      .layoutWeight(1)
+    }.width('100%').height(300)
+    .backgroundColor(Color.White)
+    .padding({bottom: this.safeBottom})
+    .borderRadius({topLeft: 8, topRight: 8})
+  }
+}

+ 3 - 0
features/feature/src/main/ets/pages/BookList/BookSearchResultPage.ets

@@ -55,6 +55,9 @@ struct BookSearchResultPage {
         }.width('100%')
         .layoutWeight(1)
         .barHeight(0)
+        .onChange((index) => {
+          this.vm.changeCategory(index)
+        })
       }
       .width('100%').height('100%')
       .backgroundColor('#F7F9FA')

+ 3 - 18
features/feature/src/main/ets/pages/Order/ReserveReturnPage.ets

@@ -1,5 +1,6 @@
 import { BasicType, DiaLogSheetControl, YTAvoid, YtDatePicker, YTHeader, yTRouter } from 'basic'
 import { AddressItemComp } from '../../components/AddressItemComp'
+import { AppointmentTimeComp } from '../../components/AppointmentTimeComp'
 import { buttonComp } from '../../components/BuilderIndex'
 import { CustomTextStyle } from '../../style/CustomTextStyle'
 
@@ -128,26 +129,10 @@ struct ReserveReturnPage {
   // 时间选择器
   @Builder
   DatePickerBuilder(control: DiaLogSheetControl, date: string){
-    YtDatePicker({
-      selectDateBack: (date?: Date): boolean => {
-        if(!date) return control._onBackPress()
-        // 转换为 YY-MM-DD HH:mm:ss 格式
-        const year = date.getFullYear().toString();
-        const month = (date.getMonth() + 1).toString().padStart(2, '0');
-        const day = date.getDate().toString().padStart(2, '0');
-
-        const result = `${year}-${month}-${day}`;
-        return control._onBackPress(result)
-      },
-      selectedDate: date ? new Date(date) : new Date(),
-      linearInfo: { colors: [['#FFF6F6F6', 1]] },
-      needCancel: true
-    })
-    Column(){
-
-    }
+    AppointmentTimeComp({ control: control})
   }
 
+  // 提示文本
   @Builder
   textBuilder(){
     Column({space: 3}){