login.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. <route lang="json5" type="page">
  2. {
  3. layout: 'default',
  4. style: {
  5. navigationStyle: 'custom',
  6. },
  7. }
  8. </route>
  9. <script lang="ts" setup>
  10. import { useUserStore } from '@/store/user'
  11. import { goBack, toPage } from '@/utils/page'
  12. import { toast } from '@/utils/toast'
  13. defineOptions({
  14. name: 'Login', // 登录
  15. })
  16. // 获取屏幕边界到安全区域距离
  17. const systemInfo = uni.getSystemInfoSync()
  18. const safeAreaInsets = systemInfo.safeAreaInsets
  19. // 用户状态管理
  20. const userStore = useUserStore()
  21. // 表单数据
  22. const formData = ref({
  23. username: '',
  24. password: '',
  25. })
  26. // 表单验证
  27. function validateForm() {
  28. return new Promise((resolve) => {
  29. // 验证用户名
  30. if (!formData.value.username.trim()) {
  31. toast.error('Please enter username or phone number')
  32. resolve(false)
  33. return
  34. }
  35. // 验证密码
  36. if (!formData.value.password.trim()) {
  37. toast.error('Please enter password')
  38. resolve(false)
  39. return
  40. }
  41. // 验证密码长度
  42. if (formData.value.password.length < 6 || formData.value.password.length > 20) {
  43. toast.error('Password should be 6-20 characters')
  44. resolve(false)
  45. return
  46. }
  47. resolve(true)
  48. })
  49. }
  50. // 登录处理
  51. async function handleLogin() {
  52. try {
  53. // 表单验证
  54. const isValid = await validateForm()
  55. if (!isValid)
  56. return
  57. // 准备登录数据
  58. const loginData = {
  59. account: formData.value.username,
  60. pwd: formData.value.password,
  61. }
  62. // 获取页面参数中的跳转地址(如果有的话)
  63. const pages = getCurrentPages()
  64. const currentPage = pages[pages.length - 1] as any
  65. const redirectUrl = currentPage?.options?.redirect
  66. // 调用 userStore 中的登录方法,传入跳转地址
  67. await userStore.login(loginData, redirectUrl)
  68. }
  69. catch (error) {
  70. // 错误处理已在 userStore.login 中处理
  71. console.error('Login error:', error)
  72. }
  73. }
  74. </script>
  75. <template>
  76. <view class="login-page min-h-screen bg-white">
  77. <!-- 背景图片区域 -->
  78. <view class="auth-bg-section relative">
  79. <!-- 自定义导航栏 -->
  80. <view :style="{ paddingTop: `${safeAreaInsets?.top}px` }">
  81. <view class="h-88rpx flex items-center px-24rpx">
  82. <wd-icon name="arrow-left" size="48rpx" color="#333" @click="goBack" />
  83. </view>
  84. </view>
  85. <!-- Logo和标语 -->
  86. <view class="pb-60rpx pt-60rpx text-center">
  87. <view class="mb-20rpx flex items-center justify-center">
  88. <image src="/static/logo.png" class="mr-16rpx h-60rpx w-60rpx" />
  89. </view>
  90. </view>
  91. </view>
  92. <!-- 表单内容区域 -->
  93. <view class="flex flex-col px-20rpx">
  94. <view class="mb-40rpx" />
  95. <!-- 登录表单 -->
  96. <wd-form ref="form" :model="formData">
  97. <view class="mb-40rpx space-y-32rpx">
  98. <wd-input
  99. v-model="formData.username"
  100. prop="username"
  101. placeholder="Mobile number / Username"
  102. no-border
  103. custom-class="bandhu-auth-input-field"
  104. />
  105. <wd-input
  106. v-model="formData.password"
  107. prop="password"
  108. placeholder="Password 6-20 characters"
  109. no-border show-password
  110. custom-class="bandhu-auth-input-field"
  111. />
  112. </view>
  113. <!-- 登录按钮 -->
  114. <wd-button
  115. type="error"
  116. size="large"
  117. custom-class="mb-60rpx w-full bandhu-auth-primary-btn"
  118. @click="handleLogin"
  119. >
  120. Login
  121. </wd-button>
  122. </wd-form>
  123. <!-- 注册提示 -->
  124. <view class="mb-200rpx text-center">
  125. <text class="text-28rpx text-#5C5C5C">
  126. Do Not Have An Account Yet?
  127. </text>
  128. <view class="mt-52rpx">
  129. <wd-button
  130. type="error"
  131. plain
  132. custom-style="width: 200rpx; height: 72rpx; border-radius: 36rpx; font-size: 28rpx;"
  133. @click="toPage('/pages/register/register')"
  134. >
  135. Register
  136. </wd-button>
  137. </view>
  138. </view>
  139. <!-- 忘记密码 -->
  140. <view class="text-center">
  141. <text class="text-28rpx text-#5C5C5C" @click="toPage('/pages/forgotPassword/forgotPassword')">
  142. Forgot Password?
  143. </text>
  144. </view>
  145. </view>
  146. </view>
  147. </template>
  148. <style lang="scss" scoped>
  149. // 登录页面特有样式(如果有的话)
  150. </style>