mini-yu/pages/register/register.vue

<template>
  <view class="register-container">
    <view class="register-header">
      <text class="title">注册账号</text>
      <text class="subtitle">创建您的预约系统账号</text>
    </view>

    <view class="register-form">
      <view class="form-item">
        <t-input
          v-model:value="phone"
          placeholder="请输入手机号"
          type="number"
          :maxlength="11"
          clearable
        >
          <template #prefixIcon>
            <text class="prefix-icon">📱</text>
          </template>
        </t-input>
      </view>

      <view class="form-item">
        <t-input
          v-model:value="nickname"
          placeholder="请输入昵称"
          :maxlength="20"
          clearable
        >
          <template #prefixIcon>
            <text class="prefix-icon">👤</text>
          </template>
        </t-input>
      </view>

      <view class="form-actions">
        <t-button
          class="btn-primary"
          theme="primary"
          size="large"
          block
          :loading="loading"
          @click="register"
        >
          注册
        </t-button>
      </view>

      <view class="form-switch">
        <text @click="goToLogin">已有账号？去登录</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { api } from '@/utils/api'

const phone = ref('')
const nickname = ref('')
const loading = ref(false)

const register = async () => {
  if (!phone.value || String(phone.value).length !== 11) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none'
    })
    return
  }

  if (!nickname.value || nickname.value.trim().length === 0) {
    uni.showToast({
      title: '请输入昵称',
      icon: 'none'
    })
    return
  }

  loading.value = true
  try {
    const res = await api.auth.register('+86' + phone.value, nickname.value.trim())
    uni.setStorageSync('token', res.token)
    uni.setStorageSync('user', res.user)
    
    uni.showToast({
      title: '注册成功',
      icon: 'success'
    })

    // 直接跳转到首页
    uni.reLaunch({ url: '/pages/index/index' })
  } catch (error) {
    console.error('注册失败', error)
  } finally {
    loading.value = false
  }
}

const goToLogin = () => {
  uni.navigateBack()
}
</script>

<style scoped>
.register-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #FF7A00 0%, #FF9500 100%);
  padding: 80rpx 40rpx;
}

.register-header {
  text-align: center;
  margin-bottom: 100rpx;
}

.title {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 20rpx;
}

.subtitle {
  display: block;
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
}

.register-form {
  background: #ffffff;
  border-radius: 32rpx;
  padding: 60rpx 40rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
}

.form-item {
  margin-bottom: 32rpx;
}

.prefix-icon {
  font-size: 32rpx;
  color: #FF7A00;
}

.form-actions {
  margin-top: 60rpx;
}

.form-switch {
  display: flex;
  justify-content: center;
  margin-top: 32rpx;
  font-size: 28rpx;
  color: #FF7A00;
}

.form-switch text {
  padding: 16rpx 0;
}

/* 按钮自定义样式 */
.btn-primary :deep(.t-button) {
  background: linear-gradient(135deg, #FF7A00 0%, #FF9500 100%) !important;
  border: none !important;
  box-shadow: 0 4rpx 12rpx rgba(255, 122, 0, 0.3);
}
</style>