feat: 优化弹窗相关代码

commons/basic/Index.ets

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

commons/basic/src/main/ets/components/DiaLogComp/DiaLogComp.ets

@@ -1,13 +1,22 @@
-import { BasicType } from "../../../../../Index"
+import { BasicType, NavDiaLogModel } from "../../../../../Index"
+import { ReviseName } from "../toastBuilders/DiaLogBuild"
 import { DiaLogCompControl } from "./DiaLogControl"
 
 @ComponentV2
 export struct DiaLogComp {
-  @Param controller: DiaLogCompControl = new DiaLogCompControl(this.getUIContext())
+  @Param controller?: DiaLogCompControl = undefined
   @Param param: BasicType = {}
 
   @BuilderParam container: () => void = this.containerComp
 
+  control: DiaLogCompControl = new DiaLogCompControl(this.getUIContext())
+
+  aboutToAppear(): void {
+    if (this.controller) {
+      this.control = this.controller
+    }
+  }
+
   build() {
     NavDestination(){
       Column(){
@@ -16,61 +25,71 @@ export struct DiaLogComp {
         }
         // 屏蔽外部容器的点击事件
         .onClick(() => {})
-        .scale({ x: this.controller.opacity_, y: this.controller.opacity_ })
+        .scale({ x: this.control.opacity_, y: this.control.opacity_ })
       }
       .width("100%")
       .height("100%")
-      .opacity(this.controller.opacity_)
-      .backgroundColor(this.controller.bgc)
+      .opacity(this.control.opacity_)
+      .backgroundColor(this.control.bgc)
       .justifyContent(FlexAlign.Center)
       .alignItems(HorizontalAlign.Center)
-      .onClick(() => { this.controller._onBackPress(0)})
-      .onAppear(() => { this.controller.appear() })
+      .onClick(() => { this.control._onBackPress()})
+      .onAppear(() => { this.control.appear() })
     }
     .hideTitleBar(true)
     .mode(NavDestinationMode.DIALOG)
-    .onBackPressed(() => { return this.controller._onBackPress(0) })
+    .onBackPressed(() => { return this.control._onBackPress() })
     .systemTransition(NavigationSystemTransitionType.NONE)
   }
 
   @Builder
   containerComp(){
-    Column() {
+    if (this.controller?.diaLogType == 'ReviseName') {
+      ReviseName(this.param, this.control)
+    } else {
+      Column() {
         Text(this.param.text ?? '一个弹窗')
           .fontColor(Color.Black)
           .lineHeight(18)
           .fontSize(18)
           .textAlign(TextAlign.Center)
           .margin({ bottom: 18 })
-      Row() {
-        Text('取消')
-          .fontSize(16)
-          .fontWeight(400)
-          .borderRadius(36)
-          .fontColor(Color.Black)
-          .backgroundColor('#F5F5F7')
-          .padding({ left: 36, top: 9, right: 36, bottom: 9})
-          .onClick(() => {
-            this.controller._onBackPress(0)
-          })
+        Row() {
+          Text('取消')
+            .fontSize(16)
+            .fontWeight(400)
+            .borderRadius(36)
+            .fontColor(Color.Black)
+            .backgroundColor('#F5F5F7')
+            .padding({ left: 36, top: 9, right: 36, bottom: 9})
+            .onClick(() => {
+              this.control._onBackPress(0)
+            })
 
-        Text('确定')
-          .fontSize(16)
-          .fontWeight(400)
-          .borderRadius(36)
-          .fontColor(Color.Black)
-          .padding({ left: 36, top: 9, right: 36, bottom: 9})
-          .backgroundColor(this.param.color ?? '#FFFECF2F')
-          .onClick(() => {
-            this.controller._onBackPress(1)
-          })
+          Text('确定')
+            .fontSize(16)
+            .fontWeight(400)
+            .borderRadius(36)
+            .fontColor(Color.Black)
+            .padding({ left: 36, top: 9, right: 36, bottom: 9})
+            .backgroundColor(this.param.color ?? '#FFFECF2F')
+            .onClick(() => {
+              this.control._onBackPress(1)
+            })
+        }
+        .justifyContent(FlexAlign.SpaceBetween)
+        .width('100%')
       }
-      .justifyContent(FlexAlign.SpaceBetween)
-      .width('100%')
+      .width(280)
+      .borderRadius(8)
+      .backgroundColor(Color.White)
+      .padding({ top: 28, left: 32, right: 32, bottom: 20 })
     }
-    .width(280)
-    .borderRadius(8)
-    .backgroundColor(Color.White)
-    .padding({ top: 28, left: 32, right: 32, bottom: 20 })
+
   }
 }
+
+@Builder
+export function DiaLogCompBuilder(_: string, param: NavDiaLogModel){
+  DiaLogComp({ param: param.param, controller: param.control })
+}

commons/basic/src/main/ets/components/DiaLogComp/DiaLogControl.ets

@@ -11,6 +11,8 @@ export class DiaLogCompControl{
 
   isBack: boolean = false
 
+  diaLogType?: string = undefined
+
   appear(): void {
     this.conText.animateTo({ duration: 300 }, () => {
       this.opacity_ = 1
@@ -81,7 +83,7 @@ export class DiaLogSheetControl{
     }
   }
 
-  _onBackPress: (ans?: ESObject) => boolean = (ans: ESObject) => {
+  _onBackPress(ans?: ESObject) {
     if(this.isBack) return true
 
     this.isBack = true
@@ -91,7 +93,7 @@ export class DiaLogSheetControl{
       this.opacity_ = 0
 
       setTimeout(() => {
-        yTRouter.pop(ans ?? 0, false)
+        yTRouter.pop(ans, false)
       }, 300)
     })
     return true

commons/basic/src/main/ets/components/DiaLogComp/DiaLogSheetComp.ets

@@ -1,16 +1,32 @@
-import { BasicType } from "../../../../../Index"
+import { BasicType, NavDiaLogModel } from "../../../../../Index"
 import { DiaLogSheetControl } from "./DiaLogControl"
 
 @ComponentV2
 export struct DiaLogSheetComp {
-  @Param control: DiaLogSheetControl = new DiaLogSheetControl(this.getUIContext())
+  @Param controller?: DiaLogSheetControl = undefined
   @Param params: Array<BasicType> = []
 
   @BuilderParam container: (_: () => void) => void = this.containerComp
 
+  control: DiaLogSheetControl = new DiaLogSheetControl(this.getUIContext())
+
+  aboutToAppear(): void {
+    if(this.controller) {
+      this.control = this.controller
+    }
+  }
+
   build() {
     NavDestination() {
       Column() {
+        Column().layoutWeight(1).width('100%')
+          .gesture(
+          TapGesture()
+            .onAction(() => {
+              this.control._onBackPress()
+            })
+        )
+
         Column() {
           Column(){
             this.containerComp()
@@ -23,10 +39,10 @@ export struct DiaLogSheetComp {
             .height(this.control.h_)
             .backgroundColor(Color.White)
         }
-        .onClick(() => {})
-        // 阻塞事件冒泡： 不会触发父组件的点击事件
-        .hitTestBehavior(HitTestMode.Block)
-        .onTouch((event: TouchEvent) => { this.control.edgeEffect(event) })
+        .onTouch((event: TouchEvent) => {
+          this.control.edgeEffect(event)
+          event.stopPropagation();
+        })
         .offset({ y: this.control.h_ < 0 ? Math.abs(this.control.h_ as number) : 0 })
       }
       .width('100%')
@@ -37,12 +53,6 @@ export struct DiaLogSheetComp {
       .justifyContent(FlexAlign.End)
       .onAppear(() => { this.control.appear() })
       .alignItems(HorizontalAlign.Center)
-      .gesture(
-        TapGesture()
-          .onAction(() => {
-            this.control._onBackPress()
-          })
-      )
     }
     .hideTitleBar(true)
     .mode(NavDestinationMode.DIALOG)
@@ -60,7 +70,9 @@ export struct DiaLogSheetComp {
             .textAlign(TextAlign.Center)
         }
         .width("100%")
-        .onClick(() => { this.control._onBackPress(item.text) })
+        .onClick(() => {
+          this.control._onBackPress(item.text)
+        })
         .alignItems(VerticalAlign.Center)
         .justifyContent(FlexAlign.Center)
         .padding({ top: 24, bottom: 24 })
@@ -77,7 +89,7 @@ export struct DiaLogSheetComp {
       .alignItems(VerticalAlign.Center)
       .justifyContent(FlexAlign.Center)
       .padding({ top: 24, bottom: 24 })
-      .onClick(() => { this.control._onBackPress(0) })
+      .onClick(() => { this.control._onBackPress() })
     }
     .width("100%")
     .padding({ bottom: 30 })
@@ -86,4 +98,9 @@ export struct DiaLogSheetComp {
     .alignItems(HorizontalAlign.Center)
     .borderRadius({ topLeft: 8, topRight: 8 })
   }
+}
+
+@Builder
+export function DiaLogSheetCompBuilder(_: string, params: NavDiaLogModel){
+  DiaLogSheetComp({ params: params.params, controller: params?.control as DiaLogSheetControl })
 }

commons/basic/src/main/ets/components/toastBuilders/DiaLogBuild.ets

@@ -0,0 +1,54 @@
+import { BasicType, DiaLogCompControl, IBestToast } from '../../../../../Index'
+
+@Builder
+export function ReviseName(param: BasicType, control: DiaLogCompControl){
+  Column(){
+    Text('宝贝昵称')
+      .fontSize(16)
+      .fontWeight(600)
+      .fontColor('#FF000000')
+
+    TextInput({text: param.text})
+      .padding(10)
+      .borderRadius(7)
+      .backgroundColor('#F5F7F5')
+      .onChange((text) => {
+        param.text = text
+      })
+      .margin({top: 17})
+
+    Row({space: 42}){
+      Text('取消')
+        .borderRadius(22)
+        .fontColor('#FF000000')
+        .backgroundColor('#FFF5F7F5')
+        .padding({top: 10, left: 36, right: 36, bottom: 10})
+        .onClick(() => {
+          control._onBackPress()
+        })
+
+      Text('保存')
+        .borderRadius(22)
+        .fontColor('#FF000000')
+        .backgroundColor('#FFFECF2F')
+        .padding({top: 10, left: 36, right: 36, bottom: 10})
+        .onClick(() => {
+          if (!param.text) {
+            IBestToast.show({
+              type: "warning",
+              message: "昵称不能为空"
+            })
+            return
+          }
+          control._onBackPress(param.text)
+        })
+    }
+    .margin({top: 12})
+  }
+  .width(312)
+  .height(158)
+  .borderRadius(12)
+  .backgroundColor(Color.White)
+  .alignItems(HorizontalAlign.Center)
+  .padding({left: 32, right: 32, top: 16, bottom: 8})
+}

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

@@ -0,0 +1,7 @@
+import { BasicType, DiaLogCompControl, DiaLogSheetControl } from "../../../../Index";
+
+export interface NavDiaLogModel {
+  param?: BasicType,
+  params?: Array<BasicType>,
+  control?: DiaLogCompControl | DiaLogSheetControl
+}

commons/basic/src/main/ets/utils/arkts/utils/YTRouter.ets

@@ -1,5 +1,6 @@
 import { IBestToast } from '@ibestservices/ibest-ui'
-import { DelPhotoParam } from '../../../models'
+import { BasicType, DelPhotoParam } from '../../../models'
+import { NavDiaLogModel } from '../../../models/NavDiaLogModel'
 
 class YTRouter extends NavPathStack {
   private static declare instance: YTRouter
@@ -110,6 +111,16 @@ class YTRouter extends NavPathStack {
   router2BorrowAnsPage(){
     this.pushPathByName('BorrowAnsPage', null)
   }
+
+  // 中心弹窗
+  router2CenterDialog(param: NavDiaLogModel, callBack: Callback<PopInfo>) {
+    this.pushPathByName('DiaLogComp', param, callBack, false)
+  }
+
+  // 底部弹窗
+  router2BottomDialog(param: NavDiaLogModel, callBack: Callback<PopInfo>) {
+    this.pushPathByName('DiaLogSheetComp', param, callBack, false)
+  }
 }
 
 export const yTRouter = YTRouter.getInstance()

commons/basic/src/main/resources/base/profile/router_map.json

@@ -1,3 +1,14 @@
 {
-  "routerMap": []
+  "routerMap": [
+    {
+      "name": "DiaLogComp",
+      "pageSourceFile": "src/main/ets/components/DiaLogComp/DiaLogComp.ets",
+      "buildFunction": "DiaLogCompBuilder"
+    },
+    {
+      "name": "DiaLogSheetComp",
+      "pageSourceFile": "src/main/ets/components/DiaLogComp/DiaLogSheetComp.ets",
+      "buildFunction": "DiaLogSheetCompBuilder"
+    }
+  ]
 }

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

@@ -6,7 +6,7 @@ struct DiaLogPage {
   @Param param: DiaLogParam = {}
 
   build() {
-    if(this.param.isCenter ?? true) {
+    if(this.param?.isCenter ?? true) {
       DiaLogComp({param: this.param.param})
     } else {
       DiaLogSheetComp({params: this.param.params})

features/user/src/main/ets/pages/SettingPage.ets

@@ -1,5 +1,6 @@
 import {
   BasicType,
+  DiaLogCompControl,
   IBestToast,
   reviseImgHeaderBuilder,
   userInfo,
@@ -25,7 +26,6 @@ function settingBuilder() {
 @Component
 struct SettingPage {
   @State showReviseName: boolean = false
-  @State showHeaderImgRevise: boolean = false
   @StorageProp(YTAvoid.SAFE_BOTTOM_KEY) private safeBottom: number = 0
   @StorageProp(UserInfo.KEY) private userInfo: UserInfo = userInfo
   @State private value: string = ''
@@ -35,14 +35,15 @@ struct SettingPage {
       text: '头像修改',
       src: '头像',
       click: () => {
-        this.showHeaderImgRevise = true
+        this.openChangeBuilder()
       }
     },
     {
       text: '昵称修改',
       src: '名称',
       click: () => {
-        this.showReviseName = true
+        // this.showReviseName = true
+        this.openReviseNameBuilder()
       }
     },
   // {
@@ -58,7 +59,6 @@ struct SettingPage {
       click: async () => {
         try {
           const fullpath = await this.yTPhotoHelper.takePicture()
-          this.showHeaderImgRevise = false
           yTRouter.router2DelPhotoPage({ src: fullpath, type: 'header' })
         } catch (e) {
           YTLog.warn(e)
@@ -70,19 +70,41 @@ struct SettingPage {
       click: () => {
         this.yTPhotoHelper.selectImage(
           (fullPath) => {
-            this.showHeaderImgRevise = false
             yTRouter.router2DelPhotoPage({ src: fullPath, type: 'header' })
           })
       }
-    },
-    {
-      text: '取消',
-      click: () => {
-        this.showHeaderImgRevise = false
-      }
-    },
+    }
   ]
 
+  // 打开头像修改弹窗
+  openChangeBuilder() {
+    yTRouter.router2BottomDialog({
+      params: this.options
+    }, (info: PopInfo) => {
+      let ans = info.result as string
+      if (ans == '拍照') {
+        this.options?.[0]?.click?.()
+      } else if(ans == '从相册中选择') {
+        this.options?.[1]?.click?.()
+      }
+    })
+  }
+
+  // 打开名称修改弹窗
+  openReviseNameBuilder() {
+    let control = new DiaLogCompControl(this.getUIContext())
+    control.diaLogType = 'ReviseName'
+    yTRouter.router2CenterDialog({
+      param: { text: this.userInfo.getName() ?? this.userInfo.getPhoneNumber() ?? this.userInfo.getId()?.toString() },
+      control: control
+    }, (info: PopInfo) => {
+      let ans = info.result as string
+      YTUserRequest.changeNickname(ans, () => {
+        IBestToast.show({ message: '名称修改成功' })
+      })
+    })
+  }
+
   build() {
     Column() {
       YTHeader({ defaultStyle: { title: '用户设置' } })
@@ -152,11 +174,11 @@ struct SettingPage {
       })
     }
     .padding({ bottom: this.safeBottom })
-    .bindSheet($$this.showHeaderImgRevise, this.changeBuilder, {
-      height: 204,
-      backgroundColor: Color.White,
-      showClose: false
-    })
+    // .bindSheet($$this.showHeaderImgRevise, this.changeBuilder, {
+    //   height: 204,
+    //   backgroundColor: Color.White,
+    //   showClose: false
+    // })
   }
 
   @Builder
@@ -265,9 +287,4 @@ struct SettingPage {
     }
     .padding({ left: 22, right: 22, top: 8 })
   }
-
-  @Builder
-  changeBuilder() {
-    reviseImgHeaderBuilder(this.options)
-  }
 }