feat: 初始填写信息页， 新增多个弹窗格式

commons/basic/src/main/ets/components/generalComp/YTDiaLogComp.ets

@@ -30,9 +30,9 @@ export struct YTDiaLogComp {
     }, () => {
       if(this.Align === YTDiaLogModel.Bottom) {
         this._offset = '0%'
-      } else {
+      } //else {
         this._opacity = 0
-      }
+      // }
     })
     setTimeout(() => {
       this._onPop()

commons/basic/src/main/ets/models/UserInfo.ets

@@ -54,8 +54,8 @@ export class UserInfo {
 
     if(isEmitter){
       emitter.emit(EmitterKeyCollection.LOGIN)
+      AppStorage.setOrCreate(UserInfo.KEY, userInfo)
     }
-    AppStorage.setOrCreate(UserInfo.KEY, userInfo)
   }
 
   /**

commons/basic/src/main/ets/models/YTDiaLogModel.ets

@@ -12,11 +12,16 @@ export enum DiaLogPageEnum{
   // 数字输入
   NumBerInput,
   // 文本输入
-  // TextInput,
+  TextInput,
   // 对话框 - 确认
   Confirm,
   // 底部菜单
   BottomMenu,
+
+  /***** 自定义 *******/
+
+  // 选择性别
+  SelectGender,
 }
 
 export interface DiaLogParam{

commons/basic/src/main/ets/models/index.ets

@@ -12,7 +12,8 @@ export interface BasicType<T = undefined> {
   generics?: T,
   date?: string,
   index?: number,
-  loginType?: LoginCollect
+  loginType?: LoginCollect,
+  id?: string
   finally?: () => void
 }
 

features/feature/src/main/ets/Apis/ApiUrl.ets

@@ -0,0 +1,3 @@
+export class ApiUrl{
+
+}

features/feature/src/main/ets/components/YTDiaLogBuild.ets

@@ -11,6 +11,10 @@ export function getBuilder(param: DiaLogParam, onBack: (ans?: string) => void){
   else if (param.pageEnum == DiaLogPageEnum.DatePicker) DatePickerBuilder(onBack, param.param)
   else if (param.pageEnum == DiaLogPageEnum.NumBerInput) NumberInputBuilder({onBack: onBack, param: param.param})
   else if (param.pageEnum == DiaLogPageEnum.Confirm) DoubleConfirm(onBack, param.param)
+  else if (param.pageEnum == DiaLogPageEnum.TextInput) InputComp({onBack: onBack, param: param.param})
+
+  /********  额外的   ***********/
+  else if (param.pageEnum == DiaLogPageEnum.SelectGender) GenderPickerBuilder(onBack, param.param)
 }
 
 // 底部菜单
@@ -118,6 +122,7 @@ struct NumberInputBuilder{
 
   build() {
     Column(){
+      // 标题
       RelativeContainer(){
         _YtHeader({ title: this.param?.text ?? '', isShowBackComp: false, })
           .height(44)
@@ -162,6 +167,7 @@ struct NumberInputBuilder{
       .height(210)
       .backgroundColor(Color.White)
 
+      // 数字键盘
       Column(){
         NumberKeyBoard({
           textInputValue: this.ans,
@@ -194,3 +200,108 @@ struct NumberInputBuilder{
     })
   }
 }
+
+
+// 输入框
+@ComponentV2
+struct InputComp{
+  @Event onBack: (ans?:string) => void
+  @Param @Require param: BasicType
+
+  @Local ans: string = ''
+
+  aboutToAppear(): void {
+    this.ans = this.param.text ?? ''
+  }
+
+  build() {
+    Column({space: 10}){
+      Row(){
+        Text("取消")
+          .fontSize(12)
+          .fontWeight(400)
+          .borderRadius(45)
+          .backgroundColor('#C1EDE9')
+          .padding({ left: 20,top: 8, right: 20, bottom: 8})
+          .onClick(() => {
+            this.onBack()
+          })
+
+        // Text(this.param.text ?? '')
+        //   .fontSize(18)
+        //   .fontWeight(500)
+
+        Text("确定")
+          .fontSize(12)
+          .fontWeight(400)
+          .borderRadius(45)
+          .fontColor(Color.White)
+          .backgroundColor('#30E3CE')
+          .padding({ left: 20,top: 8, right: 20, bottom: 8})
+          .onClick(() => {
+            this.onBack(this.ans)
+          })
+      }
+      .width("100%")
+      .alignItems(VerticalAlign.Center)
+      .justifyContent(FlexAlign.SpaceBetween)
+
+      TextInput({text: $$this.ans, placeholder: this.param.message})
+        .height('48')
+        .borderRadius(8)
+        .defaultFocus(true)
+        .maxLength(13)
+        .backgroundColor(Color.White)
+        .onSubmit(() => {
+          this.onBack(this.ans)
+        })
+    }
+    .width("100%")
+    .padding({ bottom: 42, left: 16, right: 16, top: 24 })
+    .backgroundColor('#B2F4EE')
+  }
+}
+
+// 性别 - 选择器
+@Builder
+function GenderPickerBuilder(onBack: (ans?:string) => void, param?: BasicType){
+  Column({space: 20}) {
+    Row(){
+      Text("性别")
+        .fontSize(18)
+        .fontWeight(500)
+    }
+    .alignItems(VerticalAlign.Center)
+    .justifyContent(FlexAlign.Center)
+    .width("100%")
+
+    Row(){
+      Text("女生")
+        .fontSize(16)
+        .fontWeight(500)
+        .backgroundColor('#E3FBFA')
+        .borderRadius(10)
+        .padding({ left: 38, right: 38, top: 12, bottom: 12 })
+        .onClick(() => {
+          onBack('女')
+        })
+
+      Text("男生")
+        .fontSize(16)
+        .fontWeight(500)
+        .fontColor(Color.White)
+        .backgroundColor('#30E3CE')
+        .borderRadius(10)
+        .padding({ left: 38, right: 38, top: 12, bottom: 12 })
+        .onClick(() => {
+          onBack('男')
+        })
+    }
+    .width('100%')
+    .alignItems(VerticalAlign.Center)
+    .justifyContent(FlexAlign.SpaceBetween)
+  }
+  .width("100%")
+  .backgroundColor('#B2F4EE')
+  .padding({ bottom: 60, left: 16, right: 16, top: 24 })
+}

features/feature/src/main/ets/components/ytBuildComp.ets

@@ -4,24 +4,32 @@ import { AppStorageV2 } from "@kit.ArkUI"
 
 @ComponentV2
 export struct ytBuildComp {
+  // 主体内容
   @BuilderParam main: () => void
-
+  // 是否登录
   @Local isLogin: boolean = false
   // 用户信息
   @Local userInfo: UserInfo = AppStorageV2.connect<UserInfo>(UserInfo, 'UserInfo', () => userInfo)!
+  // 是否校验登录
+  @Local checkLogin: boolean = false
 
   toLogin = () => {
     yTRouter.router2LoginPage(false)
   }
 
+  LoginStatusChange(){
+    this.isLogin = this.userInfo.checkLogin()
+    this.userInfo.setUserInfoAndLogin(userInfo, false)
+  }
+
   aboutToAppear(): void {
     emitter.on(EmitterKeyCollection.LOGIN, () => {
-      this.isLogin = true
+      this.LoginStatusChange()
     })
     emitter.on(EmitterKeyCollection.LOGOUT, () => {
-      this.isLogin = false
+      this.LoginStatusChange()
     })
-    this.isLogin = this.userInfo.checkLogin()
+    this.LoginStatusChange()
   }
 
   build() {
@@ -36,7 +44,7 @@ export struct ytBuildComp {
         left: { anchor: "__container__", align: HorizontalAlign.Start},
       })
 
-      if(!this.isLogin){
+      if(!this.isLogin && this.checkLogin){
         Row() {
           Text("登录使用更多功能")
             .fontSize(20)

features/feature/src/main/ets/pages/IncreaseBabyInfo.ets

@@ -0,0 +1,130 @@
+import { BasicType } from 'basic'
+import { _YtHeader } from '../components/_YtHeader'
+import { IncreaseBabyInfoViewModel } from '../viewModel/IncreaseBabyInfoViewModel'
+
+/**
+ * 添加宝宝信息页面
+ */
+@ComponentV2
+struct IncreaseBabyInfo {
+  @Local vm: IncreaseBabyInfoViewModel = new IncreaseBabyInfoViewModel()
+
+  build() {
+    NavDestination() {
+      Column(){
+        RelativeContainer() {
+          _YtHeader({title: "宝贝信息", isShowBackComp: false, _onBackPress: () => { this.vm._onBackPressed() }})
+            .width("100%")
+            .height(44)
+            .id('title')
+            .alignRules({
+              middle: { anchor: '__container__', align: HorizontalAlign.Center },
+              top: { anchor: '__container__', align: VerticalAlign.Top }
+            })
+
+          ForEach(this.vm.forEachData, (item: BasicType, index: number) => {
+            Column({space: 16}){
+              Text(item.text)
+                .fontSize(16)
+                .fontWeight(400)
+
+              if (item.date === 'birthDate') {
+                InputItem({item: item, value: this.vm.birthDate})
+              } else if (item.date === 'name') {
+                InputItem({item: item, value: this.vm.name})
+              } else if (item.date === 'gender') {
+                InputItem({item: item, value: this.vm.gender === undefined ? undefined : (this.vm.gender === 1 ? '男' : '女') })
+              }
+            }
+            .id(item.id)
+            .width('100%')
+            .padding({bottom: 32})
+            .justifyContent(FlexAlign.Center)
+            .alignItems(HorizontalAlign.Start)
+            .alignRules({
+              top: { anchor: index == 0 ? 'title' : this.vm.forEachData[index - 1].id, align: VerticalAlign.Bottom },
+              left: { anchor: index == 0 ? 'title' : this.vm.forEachData[index - 1].id, align: HorizontalAlign.Start }
+            })
+          })
+
+          // 完成按钮
+          Row(){
+            Text("完成")
+              .fontSize(20)
+              .fontColor(Color.White)
+              .borderRadius(24)
+              .padding({left: 100, right: 100, top: 12, bottom: 12})
+              .backgroundColor('#95C50A')
+          }
+          .id('complete')
+          .width("100%")
+          .padding({ left: 32, right: 32, top: 96, bottom: 16 })
+          .justifyContent(FlexAlign.Center)
+          .alignItems(VerticalAlign.Center)
+          .alignRules({
+            top: { anchor: this.vm.forEachData.pop()?.id, align: VerticalAlign.Bottom },
+            middle: { anchor: '__container__', align: HorizontalAlign.Center }
+          })
+          .onClick(() => { this.vm.complete() })
+
+          // 暂不填写
+          Text("暂不填写")
+            .fontSize(12)
+            .fontColor('rgba(0, 0, 0, 0.5)')
+            .alignRules({
+              top: { anchor: 'complete', align: VerticalAlign.Bottom },
+              middle: { anchor: '__container__', align: HorizontalAlign.Center }
+            })
+            .onClick(() => { this.vm.notFill() })
+        }
+        .width('100%')
+        .height('100%')
+      }
+      .width('100%')
+      .height('100%')
+      .alignItems(HorizontalAlign.Center)
+      .justifyContent(FlexAlign.Center)
+      .padding({ top: this.vm.safeTop, left: 16, right: 16, bottom: 24 })
+    }
+    .hideTitleBar(true)
+    .onBackPressed(() => {
+      return this.vm._onBackPressed()
+    })
+  }
+}
+
+// 单个输入框
+@ComponentV2 struct InputItem{
+  @Require @Param item: BasicType
+  @Require @Param value: string | undefined
+  build(){
+    Row(){
+      if(this.value) {
+        Text(this.value)
+          .fontSize(16)
+          .fontColor(Color.Black)
+      } else {
+        Text(this.item.message)
+          .fontSize(16)
+          .fontColor('rgba(0, 0, 0, 0.6)')
+      }
+      Image($r('app.media.icon_open'))
+        .width(8)
+        .aspectRatio(1)
+    }
+    .height(48)
+    .padding(16)
+    .width("100%")
+    .borderRadius(8)
+    .backgroundColor('#F6F6F6')
+    .alignItems(VerticalAlign.Center)
+    .justifyContent(FlexAlign.SpaceBetween)
+    .border({ width: 0 })
+    .onClick(this.item.click)
+  }
+}
+
+@Builder
+function IncreaseBabyInfoBuilder() {
+  IncreaseBabyInfo()
+}

features/feature/src/main/ets/utils/RouterUtils.ets

@@ -0,0 +1,9 @@
+import { yTRouter } from "basic";
+
+class RouterUtils{
+  router2IncreaseBabyInfo(){
+    yTRouter.pushPathByName('IncreaseBabyInfo', null)
+  }
+}
+
+export const routerUtils = new RouterUtils()

features/feature/src/main/ets/view/MainView.ets

@@ -1,9 +1,10 @@
 import { ytBuildComp } from "../components/ytBuildComp"
+import { routerUtils } from "../utils/RouterUtils"
+import { MainViewModel } from "../viewModel/MainViewModel"
 
 @ComponentV2
 export struct MainView {
-  aboutToAppear(): void {
-  }
+  @Local vm: MainViewModel = new MainViewModel()
 
   build() {
     ytBuildComp(){
@@ -90,15 +91,12 @@ export struct MainView {
           colors: [ ['#ABF5EC', 0.01], ['#FFFFFF', 0.8]],
           angle: 270
         })
+        .onClick(() => { routerUtils.router2IncreaseBabyInfo() })
 
       }
       .width("100%")
       .height("100%")
-      .padding({ top: 12, left: 16, right: 16 })
-      .linearGradient({
-        colors: [ ['#30E3CE', 0.01], ['#91F1FF', 0.03], ['#F1F1F1', 0.3] ],
-        angle: 200
-      })
+      .padding({ top: this.vm.safeTop + 12, left: 16, right: 16 })
     }
   }
 
@@ -112,11 +110,6 @@ export struct MainView {
 
       MenuItem({ content: '添加宝宝' })
         .onClick(() => {
-          // if(this.vm.userInfo.checkLogin()){
-          //   this.vm.goToAddBaby()
-          // } else {
-          //   yTRouter.router2LoginPage(true)
-          // }
         })
     }
   }

features/feature/src/main/ets/viewModel/IncreaseBabyInfoViewModel.ets

@@ -0,0 +1,115 @@
+import { BasicType, YTAvoid, yTRouter } from "basic";
+import { DiaLogPageEnum, DiaLogParam } from "basic/src/main/ets/models/YTDiaLogModel";
+import { data } from "@kit.TelephonyKit";
+
+@ObservedV2
+export class IncreaseBabyInfoViewModel{
+  @Trace safeTop: number = 0
+  // 出生日期
+  @Trace birthDate?: string
+  // 性别 0-未知 1-男 2-女
+  @Trace gender?: number
+  // 身高
+  @Trace height?: number
+  // 宝宝姓名
+  @Trace name?: string
+  // 与宝宝关系
+  @Trace relation?: string
+  // 体重
+  @Trace weight?: number
+
+  forEachData: Array<BasicType> = [
+    {
+      text: '生日',
+      message: '请选择宝宝生日',
+      id: 'forEach-BirthDay',
+      date: 'birthDate',
+      click: () => {
+        this.selectBirthDay()
+      },
+    }, {
+    text: '宝宝姓名',
+    message: '请输入宝宝姓名',
+    date: 'name',
+    id: 'forEach-Name',
+    click: () => {
+      this.inputName()
+    }
+  }, {
+    text: '性别',
+    message: '请选择宝宝性别',
+    date: 'gender',
+    id: 'forEach-Gender',
+    click: () => {
+      this.selectGender()
+    },
+  }
+  ]
+
+  constructor() {
+    this.safeTop = AppStorage.get(YTAvoid.SAFE_TOP_KEY) as number
+  }
+
+  /**
+   * 重写的返回逻辑
+   * @returns
+   */
+  _onBackPressed(){
+    yTRouter.pop('')
+    return true;
+  }
+
+  complete(){
+    this._onBackPressed()
+  }
+
+  notFill(){
+    this._onBackPressed()
+  }
+
+  // 选择生日
+  selectBirthDay(){
+    const param: DiaLogParam = {
+      pageEnum: DiaLogPageEnum.DatePicker,
+      param: {
+        date: this.birthDate
+      }
+    }
+    yTRouter.router2NaviDiaLog(param, (ans) => {
+      let date = ans.result
+      if(date){
+        this.birthDate = date as string
+      }
+    })
+  }
+
+  // 选择性别
+  selectGender(){
+    const param: DiaLogParam = {
+      pageEnum: DiaLogPageEnum.SelectGender,
+    }
+    yTRouter.router2NaviDiaLog(param, (ans) => {
+      let res = ans.result
+      if(res){
+        this.gender = res as number
+      }
+    })
+  }
+
+  // 输入宝宝姓名
+  inputName(){
+    const param: DiaLogParam = {
+      pageEnum: DiaLogPageEnum.TextInput,
+      param: {
+        text: this.name,
+        message: '请输入宝宝姓名'
+      }
+    }
+    yTRouter.router2NaviDiaLog(param, (ans) => {
+      let res = ans.result
+      if(res){
+        this.name = res as string
+      }
+    })
+  }
+}

features/feature/src/main/ets/viewModel/MainViewModel.ets

@@ -0,0 +1,21 @@
+import { YTAvoid, yTRouter } from "basic"
+
+@ObservedV2
+export class MainViewModel{
+  @Trace safeTop: number = 0
+
+  constructor() {
+    this.safeTop = AppStorage.get(YTAvoid.SAFE_TOP_KEY) as number
+  }
+
+  
+
+  /**
+   * 重写的返回逻辑
+   * @returns
+   */
+  _onBackPressed(){
+    yTRouter.pop('')
+    return true;
+  }
+}

features/feature/src/main/resources/base/media/icon_open.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1756692814371" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5383" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M814.08 583.936L357.76 978.56a109.824 109.824 0 0 1-106.496 18.56c-36.736-13.44-60.672-43.904-60.672-78.464V128.512c0-34.56 23.936-64.896 60.672-78.464A113.92 113.92 0 0 1 288.768 43.52c25.6 0 50.56 8.448 68.864 25.216L814.208 463.36a80.128 80.128 0 0 1 28.416 59.776c0 23.68-10.112 44.8-28.416 60.8z" fill="#CCCCCC" p-id="5384"></path></svg>

features/feature/src/main/resources/base/profile/router_map.json

@@ -4,6 +4,10 @@
       "name": "YTNaviDiaLog",
       "pageSourceFile": "src/main/ets/pages/YTNaviDiaLog.ets",
       "buildFunction": "YTNaviDiaLogBuilder"
+    }, {
+      "name": "IncreaseBabyInfo",
+      "pageSourceFile": "src/main/ets/pages/IncreaseBabyInfo.ets",
+      "buildFunction": "IncreaseBabyInfoBuilder"
     }
   ]
 }

products/entry/src/main/ets/pages/Index.ets

@@ -39,43 +39,42 @@ struct Index {
   build() {
     Navigation(yTRouter) {
       Column() {
-        // Tabs({ controller: this.tabsController }) {
-        //   ForEach(this.contentList, (_: BasicType<undefined>, index) => {
-        //     TabContent() {
-        //       if (index == 0) {
-        //         //放对应组件
-        //         MainView()
-        //       } else if (index == 1) {
-        //         SecondView()
-        //       } else if (index == 2) {
-        //         ThirdView()
-        //       } else {
-        //         Mine()
-        //       }
-        //     }
-        //   })
-        // }
-        // .onChange((index) => {
-        //   this.currentIndex = index
-        // })
-        // .barHeight(0)
-        // .layoutWeight(1)
-        // .scrollable(false)
+        Tabs({ controller: this.tabsController }) {
+          ForEach(this.contentList, (_: BasicType<undefined>, index) => {
+            TabContent() {
+              if (index == 0) {
+                //放对应组件
+                MainView()
+              } else if (index == 1) {
+                SecondView()
+              } else if (index == 2) {
+                ThirdView()
+              } else {
+                Mine()
+              }
+            }
+          })
+        }
+        .onChange((index) => {
+          this.currentIndex = index
+        })
+        .barHeight(0)
+        .layoutWeight(1)
+        .scrollable(false)
 
-        // Row() {
-        //   ForEach(this.contentList, (item: BasicType<undefined>, index) => {
-        //     this.barBuilder((() => {
-        //       item.index = index
-        //       return item
-        //     })())
-        //   })
-        // }
-        // .justifyContent(FlexAlign.SpaceAround)
-        // .width('100%')
-        // .padding({ bottom: this.bottom })
-        // .shadow({ offsetY: -13, radius: 16, color: '#0A000000' })
+        Row() {
+          ForEach(this.contentList, (item: BasicType<undefined>, index) => {
+            this.barBuilder((() => {
+              item.index = index
+              return item
+            })())
+          })
+        }
+        .justifyContent(FlexAlign.SpaceAround)
+        .width('100%')
+        .padding({ bottom: this.bottom })
+        .shadow({ offsetY: -13, radius: 16, color: '#0A000000' })
 
-        MainView()
       }
       .width('100%')
       .height('100%')