123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204 |
- <route lang="json5" type="page">
- {
- layout: 'default',
- style: {
- navigationStyle: 'custom',
- },
- }
- </route>
- <script lang="ts" setup>
- // 必须导入需要用到的页面生命周期(即使在当前页面上没有直接使用到)
- // eslint-disable-next-line unused-imports/no-unused-imports
- import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
- defineOptions({
- name: 'Register', // 注册
- })
- // 获取屏幕边界到安全区域距离
- const systemInfo = uni.getSystemInfoSync()
- const safeAreaInsets = systemInfo.safeAreaInsets
- // 表单数据
- const formData = ref({
- username: '',
- mobile: '',
- verificationCode: '',
- password: '',
- referrerCode: '',
- })
- // 验证码倒计时
- const countdown = ref(0)
- const countdownTimer = ref<NodeJS.Timeout | null>(null)
- // 表单验证规则
- const rules = {
- username: [
- { required: true, message: 'Please enter username' },
- ],
- mobile: [
- { required: true, message: 'Please enter mobile number' },
- { pattern: /^1[3-9]\d{9}$/, message: 'Please enter valid mobile number' },
- ],
- verificationCode: [
- { required: true, message: 'Please enter verification code' },
- ],
- password: [
- { required: true, message: 'Please enter password' },
- { min: 6, max: 20, message: 'Password should be 6-20 characters' },
- ],
- }
- // 获取验证码
- function getVerificationCode() {
- if (!formData.value.mobile) {
- uni.showToast({
- title: 'Please enter mobile number first',
- icon: 'none',
- })
- return
- }
- // TODO: 实现获取验证码逻辑
- console.log('Get verification code for:', formData.value.mobile)
- // 开始倒计时
- countdown.value = 60
- countdownTimer.value = setInterval(() => {
- countdown.value--
- if (countdown.value <= 0) {
- clearInterval(countdownTimer.value!)
- countdownTimer.value = null
- }
- }, 1000)
- }
- // 注册处理
- function handleRegister() {
- // TODO: 实现注册逻辑
- console.log('Register:', formData.value)
- }
- // 跳转登录页
- function toLogin() {
- uni.navigateTo({
- url: '/pages/login/login',
- })
- }
- // 返回上一页
- function goBack() {
- uni.navigateBack()
- }
- // 页面卸载时清理定时器
- onUnmounted(() => {
- if (countdownTimer.value) {
- clearInterval(countdownTimer.value)
- }
- })
- </script>
- <template>
- <view class="register-page min-h-screen bg-white">
- <!-- 背景图片区域 -->
- <view class="auth-bg-section relative">
- <!-- 自定义导航栏 -->
- <view :style="{ paddingTop: `${safeAreaInsets?.top}px` }">
- <view class="h-88rpx flex items-center px-24rpx">
- <wd-icon name="arrow-left" size="48rpx" color="#333" @click="goBack" />
- </view>
- </view>
- <!-- Logo和标语 -->
- <view class="pb-40rpx pt-60rpx text-center">
- <view class="mb-20rpx flex items-center justify-center">
- <image src="/static/logo.png" class="mr-16rpx h-60rpx w-60rpx" />
- </view>
- </view>
- </view>
- <!-- 表单内容区域 -->
- <view class="flex flex-col px-20rpx">
- <view class="mb-40rpx" />
- <!-- 注册表单 -->
- <wd-form ref="form" :model="formData" :rules="rules">
- <view class="mb-40rpx space-y-32rpx">
- <wd-input
- v-model="formData.username"
- prop="username"
- placeholder="Username"
- no-border
- custom-class="bandhu-auth-input-field"
- />
- <wd-input
- v-model="formData.mobile"
- prop="mobile"
- placeholder="+88 Mobile number"
- no-border
- custom-class="bandhu-auth-input-field"
- />
- <view class="flex items-center gap-20rpx">
- <wd-input
- v-model="formData.verificationCode"
- prop="verificationCode"
- placeholder="Verification Code"
- no-border
- custom-class="flex-1 bandhu-auth-input-field"
- />
- <wd-button
- type="error"
- plain
- :disabled="countdown > 0"
- custom-class="bandhu-auth-secondary-btn"
- @click="getVerificationCode"
- >
- {{ countdown > 0 ? `${countdown}s` : 'Get Code' }}
- </wd-button>
- </view>
- <wd-input
- v-model="formData.password"
- prop="password"
- placeholder="Password 6-20 characters"
- no-border show-password
- custom-class="bandhu-auth-input-field"
- />
- <wd-input
- v-model="formData.referrerCode"
- placeholder="Referrer Code"
- no-border
- custom-class="bandhu-auth-input-field"
- />
- </view>
- <!-- 注册按钮 -->
- <wd-button
- type="error"
- size="large"
- custom-class="mb-200rpx w-full bandhu-auth-primary-btn"
- @click="handleRegister"
- >
- Register
- </wd-button>
- </wd-form>
- <!-- 登录提示 -->
- <view class="text-center">
- <text class="text-28rpx text-#666">
- Already have account?
- </text>
- <text class="ml-10rpx text-28rpx text-[var(--wot-color-theme)]" @click="toLogin">
- Login Now
- </text>
- </view>
- </view>
- </view>
- </template>
- <style lang="scss" scoped>
- // 注册页面特有样式(如果有的话)
- </style>
|