LoginView.ets 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. import { BasicType, YTButton, } from 'basic'
  2. import { LoginCollect } from 'basic/src/main/ets/models/LoginCollect'
  3. import { LoginInput } from '../components/LoginInput'
  4. import { OtherLoginMethods } from '../components/OtherLoginMethods'
  5. import { Terms } from '../components/Terms'
  6. import { CodeInputType } from '../models'
  7. @Component
  8. export struct LoginView {
  9. @State private loginCollect: LoginCollect = new LoginCollect('login')
  10. @State private isPassword: boolean = false
  11. private inputCaptchaType: CodeInputType = {
  12. txt: '验证码',
  13. placeHolder: '请输入验证码'
  14. }
  15. private inputPasswordType: CodeInputType = {
  16. txt: '密码',
  17. placeHolder: '请输入密码'
  18. }
  19. private loginMethodArr: BasicType<undefined>[] = [
  20. // {
  21. // src: $r('app.media.wechat'),
  22. // txt: '微信登入',
  23. // click: () => {
  24. // //使用微信sdk实现微信登录
  25. //
  26. // }
  27. // },
  28. {
  29. src: $r('app.media.hua_wei'),
  30. text: '华为登录',
  31. click: () => {
  32. this.loginCollect.executeLogin("harmony")
  33. }
  34. }
  35. ]
  36. private inputPhoneNumberType: CodeInputType = {
  37. txt: '+86',
  38. placeHolder: '请输入手机号'
  39. }
  40. forgetPassClick: () => void = () => {
  41. }
  42. build() {
  43. Column() {
  44. LoginInput({
  45. item: this.inputPhoneNumberType,
  46. inputData: this.loginCollect.phonenumber,
  47. isPassword: false,
  48. needCode: false,
  49. inputChange: (value: string) => {
  50. this.loginCollect.phonenumber = value
  51. }
  52. })
  53. if (this.isPassword) {
  54. LoginInput({
  55. item: this.inputPasswordType,
  56. inputData: this.loginCollect.password,
  57. isPassword: true,
  58. needCode: false,
  59. inputChange: (value: string) => {
  60. this.loginCollect.password = value
  61. }
  62. })
  63. } else {
  64. LoginInput({
  65. item: this.inputCaptchaType,
  66. inputData: this.loginCollect.smsCode,
  67. loginCollect: this.loginCollect,
  68. isAgree: this.loginCollect.isAgreePrivacy,
  69. inputChange: (value: string) => {
  70. this.loginCollect.smsCode = value
  71. },
  72. marginBottom: 19
  73. })
  74. }
  75. Terms({
  76. isAgree: this.loginCollect.isAgreePrivacy, mg: 13, onAgreeChange: () => {
  77. this.loginCollect.isAgreePrivacy = !this.loginCollect.isAgreePrivacy
  78. }
  79. })
  80. Row() {
  81. if (!this.isPassword) {
  82. Text('密码登录')
  83. .fontColor($r('[basic].color.main_ac_color_dark'))
  84. .fontSize(12)
  85. .fontWeight(700)
  86. .onClick(() => {
  87. this.isPassword = true
  88. })
  89. Blank()
  90. } else {
  91. Text('验证码登录')
  92. .fontColor($r('[basic].color.main_ac_color_dark'))
  93. .fontWeight(700)
  94. .fontSize(12)
  95. .onClick(() => {
  96. this.isPassword = false
  97. })
  98. Blank()
  99. Text('忘记密码?')
  100. .fontColor($r('[basic].color.main_ac_color_dark'))
  101. .fontSize(12)
  102. .fontWeight(700)
  103. .onClick(() => {
  104. this.forgetPassClick?.()
  105. })
  106. }
  107. }
  108. .width('100%')
  109. .margin({ top: 20, bottom: 20 })
  110. YTButton({
  111. btContent: '登录',
  112. click: () => {
  113. this.loginCollect.executeLogin("common")
  114. }
  115. })
  116. Text('未注册的手机号码登陆后将自动注册')
  117. .fontColor($r('[basic].color.main_ac_color_dark'))
  118. .fontSize(12)
  119. .margin({ top: 16, bottom: 56 })
  120. .alignSelf(ItemAlign.Start)
  121. OtherLoginMethods({ loginMethodArr: this.loginMethodArr })
  122. }
  123. .width('100%')
  124. .height('100%')
  125. }
  126. }