<template>
|
<div class v-loading="vLoading" :style="`width: ${currentWidth}px;height:${currentHeight}px`">
|
<div class="login-top1">
|
<div class="logo">
|
<img src="../assets/img/top-logo.png" alt />
|
</div>
|
<div style="float:right;margin:20px 40px 0 0;">
|
<el-link
|
class="cursor-pointer"
|
href="https://element.eleme.io"
|
target="_blank"
|
style="color:wihte;margin-right:150px"
|
>
|
<span style="height:20px;margin:10px">返回首页</span>
|
</el-link>
|
<router-link to="/">
|
<span style="height:20px;">登录</span>
|
</router-link>
|
<span style="height:20px;margin:10px;font-size:18px">|</span>
|
<el-link class="cursor-pointer" href="https://element.eleme.io" target="_blank">
|
<img src="../assets/img/u132.png" style="width:30px;height:30px" />
|
</el-link>
|
</div>
|
</div>
|
|
<div class="login-middle1">
|
<div class="login-form">
|
<h1 class="welcome">请完善账号信息</h1>
|
<el-steps :active="active" finish-status="success" align-center style="width:800px">
|
<el-step title="请绑定手机号" style="color: #3D68E1 !important;border-color:#3D68E1 !important"></el-step>
|
<el-step title="请修改密码"></el-step>
|
</el-steps>
|
<div v-show="step1">
|
<el-form
|
:model="phone"
|
:rules="rules"
|
:validate-on-rule-change="false"
|
ref="userPhone"
|
class="demo-rulmargin"
|
style="margin-left:200px;width:400px"
|
>
|
<el-form-item prop="phoneNum" style="margin-top:20px">
|
<el-input
|
placeholder="请输入手机号(可用于登录和找回密码)"
|
v-model="phone.phoneNum"
|
style="width:380px"
|
class="input-with-select"
|
>
|
<el-select v-model="select" slot="prepend" style="width:80px;color:#333">
|
<el-option label="+86" value="1"></el-option>
|
<el-option label="+79" value="2"></el-option>
|
</el-select>
|
</el-input>
|
</el-form-item>
|
<el-form-item prop="verifyCode">
|
<el-input
|
v-model="phone.verifyCode"
|
autocomplete="off"
|
style="width:250px"
|
placeholder="请输入验证码"
|
></el-input>
|
<el-button plain style="margin-left:20px;width:115px" :disabled="codeDisabled" @click="getCode">{{
|
codeMsg
|
}}</el-button>
|
</el-form-item>
|
<el-form-item prop="agree">
|
<el-checkbox name="agree" v-model="phone.agree" style="position:relative;left:-80px"></el-checkbox>
|
<span style="margin-left:-60px">
|
我已阅读并同意
|
<el-link
|
class="cursor-pointer"
|
:underline="false"
|
href="https://element.eleme.io"
|
target="_blank"
|
style="color:#3d68E1"
|
>《服务协议》</el-link
|
>和
|
<el-link
|
class="cursor-pointer"
|
:underline="false"
|
href="https://element.eleme.io"
|
target="_blank"
|
style="color:#3d68E1"
|
>隐私政策</el-link
|
>
|
</span>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
:type="!phone.agree ? 'default' : 'primary'"
|
:disabled="!phone.agree"
|
@click="bindPhoneNum"
|
style="width:380px"
|
>保存，下一步</el-button
|
>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div v-show="step2">
|
<el-form :model="phone" :rules="rules" ref="psdForm" class style="margin-left:190px;width:400px">
|
<el-form-item prop="newPassword">
|
<el-input
|
v-model="phone.newPassword"
|
show-password
|
placeholder="输入新密码"
|
style="width: 400px;margin:10px"
|
></el-input>
|
</el-form-item>
|
<el-form-item prop="passwordAgain">
|
<el-input
|
v-model="phone.passwordAgain"
|
show-password
|
placeholder="再次输入密码"
|
style="width:400px;margin:10px"
|
></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
type="primary"
|
style="margin-left:20px"
|
@click="complete('psdForm')"
|
:disabled="!phone.newPassword || !phone.passwordAgain"
|
>完成</el-button
|
>
|
<el-button @click="resetForm('psdForm')">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { register, getVerifyCode, updatePhoneNum, forgetPwd } from "@/api/login"
|
import { validUser, validPassword, isPhone, validEmail } from "@/scripts/validate"
|
let id = 0
|
export default {
|
name: "login-pgae",
|
metaInfo: {
|
title: "登录页"
|
},
|
data() {
|
var validatePassword = (rule, value, callback) => {
|
if (value === "") {
|
callback(new Error("请设置密码！"))
|
} else {
|
let result = validPassword(value)
|
if (result) {
|
callback()
|
} else {
|
callback(new Error("请输入8到14位字符，字母/数字以及标点符号至少包含2种组成的"))
|
}
|
}
|
}
|
var validatePasswordAgain = (rule, value, callback) => {
|
if (value === "") {
|
callback(new Error("请再次输入密码！"))
|
} else {
|
let res = value == this.phone.newPassword
|
if (res) {
|
callback()
|
} else {
|
callback(new Error("请保持两次密码输入一致"))
|
}
|
}
|
}
|
return {
|
active: 0,
|
select: "1",
|
step1: true,
|
codeDisabled: false,
|
codeMsg: "获取验证码",
|
step2: false,
|
countdown: 60,
|
gotCode: false,
|
options: {
|
lazy: true,
|
lazyLoad(node, resolve) {
|
// 懒加载节点省市数据
|
const { level } = node
|
let nodes
|
getAreas({ parentId: level == 0 ? 0 : node.value })
|
.then((json) => {
|
nodes = json.data.list
|
nodes = nodes.map((item) => ({
|
value: item.id,
|
label: item.name,
|
level: item.level,
|
leaf: level >= 1
|
}))
|
resolve(nodes)
|
})
|
.catch((err) => {
|
console.log(err)
|
})
|
}
|
},
|
phone: {
|
phoneNum: "",
|
verifyCode: "",
|
agree: false,
|
newPassword: "",
|
passwordAgain: ""
|
},
|
//bindRule: {},
|
rules: {
|
phoneNum: [{ validator: isPhone, trigger: "change" }],
|
verifyCode: [{ required: true, message: "请输入验证码", trigger: "change" }],
|
newPassword: [{ validator: validatePassword, trigger: "change" }],
|
passwordAgain: [{ validator: validatePasswordAgain, trigger: "change" }],
|
agree: [
|
{
|
required: true,
|
message: "请勾选同意服务协议和隐私政策",
|
trigger: "change"
|
}
|
]
|
},
|
loading: "",
|
newPassword: "",
|
passwordAgain: "",
|
vLoading: false,
|
currentHeight: 1057,
|
currentWidth: 1920
|
}
|
},
|
methods: {
|
getValidStr() {
|
if (this.countdown > 0 && this.countdown <= 60) {
|
this.countdown--
|
if (this.countdown !== 0) {
|
this.codeMsg = "重新发送(" + this.countdown + ")"
|
} else {
|
clearInterval(this.timer)
|
this.codeMsg = "获取验证码"
|
this.countdown = 60
|
this.timer = null
|
this.codeDisabled = false
|
}
|
}
|
},
|
// 获取验证码
|
async getCode() {
|
// 验证码60秒倒计时
|
var pattern = /^1[345789]\d{9}$/
|
if (this.phone.phoneNum == "") {
|
this.$refs.userPhone.fields[0].validateMessage = "请输入手机号"
|
this.$refs.userPhone.fields[0].validateState = "error"
|
return
|
}
|
if (!pattern.test(this.phone.phoneNum)) {
|
this.$refs.userPhone.fields[0].validateMessage = "手机号码格式有误"
|
this.$refs.userPhone.fields[0].validateState = "error"
|
return
|
}
|
if (!this.timer) {
|
this.getValidStr()
|
this.timer = setInterval(this.getValidStr, 1000)
|
let userPhone = this.$refs["userPhone"]
|
getVerifyCode({
|
phoneNum: this.phone.phoneNum,
|
type: 1
|
})
|
.then((res) => {
|
this.gotCode = true
|
})
|
.catch((err) => {
|
userPhone.fields[0].validateMessage = err.data.msg
|
userPhone.fields[0].validateState = "error"
|
})
|
}
|
},
|
next() {
|
this.active++
|
switch (this.active) {
|
case 0:
|
this.step1 = true
|
this.step2 = false
|
|
break
|
case 1:
|
this.step1 = false
|
this.step2 = true
|
|
break
|
case 2:
|
this.step1 = false
|
this.step2 = false
|
|
break
|
case 3:
|
this.active == 0
|
}
|
},
|
|
bindPhoneNum() {
|
this.$refs["userPhone"].validate((valid) => {
|
if (valid) {
|
this.loading = this.$loading({
|
lock: true,
|
text: "Loading",
|
spinner: "el-icon-loading",
|
background: "rgba(0, 0, 0, 0.7)"
|
})
|
updatePhoneNum({
|
newPhoneNum: this.phone.phoneNum,
|
verifyCode: this.phone.verifyCode
|
})
|
.then((res) => {
|
this.loading.close()
|
this.$notify({
|
type: "success",
|
message: "绑定的手机号码已保存",
|
duration: 2500,
|
offset: 57
|
})
|
this.next()
|
})
|
.catch((err) => {
|
this.loading.close()
|
if (err && err.status == 401) {
|
return
|
}
|
this.$notify({
|
type: "error",
|
message: err.data.msg,
|
duration: 2500,
|
offset: 57
|
})
|
})
|
} else {
|
return
|
}
|
})
|
},
|
|
bindPhone() {
|
if (!this.gotCode) {
|
this.$notify({
|
type: "warning",
|
message: "请先获取验证码",
|
duration: 2500,
|
offset: 57
|
})
|
return
|
}
|
if (!this.user.agree) {
|
this.$notify({
|
type: "warning",
|
message: "请先阅读同意服务协议",
|
duration: 2500,
|
offset: 57
|
})
|
return
|
}
|
this.bindRule = this.rules
|
this.$nextTick(() => {
|
this.$refs["userForm"].validate((valid) => {
|
if (valid) {
|
this.loading = this.$loading({
|
lock: true,
|
text: "Loading",
|
spinner: "el-icon-loading",
|
background: "rgba(0, 0, 0, 0.7)"
|
})
|
let param = {
|
username: this.user.userName,
|
password: this.user.password,
|
phoneNum: this.user.phoneNum,
|
verifyCode: this.user.verifyCode
|
}
|
register(param)
|
.then((json) => {
|
const loginedInfo = {
|
access_token: json.data.token_type + " " + json.data.access_token,
|
refresh_token: json.data.refresh_token
|
}
|
sessionStorage.setItem("expires_in", json.data.expires_in)
|
sessionStorage.setItem("loginedInfo", JSON.stringify(loginedInfo))
|
this.info.userId = json.data.userInfo.id
|
console.log("当前info:", this.info)
|
this.loading.close()
|
this.next()
|
})
|
.catch((err) => {
|
console.log("报错", err)
|
this.loading.close()
|
if (err && err.status == 401) {
|
return
|
}
|
this.$notify({
|
type: "error",
|
message: err.data.msg,
|
duration: 2500,
|
offset: 57
|
})
|
})
|
|
// return false
|
} else {
|
this.$notify({
|
type: "warning",
|
message: "您填写的信息有误，请检查！",
|
duration: 2500,
|
offset: 57
|
})
|
this.bindRule = {}
|
}
|
})
|
this.bindRule = {}
|
})
|
//this.next()
|
},
|
|
getScreenHeight() {
|
this.currentHeight = document.documentElement.clientHeight
|
this.currentWidth = document.documentElement.clientWidth
|
// console.log(this.currentHeight, "当前窗口大小");
|
window.onresize = () => {
|
this.currentHeight = document.documentElement.clientHeight
|
this.currentWidth = document.documentElement.clientWidth
|
// console.log(this.currentHeight, "当前窗口大小2", this.currentWidth);
|
this.$forceUpdate()
|
}
|
},
|
complete(formName) {
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
this.loading = this.$loading({
|
lock: true,
|
text: "Loading",
|
spinner: "el-icon-loading",
|
background: "rgba(0, 0, 0, 0.7)"
|
})
|
forgetPwd({ phoneNum: this.phone.phoneNum, newPwd: this.phone.newPassword })
|
.then((res) => {
|
this.$notify({
|
type: "success",
|
message: "重置新密码成功",
|
duration: 2500,
|
offset: 57
|
})
|
this.loading.close()
|
this.$router.push("/Layout/ProductCenter")
|
})
|
.catch((err) => {
|
if (err && err.status == 401) {
|
return
|
}
|
this.$notify({
|
type: "error",
|
message: "重置新密码失败，请重试",
|
duration: 2500,
|
offset: 57
|
})
|
this.loading.close()
|
})
|
} else {
|
this.$notify({
|
type: "error",
|
message: "请正确填写信息！",
|
duration: 2500,
|
offset: 57
|
})
|
}
|
})
|
},
|
resetForm(formName) {
|
this.$refs[formName].resetFields()
|
}
|
},
|
created() {
|
this.getScreenHeight()
|
},
|
mounted() {
|
this.gotCode = false
|
let userInfo = this.$route.params.userInfo || JSON.parse(sessionStorage.getItem("userInfo"))
|
if (userInfo.phoneNum) {
|
//已完成手机号绑定
|
this.phone.phoneNum = userInfo.phoneNum
|
this.next()
|
}
|
},
|
watch: {},
|
beforeDestroy() {
|
window.onresize = null
|
}
|
}
|
</script>
|
<style lang="scss">
|
.login-top1 {
|
// background: url("../assets/img/top.png") 100% 100% no-repeat;
|
width: 100%;
|
height: 75px;
|
min-width: 1000px;
|
.logo {
|
float: left;
|
margin: 15px 20px;
|
}
|
}
|
.web-site {
|
position: absolute;
|
top: 55px;
|
left: 41px;
|
font-family: PingFangSC-Medium;
|
font-size: 20px;
|
color: #6170e1;
|
letter-spacing: 6.15px;
|
}
|
|
.login-middle1 {
|
background: url("../assets/img/loginBg.jpg") 100% no-repeat;
|
width: 100%;
|
height: 92%;
|
.login-form {
|
position: absolute;
|
padding: 20px;
|
background: #fff;
|
border-radius: 5px;
|
top: calc((100% - 535px) / 2);
|
left: calc((100% - 840px) / 2);
|
box-shadow: #999 0px 0px 10px;
|
.el-tabs__item {
|
width: 200px;
|
}
|
.welcome {
|
font-size: 22px;
|
margin-bottom: 40px;
|
}
|
.el-form-item__error {
|
left: 14px;
|
}
|
}
|
}
|
|
.el-step__title.is-process {
|
border-color: #3d68e1 !important;
|
color: #3d68e1 !important;
|
}
|
.el-step__title.is-success {
|
color: #303133 !important;
|
font-weight: 600;
|
}
|
.el-step__head.is-process {
|
border-color: #3d68e1 !important;
|
color: #3d68e1 !important;
|
}
|
.el-step__head.is-success {
|
border-color: #3d68e1 !important;
|
color: #3d68e1 !important;
|
}
|
</style>
|
