|
|
|
|
@ -1,7 +1,7 @@
|
|
|
|
|
<template>
|
|
|
|
|
<view class="register">
|
|
|
|
|
<view class="con">
|
|
|
|
|
<image src="@/static/logo.png" />
|
|
|
|
|
<image src="@/static/logo.png" style="display: none;" />
|
|
|
|
|
<!-- 登录 -->
|
|
|
|
|
<view class="login-form">
|
|
|
|
|
<view :class="['item',errorTips==1? 'error':'']">
|
|
|
|
|
@ -9,22 +9,18 @@
|
|
|
|
|
<text class="input-item">
|
|
|
|
|
账号
|
|
|
|
|
</text>
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
data-type="account"
|
|
|
|
|
placeholder-class="inp-palcehoder"
|
|
|
|
|
placeholder="请输入账号名称"
|
|
|
|
|
@input="getInputVal"
|
|
|
|
|
>
|
|
|
|
|
</view>
|
|
|
|
|
<view
|
|
|
|
|
v-if="errorTips==1"
|
|
|
|
|
class="error-text"
|
|
|
|
|
>
|
|
|
|
|
<input type="text" data-type="account" placeholder-class="inp-palcehoder" placeholder="请输入账号名称"
|
|
|
|
|
@input="getInputVal">
|
|
|
|
|
</view>
|
|
|
|
|
<view class="password-hint">
|
|
|
|
|
至少4位
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view v-if="errorTips==1" class="error-text">
|
|
|
|
|
<text class="warning-icon">
|
|
|
|
|
!
|
|
|
|
|
</text>
|
|
|
|
|
请输入账号！
|
|
|
|
|
请输入正确的账号！
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view :class="['item',errorTips==2? 'error':'']">
|
|
|
|
|
@ -32,46 +28,96 @@
|
|
|
|
|
<text class="input-item">
|
|
|
|
|
密码
|
|
|
|
|
</text>
|
|
|
|
|
<input
|
|
|
|
|
type="password"
|
|
|
|
|
data-type="password"
|
|
|
|
|
placeholder-class="inp-palcehoder"
|
|
|
|
|
placeholder="请输入密码"
|
|
|
|
|
@input="getInputVal"
|
|
|
|
|
>
|
|
|
|
|
</view>
|
|
|
|
|
<view
|
|
|
|
|
v-if="errorTips==2"
|
|
|
|
|
class="error-text"
|
|
|
|
|
>
|
|
|
|
|
<input type="password" data-type="password" placeholder-class="inp-palcehoder" placeholder="请输入密码"
|
|
|
|
|
@input="getInputVal">
|
|
|
|
|
</view>
|
|
|
|
|
<view class="password-hint">
|
|
|
|
|
至少6位
|
|
|
|
|
</view>
|
|
|
|
|
<view v-if="errorTips==2" class="error-text">
|
|
|
|
|
<text class="warning-icon">
|
|
|
|
|
!
|
|
|
|
|
</text>
|
|
|
|
|
请输入密码！
|
|
|
|
|
请输入正确的密码！
|
|
|
|
|
</view>
|
|
|
|
|
<view :class="['item', errorTips==3 ? 'error' : '']">
|
|
|
|
|
<view class="account">
|
|
|
|
|
<text class="input-item">
|
|
|
|
|
确认密码
|
|
|
|
|
</text>
|
|
|
|
|
<input type="password" data-type="confirmPassword" placeholder-class="inp-palcehoder"
|
|
|
|
|
placeholder="请再次输入密码" @input="getInputValConfirmCredentials">
|
|
|
|
|
</view>
|
|
|
|
|
<view v-if="errorTips==3" class="error-text">
|
|
|
|
|
<text class="warning-icon">
|
|
|
|
|
!
|
|
|
|
|
</text>
|
|
|
|
|
密码不一致，请重新输入！
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<!-- 添加手机号输入框 -->
|
|
|
|
|
<view :class="['item', errorTips==4 ? 'error' : '']">
|
|
|
|
|
<view class="account">
|
|
|
|
|
<text class="input-item">
|
|
|
|
|
手机号
|
|
|
|
|
</text>
|
|
|
|
|
<input type="tel" data-type="phone" placeholder-class="inp-palcehoder" placeholder="请输入手机号"
|
|
|
|
|
@input="getInputValPhone">
|
|
|
|
|
</view>
|
|
|
|
|
<view v-if="errorTips==4" class="error-text">
|
|
|
|
|
<text class="warning-icon">
|
|
|
|
|
!
|
|
|
|
|
</text>
|
|
|
|
|
请输入正确的手机号！
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<!-- 发送验证码按钮 -->
|
|
|
|
|
<button class="send-code-btn" @tap="sendVerificationCode" :disabled="codeSending">
|
|
|
|
|
{{ codeSending ? '发送中...' : '发送验证码' }}
|
|
|
|
|
</button>
|
|
|
|
|
<!-- 验证码输入框 -->
|
|
|
|
|
<view :class="['item', errorTips==5 ? 'error' : '']">
|
|
|
|
|
<view class="account">
|
|
|
|
|
<text class="input-item">
|
|
|
|
|
验证码
|
|
|
|
|
</text>
|
|
|
|
|
<input type="number" data-type="verificationCode" placeholder-class="inp-palcehoder" placeholder="请输入验证码"
|
|
|
|
|
@input="getInputValCode">
|
|
|
|
|
</view>
|
|
|
|
|
<view v-if="errorTips==5" class="error-text">
|
|
|
|
|
<text class="warning-icon">
|
|
|
|
|
!
|
|
|
|
|
</text>
|
|
|
|
|
请输入正确的验证码！
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="operate">
|
|
|
|
|
<view
|
|
|
|
|
class="to-register"
|
|
|
|
|
@tap="toLogin"
|
|
|
|
|
>
|
|
|
|
|
<view class="to-register" @tap="toLogin">
|
|
|
|
|
已有账号？
|
|
|
|
|
<text>去登录></text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<!-- 添加复选框和协议链接 -->
|
|
|
|
|
|
|
|
|
|
<view>
|
|
|
|
|
<button
|
|
|
|
|
class="authorized-btn"
|
|
|
|
|
@tap="toRegister"
|
|
|
|
|
>
|
|
|
|
|
<checkbox-group @change="handleAgreeChange" class="authorized-argee">
|
|
|
|
|
<checkbox :value="agree" :checked="agree" />
|
|
|
|
|
<span class="agree-text">
|
|
|
|
|
我已阅读并同意
|
|
|
|
|
<router-link @tap="toAgree" to="/pages/argeement/argeement">
|
|
|
|
|
《用户协议》
|
|
|
|
|
</router-link>
|
|
|
|
|
</span>
|
|
|
|
|
</checkbox-group>
|
|
|
|
|
<view class="password-hint">
|
|
|
|
|
请先阅读并同意 《用户协议》
|
|
|
|
|
</view>
|
|
|
|
|
<button class="authorized-btn" @tap="toRegister" :disabled="!agree">
|
|
|
|
|
注册
|
|
|
|
|
</button>
|
|
|
|
|
<button
|
|
|
|
|
class="to-idx-btn"
|
|
|
|
|
@tap="toIndex"
|
|
|
|
|
>
|
|
|
|
|
<button class="to-idx-btn" @tap="toIndex">
|
|
|
|
|
回到首页
|
|
|
|
|
</button>
|
|
|
|
|
</view>
|
|
|
|
|
@ -80,51 +126,125 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
import { encrypt } from '@/utils/crypto.js'
|
|
|
|
|
import {
|
|
|
|
|
encrypt
|
|
|
|
|
} from '@/utils/crypto.js'
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
/**
|
|
|
|
|
* 生命周期函数--监听页面显示
|
|
|
|
|
*/
|
|
|
|
|
onShow(() => {
|
|
|
|
|
onShow(() => {
|
|
|
|
|
// 头部导航标题
|
|
|
|
|
uni.setNavigationBarTitle({
|
|
|
|
|
title: '用户注册'
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const principal = ref('') // 账号
|
|
|
|
|
const credentials = ref('') // 密码
|
|
|
|
|
/**
|
|
|
|
|
const confirmCredentials = ref(''); // 确认密码
|
|
|
|
|
const phone = ref(''); // 手机号
|
|
|
|
|
const verificationCode = ref(''); // 验证码
|
|
|
|
|
const codeSending = ref(false); // 是否正在发送验证码
|
|
|
|
|
/**
|
|
|
|
|
* 发送验证码
|
|
|
|
|
*/
|
|
|
|
|
const sendVerificationCode = () => {
|
|
|
|
|
const phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
|
|
|
|
|
if (!phoneReg.test(phone.value)) {
|
|
|
|
|
errorTips.value = 4;
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
codeSending.value = true
|
|
|
|
|
http.request({
|
|
|
|
|
url: '/sms/send',
|
|
|
|
|
method: 'post',
|
|
|
|
|
data: {
|
|
|
|
|
mobile: phone.value
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.then((data) => {
|
|
|
|
|
codeSending.value = false
|
|
|
|
|
if (data.code === "00000" ){
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: data.data,
|
|
|
|
|
icon: 'none',
|
|
|
|
|
duration: 1500
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
const agree = ref(false);
|
|
|
|
|
const handleAgreeChange = () => {
|
|
|
|
|
|
|
|
|
|
agree.value = !agree.value;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const principal = ref('') // 账号
|
|
|
|
|
const credentials = ref('') // 密码
|
|
|
|
|
/**
|
|
|
|
|
* 输入框的值
|
|
|
|
|
*/
|
|
|
|
|
const getInputVal = (e) => {
|
|
|
|
|
const getInputVal = (e) => {
|
|
|
|
|
const type = e.currentTarget.dataset.type
|
|
|
|
|
if (type == 'account') {
|
|
|
|
|
principal.value = e.detail.value
|
|
|
|
|
} else if (type == 'password') {
|
|
|
|
|
credentials.value = e.detail.value
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
const getInputValConfirmCredentials = (e) => {
|
|
|
|
|
|
|
|
|
|
const errorTips = ref(0) // 输入错误提示: 1账号输入 2密码输入
|
|
|
|
|
/**
|
|
|
|
|
confirmCredentials.value = e.detail.value
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
const getInputValCode = (e)=>{
|
|
|
|
|
verificationCode.value = e.detail.value
|
|
|
|
|
}
|
|
|
|
|
const getInputValPhone = (e) => {
|
|
|
|
|
|
|
|
|
|
phone.value = e.detail.value
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
const errorTips = ref(0) // 输入错误提示: 1账号输入 2密码输入
|
|
|
|
|
/**
|
|
|
|
|
* 注册
|
|
|
|
|
*/
|
|
|
|
|
const toRegister = () => {
|
|
|
|
|
if (principal.value.length == 0) {
|
|
|
|
|
const toRegister = () => {
|
|
|
|
|
if (principal.value.length == 0 || principal.value.length < 4) {
|
|
|
|
|
errorTips.value = 1
|
|
|
|
|
} else if (credentials.value.length == 0) {
|
|
|
|
|
} else if (credentials.value.length == 0 || credentials.value.length < 6) {
|
|
|
|
|
errorTips.value = 2
|
|
|
|
|
} else {
|
|
|
|
|
errorTips.value = 0
|
|
|
|
|
// 密码确认
|
|
|
|
|
if (credentials.value !== confirmCredentials.value) {
|
|
|
|
|
|
|
|
|
|
errorTips.value = 3;
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 手机号验证
|
|
|
|
|
const phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
|
|
|
|
|
if (!phoneReg.test(phone.value)) {
|
|
|
|
|
errorTips.value = 4;
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 验证码验证
|
|
|
|
|
if (verificationCode.value.length !== 6) {
|
|
|
|
|
errorTips.value = 5;
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
uni.showLoading()
|
|
|
|
|
http.request({
|
|
|
|
|
url: '/user/register',
|
|
|
|
|
method: 'post',
|
|
|
|
|
data: {
|
|
|
|
|
userName: principal.value,
|
|
|
|
|
passWord: encrypt(credentials.value)
|
|
|
|
|
passWord: encrypt(credentials.value),
|
|
|
|
|
verificationCode:verificationCode.value,
|
|
|
|
|
phone:phone.value
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.then(() => {
|
|
|
|
|
@ -141,26 +261,30 @@ const toRegister = () => {
|
|
|
|
|
}, 1800)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
/**
|
|
|
|
|
}
|
|
|
|
|
/**
|
|
|
|
|
* 去登陆
|
|
|
|
|
*/
|
|
|
|
|
const toLogin = () => {
|
|
|
|
|
const toLogin = () => {
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
url: '/pages/accountLogin/accountLogin'
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
}
|
|
|
|
|
const toAgree = () => {
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
url: '/pages/agreement/agreement'
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
/**
|
|
|
|
|
* 回到首页
|
|
|
|
|
*/
|
|
|
|
|
const toIndex = () => {
|
|
|
|
|
const toIndex = () => {
|
|
|
|
|
uni.switchTab({
|
|
|
|
|
url: '/pages/index/index'
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
@import "./register.scss";
|
|
|
|
|
@import "./register.scss";
|
|
|
|
|
</style>
|
|
|
|
|
|
RIceWqy
2 years ago