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. private inputCaptchaType: CodeInputType = {
  11. txt: '验证码',
  12. placeHolder: '请输入验证码'
  13. }
  14. private inputPasswordType: CodeInputType = {
  15. txt: '密码',
  16. placeHolder: '请输入密码'
  17. }
  18. private loginMethodArr: BasicType<undefined>[] = [
  19. // {
  20. // src: $r('app.media.wechat'),
  21. // txt: '微信登入',
  22. // click: () => {
  23. // //使用微信sdk实现微信登录
  24. //
  25. // }
  26. // },
  27. {
  28. src: $r('app.media.hua_wei'),
  29. text: '华为登录',
  30. click: () => {
  31. this.loginCollect.executeLogin("harmony")
  32. }
  33. }
  34. ]
  35. private inputPhoneNumberType: CodeInputType = {
  36. txt: '+86',
  37. placeHolder: '请输入手机号'
  38. }
  39. forgetPassClick: () => void = () => {
  40. }
  41. build() {
  42. Column() {
  43. LoginInput({
  44. item: this.inputPhoneNumberType,
  45. inputData: this.loginCollect.phonenumber,
  46. isPassword: false,
  47. needCode: false,
  48. inputChange: (value: string) => {
  49. this.loginCollect.phonenumber = value
  50. }
  51. })
  52. if (this.loginCollect.isPassword) {
  53. LoginInput({
  54. item: this.inputPasswordType,
  55. inputData: this.loginCollect.password,
  56. isPassword: true,
  57. needCode: false,
  58. inputChange: (value: string) => {
  59. this.loginCollect.password = value
  60. },
  61. marginBottom: 19
  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.loginCollect.isPassword) {
  82. Text('密码登录')
  83. .fontColor($r('[basic].color.main_ac_color_dark'))
  84. .fontSize(12)
  85. .fontWeight(700)
  86. .onClick(() => {
  87. this.loginCollect.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.loginCollect.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. }