Ver código fonte

feat: 添加时间选择器弹窗

YuJing 1 mês atrás
pai
commit
2dddc6d137

+ 1 - 0
commons/basic/Index.ets

@@ -119,6 +119,7 @@ export * from './src/main/ets/components/DiaLogComp/DiaLogControl'
 export * from './src/main/ets/components/DiaLogComp/DiaLogSheetComp'
 export * from './src/main/ets/models/NavDiaLogModel'
 
+export * from './src/main/ets/components/generalComp/YtDatePicker'
 
 
 

+ 6 - 2
commons/basic/src/main/ets/components/DiaLogComp/DiaLogComp.ets

@@ -7,7 +7,7 @@ export struct DiaLogComp {
   @Param controller?: DiaLogCompControl = undefined
   @Param param: BasicType = {}
 
-  @BuilderParam container: () => void = this.containerComp
+  @BuilderParam container: () => void
 
   control: DiaLogCompControl = new DiaLogCompControl(this.getUIContext())
 
@@ -21,7 +21,11 @@ export struct DiaLogComp {
     NavDestination(){
       Column(){
         Column(){
-          this.container()
+          if(this.container) {
+            this.container()
+          } else {
+            this.containerComp()
+          }
         }
         // 屏蔽外部容器的点击事件
         .onClick(() => {})

+ 3 - 1
commons/basic/src/main/ets/components/DiaLogComp/DiaLogControl.ets

@@ -51,6 +51,7 @@ export class DiaLogSheetControl{
   isBack: boolean = false
   containerH: number = 0
   conText: UIContext;
+  needEffect: boolean
 
   appear(){
     this.conText.animateTo({duration: 300}, () => {
@@ -99,8 +100,9 @@ export class DiaLogSheetControl{
     return true
   }
 
-  constructor(conText: UIContext) {
+  constructor(conText: UIContext, needEffect: boolean = true) {
     this.conText = conText
+    this.needEffect = needEffect
   }
 }
 

+ 7 - 3
commons/basic/src/main/ets/components/DiaLogComp/DiaLogSheetComp.ets

@@ -6,7 +6,7 @@ export struct DiaLogSheetComp {
   @Param controller?: DiaLogSheetControl = undefined
   @Param params: Array<BasicType> = []
 
-  @BuilderParam container: () => void = this.containerComp
+  @BuilderParam container: () => void
 
   control: DiaLogSheetControl = new DiaLogSheetControl(this.getUIContext())
 
@@ -29,14 +29,18 @@ export struct DiaLogSheetComp {
 
         Column() {
           Column(){
-            this.container()
+            if(this.container) {
+              this.container()
+            } else {
+              this.containerComp()
+            }
           }
           .onAreaChange((o, n) => {
             this.control.containerH = n.height as number
           })
 
           Blank()
-            .height(this.control.h_)
+            .height(this.control.needEffect ? this.control.h_ : 0)
             .backgroundColor(Color.White)
         }
         .onTouch((event: TouchEvent) => {

+ 79 - 0
commons/basic/src/main/ets/components/generalComp/YtDatePicker.ets

@@ -0,0 +1,79 @@
+
+// 日期选择器
+@ComponentV2
+export struct YtDatePicker{
+  @Once @Param selectedDate: Date = new Date();
+  @Param linearInfo: LinearGradientOptions = {
+    colors: [['#ACF4EB', 0.01], ['#D3F9FF', 0.2] ],
+    angle: 150
+  }
+  @Param needCancel: boolean = false;
+
+  @Event selectDateBack: (date?: Date) => void = (date?: Date) => {
+    console.log("选择的日期" + date?.toLocaleString())
+  }
+
+  build() {
+    Column({space: 15}){
+      Row(){
+        Text(this.needCancel ? "取消" : "今天")
+          .fontColor(Color.Black)
+          .fontSize(this.needCancel ? 16 : 18 )
+          .fontWeight(this.needCancel ? 500 : 700)
+          .onClick(() => {
+            if(this.needCancel) {
+              this.selectDateBack()
+            } else {
+              this.selectedDate = new Date()
+            }
+          })
+        Text("确认")
+          .fontSize(16)
+          .fontWeight(500)
+          .borderRadius(32)
+          .fontColor(Color.Black)
+          // .linearGradient(this.linearInfo)
+          .padding({ left: 16, right: 16, top: 4, bottom: 4})
+          .onClick(() => {
+            this.selectDateBack(this.selectedDate)
+          })
+      }
+      .width("100%")
+      .justifyContent(FlexAlign.SpaceBetween)
+      .padding({ left: 16, right: 16, top: 16, bottom: 16})
+
+
+      Stack({alignContent: Alignment.Center}){
+        Row()
+          .width("100%")
+          .height(55)
+          .borderRadius(8)
+          .linearGradient(this.linearInfo)
+
+        DatePicker({
+          // end: new Date(),
+          selected: this.selectedDate,
+        })
+          .selectedTextStyle({
+            color: Color.Black,
+          })
+          .onDateChange((date: Date) => {
+            this.selectedDate = date
+          })
+          .textStyle({
+            color: Color.Black,
+          })
+      }
+      .padding({ left: 13, right: 13})
+    }
+    .width("100%")
+    .borderRadius({topLeft: 12, topRight: 12})
+    .padding({ top: 20, bottom: 20 })
+    .backgroundColor(Color.White)
+    .shadow({
+      radius: 10,
+      type: ShadowType.COLOR,
+      color: Color.Black
+    })
+  }
+}

+ 40 - 1
features/user/src/main/ets/pages/SettingPage.ets

@@ -1,10 +1,12 @@
 import {
   BasicType,
   DiaLogCompControl,
+  DiaLogSheetControl,
   IBestToast,
   userInfo,
   UserInfo,
   YTAvoid,
+  YtDatePicker,
   YTHeader,
   YTLog,
   YTPhotoHelper,
@@ -62,11 +64,11 @@ struct SettingPage {
       text: '生日',
       click: () => {
         // this.openReviseNameBuilder()
+        this.openTimePickerBuilder()
       }
     },
   ]
 
-
   private options: BasicType[] = [
     {
       text: '拍照',
@@ -121,6 +123,23 @@ struct SettingPage {
     })
   }
 
+  // 打开时间选择器弹窗
+  openTimePickerBuilder() {
+    let control = new DiaLogSheetControl(this.getUIContext(), false)
+    yTRouter.router2BottomDialog({
+      param: { text: this.userInfo.getName() ?? this.userInfo.getPhoneNumber() ?? this.userInfo.getId()?.toString() },
+      control: control,
+      builder: () => {
+        this.DatePickerBuilder(control, '2025-11-04')
+      }
+    }, (info: PopInfo) => {
+      let ans = info.result as string
+      // YTUserRequest.changeNickname(ans, () => {
+      //   IBestToast.show({ message: '名称修改成功' })
+      // })
+    })
+  }
+
   build() {
     Column() {
       YTHeader({ defaultStyle: { title: '用户设置' }, bgc: Color.White })
@@ -270,4 +289,24 @@ struct SettingPage {
   .alignItems(HorizontalAlign.Center)
   .padding({left: 32, right: 32, top: 16, bottom: 8})
 }
+
+  // 时间选择器
+  @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
+  })
+}
 }