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

import {
  BasicType,
  IBestToast,
  reviseImgHeaderBuilder,
  takePicture,
  Upload,
  userInfo,
  UserInfo,
  YTAvoid,
  YTButton,
  YTHeader,
  YTLog,
  yTRouter,
  yTToast,
  YTUserRequest
} from 'basic'


@Builder
function settingBuilder() {
  NavDestination() {
    SettingPage()
  }
  .hideTitleBar(true)
}

@Component
struct SettingPage {
  @StorageProp(YTAvoid.SAFE_BOTTOM_KEY) safeBottom: number = 0
  @StorageProp(UserInfo.KEY) userInfo: UserInfo = userInfo
  @State showReviseName: boolean = false
  @State showHeaderImgRevise: boolean = false
  @State value: string = ''

  reviseBuilderArr: Array<BasicType<undefined>> = [
    {
      text: '头像修改',
      src: 'head',
      click: () => {
        this.showHeaderImgRevise = true
      }
    },
    {
      text: '昵称修改',
      src: 'name',
      click: () => {
        this.showReviseName = true
      }
    },
    {
      text: '密码设置',
      click: () => {
        yTRouter.pushPathByName("ChangePassWord", null)

      }
    }
  ]
  options: BasicType<undefined>[] = [
    {
      text: '拍照',
      click: async () => {
        try {
          const fullpath = await takePicture(this.getUIContext().getHostContext()!)
          this.showHeaderImgRevise = false
          yTRouter.router2DelPhotoPage({ src: fullpath, type: 'header' })
        } catch (e) {
          YTLog.warn(e)
        }
      }
    },
    {
      text: '从相册中选择',
      click: () => {
        Upload.selectImage(this.getUIContext().getHostContext()!, (fullPath) => {
          this.showHeaderImgRevise = false
          yTRouter.router2DelPhotoPage({ src: fullPath, type: 'header' })
        })
      }
    },
    {
      text: '取消',
      click: () => {
        this.showHeaderImgRevise = false
      }
    },
  ]
  private linearInfo: LinearGradientOptions = {
    colors: [ ['#B9FD2A', 0.01], ['#F5FD6D', 1] ],
    angle: 110
  }


  build() {
    Column() {
      YTHeader({ title: '用户设置' })
      Column() {
        ForEach(this.reviseBuilderArr, (item: BasicType<undefined>, index) => {
          this.reviseBuilder(item)
          if (index < this.reviseBuilderArr.length - 1) {
            Column() {
              Text('')
                .height(1)
                .width('100%')
                .backgroundColor('#0A000000')
            }
            .padding({ left: 12, right: 8 })
          }
        })
        YTButton({
          btContent: '注销用户',
          btFontColor: '#ff989494',
          bgc: Color.White,
          click: () => {
            yTToast.doubleConfirm({
              text: '警告⚠', message: '确定要注销吗？\n注销后数据可能丢失无法恢复！',
              click: () => {
                YTUserRequest.logout()
              },
            })
          }
        })
          .margin({ top: 426, bottom: 12 })
        YTButton({
          btContent: '退出登录', click: () => {
            this.userInfo.logout()
            yTRouter.routerBack()
            IBestToast.show({ message: '退出登录成功' })
          },
          btlinear: this.linearInfo,
          btFontColor: Color.Black,
          btFontSize: 16
        })

      }
      .bindSheet($$this.showReviseName, this.reviseNameBuilder, {
        height: 275,
        showClose: false,
        backgroundColor: Color.White
      })
      .padding({
        left: 16,
        right: 16,
      })
    }
    .padding({ bottom: this.safeBottom })
    .bindSheet($$this.showHeaderImgRevise, this.changeBuilder, {
      height: 204,
      backgroundColor: Color.White,
      showClose: false
    })
  }

  @Builder
  reviseBuilder(item: BasicType<undefined>) {
    Row() {
      Text(item.text)
        .fontSize($r('[basic].float.page_text_font_size_12'))
        .fontColor('#80000000')
      Row() {
        if (item.src === 'head') {
          Image(this.userInfo.getHeadImg() ? this.userInfo.getHeadImg() : $r('app.media.app_icon'))
            .height(24)
            .width(24)
            .borderRadius(12)
        } else if (item.src === 'name') {
          Text(this.userInfo.getName() ?? this.userInfo.getPhoneNumber() ?? this.userInfo.getId()?.toString())
            .fontSize($r('[basic].float.page_text_font_size_12'))
            .fontColor('#CC000000')
        }
        Image($r('app.media.right_arrow'))
          .width(24)
          .width(24)
      }
    }
    .width('100%')
    .justifyContent(FlexAlign.SpaceBetween)
    .padding({ left: 12, right: 4 })
    .height(36)
    .onClick(item.click)
  }

  @Builder
  reviseNameBuilder() {
    Column() {

      Text('昵称')
        .height(36)
        .width('100%')
        .fontSize(16)
        .fontColor('#ff989494')
        .textAlign(TextAlign.Start)

      TextInput({ text: $$this.value, placeholder: '请输入昵称' })
        .height(36)
        .fontSize(12)
        .width('100%')
        .border({ width: { bottom: 1 } })
        .borderRadius(0)
        .placeholderColor('#1C1C1C')
        .placeholderFont({ size: 12 })
        .backgroundColor(Color.Transparent)
        .margin({ bottom: 44 })
        .onChange((value) => {
          if (value.length > 7) {
            this.value = value.slice(0, 7)
            IBestToast.show({ type: "warning", message: '用户名称最大为7位' })
          }
        })

      Row({ space: 48 }) {
        YTButton({
          btContent: '取消',
          btHeight: 42,
          btWidth: 104,
          btBorder: { width: 1, color: '#1A000000' },
          btFontColor: '#353C46',
          btPadding: {
            left: 26,
            right: 26,
            top: 4,
            bottom: 4
          },
          bgc: '#F5F5F7',
          click: () => {
            this.showReviseName = false
            this.value = ''

          }
        })
        YTButton({
          btContent: '完成',
          btHeight: 42,
          btWidth: 104,
          btlinear: this.linearInfo,
          btFontColor: '#353C46',
          btPadding: {
            left: 26,
            right: 26,
            top: 4,
            bottom: 4
          },
          click: () => {
            if (!this.value) {
              IBestToast.show({
                type: "warning",
                message: "昵称不能为空"
              })
              return
            }
            YTUserRequest.changeNickname(this.value, () => {
              IBestToast.show({ message: '名称修改成功' })
              this.showReviseName = false
            })

          }
        })
      }
      .justifyContent(FlexAlign.Center)
      .width('100%')

    }
    .padding({ left: 22, right: 22, top: 24 })
  }

  @Builder
  changeBuilder() {
    reviseImgHeaderBuilder(this.options)
  }
}