<!-- 注册 -->
|
<template>
|
<view class="register-page">
|
<view class="pageBg"></view>
|
<!-- <view class="content">
|
<view class="row">
|
<view class="label"><span class="required">*</span>手机号码</view>
|
<view class="input">
|
<u-input input-align="right" border="bottom" v-model="formParams.userName" placeholder="请输入手机号码"></u-input>
|
</view>
|
</view>
|
<view class="row">
|
<view class="label"><span class="nike"></span>昵称</view>
|
<view class="input">
|
<u-input input-align="right" border="bottom" v-model="formParams.nikeName" placeholder="昵称"></u-input>
|
</view>
|
</view>
|
<view class="row">
|
<view class="label"><span class="required">*</span>密码</view>
|
<view class="input">
|
<u-input type="password" input-align="right" border="bottom" v-model="formParams.password" placeholder="请输入密码"></u-input>
|
</view>
|
</view>
|
<view class="row">
|
<view class="label"><span class="required">*</span>确认密码</view>
|
<view class="input">
|
<u-input type="password" input-align="right" border="bottom" v-model="formParams.password2" placeholder="请确认密码"></u-input>
|
</view>
|
</view>
|
<view class="row">
|
<view class="label"><span class="required">*</span>验证码</view>
|
<view class="input">
|
<u-input input-align="right" border="bottom" v-model="formParams.code" placeholder="请输入验证码"></u-input>
|
</view>
|
<u-button :disabled="countDown > 0" @click="sendVerificationCode" type="primary" color="#007AFF">
|
{{ countDown > 0 ? `${countDown}s后重发` : '获取验证码' }}
|
</u-button>
|
</view>
|
</view> -->
|
<view class="detailBox">
|
<div class="detailCon">
|
<div class="orderRow">
|
<div class="rowTitle">手机号码</div>
|
<input type="text" v-model="formParams.userName" placeholder="请输入手机号码" class="input-item" />
|
</div>
|
<div class="orderRow">
|
<div class="rowTitle">昵称</div>
|
<input type="text" v-model="formParams.nikeName" placeholder="请输入昵称" class="input-item" />
|
</div>
|
<div class="orderRow">
|
<div class="rowTitle">密码</div>
|
<input type="password" v-model="formParams.password" placeholder="请输入密码" class="input-item" />
|
</div>
|
<div class="orderRow">
|
<div class="rowTitle">确认密码</div>
|
<input type="password" v-model="formParams.password2" placeholder="请输入确认密码" class="input-item" />
|
</div>
|
<div class="orderRow">
|
<div class="rowTitle">验证码</div>
|
<input type="text" v-model="formParams.code" placeholder="请输入验证码" class="input-item" />
|
<u-button :disabled="countDown > 0" @click="sendVerificationCode" type="primary" color="#007AFF">
|
{{ countDown > 0 ? `${countDown}s后重发` : '获取验证码' }}
|
</u-button>
|
</div>
|
</div>
|
</view>
|
<view class="register">
|
<u-button type="primary" color="#007AFF" @click="register">注册</u-button>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { sendResetCode, registerSendCodeApi, registerUser } from '@/api/user/index.js';
|
const formParams = ref({
|
userName: '',
|
nikeName: '',
|
password: '',
|
password2: '',
|
code: '',
|
|
})
|
const countDown = ref(0);
|
let timer = null;
|
// 校验密码不能包含中文
|
const validatePasswordNoChinese = (password) => {
|
const chineseRegex = /[\u4e00-\u9fa5]/;
|
if (chineseRegex.test(password)) {
|
|
uni.showToast({
|
title: '密码不能包含中文字符',
|
icon: 'none',
|
duration: 2000
|
});
|
return false;
|
}
|
return true;
|
};
|
// 校验密码复杂度（长度≥6位，包含字母和数字）
|
const validatePasswordStrength = (password) => {
|
if (password.length < 6) {
|
|
uni.showToast({
|
title: '密码长度不能少于6位',
|
icon: 'none',
|
duration: 2000
|
});
|
return false;
|
}
|
// const hasLetter = /[a-zA-Z]/.test(password);
|
// const hasNumber = /\d/.test(password);
|
// if (!hasLetter || !hasNumber) {
|
// ElMessage.error('密码需同时包含字母和数字');
|
// return false;
|
// }
|
return true;
|
};
|
// 校验手机号
|
const validatePhone = () => {
|
if (!formParams.value.userName) return true
|
const phoneRegex = /^1[3-9]\d{9}$/
|
if (!phoneRegex.test(formParams.value.userName)) {
|
|
uni.showToast({
|
title: '请输入正确的手机号码',
|
icon: 'none',
|
duration: 2000
|
});
|
return false
|
}
|
return true
|
}
|
// 发送验证码
|
const sendVerificationCode = () => {
|
if (formParams.value.userName === '') {
|
uni.showToast({
|
title: '请先输入手机号码',
|
icon: 'none',
|
duration: 2000
|
});
|
return;
|
}
|
|
// 这里假设账号就是手机号，实际项目中可能需要验证格式
|
registerSendCodeApi(formParams.value.userName).then(res => {
|
if (res.data.code === 200) {
|
uni.showToast({
|
title: '验证码发送成功',
|
icon: 'success',
|
duration: 2000
|
});
|
|
// 开始倒计时
|
countDown.value = 60;
|
timer = setInterval(() => {
|
countDown.value--;
|
if (countDown.value <= 0) {
|
clearInterval(timer);
|
timer = null;
|
}
|
}, 1000);
|
} else {
|
uni.showToast({
|
title: res.data.msg || '验证码发送失败',
|
icon: 'none',
|
duration: 2000
|
});
|
}
|
}).catch(err => {
|
uni.showToast({
|
title: '网络错误，请稍后重试',
|
icon: 'none',
|
duration: 2000
|
});
|
});
|
};
|
function register() {
|
if (!formParams.value.userName) {
|
uni.showToast({
|
title: '请输入手机号码',
|
icon: 'none',
|
duration: 2000
|
});
|
return
|
}
|
if (!formParams.value.password) {
|
uni.showToast({
|
title: '请输入密码',
|
icon: 'none',
|
duration: 2000
|
});
|
return
|
}
|
if (formParams.value.password !== formParams.value.password2) {
|
uni.showToast({
|
title: '两次输入密码不一致',
|
icon: 'none',
|
duration: 2000
|
});
|
return
|
}
|
if (!formParams.value.code) {
|
uni.showToast({
|
title: '请输入验证码',
|
icon: 'none',
|
duration: 2000
|
});
|
return
|
}
|
if (!validatePhone()) return
|
if (!validatePasswordNoChinese(formParams.value.password)) return
|
if (!validatePasswordStrength(formParams.value.password)) return
|
registerUser(formParams.value).then(res => {
|
if (res.data.code === 200) {
|
uni.showToast({
|
title: '注册成功',
|
icon: 'success',
|
});
|
// 跳转登录页面
|
uni.navigateTo({
|
url: '/pages/login/index'
|
})
|
} else {
|
uni.showToast({
|
title: res.data.msg || '注册失败',
|
icon: 'none',
|
});
|
}
|
}).catch(err => {
|
uni.showToast({
|
title: '网络错误，请稍后重试',
|
icon: 'none',
|
});
|
});
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.register-page {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
position: relative;
|
.pageBg {
|
width: 100%;
|
height: 100%;
|
background: url("https://wrj.shuixiongit.com/aiskyminio/cloud-bucket/ja-app-wx/images/user/userBg1.png") no-repeat ;
|
background-size: 100%;
|
}
|
.detailBox {
|
position: absolute;
|
top: 30rpx;
|
width: 702rpx;
|
|
min-height: 326rpx;
|
background: #FFFFFF;
|
border-radius: 12rpx;
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
|
|
.detailCon {
|
padding: 0 24rpx;
|
}
|
|
.orderRow {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 96rpx;
|
border-bottom: 2rpx solid #f5f5f5;
|
color: #7b7b7b;
|
|
|
.rowTitle {
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #222324;
|
}
|
|
input.input-item {
|
text-align: right;
|
border: none !important;
|
background: transparent !important;
|
box-shadow: none !important;
|
padding: 0 !important;
|
margin: 0 !important;
|
height: auto !important;
|
|
outline: none;
|
font-size: 30rpx;
|
color: #222324;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
}
|
:deep(.uni-input-placeholder) {
|
color: #D5D5D5;
|
}
|
input.input-item::placeholder {
|
font-size: 30rpx;
|
}
|
|
.send-code-btn {
|
margin-left: 20rpx;
|
width: 200rpx;
|
height: 70rpx;
|
line-height: 70rpx;
|
font-size: 26rpx;
|
background: #f5f5f5;
|
color: #666;
|
border-radius: 8rpx;
|
}
|
|
.send-code-btn:disabled {
|
background: #e0e0e0;
|
color: #999;
|
}
|
:deep(.u-button){
|
width: 180rpx !important;
|
height: 60rpx !important;
|
}
|
}
|
}
|
.register {
|
:deep(.u-button) {
|
position: fixed;
|
left: 24rpx;
|
right: 24rpx;
|
bottom: 150rpx;
|
font-weight: 400;
|
width: 80% !important;
|
height: 76rpx !important;
|
font-size: 28rpx !important;
|
}
|
}
|
}
|
</style>
|
