parent
5638089fc9
commit
54ef52797e
8 changed files with 334 additions and 2 deletions
|
After Width: | Height: | Size: 432 B |
|
After Width: | Height: | Size: 1.6 KiB |
@ -0,0 +1,289 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<!-- 多个账号 --> |
||||||
|
<el-dialog title="请选择您要登录的用户" :visible.sync="userVisible" :close-on-click-modal="false" :show-close="false" |
||||||
|
custom-class="user-dia" width="500px"> |
||||||
|
<p class="tips">已为你展示该微信关联的账号</p> |
||||||
|
<ul class="users"> |
||||||
|
<li :class="{ isEnable: !user.isEnable }" v-for="(user, i) in users" :key="i" @click="chooseUser(user)"> |
||||||
|
<span>{{ user.typeName }}，{{ user.schoolName }}，{{ user.userName }}，{{ user.workNumber }}{{ |
||||||
|
user.isEnable |
||||||
|
? '' |
||||||
|
: '（已禁用）' }}</span> |
||||||
|
<i class="el-icon-right"></i> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</el-dialog> |
||||||
|
|
||||||
|
<!-- 新用户 --> |
||||||
|
<el-dialog title="" :visible.sync="newVisible" :close-on-click-modal="false" :show-close="false" |
||||||
|
custom-class="new-dia" width="400px"> |
||||||
|
<el-form v-if="addAccount" :model="form" :rules="rules" ref="form"> |
||||||
|
<h2 class="bind-tips">绑定账号</h2> |
||||||
|
<el-form-item class="flex-1" prop="account"> |
||||||
|
<label class="label account"></label> |
||||||
|
<el-input v-model.trim="form.account" placeholder="请输入账号" autocomplete="new-password" |
||||||
|
@keyup.enter.native="bindSubmit"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item class="relative" prop="password"> |
||||||
|
<label class="password label"></label> |
||||||
|
<el-input type="password" placeholder="请输入密码" v-model.trim="form.password" autocomplete="new-password" |
||||||
|
@keyup.enter.native="bindSubmit" /> |
||||||
|
</el-form-item> |
||||||
|
<el-button class="submit" type="primary" @click="bindSubmit">绑定</el-button> |
||||||
|
</el-form> |
||||||
|
|
||||||
|
<div v-else> |
||||||
|
<p class="suc">微信授权成功</p> |
||||||
|
<i class="el-icon-success icon"></i> |
||||||
|
<p class="tips">您的微信暂时没有已绑定的账号</p> |
||||||
|
<p class="bind"> |
||||||
|
<el-link :underline="false" type="primary" @click="addAccount = true">绑定已有学生账号</el-link> |
||||||
|
</p> |
||||||
|
<el-link :underline="false" type="primary" @click="toLogin">返回账号登录</el-link> |
||||||
|
</div> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { mapActions, mapMutations } from 'vuex' |
||||||
|
import Util from '@/libs/util' |
||||||
|
import Setting from '@/setting' |
||||||
|
import CryptoJS from 'crypto-js' |
||||||
|
import JSEncrypt from 'jsencrypt' |
||||||
|
export default { |
||||||
|
data: function () { |
||||||
|
return { |
||||||
|
token: this.$route.query.token || '', |
||||||
|
unionid: this.$route.query.unionid, |
||||||
|
curUser: {}, |
||||||
|
userVisible: false, |
||||||
|
users: [], |
||||||
|
|
||||||
|
newVisible: true, |
||||||
|
addAccount: false, |
||||||
|
form: { |
||||||
|
account: '', |
||||||
|
password: '', |
||||||
|
}, |
||||||
|
rules: { |
||||||
|
account: [{ required: true, message: "请输入账号", trigger: "blur" }], |
||||||
|
password: [{ required: true, message: "请输入密码", trigger: "blur" }], |
||||||
|
}, |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
localStorage.removeItem('opened') |
||||||
|
// this.setLogin() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
async setLogin () { |
||||||
|
const res = await this.$post(this.api.loginByUnionid) |
||||||
|
|
||||||
|
return |
||||||
|
Util.local.set(Setting.tokenKey, this.token, Setting.tokenExpires) |
||||||
|
this.getOss() |
||||||
|
Util.cookies.remove('serverLogin') |
||||||
|
this.reloadIndex() |
||||||
|
Util.successMsg('登录成功') |
||||||
|
}, |
||||||
|
// 刷新官网 |
||||||
|
reloadIndex () { |
||||||
|
try { |
||||||
|
window.opener && window.opener.location.reload() |
||||||
|
} catch (e) { } |
||||||
|
}, |
||||||
|
// 前往登录 |
||||||
|
toLogin () { |
||||||
|
this.$router.replace('/login') |
||||||
|
}, |
||||||
|
// 绑定账号 |
||||||
|
bindSubmit () { |
||||||
|
this.$refs.form.validate(valid => { |
||||||
|
if (valid) { |
||||||
|
const form = JSON.parse(JSON.stringify(this.form)) |
||||||
|
if (this.verCodeLogin) form.distinguish = 2 |
||||||
|
this.$post(this.api.logins, form).then(({ status, data, message }) => { |
||||||
|
// 未绑定手机号，则弹框去绑定 |
||||||
|
if (status == 30001) { |
||||||
|
this.phoneVisible = true |
||||||
|
this.getVerImg() |
||||||
|
form.code = '' |
||||||
|
} else if (status == 200) { |
||||||
|
const accounts = data.userAccounts |
||||||
|
// 如果返回的是数组，则弹框给用户选择登录哪个用户，否则，直接登录 |
||||||
|
if (accounts instanceof Array) { |
||||||
|
this.users = accounts |
||||||
|
this.userVisible = true |
||||||
|
} else { |
||||||
|
this.token = data.token |
||||||
|
// 如果是客户，则需要选择登录的端 |
||||||
|
if (data.customer) { |
||||||
|
Util.cookies.set('customerName', data.customerName) |
||||||
|
this.SET_CUSTOMERNAME(data.customerName) |
||||||
|
this.selectVisible = true |
||||||
|
} else { |
||||||
|
data.typeName === '学生端' ? this.setLogin() : this.toMang() |
||||||
|
} |
||||||
|
} |
||||||
|
} else { |
||||||
|
form.code = '' |
||||||
|
Util.errorMsg(message) |
||||||
|
} |
||||||
|
}).catch(res => { |
||||||
|
form.code = '' |
||||||
|
this.getVerImg() |
||||||
|
}) |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
async getOss () { |
||||||
|
const A = (key, encryptedData) => { |
||||||
|
const keyHex = CryptoJS.enc.Base64.parse(key) |
||||||
|
const decrypted = CryptoJS.AES.decrypt(encryptedData, keyHex, { |
||||||
|
mode: CryptoJS.mode.ECB, |
||||||
|
padding: CryptoJS.pad.Pkcs7 |
||||||
|
}) |
||||||
|
return decrypted.toString(CryptoJS.enc.Utf8) |
||||||
|
} |
||||||
|
|
||||||
|
const R = (encryptedKey, privateKey) => { |
||||||
|
const decrypt = new JSEncrypt() |
||||||
|
decrypt.setPrivateKey(privateKey) |
||||||
|
const decryptedKey = decrypt.decrypt(encryptedKey) |
||||||
|
return decryptedKey |
||||||
|
} |
||||||
|
|
||||||
|
const res = await this.$get(this.api.encrypt) |
||||||
|
const RE = A(R(res.encryptedKey, res.privateKey), res.encryptedData).split('/') |
||||||
|
localStorage.setItem('osc', JSON.stringify(RE)) |
||||||
|
}, |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
/deep/.user-dia { |
||||||
|
.tips { |
||||||
|
margin-bottom: 20px; |
||||||
|
text-align: center; |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
|
||||||
|
.users { |
||||||
|
li { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
padding: 0 15px; |
||||||
|
margin-bottom: 10px; |
||||||
|
line-height: 40px; |
||||||
|
font-size: 14px; |
||||||
|
background-color: #ebeef5; |
||||||
|
cursor: pointer; |
||||||
|
|
||||||
|
&.isEnable { |
||||||
|
color: #c0c4cc; |
||||||
|
background-color: #f5f7fa; |
||||||
|
cursor: not-allowed; |
||||||
|
} |
||||||
|
|
||||||
|
&:last-child { |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
|
||||||
|
&:hover { |
||||||
|
background-color: #d3e0ff; |
||||||
|
} |
||||||
|
|
||||||
|
i { |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/deep/.new-dia { |
||||||
|
text-align: center; |
||||||
|
|
||||||
|
.el-dialog__header { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.suc { |
||||||
|
font-size: 16px; |
||||||
|
font-weight: 600; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
|
||||||
|
.icon { |
||||||
|
margin: 30px 0; |
||||||
|
font-size: 50px; |
||||||
|
color: #52c41a; |
||||||
|
} |
||||||
|
|
||||||
|
.tips { |
||||||
|
color: #8f8f8f; |
||||||
|
} |
||||||
|
|
||||||
|
.bind { |
||||||
|
margin: 30px 0 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.bind-tips { |
||||||
|
margin-bottom: 20px; |
||||||
|
font-size: 20px; |
||||||
|
font-weight: 600; |
||||||
|
color: #333; |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.el-form-item { |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.el-input__inner { |
||||||
|
position: relative; |
||||||
|
height: 40px; |
||||||
|
padding: 0 20px 0 34px; |
||||||
|
line-height: 40px; |
||||||
|
background-color: #fbfbfb; |
||||||
|
border-color: #e1e6f2; |
||||||
|
border-radius: 4px !important; |
||||||
|
|
||||||
|
&:focus { |
||||||
|
border-color: $main-color; |
||||||
|
box-shadow: 0 0 2px #4486e9; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.label { |
||||||
|
z-index: 1; |
||||||
|
position: absolute; |
||||||
|
top: 11px; |
||||||
|
left: 11px; |
||||||
|
width: 18px; |
||||||
|
height: 18px; |
||||||
|
background: url(../../../assets/img/login/account.png) 0 0/100% 100% no-repeat; |
||||||
|
} |
||||||
|
|
||||||
|
.password { |
||||||
|
background-image: url(../../../assets/img/login/password.png); |
||||||
|
} |
||||||
|
|
||||||
|
.submit { |
||||||
|
width: 100%; |
||||||
|
height: 40px; |
||||||
|
margin-top: 20px; |
||||||
|
line-height: 40px; |
||||||
|
padding: 0; |
||||||
|
font-size: 16px; |
||||||
|
background-color: $main-color; |
||||||
|
border-radius: 4px; |
||||||
|
border: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue