271 lines
7.1 KiB
Vue
271 lines
7.1 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-top: 20rpx;
|
||
// padding: 30rpx 0rpx;
|
||
}
|
||
.login-form-title{
|
||
text-align: center;
|
||
font-size: 40rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 800;
|
||
color: #262626;
|
||
}
|
||
</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">
|
||
<view class="login-form-title">找回密码</view>
|
||
<u-form :model="form" :rules="rules" ref="uForm">
|
||
<u-form-item label="用户类型" label-width="170" left-icon="account">
|
||
<u-input @click="openUserTypeSelectFn" v-model="form.userType" type="select" placeholder="请选择用户类型"/>
|
||
<u-select v-model="usetTypeShow" :default-value="[0]" @confirm="userTypeConfirmFn" :list="usetTypeList"></u-select>
|
||
</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="password" left-icon="lock">
|
||
<u-input v-model="form.password" type="password" placeholder="请输入密码"/>
|
||
</u-form-item>
|
||
<u-form-item label="重复密码" label-width="170" prop="rePassword" left-icon="lock">
|
||
<u-input v-model="form.rePassword" type="password" placeholder="请确认密码"/>
|
||
</u-form-item>
|
||
</u-form>
|
||
<view class="login-function-ctn">
|
||
<text class="text--base--main" @click="goLoginFn">去登入</text>
|
||
</view>
|
||
<view class="mt30">
|
||
<u-button @click="confirmEditFn" type="primary" shape="circle">确认修改</u-button>
|
||
</view>
|
||
<u-verification-code seconds="90" ref="uCode" @change="codeChange"></u-verification-code>
|
||
<u-modal ref="uModal" v-model="isSuccess" content="密码修改成功,现在前往登入" confirm-text="好的" @confirm="confirmGoPage" :async-close="true"></u-modal>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default{
|
||
data(){
|
||
return{
|
||
usetTypeShow:false,
|
||
form:{
|
||
equipment:"",
|
||
phonenumber:"",
|
||
code:"",
|
||
password:"",
|
||
rePassword:"",
|
||
userType:'企业用户',
|
||
userTypeVal: 'TENANT'
|
||
},
|
||
tips:'',
|
||
usetTypeList:[
|
||
// {
|
||
// value: 'PERSONAL',
|
||
// label: '普通用户'
|
||
// },
|
||
{
|
||
value: 'TENANT',
|
||
label: '企业用户'
|
||
}],
|
||
rules:{
|
||
equipment:[{
|
||
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',
|
||
}],
|
||
rePassword:[{
|
||
required:true,
|
||
message: '请重新输入密码',
|
||
trigger: 'blur',
|
||
},{
|
||
validator: (rule, value, callback) => {
|
||
return value === this.form.password;
|
||
},
|
||
message: '两次输入的密码不相等',
|
||
trigger: ['change','blur'],
|
||
}],
|
||
},
|
||
isSuccess: false
|
||
}
|
||
},
|
||
onReady(){
|
||
this.$refs.uForm.setRules(this.rules);
|
||
},
|
||
onLoad(e) {
|
||
this.form.userType = e.userType=="user"?"普通用户":"企业用户";
|
||
this.form.userTypeVal = e.userType=="user"?"PERSONAL":"TENANT";
|
||
},
|
||
methods:{
|
||
userTypeConfirmFn(e){
|
||
console.log(e,"e");
|
||
this.form.userType = e[0].label;
|
||
this.form.userTypeVal = e[0].value;
|
||
},
|
||
openUserTypeSelectFn(){
|
||
this.usetTypeShow = true;
|
||
},
|
||
goLoginFn(){
|
||
uni.reLaunch({
|
||
url:"./login"
|
||
})
|
||
},
|
||
codeChange(text) {
|
||
this.tips = text;
|
||
},
|
||
getCode() {
|
||
if(this.$refs.uCode.canGetCode) {
|
||
// 模拟向后端请求验证码
|
||
uni.showLoading({
|
||
title: '正在获取验证码'
|
||
})
|
||
this.$post("/sms/password",{phoneNumber:this.form.phonenumber,expirationTime:90}).then((res)=>{
|
||
if(res.code === 200){
|
||
uni.hideLoading();
|
||
// 这里此提示会被this.start()方法中的提示覆盖
|
||
this.$u.toast('验证码已发送', 3000);
|
||
// 通知验证码组件内部开始倒计时
|
||
this.$refs.uCode.start();
|
||
}
|
||
})
|
||
} else {
|
||
this.$u.toast('倒计时结束后再发送', 3000);
|
||
}
|
||
},
|
||
// 提交修改
|
||
confirmEditFn(){
|
||
this.$refs.uForm.validate(valid => {
|
||
console.log(valid,"valid")
|
||
if (valid) {
|
||
// if(!this.model.agreement) return this.$u.toast('请勾选协议');
|
||
console.log('验证通过');
|
||
if(!this.form.userType){
|
||
this.$tui.toast("请选择用户类型", 3000);
|
||
return;
|
||
}
|
||
let url = "/system/user/profile/retrievePwd";
|
||
this.$put(url,{
|
||
newPassword:this.form.password,
|
||
phoneNumber:this.form.phonenumber,
|
||
userType: this.form.userTypeVal,
|
||
// captcha:this.form.code,
|
||
code:this.form.code
|
||
}).then((res)=>{
|
||
console.log(res,"Res");
|
||
if(res.code==200){
|
||
// this.$tui.toast('修改成功', 2000, true);
|
||
// uni.reLaunch({
|
||
// url:"./login"
|
||
// })
|
||
this.isSuccess = true;
|
||
}else{
|
||
this.$tui.toast(res.msg, 3000);
|
||
}
|
||
})
|
||
} else {
|
||
console.log('验证失败');
|
||
}
|
||
});
|
||
},
|
||
confirmGoPage() {
|
||
this.isSuccess = true;
|
||
uni.reLaunch({
|
||
url:"./login"
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|