bandhuBuy-uniapp/src/pages/register/register.vue

<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>