增加用户注册页
This commit is contained in:
kk
@@ -1,5 +1,11 @@
|
||||
{
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/register/register",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/scan",
|
||||
"style": {
|
||||
|
||||
@@ -0,0 +1,324 @@
|
||||
<template>
|
||||
<view class="register-page">
|
||||
<!-- 顶部标题 -->
|
||||
<view class="header">
|
||||
<view class="title">用户注册</view>
|
||||
<view class="subtitle">请输入手机号获取验证码完成注册</view>
|
||||
</view>
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<view class="form-area">
|
||||
<!-- 手机号 -->
|
||||
<view class="input-group">
|
||||
<view class="input-label">手机号</view>
|
||||
<view class="input-wrapper">
|
||||
<input
|
||||
class="input-field"
|
||||
type="number"
|
||||
maxlength="11"
|
||||
placeholder="请输入手机号"
|
||||
placeholder-class="placeholder"
|
||||
v-model="phone"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 验证码 -->
|
||||
<view class="input-group">
|
||||
<view class="input-label">验证码</view>
|
||||
<view class="input-wrapper code-wrapper">
|
||||
<input
|
||||
class="input-field"
|
||||
type="number"
|
||||
maxlength="6"
|
||||
placeholder="请输入验证码"
|
||||
placeholder-class="placeholder"
|
||||
v-model="code"
|
||||
/>
|
||||
<view
|
||||
class="code-btn"
|
||||
:class="{ disabled: countdown > 0 }"
|
||||
@click="handleGetCode"
|
||||
>
|
||||
{{ countdown > 0 ? countdown + 's' : '获取验证码' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 注册按钮 -->
|
||||
<view class="submit-btn" :class="{ active: canSubmit }" @click="handleRegister">
|
||||
注册
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部协议 -->
|
||||
<view class="agreement">
|
||||
<text class="agreement-text">注册表示同意</text>
|
||||
<text class="agreement-link" @click="showAgreement('user')">《用户协议》</text>
|
||||
<text class="agreement-text">和</text>
|
||||
<text class="agreement-link" @click="showAgreement('privacy')">《隐私政策》</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from '@/config/env.js';
|
||||
import { post } from '@/utils/request.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
phone: '',
|
||||
code: '',
|
||||
countdown: 0,
|
||||
timer: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
canSubmit() {
|
||||
return this.phone.length === 11 && this.code.length >= 4;
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 清除定时器
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取验证码
|
||||
async handleGetCode() {
|
||||
if (this.countdown > 0) return;
|
||||
|
||||
// 验证手机号
|
||||
if (!/^1[3-9]\d{9}$/.test(this.phone)) {
|
||||
uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await post('/auth/send-sms-code', {
|
||||
phone: this.phone
|
||||
});
|
||||
|
||||
const ret = res.data || {};
|
||||
if (ret.code === 0) {
|
||||
uni.showToast({ title: '验证码已发送', icon: 'success' });
|
||||
this.startCountdown();
|
||||
} else {
|
||||
uni.showToast({ title: ret.message || '发送失败', icon: 'none' });
|
||||
}
|
||||
} catch (e) {
|
||||
uni.showToast({ title: '网络请求失败', icon: 'none' });
|
||||
}
|
||||
},
|
||||
|
||||
// 开始倒计时
|
||||
startCountdown() {
|
||||
this.countdown = 60;
|
||||
this.timer = setInterval(() => {
|
||||
this.countdown--;
|
||||
if (this.countdown <= 0) {
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
}
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
// 注册
|
||||
async handleRegister() {
|
||||
if (!this.canSubmit) return;
|
||||
|
||||
// 验证手机号
|
||||
if (!/^1[3-9]\d{9}$/.test(this.phone)) {
|
||||
uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
|
||||
// 验证验证码
|
||||
if (this.code.length < 4) {
|
||||
uni.showToast({ title: '请输入验证码', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
|
||||
uni.showLoading({ title: '注册中...' });
|
||||
|
||||
try {
|
||||
const res = await post('/auth/register', {
|
||||
phone: this.phone,
|
||||
code: this.code
|
||||
});
|
||||
|
||||
const ret = res.data || {};
|
||||
if (ret.code === 0) {
|
||||
// 保存 token
|
||||
const token = ret.data && ret.data.token;
|
||||
if (token) {
|
||||
uni.setStorageSync('token', token);
|
||||
}
|
||||
|
||||
// 保存用户信息
|
||||
const userInfo = ret.data && ret.data.userInfo;
|
||||
if (userInfo) {
|
||||
uni.setStorageSync('userInfo', userInfo);
|
||||
}
|
||||
|
||||
uni.hideLoading();
|
||||
uni.showToast({ title: '注册成功', icon: 'success' });
|
||||
|
||||
// 返回上一页或跳转首页
|
||||
setTimeout(() => {
|
||||
const pages = getCurrentPages();
|
||||
if (pages.length > 1) {
|
||||
uni.navigateBack();
|
||||
} else {
|
||||
uni.redirectTo({ url: '/pages/index/index' });
|
||||
}
|
||||
}, 1500);
|
||||
} else {
|
||||
uni.hideLoading();
|
||||
uni.showToast({ title: ret.message || '注册失败', icon: 'none' });
|
||||
}
|
||||
} catch (e) {
|
||||
uni.hideLoading();
|
||||
uni.showToast({ title: '网络请求失败', icon: 'none' });
|
||||
}
|
||||
},
|
||||
|
||||
// 显示协议
|
||||
showAgreement(type) {
|
||||
const title = type === 'user' ? '用户协议' : '隐私政策';
|
||||
uni.showToast({ title: title + '开发中', icon: 'none' });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.register-page {
|
||||
min-height: 100vh;
|
||||
background-color: #fff;
|
||||
padding: 0 60rpx;
|
||||
}
|
||||
|
||||
/* 顶部标题 */
|
||||
.header {
|
||||
padding-top: 180rpx;
|
||||
margin-bottom: 80rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 表单区域 */
|
||||
.form-area {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-bottom: 16rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 2rpx solid #e5e5e5;
|
||||
padding-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.input-field {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: #ccc;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
/* 验证码输入框 */
|
||||
.code-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.code-btn {
|
||||
flex-shrink: 0;
|
||||
font-size: 28rpx;
|
||||
color: #2979ff;
|
||||
padding: 12rpx 24rpx;
|
||||
border: 2rpx solid #2979ff;
|
||||
border-radius: 8rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.code-btn.disabled {
|
||||
color: #999;
|
||||
border-color: #e5e5e5;
|
||||
}
|
||||
|
||||
/* 注册按钮 */
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
background: #e5e5e5;
|
||||
border-radius: 48rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
margin-top: 60rpx;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.submit-btn.active {
|
||||
background: linear-gradient(135deg, #2979ff, #1e60e0);
|
||||
box-shadow: 0 8rpx 24rpx rgba(41, 121, 255, 0.4);
|
||||
}
|
||||
|
||||
/* 底部协议 */
|
||||
.agreement {
|
||||
position: absolute;
|
||||
bottom: 80rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.agreement-text {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.agreement-link {
|
||||
font-size: 24rpx;
|
||||
color: #2979ff;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user