<template>
|
<view class="container">
|
<view class="wrapper">
|
<view class="welcome">
|
注册
|
</view>
|
<view class="input-content">
|
<view class="input-item">
|
<text class="tit">用户名</text>
|
<input type="text" v-model="form.userName" placeholder="请输入用户名" />
|
</view>
|
<view class="input-item">
|
<text class="tit">手机号</text>
|
<input type="text" v-model="form.phone" placeholder="请输入手机号" maxlength="11" @input="onPhoneInput" />
|
</view>
|
<view class="input-item">
|
<text class="tit">验证码</text>
|
<view class="input-with-button">
|
<input type="text" v-model="form.code" placeholder="请输入验证码" maxlength="6" />
|
<u-button style="width: 150upx;" @click="sendCode">{{ codeButtonText }}</u-button>
|
</view>
|
</view>
|
<view class="input-item">
|
<text class="tit">密码</text>
|
<input type="password" v-model="form.password" placeholder="6-20位大小写字母数字特殊符号组成" maxlength="20" />
|
</view>
|
</view>
|
<u-button class="confirm-btn" @click="register" :loading="registering" :disabled="registering">注册</u-button>
|
</view>
|
</view>
|
</template>
|
<script>
|
export default {
|
data() {
|
return {
|
form: {
|
userName: '',
|
phone: '',
|
code: '',
|
password: ''
|
},
|
canSendCode: false,
|
codeButtonText: '获取',
|
countdown: 60,
|
registering: false
|
}
|
},
|
methods: {
|
onPhoneInput() {
|
// 检查手机号是否合法
|
const phoneRegex = /^1[3-9]\d{9}$/;
|
this.canSendCode = phoneRegex.test(this.form.phone);
|
},
|
sendCode() {
|
if (!this.canSendCode) {
|
this.$msg('请输入正确的手机号');
|
return;
|
}
|
|
// 发送验证码逻辑
|
this.codeButtonText = `${this.countdown}秒`;
|
this.canSendCode = false;
|
let timer = setInterval(() => {
|
this.countdown--;
|
this.codeButtonText = `${this.countdown}秒`;
|
if (this.countdown <= 0) {
|
clearInterval(timer);
|
this.codeButtonText = '获取';
|
this.canSendCode = true;
|
this.countdown = 60;
|
}
|
}, 1000);
|
|
// 发送验证码请求
|
this.$http.post('/User/SendSms', { phoneNumber: this.form.phone, hasReg: false })
|
.then(res => {
|
if (res.Check) {
|
this.$msg('验证码已发送');
|
} else {
|
this.$msg('验证码发送失败');
|
}
|
})
|
.catch(error => {
|
console.error(error);
|
this.$msg('验证码发送失败');
|
});
|
},
|
register() {
|
const passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{6,20}$/;
|
if (!passwordRegex.test(this.form.password)) {
|
this.$msg('密码不符合要求');
|
return;
|
}
|
|
this.registering = true;
|
// 调用注册接口
|
const data = {
|
LoginName: this.form.userName,
|
Mobile: this.form.phone,
|
Code: this.form.code,
|
Password: this.form.password
|
};
|
|
this.$http.post('/User/RegAccount', data)
|
.then(res => {
|
if (res.Check) {
|
this.$msg('注册成功');
|
// 注册成功后跳转到登录页面
|
uni.navigateTo({
|
url: '/pages/login/login'
|
});
|
} else {
|
this.$msg('注册失败');
|
}
|
})
|
.catch(error => {
|
console.log(error);
|
this.$msg('注册失败');
|
})
|
.finally(() => {
|
this.registering = false;
|
});
|
}
|
}
|
}
|
</script>
|
|
<style lang='scss' scoped>
|
page {
|
background: #fff;
|
}
|
|
.container {
|
padding-top: 115px;
|
position: relative;
|
width: 100vw;
|
height: 100vh;
|
overflow: hidden;
|
background: #fff;
|
}
|
|
.wrapper {
|
position: relative;
|
z-index: 90;
|
background: #fff;
|
padding-bottom: 40upx;
|
}
|
|
.welcome {
|
position: relative;
|
left: 50upx;
|
top: -90upx;
|
font-size: 46upx;
|
color: #555;
|
text-shadow: 1px 0px 1px rgba(0, 0, 0, .3);
|
}
|
|
.input-content {
|
padding: 0 60upx;
|
}
|
|
.input-item {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 30upx;
|
background: #f8f8f8;
|
height: 120upx;
|
border-radius: 4px;
|
margin-bottom: 50upx;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
|
.tit {
|
width: 150upx!important;
|
height: 50upx;
|
line-height: 56upx;
|
font-size: 30upx;
|
color: #333;
|
margin-right: 2upx;
|
}
|
|
input {
|
height: 60upx;
|
font-size: 32upx;
|
color: #333;
|
width: 100%;
|
}
|
|
.input-with-button {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
width: 100%;
|
|
input {
|
width: calc(100% - 170upx); /* 减去按钮的宽度 */
|
margin-right: 20upx;
|
}
|
|
button {
|
height: 60upx;
|
line-height: 60upx;
|
font-size: 30upx;
|
color: #fff;
|
background: $uni-color-primary;
|
border: none;
|
border-radius: 4px;
|
}
|
}
|
}
|
|
.confirm-btn {
|
width: 630upx;
|
height: 76upx;
|
line-height: 76upx;
|
border-radius: 50px;
|
margin-top: 70upx;
|
background: $uni-color-primary;
|
color: #fff;
|
font-size: 32upx;
|
|
&:after {
|
border-radius: 100px;
|
}
|
}
|
</style>
|
