parent
5d835b0989
commit
705965b5b3
8 changed files with 1236 additions and 1013 deletions
|
After Width: | Height: | Size: 127 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
@ -0,0 +1,573 @@ |
|||||||
|
<template> |
||||||
|
<div class="wrap"> |
||||||
|
<div class="left"> |
||||||
|
<img src="../../assets/img/logo.png" alt=""> |
||||||
|
<div class="text"> |
||||||
|
<p>欢迎使用</p> |
||||||
|
<p>期货、期权交易虚拟仿真实验</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="right"> |
||||||
|
<div class="back" v-show="isReg" @click="toReg(false)"> |
||||||
|
<i class="el-icon-back"></i> |
||||||
|
</div> |
||||||
|
<div v-if="!isReg" class="ms-login"> |
||||||
|
<el-tabs v-model="activeName"> |
||||||
|
<el-tab-pane label="账号登录" name="0"> |
||||||
|
<el-form :model="loginForm" :rules="loginRules" ref="loginForm" style="margin-top: 20px"> |
||||||
|
<el-form-item label="用户名" prop="username"> |
||||||
|
<el-input v-model="loginForm.username" placeholder="请输入账号"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="密码" prop="password"> |
||||||
|
<el-input |
||||||
|
type="password" |
||||||
|
placeholder="请输入密码" |
||||||
|
v-model="loginForm.password" |
||||||
|
@keyup.enter.native="getSchool('loginForm')" |
||||||
|
> |
||||||
|
</el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-button class="submit" type="primary" @click="getSchool('loginForm')">登录</el-button> |
||||||
|
</el-form> |
||||||
|
</el-tab-pane> |
||||||
|
|
||||||
|
<el-tab-pane label="手机号/邮箱登录" name="1"> |
||||||
|
<el-form :model="phoneParam" :rules="phoneRules" ref="phoneParam" style="margin-top: 20px"> |
||||||
|
<el-form-item label="手机号/邮箱" prop="userphone"> |
||||||
|
<el-input v-model="phoneParam.userphone" placeholder="请输入手机号/邮箱"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="密码" prop="phonePassword"> |
||||||
|
<el-input |
||||||
|
type="password" |
||||||
|
placeholder="请输入密码" |
||||||
|
v-model="phoneParam.phonePassword" |
||||||
|
@keyup.enter.native="getSchool('phoneParam')" |
||||||
|
> |
||||||
|
</el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-button class="submit" type="primary" @click="getSchool('phoneParam')">登录</el-button> |
||||||
|
</el-form> |
||||||
|
</el-tab-pane> |
||||||
|
</el-tabs> |
||||||
|
<div class="links flex-between"> |
||||||
|
<el-button type="text" class="ques" @click="toReg(true)">前往注册</el-button> |
||||||
|
<el-button type="text" class="forget" @click="forget">忘记密码？</el-button> |
||||||
|
</div> |
||||||
|
<!-- <h2>密码登录</h2> |
||||||
|
<el-form :model="loginForm" :rules="loginRules" ref="login" label-width="0px"> |
||||||
|
<el-form-item prop="username"> |
||||||
|
<p class="label">用户名</p> |
||||||
|
<el-input v-model="loginForm.username" placeholder="请输入账号/手机号" @keyup.enter.native="submitForm()"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item prop="password"> |
||||||
|
<p class="label">密码</p> |
||||||
|
<el-input |
||||||
|
type="password" |
||||||
|
placeholder="请输入密码" |
||||||
|
v-model="loginForm.password" |
||||||
|
@keyup.enter.native="getSchool()" |
||||||
|
> |
||||||
|
</el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-button class="submit" type="primary" @click="getSchool">登录</el-button> |
||||||
|
<div class="links flex-between"> |
||||||
|
<el-button type="text" class="ques" @click="toReg(true)">前往注册</el-button> |
||||||
|
<el-button type="text" class="forget" @click="forget">忘记密码？</el-button> |
||||||
|
</div> |
||||||
|
</el-form> --> |
||||||
|
</div> |
||||||
|
<register v-else :isReg.sync="isReg" @updateInfo="updateInfo"></register> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 选择角色 --> |
||||||
|
<el-dialog title="选择角色" :visible.sync="roleDialog" width="24%" center :close-on-click-modal="false"> |
||||||
|
<div> |
||||||
|
<el-select v-model="roleId" placeholder="请选择角色"> |
||||||
|
<el-option v-for="(item,index) in roleList" :key="index" :label="item.roleName" :value="item.roleId"></el-option> |
||||||
|
</el-select> |
||||||
|
</div> |
||||||
|
<span slot="footer" class="dialog-footer"> |
||||||
|
<el-button @click="cancleRoleDia">取 消</el-button> |
||||||
|
<el-button v-if="activeName == '0'" type="primary" @click="roleSure('loginForm')">确 定</el-button> |
||||||
|
<el-button v-else type="primary" @click="roleSure('phoneParam')">确 定</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
|
||||||
|
<el-dialog :title="phoneReset ? '手机重置密码' : '邮箱重置密码'" :visible.sync="forgetVisible" :close-on-click-modal="false" @close="closeForget" width="30%"> |
||||||
|
<template v-if="phoneReset"> |
||||||
|
<el-form ref="form" label-width="60px"> |
||||||
|
<el-form-item label="手机号"> |
||||||
|
<el-input placeholder="请输入手机号" v-model.number="phone" maxlength="11"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="验证码"> |
||||||
|
<div class="flex-between"> |
||||||
|
<el-input v-model.number="phoneCode" placeholder="请输入验证码" maxlength="6"></el-input> |
||||||
|
<el-button style="margin-left: 10px" type="text" @click="sendPhoneCode" :disabled="phoneDisabled">{{phoneBtnText}}</el-button> |
||||||
|
</div> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="新密码"> |
||||||
|
<el-input type="password" placeholder="请输入新密码" v-model="newPassword"></el-input> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<div class="switch" @click="switchType(false)"><span>邮箱重置密码</span></div> |
||||||
|
<span slot="footer" class="dialog-footer"> |
||||||
|
<el-button @click="phoneVisible = false">取 消</el-button> |
||||||
|
<el-button type="primary" @click="updatePassword(1)">确 定</el-button> |
||||||
|
</span> |
||||||
|
</template> |
||||||
|
<template v-else> |
||||||
|
<el-form ref="form" label-width="60px"> |
||||||
|
<el-form-item label="邮箱"> |
||||||
|
<el-input placeholder="请输入邮箱" v-model="email"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="验证码"> |
||||||
|
<div class="flex-between"> |
||||||
|
<el-input v-model.number="emailCode" placeholder="请输入验证码" maxlength="6"></el-input> |
||||||
|
<el-button style="margin-left: 10px" type="text" @click="sendEmailCode" :disabled="emailDisabled">{{emailBtnText}}</el-button> |
||||||
|
</div> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="新密码"> |
||||||
|
<el-input type="password" placeholder="请输入新密码" v-model="newPassword"></el-input> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<div class="switch" @click="switchType(true)"><span>手机重置密码</span></div> |
||||||
|
<span slot="footer" class="dialog-footer"> |
||||||
|
<el-button @click="emailVisible = false">取 消</el-button> |
||||||
|
<el-button type="primary" @click="updatePassword">确 定</el-button> |
||||||
|
</span> |
||||||
|
</template> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import register from './RegisterForm'; |
||||||
|
export default { |
||||||
|
data: function() { |
||||||
|
return { |
||||||
|
activeName: '0', |
||||||
|
isReg: false, |
||||||
|
loginForm: { |
||||||
|
username: '15794146134', |
||||||
|
password: '111aaa', |
||||||
|
}, |
||||||
|
loginRules: { |
||||||
|
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }], |
||||||
|
password: [{ required: true, message: '请输入密码', trigger: 'blur' }], |
||||||
|
}, |
||||||
|
phoneParam: { |
||||||
|
userphone: '', |
||||||
|
phonePassword: '' |
||||||
|
}, |
||||||
|
phoneRules: { |
||||||
|
userphone: [{ required: true, message: '请输入手机号/邮箱', trigger: 'blur' }], |
||||||
|
phonePassword: [{ required: true, message: '请输入密码', trigger: 'blur' }], |
||||||
|
}, |
||||||
|
roleDialog: false, |
||||||
|
userId: '', |
||||||
|
schoolId: '', |
||||||
|
roleId: '', |
||||||
|
roleList: [], |
||||||
|
studentId: '', |
||||||
|
forgetVisible: false, |
||||||
|
phoneReset: true, |
||||||
|
email: '', |
||||||
|
emailBtnText: '发送验证码', |
||||||
|
emailCode: '', |
||||||
|
emailDisabled: false, |
||||||
|
emailTimer: null, |
||||||
|
phone: '', |
||||||
|
phoneBtnText: '发送验证码', |
||||||
|
phoneCode: '', |
||||||
|
phoneDisabled: false, |
||||||
|
phoneTimer: null, |
||||||
|
newPassword: '', |
||||||
|
emailOpener: '', |
||||||
|
phoneOpener: '' |
||||||
|
}; |
||||||
|
}, |
||||||
|
components: { |
||||||
|
register |
||||||
|
}, |
||||||
|
mounted(){ |
||||||
|
this.$once('hook:beforeDestroy', function () { |
||||||
|
clearInterval(this.phoneTimer) |
||||||
|
this.phoneTimer = null |
||||||
|
clearInterval(this.emailTimer) |
||||||
|
this.emailTimer = null |
||||||
|
}) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getSchool(form) { |
||||||
|
this.$refs[form].validate(valid => { |
||||||
|
if (valid) { |
||||||
|
let data = { |
||||||
|
account: this.activeName == '0' ? this.loginForm.username : this.phoneParam.userphone, |
||||||
|
password: this.activeName == '0' ? this.loginForm.password : this.phoneParam.phonePassword, |
||||||
|
schoolId: 2105, |
||||||
|
source: this.activeName |
||||||
|
}; |
||||||
|
this.$get(this.api.loginSchool, data) |
||||||
|
.then(res => { |
||||||
|
if(res.status == 200){ |
||||||
|
this.schoolList = [...res.message.staffList,...res.message.studentList] |
||||||
|
let indexs = {} |
||||||
|
this.schoolList = this.schoolList.reduce((cur,next) => { |
||||||
|
indexs[next.schoolId] ? '' : indexs[next.schoolId] = true && cur.push(next) |
||||||
|
return cur |
||||||
|
},[]) |
||||||
|
if(this.schoolList.length >= 1) { |
||||||
|
this.schoolId = this.schoolList[0].schoolId |
||||||
|
this.userId = this.schoolList[0].userId |
||||||
|
this.studentId = this.schoolList[0].studentId |
||||||
|
// this.getRole() |
||||||
|
this.roleId = 4 |
||||||
|
this.submitForm(form) |
||||||
|
}else{ |
||||||
|
this.$message.error('账号不存在') |
||||||
|
} |
||||||
|
}else{ |
||||||
|
this.$message.error(res.errmessage); |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch(res => {}); |
||||||
|
} else { |
||||||
|
this.$message.error('请输入账号和密码'); |
||||||
|
return false; |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
getRole(form) { |
||||||
|
// this.userId = this.schoolList.find((n,k) => { |
||||||
|
// return n.schoolId == this.schoolId |
||||||
|
// }).userId |
||||||
|
let data = { |
||||||
|
userId: this.userId, |
||||||
|
schoolId: this.schoolId |
||||||
|
}; |
||||||
|
this.$get(this.api.loginRole, data) |
||||||
|
.then(res => { |
||||||
|
this.roleList = [...res.message.staffList,...res.message.studentList] |
||||||
|
let indexs = {} |
||||||
|
this.roleList = this.roleList.reduce((cur,next) => { |
||||||
|
indexs[next.roleId] ? '' : indexs[next.roleId] = true && cur.push(next) |
||||||
|
return cur |
||||||
|
},[]) |
||||||
|
this.roleList.forEach((n,k) => { |
||||||
|
switch(n.roleId){ |
||||||
|
case 2: |
||||||
|
n.roleName = '管理员' |
||||||
|
break |
||||||
|
case 3: |
||||||
|
n.roleName = '老师' |
||||||
|
break |
||||||
|
case 4: |
||||||
|
n.roleName = '学生' |
||||||
|
break |
||||||
|
} |
||||||
|
}) |
||||||
|
if(this.roleList.length > 1) { |
||||||
|
this.roleDialog = true |
||||||
|
}else{ |
||||||
|
this.roleId = this.roleList[0].roleId |
||||||
|
this.submitForm(form) |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch(res => {}); |
||||||
|
}, |
||||||
|
updateInfo(data){ |
||||||
|
this.loginForm.username = data.username |
||||||
|
this.loginForm.password = data.password |
||||||
|
}, |
||||||
|
roleSure(form){ |
||||||
|
if(this.roleId){ |
||||||
|
this.submitForm(form) |
||||||
|
}else{ |
||||||
|
this.$message.error('请选择角色！'); |
||||||
|
} |
||||||
|
}, |
||||||
|
submitForm(form) { |
||||||
|
this.$refs[form].validate(valid => { |
||||||
|
if (valid) { |
||||||
|
let data = { |
||||||
|
roleId: this.roleId, |
||||||
|
userId: this.userId, |
||||||
|
schoolId: this.schoolId |
||||||
|
} |
||||||
|
this.$get(this.api.logins,data).then(res => { |
||||||
|
this.$post(this.api.updateLogInNumber,{userId: this.userId}).then(res => {}).catch(res => {}); |
||||||
|
this.$message.success('登录成功'); |
||||||
|
sessionStorage.setItem('kd_client_username', this.activeName == '0' ? this.loginForm.username : this.phoneParam.userphone); |
||||||
|
this.$store.commit("userLoginData", { userId : this.userId,accountRole: this.roleId,studentId : this.studentId,schoolId: this.schoolId,token: res.message.user.token}); |
||||||
|
res.message.user.userAvatars && this.$store.commit("userPhoto", { avatar : res.message.user.userAvatars}); |
||||||
|
this.$store.commit("userName", { userName : res.message.user.userName}); |
||||||
|
this.$store.commit("dataTime", { dataTime : res.message.user.dataTime}); |
||||||
|
let redirect = decodeURIComponent(this.$route.query.redirect || '/dashboard') |
||||||
|
this.$router.replace(redirect) |
||||||
|
}).catch(res => {}); |
||||||
|
} else { |
||||||
|
// this.$message.error('请输入账号和密码'); |
||||||
|
return false; |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
cancleRoleDia() { |
||||||
|
this.roleId = '' |
||||||
|
this.roleDialog = false |
||||||
|
}, |
||||||
|
toReg(status) { |
||||||
|
this.isReg = status |
||||||
|
}, |
||||||
|
forget(){ |
||||||
|
this.forgetVisible = true |
||||||
|
}, |
||||||
|
emailCountdown(){ |
||||||
|
let count = 60 |
||||||
|
if(!this.emailTimer){ |
||||||
|
this.emailDisabled = true |
||||||
|
this.emailTimer = setInterval(() => { |
||||||
|
if(count > 0){ |
||||||
|
count-- |
||||||
|
this.emailBtnText = `${count}秒后重试` |
||||||
|
}else{ |
||||||
|
this.emailDisabled = false |
||||||
|
clearInterval(this.emailTimer) |
||||||
|
this.emailTimer = null |
||||||
|
this.emailBtnText = `发送验证码` |
||||||
|
} |
||||||
|
},1000) |
||||||
|
} |
||||||
|
}, |
||||||
|
phoneCountdown(){ |
||||||
|
let count = 60 |
||||||
|
if(!this.phoneTimer){ |
||||||
|
this.phoneDisabled = true |
||||||
|
this.phoneTimer = setInterval(() => { |
||||||
|
if(count > 0){ |
||||||
|
count-- |
||||||
|
this.phoneBtnText = `${count}秒后重试` |
||||||
|
}else{ |
||||||
|
this.phoneDisabled = false |
||||||
|
clearInterval(this.phoneTimer) |
||||||
|
this.phoneTimer = null |
||||||
|
this.phoneBtnText = `发送验证码` |
||||||
|
} |
||||||
|
},1000) |
||||||
|
} |
||||||
|
}, |
||||||
|
closeForget(){ |
||||||
|
this.phoneCode = '' |
||||||
|
this.emailCode = '' |
||||||
|
this.userId = '' |
||||||
|
this.newPassword = '' |
||||||
|
}, |
||||||
|
sendEmailCode(){ |
||||||
|
if(!this.email) return this.$message.warning('请输入邮箱') |
||||||
|
if(!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.email)) return this.$message.warning('请输入正确的邮箱') |
||||||
|
let data = { |
||||||
|
email: this.email |
||||||
|
} |
||||||
|
this.$get(this.api.findPasswordByEmail,data).then(res => { |
||||||
|
if(res.errmessage == 'success'){ |
||||||
|
this.$message.success('发送成功') |
||||||
|
this.emailCountdown() |
||||||
|
this.userId = res.data.userId |
||||||
|
this.emailOpener = res.data.opener |
||||||
|
} |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
sendPhoneCode(){ |
||||||
|
if(!this.phone) return this.$message.warning('请输入手机号') |
||||||
|
if(!/^1[3456789]\d{9}$/.test(this.phone)) return this.$message.warning('请输入正确的手机号') |
||||||
|
let data = { |
||||||
|
phone: this.phone |
||||||
|
} |
||||||
|
this.$get(this.api.findPasswordByPhone,data).then(res => { |
||||||
|
if(res.errmessage == 'success'){ |
||||||
|
this.$message.success('发送成功') |
||||||
|
this.phoneCountdown() |
||||||
|
this.userId = res.data.userId |
||||||
|
this.phoneOpener = res.data.opener |
||||||
|
} |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
async updatePassword(type){ |
||||||
|
if(type == 1){ |
||||||
|
if(!this.phone) return this.$message.warning('请输入手机号') |
||||||
|
if(!/^1[3456789]\d{9}$/.test(this.phone)) return this.$message.warning('请输入正确的手机号') |
||||||
|
if(!this.phoneCode) return this.$message.warning('请输入验证码') |
||||||
|
}else{ |
||||||
|
if(!this.email) return this.$message.warning('请输入邮箱') |
||||||
|
if(!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.email)) return this.$message.warning('请输入正确的邮箱') |
||||||
|
if(!this.emailCode) return this.$message.warning('请输入验证码') |
||||||
|
} |
||||||
|
if(!this.newPassword) return this.$message.warning('请输入新密码') |
||||||
|
|
||||||
|
let checkData = { |
||||||
|
code: type == 1 ? this.phoneCode : this.emailCode, |
||||||
|
opener: type == 1 ? this.phoneOpener : this.emailOpener |
||||||
|
} |
||||||
|
let checkRes = await this.$post(this.api.checkCode,checkData) |
||||||
|
if(checkRes.errmessage == 'success'){ |
||||||
|
let resetData = { |
||||||
|
userId: this.userId, |
||||||
|
password: this.newPassword |
||||||
|
} |
||||||
|
let resetRes = await this.$post(this.api.resetPassword,resetData) |
||||||
|
if(resetRes.errmessage == 'success'){ |
||||||
|
this.$message.success('重置成功') |
||||||
|
this.forgetVisible = false |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
switchType(type){ |
||||||
|
this.phoneReset = type |
||||||
|
} |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
.wrap { |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background: url(../../assets/img/login_bg.png) 0 0/100% 100% no-repeat; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
.logo{ |
||||||
|
position: absolute; |
||||||
|
top: 20px; |
||||||
|
left: 72px; |
||||||
|
width: 240px; |
||||||
|
} |
||||||
|
.left{ |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
left: 221px; |
||||||
|
transform: translateY(-60%); |
||||||
|
|
||||||
|
img{ |
||||||
|
width: 447px;; |
||||||
|
margin-bottom: 30px; |
||||||
|
} |
||||||
|
.text{ |
||||||
|
font-size: 47px; |
||||||
|
color: #fff; |
||||||
|
p{ |
||||||
|
margin-bottom: 15px; |
||||||
|
&:last-child{ |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
.right{ |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
right: 100px; |
||||||
|
transform: translateY(-50%); |
||||||
|
width: 700px; |
||||||
|
padding: 50px 90px 20px; |
||||||
|
background-color: #fff; |
||||||
|
box-sizing: border-box; |
||||||
|
box-shadow: 0 1px 20px rgba(0,0,0,0.16); |
||||||
|
|
||||||
|
.back{ |
||||||
|
position: absolute; |
||||||
|
top: 20px; |
||||||
|
left: 20px; |
||||||
|
font-size: 24px; |
||||||
|
color: #105cb2; |
||||||
|
cursor: pointer; |
||||||
|
|
||||||
|
&:hover{ |
||||||
|
opacity: .8; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
h2{ |
||||||
|
padding-bottom: 10px; |
||||||
|
font-size: 24px; |
||||||
|
font-weight: 400; |
||||||
|
color: #303d4c; |
||||||
|
text-align: center; |
||||||
|
border-bottom: 1px solid #E5E5E5; |
||||||
|
} |
||||||
|
/deep/.el-form{ |
||||||
|
margin-top: 30px; |
||||||
|
|
||||||
|
.label{ |
||||||
|
margin-bottom: 10px; |
||||||
|
color: #105CB2; |
||||||
|
} |
||||||
|
/deep/.el-input__inner{ |
||||||
|
height: 46px; |
||||||
|
padding: 0 23px; |
||||||
|
line-height: 46px; |
||||||
|
border: 1px solid #AFB5BB; |
||||||
|
border-radius: 23px !important; |
||||||
|
} |
||||||
|
/deep/.el-form-item__error{ |
||||||
|
top: 105%; |
||||||
|
left: auto; |
||||||
|
right: 0; |
||||||
|
color: #FFA94E; |
||||||
|
} |
||||||
|
.submit{ |
||||||
|
width: 100%; |
||||||
|
height: 48px; |
||||||
|
margin-top: 60px; |
||||||
|
line-height: 48px; |
||||||
|
padding: 0; |
||||||
|
font-size: 20px; |
||||||
|
background-color: #105cb2; |
||||||
|
border-radius: 23px; |
||||||
|
border: 0; |
||||||
|
} |
||||||
|
.login-tips{ |
||||||
|
margin-bottom: 20px; |
||||||
|
font-size: 16px; |
||||||
|
color: #105CB2; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.thirdParty{ |
||||||
|
.item{ |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 20px; |
||||||
|
padding: 10px 0; |
||||||
|
color: #AFB5BB; |
||||||
|
font-size: 16px; |
||||||
|
background-color: #eff0f1; |
||||||
|
border-radius: 36px; |
||||||
|
cursor: pointer; |
||||||
|
img{ |
||||||
|
width: 40px; |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.switch{ |
||||||
|
span{ |
||||||
|
cursor: pointer; |
||||||
|
color: #9076FF; |
||||||
|
} |
||||||
|
} |
||||||
|
.links{ |
||||||
|
margin: 20px 0 20px; |
||||||
|
} |
||||||
|
.ques{ |
||||||
|
color: #105cb2; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
.forget{ |
||||||
|
color: #ffa94e; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -1,573 +1,221 @@ |
|||||||
<template> |
<template> |
||||||
<div class="wrap"> |
<div class="wrap"> |
||||||
<div class="left"> |
<!-- 顶部栏目 --> |
||||||
<img src="../../assets/img/logo.png" alt=""> |
<div class="bar flex-between"> |
||||||
<div class="text"> |
<div class="icon_wrap"> |
||||||
<p>欢迎使用</p> |
<img src="../../assets/img/logo.png" alt=""> |
||||||
<p>期货、期权交易虚拟仿真实验</p> |
|
||||||
</div> |
</div> |
||||||
|
<div class="bar_name">经济与管理学院虚拟仿真实验教学中心</div> |
||||||
</div> |
</div> |
||||||
<div class="right"> |
<!-- 标题+实验入口 --> |
||||||
<div class="back" v-show="isReg" @click="toReg(false)"> |
<div class="content"> |
||||||
<i class="el-icon-back"></i> |
<div class="content_title"> |
||||||
|
<div>欢迎使用</div> |
||||||
|
<div>期货、期权交易虚拟仿真实验</div> |
||||||
</div> |
</div> |
||||||
<div v-if="!isReg" class="ms-login"> |
<div class="content_button"> |
||||||
<el-tabs v-model="activeName"> |
<a @click="toClient"><div>学生端</div></a> |
||||||
<el-tab-pane label="账号登录" name="0"> |
<a @click="toMang"><div>教师端(教学活动查看入口)</div></a> |
||||||
<el-form :model="loginForm" :rules="loginRules" ref="loginForm" style="margin-top: 20px"> |
<a @click="toExpert"><div style="background:#CD3E6A">专家通道</div></a> |
||||||
<el-form-item label="用户名" prop="username"> |
</div> |
||||||
<el-input v-model="loginForm.username" placeholder="请输入账号"></el-input> |
<div class="content_footer"> |
||||||
</el-form-item> |
<div>建议使用谷歌浏览器进行实验</div> |
||||||
<el-form-item label="密码" prop="password"> |
<div>热线电话：028-61831033 虚拟实验服务和支持QQ群：459797943</div> |
||||||
<el-input |
|
||||||
type="password" |
|
||||||
placeholder="请输入密码" |
|
||||||
v-model="loginForm.password" |
|
||||||
@keyup.enter.native="getSchool('loginForm')" |
|
||||||
> |
|
||||||
</el-input> |
|
||||||
</el-form-item> |
|
||||||
<el-button class="submit" type="primary" @click="getSchool('loginForm')">登录</el-button> |
|
||||||
</el-form> |
|
||||||
</el-tab-pane> |
|
||||||
|
|
||||||
<el-tab-pane label="手机号/邮箱登录" name="1"> |
|
||||||
<el-form :model="phoneParam" :rules="phoneRules" ref="phoneParam" style="margin-top: 20px"> |
|
||||||
<el-form-item label="手机号/邮箱" prop="userphone"> |
|
||||||
<el-input v-model="phoneParam.userphone" placeholder="请输入手机号/邮箱"></el-input> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item label="密码" prop="phonePassword"> |
|
||||||
<el-input |
|
||||||
type="password" |
|
||||||
placeholder="请输入密码" |
|
||||||
v-model="phoneParam.phonePassword" |
|
||||||
@keyup.enter.native="getSchool('phoneParam')" |
|
||||||
> |
|
||||||
</el-input> |
|
||||||
</el-form-item> |
|
||||||
<el-button class="submit" type="primary" @click="getSchool('phoneParam')">登录</el-button> |
|
||||||
</el-form> |
|
||||||
</el-tab-pane> |
|
||||||
</el-tabs> |
|
||||||
<div class="links flex-between"> |
|
||||||
<el-button type="text" class="ques" @click="toReg(true)">前往注册</el-button> |
|
||||||
<el-button type="text" class="forget" @click="forget">忘记密码？</el-button> |
|
||||||
</div> |
|
||||||
<!-- <h2>密码登录</h2> |
|
||||||
<el-form :model="loginForm" :rules="loginRules" ref="login" label-width="0px"> |
|
||||||
<el-form-item prop="username"> |
|
||||||
<p class="label">用户名</p> |
|
||||||
<el-input v-model="loginForm.username" placeholder="请输入账号/手机号" @keyup.enter.native="submitForm()"></el-input> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item prop="password"> |
|
||||||
<p class="label">密码</p> |
|
||||||
<el-input |
|
||||||
type="password" |
|
||||||
placeholder="请输入密码" |
|
||||||
v-model="loginForm.password" |
|
||||||
@keyup.enter.native="getSchool()" |
|
||||||
> |
|
||||||
</el-input> |
|
||||||
</el-form-item> |
|
||||||
<el-button class="submit" type="primary" @click="getSchool">登录</el-button> |
|
||||||
<div class="links flex-between"> |
|
||||||
<el-button type="text" class="ques" @click="toReg(true)">前往注册</el-button> |
|
||||||
<el-button type="text" class="forget" @click="forget">忘记密码？</el-button> |
|
||||||
</div> |
|
||||||
</el-form> --> |
|
||||||
</div> |
</div> |
||||||
<register v-else :isReg.sync="isReg" @updateInfo="updateInfo"></register> |
|
||||||
</div> |
</div> |
||||||
|
<!-- 访问人数 --> |
||||||
<!-- 选择角色 --> |
<div class="count_wrap"> |
||||||
<el-dialog title="选择角色" :visible.sync="roleDialog" width="24%" center :close-on-click-modal="false"> |
<div class="count_title">访问统计</div> |
||||||
<div> |
<div> |
||||||
<el-select v-model="roleId" placeholder="请选择角色"> |
<div class="count_current">当前访问： 87</div> |
||||||
<el-option v-for="(item,index) in roleList" :key="index" :label="item.roleName" :value="item.roleId"></el-option> |
<div class="count_history">历史访问： 468427</div> |
||||||
</el-select> |
<div class="count_people">实验人数： 1059</div> |
||||||
</div> |
</div> |
||||||
<span slot="footer" class="dialog-footer"> |
</div> |
||||||
<el-button @click="cancleRoleDia">取 消</el-button> |
|
||||||
<el-button v-if="activeName == '0'" type="primary" @click="roleSure('loginForm')">确 定</el-button> |
|
||||||
<el-button v-else type="primary" @click="roleSure('phoneParam')">确 定</el-button> |
|
||||||
</span> |
|
||||||
</el-dialog> |
|
||||||
|
|
||||||
<el-dialog :title="phoneReset ? '手机重置密码' : '邮箱重置密码'" :visible.sync="forgetVisible" :close-on-click-modal="false" @close="closeForget" width="30%"> |
|
||||||
<template v-if="phoneReset"> |
|
||||||
<el-form ref="form" label-width="60px"> |
|
||||||
<el-form-item label="手机号"> |
|
||||||
<el-input placeholder="请输入手机号" v-model.number="phone" maxlength="11"></el-input> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item label="验证码"> |
|
||||||
<div class="flex-between"> |
|
||||||
<el-input v-model.number="phoneCode" placeholder="请输入验证码" maxlength="6"></el-input> |
|
||||||
<el-button style="margin-left: 10px" type="text" @click="sendPhoneCode" :disabled="phoneDisabled">{{phoneBtnText}}</el-button> |
|
||||||
</div> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item label="新密码"> |
|
||||||
<el-input type="password" placeholder="请输入新密码" v-model="newPassword"></el-input> |
|
||||||
</el-form-item> |
|
||||||
</el-form> |
|
||||||
<div class="switch" @click="switchType(false)"><span>邮箱重置密码</span></div> |
|
||||||
<span slot="footer" class="dialog-footer"> |
|
||||||
<el-button @click="phoneVisible = false">取 消</el-button> |
|
||||||
<el-button type="primary" @click="updatePassword(1)">确 定</el-button> |
|
||||||
</span> |
|
||||||
</template> |
|
||||||
<template v-else> |
|
||||||
<el-form ref="form" label-width="60px"> |
|
||||||
<el-form-item label="邮箱"> |
|
||||||
<el-input placeholder="请输入邮箱" v-model="email"></el-input> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item label="验证码"> |
|
||||||
<div class="flex-between"> |
|
||||||
<el-input v-model.number="emailCode" placeholder="请输入验证码" maxlength="6"></el-input> |
|
||||||
<el-button style="margin-left: 10px" type="text" @click="sendEmailCode" :disabled="emailDisabled">{{emailBtnText}}</el-button> |
|
||||||
</div> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item label="新密码"> |
|
||||||
<el-input type="password" placeholder="请输入新密码" v-model="newPassword"></el-input> |
|
||||||
</el-form-item> |
|
||||||
</el-form> |
|
||||||
<div class="switch" @click="switchType(true)"><span>手机重置密码</span></div> |
|
||||||
<span slot="footer" class="dialog-footer"> |
|
||||||
<el-button @click="emailVisible = false">取 消</el-button> |
|
||||||
<el-button type="primary" @click="updatePassword">确 定</el-button> |
|
||||||
</span> |
|
||||||
</template> |
|
||||||
</el-dialog> |
|
||||||
</div> |
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
import register from './RegisterForm'; |
import { Loading } from 'element-ui' |
||||||
export default { |
export default { |
||||||
data: function() { |
data() { |
||||||
return { |
return { |
||||||
activeName: '0', |
userId: '', |
||||||
isReg: false, |
studentId: '', |
||||||
loginForm: { |
schoolId: '', |
||||||
username: '15794146134', |
studentIds: [1504, 1505, 1506, 1507, 1508, 1509, 1510, 1511, 1512, 1513], |
||||||
password: '111aaa', |
loadIns: null, |
||||||
}, |
} |
||||||
loginRules: { |
|
||||||
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }], |
|
||||||
password: [{ required: true, message: '请输入密码', trigger: 'blur' }], |
|
||||||
}, |
|
||||||
phoneParam: { |
|
||||||
userphone: '', |
|
||||||
phonePassword: '' |
|
||||||
}, |
|
||||||
phoneRules: { |
|
||||||
userphone: [{ required: true, message: '请输入手机号/邮箱', trigger: 'blur' }], |
|
||||||
phonePassword: [{ required: true, message: '请输入密码', trigger: 'blur' }], |
|
||||||
}, |
|
||||||
roleDialog: false, |
|
||||||
userId: '', |
|
||||||
schoolId: '', |
|
||||||
roleId: '', |
|
||||||
roleList: [], |
|
||||||
studentId: '', |
|
||||||
forgetVisible: false, |
|
||||||
phoneReset: true, |
|
||||||
email: '', |
|
||||||
emailBtnText: '发送验证码', |
|
||||||
emailCode: '', |
|
||||||
emailDisabled: false, |
|
||||||
emailTimer: null, |
|
||||||
phone: '', |
|
||||||
phoneBtnText: '发送验证码', |
|
||||||
phoneCode: '', |
|
||||||
phoneDisabled: false, |
|
||||||
phoneTimer: null, |
|
||||||
newPassword: '', |
|
||||||
emailOpener: '', |
|
||||||
phoneOpener: '' |
|
||||||
}; |
|
||||||
}, |
|
||||||
components: { |
|
||||||
register |
|
||||||
}, |
}, |
||||||
mounted(){ |
mounted(){ |
||||||
this.$once('hook:beforeDestroy', function () { |
|
||||||
clearInterval(this.phoneTimer) |
|
||||||
this.phoneTimer = null |
|
||||||
clearInterval(this.emailTimer) |
|
||||||
this.emailTimer = null |
|
||||||
}) |
|
||||||
}, |
}, |
||||||
methods: { |
methods:{ |
||||||
getSchool(form) { |
toClient(){ |
||||||
this.$refs[form].validate(valid => { |
location.href = location.host.includes('116.63.168.79') ? 'http://116.63.168.79/kdclient/#/login' : 'http://122.9.154.146/kdclient/#/login' |
||||||
if (valid) { |
|
||||||
let data = { |
|
||||||
account: this.activeName == '0' ? this.loginForm.username : this.phoneParam.userphone, |
|
||||||
password: this.activeName == '0' ? this.loginForm.password : this.phoneParam.phonePassword, |
|
||||||
schoolId: 2105, |
|
||||||
source: this.activeName |
|
||||||
}; |
|
||||||
this.$get(this.api.loginSchool, data) |
|
||||||
.then(res => { |
|
||||||
if(res.status == 200){ |
|
||||||
this.schoolList = [...res.message.staffList,...res.message.studentList] |
|
||||||
let indexs = {} |
|
||||||
this.schoolList = this.schoolList.reduce((cur,next) => { |
|
||||||
indexs[next.schoolId] ? '' : indexs[next.schoolId] = true && cur.push(next) |
|
||||||
return cur |
|
||||||
},[]) |
|
||||||
if(this.schoolList.length >= 1) { |
|
||||||
this.schoolId = this.schoolList[0].schoolId |
|
||||||
this.userId = this.schoolList[0].userId |
|
||||||
this.studentId = this.schoolList[0].studentId |
|
||||||
// this.getRole() |
|
||||||
this.roleId = 4 |
|
||||||
this.submitForm(form) |
|
||||||
}else{ |
|
||||||
this.$message.error('账号不存在') |
|
||||||
} |
|
||||||
}else{ |
|
||||||
this.$message.error(res.errmessage); |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch(res => {}); |
|
||||||
} else { |
|
||||||
this.$message.error('请输入账号和密码'); |
|
||||||
return false; |
|
||||||
} |
|
||||||
}); |
|
||||||
}, |
|
||||||
getRole(form) { |
|
||||||
// this.userId = this.schoolList.find((n,k) => { |
|
||||||
// return n.schoolId == this.schoolId |
|
||||||
// }).userId |
|
||||||
let data = { |
|
||||||
userId: this.userId, |
|
||||||
schoolId: this.schoolId |
|
||||||
}; |
|
||||||
this.$get(this.api.loginRole, data) |
|
||||||
.then(res => { |
|
||||||
this.roleList = [...res.message.staffList,...res.message.studentList] |
|
||||||
let indexs = {} |
|
||||||
this.roleList = this.roleList.reduce((cur,next) => { |
|
||||||
indexs[next.roleId] ? '' : indexs[next.roleId] = true && cur.push(next) |
|
||||||
return cur |
|
||||||
},[]) |
|
||||||
this.roleList.forEach((n,k) => { |
|
||||||
switch(n.roleId){ |
|
||||||
case 2: |
|
||||||
n.roleName = '管理员' |
|
||||||
break |
|
||||||
case 3: |
|
||||||
n.roleName = '老师' |
|
||||||
break |
|
||||||
case 4: |
|
||||||
n.roleName = '学生' |
|
||||||
break |
|
||||||
} |
|
||||||
}) |
|
||||||
if(this.roleList.length > 1) { |
|
||||||
this.roleDialog = true |
|
||||||
}else{ |
|
||||||
this.roleId = this.roleList[0].roleId |
|
||||||
this.submitForm(form) |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch(res => {}); |
|
||||||
}, |
|
||||||
updateInfo(data){ |
|
||||||
this.loginForm.username = data.username |
|
||||||
this.loginForm.password = data.password |
|
||||||
}, |
|
||||||
roleSure(form){ |
|
||||||
if(this.roleId){ |
|
||||||
this.submitForm(form) |
|
||||||
}else{ |
|
||||||
this.$message.error('请选择角色！'); |
|
||||||
} |
|
||||||
}, |
|
||||||
submitForm(form) { |
|
||||||
this.$refs[form].validate(valid => { |
|
||||||
if (valid) { |
|
||||||
let data = { |
|
||||||
roleId: this.roleId, |
|
||||||
userId: this.userId, |
|
||||||
schoolId: this.schoolId |
|
||||||
} |
|
||||||
this.$get(this.api.logins,data).then(res => { |
|
||||||
this.$post(this.api.updateLogInNumber,{userId: this.userId}).then(res => {}).catch(res => {}); |
|
||||||
this.$message.success('登录成功'); |
|
||||||
sessionStorage.setItem('kd_client_username', this.activeName == '0' ? this.loginForm.username : this.phoneParam.userphone); |
|
||||||
this.$store.commit("userLoginData", { userId : this.userId,accountRole: this.roleId,studentId : this.studentId,schoolId: this.schoolId,token: res.message.user.token}); |
|
||||||
res.message.user.userAvatars && this.$store.commit("userPhoto", { avatar : res.message.user.userAvatars}); |
|
||||||
this.$store.commit("userName", { userName : res.message.user.userName}); |
|
||||||
this.$store.commit("dataTime", { dataTime : res.message.user.dataTime}); |
|
||||||
let redirect = decodeURIComponent(this.$route.query.redirect || '/dashboard') |
|
||||||
this.$router.replace(redirect) |
|
||||||
}).catch(res => {}); |
|
||||||
} else { |
|
||||||
// this.$message.error('请输入账号和密码'); |
|
||||||
return false; |
|
||||||
} |
|
||||||
}); |
|
||||||
}, |
|
||||||
cancleRoleDia() { |
|
||||||
this.roleId = '' |
|
||||||
this.roleDialog = false |
|
||||||
}, |
}, |
||||||
toReg(status) { |
toMang(){ |
||||||
this.isReg = status |
location.href = location.host.includes('116.63.168.79') ? 'http://116.63.168.79/kdserver/#/login' : 'http://122.9.154.146/kdserver/#/login' |
||||||
}, |
}, |
||||||
forget(){ |
toExpert(){ |
||||||
this.forgetVisible = true |
this.loadIns = Loading.service({ |
||||||
}, |
background: 'rgba(255,255,255,.6)' |
||||||
emailCountdown(){ |
}) |
||||||
let count = 60 |
let studentId = this.studentIds[parseInt(Math.random()*10)] |
||||||
if(!this.emailTimer){ |
this.$get(this.api.getAccountPassword,{studentId}).then(res => { |
||||||
this.emailDisabled = true |
let account = res.data.account |
||||||
this.emailTimer = setInterval(() => { |
let data = { |
||||||
if(count > 0){ |
account: res.data.account, |
||||||
count-- |
password: res.data.password, |
||||||
this.emailBtnText = `${count}秒后重试` |
schoolId: 2105, |
||||||
}else{ |
source: 0 |
||||||
this.emailDisabled = false |
}; |
||||||
clearInterval(this.emailTimer) |
this.$get(this.api.loginSchool, data).then(res => { |
||||||
this.emailTimer = null |
if(res.status == 200){ |
||||||
this.emailBtnText = `发送验证码` |
this.schoolList = [...res.message.staffList,...res.message.studentList] |
||||||
} |
let indexs = {} |
||||||
},1000) |
this.schoolList = this.schoolList.reduce((cur,next) => { |
||||||
} |
indexs[next.schoolId] ? '' : indexs[next.schoolId] = true && cur.push(next) |
||||||
}, |
return cur |
||||||
phoneCountdown(){ |
},[]) |
||||||
let count = 60 |
if(this.schoolList.length >= 1) { |
||||||
if(!this.phoneTimer){ |
this.schoolId = this.schoolList[0].schoolId |
||||||
this.phoneDisabled = true |
this.userId = this.schoolList[0].userId |
||||||
this.phoneTimer = setInterval(() => { |
this.studentId = this.schoolList[0].studentId |
||||||
if(count > 0){ |
this.roleId = 4 |
||||||
count-- |
|
||||||
this.phoneBtnText = `${count}秒后重试` |
let data = { |
||||||
}else{ |
roleId: 4, |
||||||
this.phoneDisabled = false |
userId: this.userId, |
||||||
clearInterval(this.phoneTimer) |
schoolId: this.schoolId |
||||||
this.phoneTimer = null |
} |
||||||
this.phoneBtnText = `发送验证码` |
this.$get(this.api.logins,data).then(res => { |
||||||
|
this.$post(this.api.updateLogInNumber,{userId: this.userId}).then(res => {}).catch(res => {}); |
||||||
|
sessionStorage.setItem('kd_client_username',account); |
||||||
|
this.$store.commit("userLoginData", { userId : this.userId,accountRole: this.roleId,studentId : this.studentId,schoolId: this.schoolId,token: res.message.user.token}); |
||||||
|
res.message.user.userAvatars && this.$store.commit("userPhoto", { avatar : res.message.user.userAvatars}); |
||||||
|
this.$store.commit("userName", { userName : res.message.user.userName}); |
||||||
|
this.$store.commit("dataTime", { dataTime : res.message.user.dataTime}); |
||||||
|
this.loadIns.close() |
||||||
|
this.$router.replace('/dashboard') |
||||||
|
}).catch(res => {}) |
||||||
|
} |
||||||
} |
} |
||||||
},1000) |
}).catch(res => {}) |
||||||
} |
}).catch(res => {}) |
||||||
}, |
|
||||||
closeForget(){ |
|
||||||
this.phoneCode = '' |
|
||||||
this.emailCode = '' |
|
||||||
this.userId = '' |
|
||||||
this.newPassword = '' |
|
||||||
}, |
|
||||||
sendEmailCode(){ |
|
||||||
if(!this.email) return this.$message.warning('请输入邮箱') |
|
||||||
if(!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.email)) return this.$message.warning('请输入正确的邮箱') |
|
||||||
let data = { |
|
||||||
email: this.email |
|
||||||
} |
|
||||||
this.$get(this.api.findPasswordByEmail,data).then(res => { |
|
||||||
if(res.errmessage == 'success'){ |
|
||||||
this.$message.success('发送成功') |
|
||||||
this.emailCountdown() |
|
||||||
this.userId = res.data.userId |
|
||||||
this.emailOpener = res.data.opener |
|
||||||
} |
|
||||||
}).catch(res => {}); |
|
||||||
}, |
|
||||||
sendPhoneCode(){ |
|
||||||
if(!this.phone) return this.$message.warning('请输入手机号') |
|
||||||
if(!/^1[3456789]\d{9}$/.test(this.phone)) return this.$message.warning('请输入正确的手机号') |
|
||||||
let data = { |
|
||||||
phone: this.phone |
|
||||||
} |
|
||||||
this.$get(this.api.findPasswordByPhone,data).then(res => { |
|
||||||
if(res.errmessage == 'success'){ |
|
||||||
this.$message.success('发送成功') |
|
||||||
this.phoneCountdown() |
|
||||||
this.userId = res.data.userId |
|
||||||
this.phoneOpener = res.data.opener |
|
||||||
} |
|
||||||
}).catch(res => {}); |
|
||||||
}, |
|
||||||
async updatePassword(type){ |
|
||||||
if(type == 1){ |
|
||||||
if(!this.phone) return this.$message.warning('请输入手机号') |
|
||||||
if(!/^1[3456789]\d{9}$/.test(this.phone)) return this.$message.warning('请输入正确的手机号') |
|
||||||
if(!this.phoneCode) return this.$message.warning('请输入验证码') |
|
||||||
}else{ |
|
||||||
if(!this.email) return this.$message.warning('请输入邮箱') |
|
||||||
if(!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.email)) return this.$message.warning('请输入正确的邮箱') |
|
||||||
if(!this.emailCode) return this.$message.warning('请输入验证码') |
|
||||||
} |
|
||||||
if(!this.newPassword) return this.$message.warning('请输入新密码') |
|
||||||
|
|
||||||
let checkData = { |
|
||||||
code: type == 1 ? this.phoneCode : this.emailCode, |
|
||||||
opener: type == 1 ? this.phoneOpener : this.emailOpener |
|
||||||
} |
|
||||||
let checkRes = await this.$post(this.api.checkCode,checkData) |
|
||||||
if(checkRes.errmessage == 'success'){ |
|
||||||
let resetData = { |
|
||||||
userId: this.userId, |
|
||||||
password: this.newPassword |
|
||||||
} |
|
||||||
let resetRes = await this.$post(this.api.resetPassword,resetData) |
|
||||||
if(resetRes.errmessage == 'success'){ |
|
||||||
this.$message.success('重置成功') |
|
||||||
this.forgetVisible = false |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
switchType(type){ |
|
||||||
this.phoneReset = type |
|
||||||
} |
} |
||||||
}, |
} |
||||||
}; |
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style scoped lang="scss"> |
<style lang="scss" scoped> |
||||||
.wrap { |
.wrap{ |
||||||
position: relative; |
font-family: '微软雅黑'; |
||||||
width: 100%; |
width: 100%; |
||||||
height: 100%; |
height: 100%; |
||||||
background: url(../../assets/img/login_bg.png) 0 0/100% 100% no-repeat; |
position: fixed; |
||||||
overflow: hidden; |
background: url('../../assets/img/bg.jpg'); |
||||||
|
background-size: 100% 100%; |
||||||
.logo{ |
background-repeat: no-repeat; |
||||||
position: absolute; |
.bar{ |
||||||
top: 20px; |
width: 100%; |
||||||
left: 72px; |
height: 90px; |
||||||
width: 240px; |
background: #004592; |
||||||
} |
border-bottom: 2px solid #4d8ab6; |
||||||
.left{ |
box-shadow: -3px 7px 5px -7px rgba(77,70,70,0.75); |
||||||
position: absolute; |
-webkit-box-shadow: -3px 7px 5px -7px rgba(77,70,70,0.75); |
||||||
top: 50%; |
-moz-box-shadow: -3px 7px 5px -7px rgba(77,70,70,0.75); |
||||||
left: 221px; |
.icon_wrap{ |
||||||
transform: translateY(-60%); |
width: 12%; |
||||||
|
height: 90px; |
||||||
img{ |
background: #CD3E6A; |
||||||
width: 447px;; |
display: flex; |
||||||
margin-bottom: 30px; |
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
img{ |
||||||
|
height: 45px; |
||||||
|
} |
||||||
} |
} |
||||||
.text{ |
.bar_name{ |
||||||
font-size: 47px; |
width:88%; |
||||||
color: #fff; |
box-sizing: border-box; |
||||||
p{ |
padding-left: 100px; |
||||||
margin-bottom: 15px; |
font-size: 25px; |
||||||
&:last-child{ |
color: white; |
||||||
margin-bottom: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
} |
} |
||||||
} |
} |
||||||
.right{ |
.content{ |
||||||
position: absolute; |
.content_title{ |
||||||
top: 50%; |
height: 400px; |
||||||
right: 100px; |
width: 100%; |
||||||
transform: translateY(-50%); |
|
||||||
width: 700px; |
|
||||||
padding: 50px 90px 20px; |
|
||||||
background-color: #fff; |
|
||||||
box-sizing: border-box; |
|
||||||
box-shadow: 0 1px 20px rgba(0,0,0,0.16); |
|
||||||
|
|
||||||
.back{ |
|
||||||
position: absolute; |
|
||||||
top: 20px; |
|
||||||
left: 20px; |
|
||||||
font-size: 24px; |
|
||||||
color: #105cb2; |
|
||||||
cursor: pointer; |
|
||||||
|
|
||||||
&:hover{ |
|
||||||
opacity: .8; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
h2{ |
|
||||||
padding-bottom: 10px; |
|
||||||
font-size: 24px; |
|
||||||
font-weight: 400; |
|
||||||
color: #303d4c; |
|
||||||
text-align: center; |
text-align: center; |
||||||
border-bottom: 1px solid #E5E5E5; |
box-sizing: border-box; |
||||||
} |
padding: 100px 0px; |
||||||
/deep/.el-form{ |
line-height: 100px; |
||||||
margin-top: 30px; |
font-size: 60px; |
||||||
|
color: white; |
||||||
.label{ |
letter-spacing:8px; |
||||||
margin-bottom: 10px; |
// background: red; |
||||||
color: #105CB2; |
|
||||||
} |
|
||||||
/deep/.el-input__inner{ |
|
||||||
height: 46px; |
|
||||||
padding: 0 23px; |
|
||||||
line-height: 46px; |
|
||||||
border: 1px solid #AFB5BB; |
|
||||||
border-radius: 23px !important; |
|
||||||
} |
|
||||||
/deep/.el-form-item__error{ |
|
||||||
top: 105%; |
|
||||||
left: auto; |
|
||||||
right: 0; |
|
||||||
color: #FFA94E; |
|
||||||
} |
|
||||||
.submit{ |
|
||||||
width: 100%; |
|
||||||
height: 48px; |
|
||||||
margin-top: 60px; |
|
||||||
line-height: 48px; |
|
||||||
padding: 0; |
|
||||||
font-size: 20px; |
|
||||||
background-color: #105cb2; |
|
||||||
border-radius: 23px; |
|
||||||
border: 0; |
|
||||||
} |
|
||||||
.login-tips{ |
|
||||||
margin-bottom: 20px; |
|
||||||
font-size: 16px; |
|
||||||
color: #105CB2; |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
.thirdParty{ |
|
||||||
.item{ |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
margin-bottom: 20px; |
|
||||||
padding: 10px 0; |
|
||||||
color: #AFB5BB; |
|
||||||
font-size: 16px; |
|
||||||
background-color: #eff0f1; |
|
||||||
border-radius: 36px; |
|
||||||
cursor: pointer; |
|
||||||
img{ |
|
||||||
width: 40px; |
|
||||||
margin-right: 10px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
} |
||||||
|
.content_button{ |
||||||
|
height: 280px; |
||||||
|
// background: blue; |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
flex-flow: column; |
||||||
|
div{ |
||||||
|
width: 400px; |
||||||
|
height: 70px; |
||||||
|
text-align: center; |
||||||
|
line-height: 70px; |
||||||
|
font-size: 28px; |
||||||
|
color: white; |
||||||
|
// background: green; |
||||||
|
background: url('../../assets/img/button.png'); |
||||||
|
background-size: 400px 70px; |
||||||
|
} |
||||||
|
div:hover{ |
||||||
|
background: #FF5288; |
||||||
|
border:2px solid white; |
||||||
|
cursor:pointer |
||||||
|
} |
||||||
|
} |
||||||
|
.content_footer{ |
||||||
|
margin-top: 50px; |
||||||
|
height: 200px; |
||||||
|
width: 100%; |
||||||
|
text-align: center; |
||||||
|
color: white; |
||||||
|
font-size: 28px; |
||||||
|
line-height: 50px; |
||||||
|
font-family: '仿宋'; |
||||||
|
.icon-dianhuahaoma,.icon-a317{ |
||||||
|
font-size: 32px; |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
} |
||||||
} |
} |
||||||
} |
} |
||||||
.switch{ |
.count_wrap{ |
||||||
span{ |
position: fixed; |
||||||
cursor: pointer; |
bottom: 30px; |
||||||
color: #9076FF; |
width: 230px; |
||||||
|
height: 200px; |
||||||
|
// background: red; |
||||||
|
left: 130px; |
||||||
|
color: white; |
||||||
|
.count_title{ |
||||||
|
font-size: 30px; |
||||||
|
margin-bottom:25px ; |
||||||
|
font-weight: 540; |
||||||
|
} |
||||||
|
div{ |
||||||
|
font-size: 20px; |
||||||
|
margin-bottom: 13px; |
||||||
|
letter-spacing:2px; |
||||||
|
font-weight: 50; |
||||||
} |
} |
||||||
} |
|
||||||
.links{ |
|
||||||
margin: 20px 0 20px; |
|
||||||
} |
|
||||||
.ques{ |
|
||||||
color: #105cb2; |
|
||||||
font-size: 14px; |
|
||||||
} |
|
||||||
.forget{ |
|
||||||
color: #ffa94e; |
|
||||||
font-size: 14px; |
|
||||||
} |
} |
||||||
</style> |
</style> |
||||||
Loading…
Reference in new issue