171 lines
3.4 KiB
Vue
171 lines
3.4 KiB
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>
|