235 lines
5.9 KiB
Vue
235 lines
5.9 KiB
Vue
<style lang="scss" scoped>
|
||
.register-ctn{
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 0 60rpx;
|
||
:not(not) {
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
.register-form{
|
||
background-color: #fff;
|
||
border-radius: $uni-border-radius-lg;
|
||
padding: 40rpx;
|
||
box-shadow: $box-shadow;
|
||
margin-top: 30rpx;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
.login-bg{
|
||
width: 100%;
|
||
height: 500rpx;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: -1;
|
||
image{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.login-header{
|
||
text-align: center;
|
||
&-img{
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
margin-top: 40rpx;
|
||
}
|
||
&-text{
|
||
font-size: 46rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 800;
|
||
color: #FFFFFF;
|
||
margin-top: 20rpx;
|
||
}
|
||
}
|
||
.login-function-ctn{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 30rpx 0rpx;
|
||
}
|
||
|
||
</style>
|
||
|
||
<template>
|
||
<view class="register-ctn">
|
||
<view class="login-bg">
|
||
<image src="http://static.drgyen.com/app/hc-app-power/images/login-header.png" mode=""></image>
|
||
</view>
|
||
<view class="login-header">
|
||
<view class="">
|
||
<!-- #ifdef APP-PLUS -->
|
||
<image class="login-header-img" src="http://static.drgyen.com/app/hc-app-power/images/login-app-logo.png" mode=""></image>
|
||
<!-- #endif -->
|
||
<!-- #ifndef APP-PLUS -->
|
||
<image class="login-header-img" src="http://static.drgyen.com/app/hc-app-power/images/login-logo.png" mode=""></image>
|
||
<!-- #endif -->
|
||
</view>
|
||
|
||
<view class="login-header-text">综合能源管理</view>
|
||
</view>
|
||
<view class="register-form">
|
||
<u-form :model="form" :rules="rules" ref="uForm">
|
||
<u-form-item label="用户名" label-width="170" prop="username" left-icon="account">
|
||
<u-input v-model="form.username" placeholder="请输入用户名"/>
|
||
</u-form-item>
|
||
<u-form-item label="密码" label-width="170" prop="password" left-icon="lock">
|
||
<u-input v-model="form.password" type="password" placeholder="请输入密码"/>
|
||
</u-form-item>
|
||
<u-form-item label="手机号" label-width="170" prop="phonenumber" left-icon="phone">
|
||
<u-input v-model="form.phonenumber" maxlength="11" placeholder="请输入手机号"/>
|
||
</u-form-item>
|
||
<u-form-item label="验证码" label-width="170" prop="code" left-icon="email">
|
||
<u-input v-model="form.code" maxlength="8" placeholder="请输入验证码"/>
|
||
<u-button slot="right" type="primary" size="mini" @click="getCode">{{tips}}</u-button>
|
||
</u-form-item>
|
||
<!-- <u-form-item label="重复密码" label-width="170" prop="rePassword" left-icon="lock">
|
||
<u-input v-model="form.rePassword" placeholder="请确认密码"/>
|
||
</u-form-item> -->
|
||
</u-form>
|
||
<view class="login-function-ctn">
|
||
<text class="text--base--main" @click="goLoginFn">已有账号</text>
|
||
<text class="text--base--grey" @click="goForgotPasswordFn">忘记密码?</text>
|
||
</view>
|
||
<view class="mt30">
|
||
<u-button @click="registerFn" type="primary" shape="circle">注册</u-button>
|
||
</view>
|
||
<u-verification-code seconds="90" ref="uCode" @change="codeChange"></u-verification-code>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default{
|
||
data(){
|
||
return{
|
||
form:{
|
||
username:"",
|
||
phonenumber:"",
|
||
code:"",
|
||
password:"",
|
||
},
|
||
tips:'',
|
||
rules:{
|
||
username:[{
|
||
required: true,
|
||
message: '请输入用户名',
|
||
trigger: 'blur',
|
||
}],
|
||
phonenumber:[{
|
||
required:true,
|
||
message:"请输入电话号码",
|
||
trigger:"blur"
|
||
},{
|
||
validator: (rule, value, callback) => {
|
||
// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
|
||
return this.$u.test.mobile(value);
|
||
},
|
||
message: '手机号码不正确',
|
||
// 触发器可以同时用blur和change，二者之间用英文逗号隔开
|
||
trigger: ['change','blur'],
|
||
}],
|
||
code:[{
|
||
required:true,
|
||
message: '请输入验证码',
|
||
trigger: 'blur',
|
||
}],
|
||
password:[{
|
||
required:true,
|
||
message: '请输入密码',
|
||
trigger: 'blur',
|
||
},{
|
||
min:6,
|
||
max:18,
|
||
message: '请输入6-18位密码',
|
||
trigger: 'blur',
|
||
}],
|
||
|
||
}
|
||
}
|
||
},
|
||
onReady(){
|
||
this.$refs.uForm.setRules(this.rules);
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
methods:{
|
||
goLoginFn(){
|
||
uni.reLaunch({
|
||
url:"./login"
|
||
})
|
||
},
|
||
goForgotPasswordFn(){
|
||
uni.navigateTo({
|
||
url:"./forgotPassword"
|
||
})
|
||
},
|
||
codeChange(text) {
|
||
this.tips = text;
|
||
},
|
||
getCode() {
|
||
if(this.$refs.uCode.canGetCode) {
|
||
// 模拟向后端请求验证码
|
||
uni.showLoading({
|
||
title: '正在获取验证码'
|
||
})
|
||
// sms/registered
|
||
this.$post("/sms/registered",{phoneNumber:this.form.phonenumber,expirationTime:90,smsType:1}).then((res)=>{
|
||
if(res.code === 200){
|
||
uni.hideLoading();
|
||
// 这里此提示会被this.start()方法中的提示覆盖
|
||
this.$u.toast('验证码已发送', 3000);
|
||
// 通知验证码组件内部开始倒计时
|
||
this.$refs.uCode.start();
|
||
}else{
|
||
this.$tui.toast(res.msg, 3000);
|
||
}
|
||
})
|
||
} else {
|
||
this.$u.toast('倒计时结束后再发送', 3000);
|
||
}
|
||
},
|
||
// end() {
|
||
// this.$u.toast('倒计时结束');
|
||
// },
|
||
// start() {
|
||
// this.$u.toast('倒计时开始');
|
||
// },
|
||
registerFn(){
|
||
this.$refs.uForm.validate(valid => {
|
||
console.log(valid,"valid")
|
||
if (valid) {
|
||
// if(!this.model.agreement) return this.$u.toast('请勾选协议');
|
||
console.log('验证通过');
|
||
// system/personal
|
||
// this.$post("/system/registered",{
|
||
this.$post("/system/personal",{
|
||
username:this.form.username,
|
||
password:this.form.password,
|
||
phoneNumber:this.form.phonenumber,
|
||
captcha:this.form.code,
|
||
}).then((res)=>{
|
||
console.log(res,"Res");
|
||
if(res.code==200){
|
||
this.$tui.toast('注册成功', 3000, true);
|
||
uni.reLaunch({
|
||
url:`./login?userType=user`
|
||
})
|
||
// uni.reLaunch({
|
||
// url:`./registerLoading?phonenumber=${this.form.phonenumber}`
|
||
// })
|
||
}else{
|
||
this.$tui.toast(res.msg, 3000);
|
||
}
|
||
})
|
||
} else {
|
||
console.log('验证失败');
|
||
}
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|