register.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  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. // 必须导入需要用到的页面生命周期(即使在当前页面上没有直接使用到)
  11. // eslint-disable-next-line unused-imports/no-unused-imports
  12. import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
  13. defineOptions({
  14. name: 'Register', // 注册
  15. })
  16. // 获取屏幕边界到安全区域距离
  17. const systemInfo = uni.getSystemInfoSync()
  18. const safeAreaInsets = systemInfo.safeAreaInsets
  19. // 表单数据
  20. const formData = ref({
  21. username: '',
  22. mobile: '',
  23. verificationCode: '',
  24. password: '',
  25. referrerCode: '',
  26. })
  27. // 验证码倒计时
  28. const countdown = ref(0)
  29. const countdownTimer = ref<NodeJS.Timeout | null>(null)
  30. // 表单验证规则
  31. const rules = {
  32. username: [
  33. { required: true, message: 'Please enter username' },
  34. ],
  35. mobile: [
  36. { required: true, message: 'Please enter mobile number' },
  37. { pattern: /^1[3-9]\d{9}$/, message: 'Please enter valid mobile number' },
  38. ],
  39. verificationCode: [
  40. { required: true, message: 'Please enter verification code' },
  41. ],
  42. password: [
  43. { required: true, message: 'Please enter password' },
  44. { min: 6, max: 20, message: 'Password should be 6-20 characters' },
  45. ],
  46. }
  47. // 获取验证码
  48. function getVerificationCode() {
  49. if (!formData.value.mobile) {
  50. uni.showToast({
  51. title: 'Please enter mobile number first',
  52. icon: 'none',
  53. })
  54. return
  55. }
  56. // TODO: 实现获取验证码逻辑
  57. console.log('Get verification code for:', formData.value.mobile)
  58. // 开始倒计时
  59. countdown.value = 60
  60. countdownTimer.value = setInterval(() => {
  61. countdown.value--
  62. if (countdown.value <= 0) {
  63. clearInterval(countdownTimer.value!)
  64. countdownTimer.value = null
  65. }
  66. }, 1000)
  67. }
  68. // 注册处理
  69. function handleRegister() {
  70. // TODO: 实现注册逻辑
  71. console.log('Register:', formData.value)
  72. }
  73. // 跳转登录页
  74. function toLogin() {
  75. uni.navigateTo({
  76. url: '/pages/login/login',
  77. })
  78. }
  79. // 返回上一页
  80. function goBack() {
  81. uni.navigateBack()
  82. }
  83. // 页面卸载时清理定时器
  84. onUnmounted(() => {
  85. if (countdownTimer.value) {
  86. clearInterval(countdownTimer.value)
  87. }
  88. })
  89. </script>
  90. <template>
  91. <view class="register-page min-h-screen bg-white">
  92. <!-- 背景图片区域 -->
  93. <view class="auth-bg-section relative">
  94. <!-- 自定义导航栏 -->
  95. <view :style="{ paddingTop: `${safeAreaInsets?.top}px` }">
  96. <view class="h-88rpx flex items-center px-24rpx">
  97. <wd-icon name="arrow-left" size="48rpx" color="#333" @click="goBack" />
  98. </view>
  99. </view>
  100. <!-- Logo和标语 -->
  101. <view class="pb-40rpx pt-60rpx text-center">
  102. <view class="mb-20rpx flex items-center justify-center">
  103. <image src="/static/logo.png" class="mr-16rpx h-60rpx w-60rpx" />
  104. </view>
  105. </view>
  106. </view>
  107. <!-- 表单内容区域 -->
  108. <view class="flex flex-col px-20rpx">
  109. <view class="mb-40rpx" />
  110. <!-- 注册表单 -->
  111. <wd-form ref="form" :model="formData" :rules="rules">
  112. <view class="mb-40rpx space-y-32rpx">
  113. <wd-input
  114. v-model="formData.username"
  115. prop="username"
  116. placeholder="Username"
  117. no-border
  118. custom-class="bandhu-auth-input-field"
  119. />
  120. <wd-input
  121. v-model="formData.mobile"
  122. prop="mobile"
  123. placeholder="+88 Mobile number"
  124. no-border
  125. custom-class="bandhu-auth-input-field"
  126. />
  127. <view class="flex items-center gap-20rpx">
  128. <wd-input
  129. v-model="formData.verificationCode"
  130. prop="verificationCode"
  131. placeholder="Verification Code"
  132. no-border
  133. custom-class="flex-1 bandhu-auth-input-field"
  134. />
  135. <wd-button
  136. type="error"
  137. plain
  138. :disabled="countdown > 0"
  139. custom-class="bandhu-auth-secondary-btn"
  140. @click="getVerificationCode"
  141. >
  142. {{ countdown > 0 ? `${countdown}s` : 'Get Code' }}
  143. </wd-button>
  144. </view>
  145. <wd-input
  146. v-model="formData.password"
  147. prop="password"
  148. placeholder="Password 6-20 characters"
  149. no-border show-password
  150. custom-class="bandhu-auth-input-field"
  151. />
  152. <wd-input
  153. v-model="formData.referrerCode"
  154. placeholder="Referrer Code"
  155. no-border
  156. custom-class="bandhu-auth-input-field"
  157. />
  158. </view>
  159. <!-- 注册按钮 -->
  160. <wd-button
  161. type="error"
  162. size="large"
  163. custom-class="mb-200rpx w-full bandhu-auth-primary-btn"
  164. @click="handleRegister"
  165. >
  166. Register
  167. </wd-button>
  168. </wd-form>
  169. <!-- 登录提示 -->
  170. <view class="text-center">
  171. <text class="text-28rpx text-#666">
  172. Already have account?
  173. </text>
  174. <text class="ml-10rpx text-28rpx text-[var(--wot-color-theme)]" @click="toLogin">
  175. Login Now
  176. </text>
  177. </view>
  178. </view>
  179. </view>
  180. </template>
  181. <style lang="scss" scoped>
  182. // 注册页面特有样式(如果有的话)
  183. </style>