<template>
|
<div class="login-container flex flex-ver">
|
<div class="login-form">
|
<!-- <div class="title-container flex flex-ver mb20">
|
<img class="login_logo" src="../../assets/login/logo.png">
|
<h3 class="title">芙艾预约管理系统</h3>
|
<div class="title ml10">芙艾（P-HIS）医院管理系统</div>
|
<h3 class="title ml10">昊芝综合医疗运营管理系统</h3>
|
</div> -->
|
<!-- 账号登录 -->
|
<div v-if="loginType===0">
|
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" autocomplete="on" label-position="left">
|
|
<el-form-item prop="username">
|
<span class="svg-container">
|
<svg-icon icon-class="user" />
|
</span>
|
<el-input
|
ref="username"
|
v-model="loginForm.username"
|
placeholder="请输入账号"
|
name="username"
|
type="text"
|
tabindex="1"
|
autocomplete="on"
|
@keyup.enter.native="handleLogin"
|
/>
|
</el-form-item>
|
|
<el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
|
<el-form-item prop="password">
|
<span class="svg-container">
|
<svg-icon icon-class="password" />
|
</span>
|
<el-input
|
:key="passwordType"
|
ref="password"
|
v-model="loginForm.password"
|
:type="passwordType"
|
placeholder="请输入密码"
|
name="password"
|
tabindex="2"
|
autocomplete="on"
|
@keyup.native="checkCapslock"
|
@blur="capsTooltip = false"
|
@keyup.enter.native="handleLogin"
|
/>
|
<span class="show-pwd" @click="showPwd">
|
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
|
</span>
|
</el-form-item>
|
</el-tooltip>
|
|
<div class="flex flex-start flex-sb">
|
<el-form-item prop="safecode" class="flex-1">
|
<span class="svg-container">
|
<svg-icon icon-class="safecode" />
|
</span>
|
<el-input
|
ref="safecode"
|
v-model="loginForm.safecode"
|
style="width: 70%"
|
placeholder="请输入验证码"
|
name="safecode"
|
type="text"
|
tabindex="3"
|
autocomplete="off"
|
@keyup.enter.native="handleLogin"
|
/>
|
<el-image
|
v-if="isTestView"
|
class="safecode-img"
|
:src="safecodeImg"
|
fit="fill"
|
@click="getSafeCodeImg"
|
>
|
<div slot="error" class="image-slot">
|
<i class="el-icon-picture-outline" />
|
</div>
|
</el-image>
|
</el-form-item>
|
<el-button v-if="!isTestView" class="ml10 mt5" :disabled="isShowCount" type="blackblue" @click="sendCode">
|
{{ isShowCount ? secondCount + '秒后重发' : '发送验证码' }}
|
</el-button>
|
</div>
|
|
<!-- <el-form-item prop="safecode">
|
<span class="svg-container">
|
<svg-icon icon-class="safecode" />
|
</span>
|
<el-input
|
ref="safecode"
|
v-model="loginForm.safecode"
|
style="width: 60%"
|
placeholder="请输入验证码"
|
name="safecode"
|
type="text"
|
tabindex="3"
|
autocomplete="off"
|
@keyup.enter.native="handleLogin"
|
/>
|
<el-image
|
class="safecode-img"
|
:src="safecodeImg"
|
fit="fill"
|
@click="getSafeCodeImg"
|
>
|
<div slot="error" class="image-slot">
|
<i class="el-icon-picture-outline" />
|
</div>
|
</el-image>
|
</el-form-item> -->
|
|
</el-form>
|
|
<div>
|
<el-button :loading="loading" type="blackblue" style="width:100%;margin-bottom:20px;border-radius: 22px;" @click.native.prevent="handleLogin">登录</el-button>
|
</div>
|
<div>
|
<el-button v-if="!isTestView" :loading="loading" plain style="width:100%;border-radius: 22px;" @click="loginType=1">切换扫码登录</el-button>
|
<!-- <el-button v-else :loading="loading" plain style="width:100%;border-radius: 22px;" @click="simulateLogin">模拟扫码登录</el-button> -->
|
</div>
|
<!-- 企业微信直接带上state和code，无需再用按钮 -->
|
<!-- <div>
|
<el-button :loading="loading" plain style="width:100%;margin-top:20px;border-radius: 22px;" @click.native.prevent="handleWebLogin">网页登录</el-button>
|
</div> -->
|
</div>
|
<!-- 扫码登录 -->
|
<div v-if="loginType===1">
|
<!-- 扫码 -->
|
<div v-if="!show_role_list" id="wx_reg" class="flex flex-align-center" />
|
<!-- 扫码回调后 -->
|
<div v-if="show_role_list">
|
<div class="role-list-title">请选择角色</div>
|
<div class="role-list flex flex-wrap" :class="{'block-list': roleList.length<=4}">
|
<!-- 20231117 long 加个双击进入 -->
|
<div v-for="(item,index) in roleList" :key="index" class="item flex flex-ver" :class="{active:item.id == roleId}" @click="selectRole(item.id)" @dblclick="item.id == roleId?selectCodeLoginTest(roleId):noop()">
|
<div class="flex-1">
|
<div class="role-name ell">{{ item.roleName }}</div>
|
<div class="shop-name ell">{{ item.shopName }}</div>
|
</div>
|
<i class="el-icon-check" />
|
</div>
|
</div>
|
<div>
|
<el-button v-if="isTestView" :loading="loading" :disabled="!roleId" type="blackblue" style="width: 100%;margin-bottom:20px;border-radius: 22px;" @click.native.prevent="selectCodeLoginTest(roleId)">{{ roleId ? '马上登录' : '选择角色后登录' }}</el-button>
|
<el-button v-else :loading="loading" :disabled="!roleId" type="blackblue" style="width: 100%;margin-bottom:20px;border-radius: 22px;" @click.native.prevent="selectCodeLogin(roleId)">{{ roleId ? '马上登录' : '选择角色后登录' }}</el-button>
|
</div>
|
<div v-if="!isTestView">
|
<el-button type="blackblue" style="width: 100%;margin-bottom:20px;border-radius: 22px;" @click.native.prevent="scanAgain">重新扫码<i class="el-icon-refresh-right el-icon--right" /></el-button>
|
</div>
|
</div>
|
<!-- <el-button :loading="loading" plain style="width:100%;border-radius: 22px;" @click="loginType=0">切换账号登录<i class="el-icon-arrow-right el-icon--right" /></el-button> -->
|
<!-- <el-button :loading="loading" plain style="width:100%;border-radius: 22px;" @click="loginType=0">切换登录方式<i class="el-icon-arrow-right el-icon--right" /></el-button> -->
|
</div>
|
|
</div>
|
</div>
|
</template>
|
|
<script>
|
// 设置token和用户数据
|
import { setToken, setUserData } from '@/utils/auth' // get token from session
|
// 基础配置 - 获取当前环境
|
const baseConfig = require('../../config/index')
|
// 登录接口的 mockData
|
const g_mockData = require('./g_mockData.js')
|
// 获取参数方法
|
import { getQueryObj } from '@/pages/login/getQueryObj'
|
import Req from '../../utils/jun_httpInstall' // http 请求
|
export default {
|
name: 'Login',
|
components: {},
|
data() {
|
const validateUsername = (rule, value, callback) => {
|
if (!value) {
|
callback(new Error('请输入账号'))
|
} else {
|
callback()
|
}
|
}
|
const validatePassword = (rule, value, callback) => {
|
if (value ? value.length < 6 : !value) {
|
callback(new Error('密码不能少于6位'))
|
} else {
|
callback()
|
}
|
}
|
const validateSafecode = (rule, value, callback) => {
|
if (!value) {
|
callback(new Error('请输入验证码'))
|
} else {
|
callback()
|
}
|
}
|
return {
|
// 当前登陆环境
|
localOnline: baseConfig.localOnline, // 本地连线上（和isTestView一起判断） 20230619 long
|
|
loginForm: {
|
username: '',
|
password: '',
|
safecode: '',
|
checkedId: ''
|
},
|
loginRules: {
|
username: [{ required: true, trigger: 'blur', validator: validateUsername }],
|
password: [{ required: true, trigger: 'blur', validator: validatePassword }],
|
safecode: [{ required: true, trigger: 'blur', validator: validateSafecode }]
|
},
|
passwordType: 'password',
|
capsTooltip: false,
|
loading: false,
|
showDialog: false,
|
redirect: undefined,
|
otherQuery: {},
|
// 测试服用图片验证码 线上用发送手机验证码
|
safecodeImg: '',
|
secondCount: 0, // 秒
|
telCode: '', // 短信验证码
|
messageId: '', // 发送成功
|
isShowCount: false,
|
timer: null,
|
|
loginType: 0,
|
|
// 20230216 long 用户重定向页面识别登录类型
|
// 扫码登录STATE_SCAN、网页登录TATE_WEB
|
state: '',
|
STATE_SCAN: 'hx168',
|
STATE_WEB: 'hx168_web',
|
|
show_role_list: false, // 显示选择角色
|
roleList: [],
|
roleId: '',
|
code: ''
|
}
|
},
|
watch: {
|
$route: {
|
handler: function(route) {
|
const query = route.query
|
if (query) {
|
this.redirect = query.redirect
|
this.otherQuery = this.getOtherQuery(query)
|
}
|
},
|
immediate: true
|
},
|
|
// 切换loginType
|
loginType: {
|
handler(loginType) {
|
this.$nextTick(() => {
|
if (loginType === 1) {
|
if (baseConfig.ismock) {
|
// this.$messageWarn('本地环境请使用密码登录')
|
// this.loginType = 0
|
} else {
|
if (!this.show_role_list) {
|
if (!this.isTestView) this.initCodeLogin()
|
}
|
}
|
} else {
|
this.initLoginData()
|
}
|
})
|
},
|
immediate: true
|
}
|
},
|
mounted() {
|
this.init()
|
},
|
methods: {
|
init() {
|
this.loginType = this.isTestView ? 0 : 1
|
if (getQueryObj() && getQueryObj().loginType === '1') {
|
this.loginType = 1
|
}
|
if (this.$route.query.logout) {
|
// 清空企业微信登录code
|
this.replaceNoCode()
|
return
|
}
|
if (this.$route.query.logout_603) {
|
// 清空企业微信登录code，清空redirect
|
this.replaceNoCodeNoRedirect()
|
return
|
}
|
const code = getQueryObj().code
|
if (code) {
|
this.state = getQueryObj().state
|
this.code = code
|
this.$nextTick(() => {
|
this.codeLogin(code)
|
})
|
}
|
},
|
|
// 清空企业微信登录code
|
replaceNoCode() {
|
if (this.$route.query.isMiniprogram) { return }
|
window.location.replace('//' + window.location.host + window.location.pathname + '#/login?redirect=' + this.$route.query.redirect)
|
},
|
|
// 清空企业微信登录code，清空redirect
|
replaceNoCodeNoRedirect() {
|
if (this.$route.query.isMiniprogram) { return }
|
window.location.replace('//' + window.location.host + window.location.pathname + '#/login')
|
},
|
|
// 企业微信扫码登录 - 初始化
|
initCodeLogin() {
|
// 测试
|
// this.selectCodeLogin(window.prompt('请输入角色id'))
|
// return
|
|
// 测试回调
|
// this.wwLogin = new window.WwLogin({
|
// 'id': 'wx_reg',
|
// 'appid': 'wx23a7c266dcd048aa',
|
// 'agentid': '1000050',
|
// 'redirect_uri': 'http://test6.phiskin.com/assist/admin/employee/login/scanLogin',
|
// 'state': 'hx168',
|
// 'href': '',
|
// 'lang': 'zh'
|
// })
|
|
if (this.code) {
|
return
|
}
|
|
this.wwLogin = new window.WwLogin({
|
'id': 'wx_reg',
|
'appid': 'wx23a7c266dcd048aa',
|
'agentid': '1000050',
|
'redirect_uri': 'https://' + window.location.host + window.location.pathname,
|
// 'redirect_uri': 'http://serv3.phiskin.com/appointment/adminweb_v2/index.html',
|
// 'redirect_uri': 'http://test6.phiskin.com/adminwebV3/index.html', // 新版管理系统
|
'state': this.STATE_SCAN,
|
'href': '',
|
'lang': 'zh'
|
})
|
},
|
|
scanAgain() {
|
this.code = ''
|
this.show_role_list = false
|
if (this.loginType === 1) {
|
this.$nextTick(() => {
|
this.initCodeLogin()
|
})
|
} else {
|
this.loginType = 1
|
}
|
},
|
|
// 网页登录
|
handleWebLogin() {
|
let redirect_uri = 'https://' + window.location.host + window.location.pathname
|
redirect_uri = encodeURIComponent(redirect_uri)
|
const appid = 'wx23a7c266dcd048aa'
|
const response_type = 'code'
|
const scope = 'snsapi_base'
|
const state = this.STATE_WEB
|
const agentid = '1000050'
|
|
const loginUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=${response_type}&scope=${scope}&state=${state}&agentid=${agentid}#wechat_redirect`
|
|
window.location.replace(loginUrl)
|
},
|
|
// 扫码登录回调
|
codeLogin(code) {
|
const { state, STATE_SCAN, STATE_WEB } = this
|
let url = ''
|
if (state === STATE_SCAN) url = 'admin/employee/login/scanLogin'
|
if (state === STATE_WEB) url = 'admin/employee/login/webAuthLogin'
|
|
if (this.localOnline && this.isTestView) url = 'admin/employee/login/scanLogin' // 本地连线上 20230619 long
|
|
// state值不对，重新登录
|
if (!url) {
|
this.$alert('登录异常，请重新登录', '提示', {
|
confirmButtonText: '重新登录',
|
showClose: false,
|
callback: action => {
|
this.replaceNoCodeNoRedirect()
|
}
|
})
|
return
|
}
|
|
Req.http.post({
|
url: url,
|
udData: { noToken: true },
|
data: {
|
code, state
|
},
|
mockData: { 'code': '100', 'msg': 'SUCCESS', 'data': { 'roleList': [{ 'roleTypeId': '', 'createTime': { 'date': 22, 'hours': 17, 'seconds': 46, 'month': 8, 'timezoneOffset': -480, 'year': 121, 'minutes': 17, 'time': 1632302266607, 'day': 3 }, 'roleId': '82c1a5fe0a5011ec96245254007749be', 'roleName': '顾问', 'shopName': '新天地店', 'employeeId': '', 'roleUniqueStr': 'adviser_leader', 'id': '82c1a5fe0a5011ec96245254007749be', 'shopId': '605e391b620d11ebb06bb8599f4cafbe', 'oldId': '', 'isDel': 0 }, { 'roleTypeId': '', 'createTime': { 'date': 22, 'hours': 17, 'seconds': 46, 'month': 8, 'timezoneOffset': -480, 'year': 121, 'minutes': 17, 'time': 1632302266607, 'day': 3 }, 'roleId': '82c1a5fe0a5011ec96245254007749be', 'roleName': 'MIC', 'shopName': '新天地店', 'employeeId': '', 'roleUniqueStr': 'mic', 'id': '82c1ca2f0a5011ec96245254007749be', 'shopId': '605e391b620d11ebb06bb8599f4cafbe', 'oldId': '', 'isDel': 0 }, { 'roleTypeId': '', 'createTime': { 'date': 22, 'hours': 17, 'seconds': 46, 'month': 8, 'timezoneOffset': -480, 'year': 121, 'minutes': 17, 'time': 1632302266607, 'day': 3 }, 'roleId': '82c1a5fe0a5011ec96245254007749be', 'roleName': '医生', 'shopName': '新天地店', 'employeeId': '', 'roleUniqueStr': 'doctor', 'id': '82c1eb980a5011ec96245254007749be', 'shopId': '605e391b620d11ebb06bb8599f4cafbe', 'oldId': '', 'isDel': 0 }, { 'roleTypeId': '', 'createTime': { 'date': 22, 'hours': 17, 'seconds': 46, 'month': 8, 'timezoneOffset': -480, 'year': 121, 'minutes': 17, 'time': 1632302266607, 'day': 3 }, 'roleId': '82c1a5fe0a5011ec96245254007749be', 'roleName': '护士', 'shopName': '新天地店', 'employeeId': '', 'roleUniqueStr': 'nurse', 'id': '82c20cde0a5011ec96245254007749be', 'shopId': '605e391b620d11ebb06bb8599f4cafbe', 'oldId': '', 'isDel': 0 }, { 'roleTypeId': '', 'createTime': { 'date': 22, 'hours': 17, 'seconds': 46, 'month': 8, 'timezoneOffset': -480, 'year': 121, 'minutes': 17, 'time': 1632302266607, 'day': 3 }, 'roleId': '82c1a5fe0a5011ec96245254007749be', 'roleName': '前台', 'shopName': '新天地店', 'employeeId': '', 'roleUniqueStr': 'reception', 'id': '82c22d150a5011ec96245254007749be', 'shopId': '605e391b620d11ebb06bb8599f4cafbe', 'oldId': '', 'isDel': 0 }, { 'roleTypeId': '', 'createTime': { 'date': 22, 'hours': 17, 'seconds': 46, 'month': 8, 'timezoneOffset': -480, 'year': 121, 'minutes': 17, 'time': 1632302266607, 'day': 3 }, 'roleId': '82c1a5fe0a5011ec96245254007749be', 'roleName': '店长', 'shopName': '新天地店', 'employeeId': '', 'roleUniqueStr': 'shopowner', 'id': '82c24da90a5011ec96245254007749be', 'shopId': '605e391b620d11ebb06bb8599f4cafbe', 'oldId': '', 'isDel': 0 }, { 'roleTypeId': '', 'createTime': { 'date': 22, 'hours': 17, 'seconds': 46, 'month': 8, 'timezoneOffset': -480, 'year': 121, 'minutes': 17, 'time': 1632302266607, 'day': 3 }, 'roleId': '82c1a5fe0a5011ec96245254007749be', 'roleName': '护士助理', 'shopName': '新天地店', 'employeeId': '', 'roleUniqueStr': 'nurse_assistant', 'id': '82c26d510a5011ec96245254007749be', 'shopId': '605e391b620d11ebb06bb8599f4cafbe', 'oldId': '', 'isDel': 0 }, { 'roleTypeId': '', 'createTime': { 'date': 22, 'hours': 17, 'seconds': 46, 'month': 8, 'timezoneOffset': -480, 'year': 121, 'minutes': 17, 'time': 1632302266607, 'day': 3 }, 'roleId': '82c1a5fe0a5011ec96245254007749be', 'roleName': '医生助理', 'shopName': '新天地店', 'employeeId': '', 'roleUniqueStr': 'doctor_assistant', 'id': '82c28d7d0a5011ec96245254007749be', 'shopId': '605e391b620d11ebb06bb8599f4cafbe', 'oldId': '', 'isDel': 0 }], 'employeeId': '476051fc000711ecbbe230d0422e31b5' }}
|
}).then((inf) => {
|
// this.afterLogin(inf)
|
// 更改显示登录选项
|
this.roleList = inf.roleList
|
this.show_role_list = true
|
// 切换登录模式
|
this.loginType = 1
|
}).catch((res) => {
|
this.loading = false
|
this.code = '' // 清空关键判断
|
this.$messageError(res.msg)
|
|
// 去掉code参数，刷新页面
|
setTimeout(() => {
|
this.replaceNoCodeNoRedirect()
|
}, 1500)
|
})
|
},
|
|
// 选择角色
|
selectRole(id) {
|
this.roleId = id
|
},
|
// 选择角色后登录
|
selectCodeLogin(roleId) {
|
if (!roleId) {
|
this.$messageWarn('缺少选择角色id')
|
return
|
}
|
Req.http.post({
|
// 2022-06-23 登录新接口
|
url: 'admin/employee/login/selectLoginRoleNew',
|
// url: 'admin/employee/login/selectLoginRole',
|
udData: { noToken: true },
|
data: {
|
roleId
|
},
|
mockData: g_mockData.login
|
}).then((inf) => {
|
this.afterLogin(inf)
|
}).catch((res) => {
|
this.loading = false
|
this.$messageError(res.msg)
|
})
|
},
|
|
// 发送验证码
|
sendCode() {
|
if (!this.loginForm.username) return this.$message.error('请输入账号')
|
Req.http.post({
|
url: 'admin/employee/login/sendVerifyCode',
|
data: { account: this.loginForm.username },
|
mockData: {
|
code: 100,
|
msg: '',
|
data: {}
|
}
|
}).then((inf) => {
|
this.getCode()
|
this.$message.success('验证码发送成功')
|
})
|
},
|
// 倒计时
|
getCode() {
|
const times = 60 // 倒计时时间
|
if (!this.timer) {
|
this.secondCount = times
|
this.isShowCount = true
|
this.timer = setInterval(() => {
|
if (this.secondCount > 0 && this.secondCount <= times) {
|
this.secondCount--
|
} else {
|
this.isShowCount = false
|
clearInterval(this.timer)
|
this.timer = null
|
}
|
}, 1000)
|
}
|
},
|
|
// 密码登录 - 初始化
|
initLoginData() {
|
var loginData = localStorage.getItem('loginData')
|
// console.log(loginData)
|
// 获取保存的账号密码
|
if (loginData) this.loginForm = JSON.parse(loginData)
|
|
if (this.loginForm.username === '') {
|
this.$refs.username && this.$refs.username.focus()
|
} else if (this.loginForm.password === '') {
|
this.$refs.password && this.$refs.password.focus()
|
} else if (this.loginForm.safecode === '') {
|
this.$refs.safecode && this.$refs.safecode.focus()
|
}
|
if (this.isTestView) this.getSafeCodeImg()
|
},
|
|
// 是否大写
|
checkCapslock(e) {
|
const { key } = e
|
this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
|
},
|
|
// 切换密码显示
|
showPwd() {
|
if (this.passwordType === 'password') {
|
this.passwordType = ''
|
} else {
|
this.passwordType = 'password'
|
}
|
this.$nextTick(() => {
|
this.$refs.password.focus()
|
})
|
},
|
|
// 获取验证码图
|
getSafeCodeImg() {
|
var checkedId = this.getCheckedId()
|
Req.http.post({
|
url: 'admin/create/cheked',
|
data: { checkedId: checkedId },
|
udData: { noToken: true },
|
mockData: {
|
code: 100,
|
msg: '',
|
data: {
|
imgStr: 'xxxx'
|
}
|
}
|
}).then((inf) => {
|
this.safecodeImg = this.perfectSafeCode(inf.data.imgStr)
|
this.loginForm.checkedId = checkedId
|
})
|
},
|
// 补全验证码
|
perfectSafeCode(img) {
|
if (!img) return
|
return `data:image/jpeg;base64,${img}`
|
},
|
// 登录后回调
|
afterLogin(inf) {
|
// 保存登录凭证
|
setToken(inf.adminToken)
|
|
// 保存账号密码
|
var loginData = JSON.stringify({
|
username: this.loginForm.username.trim()
|
})
|
// password: this.loginForm.password.trim() // 20210322 long 取消记住密码
|
localStorage.setItem('loginData', loginData)
|
|
sessionStorage.setItem('newAppTime', new Date()) // 存入时间 用于获取新的预约数
|
|
// 保存用户数据
|
setUserData(inf)
|
|
this.loading = false
|
|
// 登录成功跳转页面
|
this.$messageSuc('登录成功')
|
setTimeout(() => {
|
// this.$router.push({ path: '/dashboard' })
|
this.$router.push({ path: this.redirect || '/dashboard', query: this.otherQuery })
|
}, 1000)
|
},
|
// 密码登录
|
handleLogin() {
|
this.$refs.loginForm.validate(valid => {
|
if (valid) {
|
const { username, password, safecode, checkedId } = this.loginForm
|
const params = {
|
account: username.trim(),
|
password: password.trim(),
|
checkedCode: safecode.trim()
|
}
|
this.loading = true
|
// const url = this.isTestView ? 'admin/employee/login/accountLogin' : 'admin/loginNew'
|
const url = this.isTestView ? 'admin/employee/login/accountLogin' : 'admin/employee/login/accountLogin/v2'
|
if (this.isTestView) {
|
params.checkedId = checkedId
|
}
|
Req.http.post({
|
// url: 'admin/loginNew',
|
url,
|
data: params,
|
udData: { noToken: true },
|
// mockData: g_mockData.login
|
mockData: g_mockData.scanLoginTest
|
}).then((inf) => {
|
this.loading = false
|
this.loginType = 1
|
this.jumpToRoomList()
|
// this.show_role_list = true
|
// this.roleList = inf.roleList || []
|
/* if (this.isTestView) {
|
this.loading = false
|
this.loginType = 1
|
this.show_role_list = true
|
this.roleList = inf.roleList || []
|
} else {
|
this.afterLogin(inf)
|
} */
|
}).catch((res) => {
|
this.loading = false
|
this.$messageError(res.msg)
|
})
|
} else {
|
console.log('表单验证失败')
|
return false
|
}
|
})
|
},
|
// 跳转房间列表
|
jumpToRoomList() {
|
this.$router.push({
|
path: `./room/list`
|
})
|
},
|
// 获取route query对象
|
getOtherQuery(query) {
|
return Object.keys(query).reduce((acc, cur) => {
|
if (cur !== 'redirect') {
|
acc[cur] = query[cur]
|
}
|
return acc
|
}, {})
|
},
|
|
// 测试服登录 👇
|
// 测试扫码登录
|
simulateLogin() {
|
this.loginType = 1
|
// 获取用户缓存权限信息
|
// const userData = JSON.parse(getUserData())
|
Req.http.post({
|
url: 'admin/employee/login/scanLoginTest',
|
data: {
|
employeeId: '476051fc000711ecbbe230d0422e31b5' // 黄嘉荣员工id 476051fc000711ecbbe230d0422e31b5
|
// employeeId: '3eb10b540b2b11ecb06bb8599f4cafbe' // 黄嘉荣员工id 3eb10b540b2b11ecb06bb8599f4cafbe - 和爷
|
},
|
mockData: g_mockData.scanLoginTest
|
}).then((res) => {
|
this.show_role_list = true
|
this.roleList = res.roleList || []
|
})
|
},
|
|
selectCodeLoginTest(id) {
|
let url = 'admin/employee/login/selectLoginRoleNewTest'
|
if (this.localOnline && this.isTestView) url = 'admin/employee/login/selectLoginRoleNew' // 本地连线上 20230619 long
|
Req.http.post({
|
url,
|
data: {
|
roleId: id
|
},
|
mockData: {
|
code: 100,
|
msg: '',
|
data: {
|
'adminToken': 'eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiIxMzhlZjMzZjEyMzUxMWVkOTFkMTUyNTQwMGI4NTEwYSIsInN1YiI6ImxvZ2luX2FkbWluX2VtcGxveWVlIiwiaXNzIjoidXNlciIsImlhdCI6MTY3MzA4MTcwOSwiZXhwIjoxNjczMTI0MDA5fQ.s3QiYhK6EemOw9ksbxvM0jygnQxkHZwTWJ3JdAAFxkc',
|
'name': '黄嘉荣',
|
'tel': '15999971794',
|
'imgUrl': 'https://phiskin-pre-1305571091.cos.ap-shanghai.myqcloud.com/member/3a82bead-4960-44c1-915f-467df3a80cf3.jpg',
|
arr: [],
|
arrNew: [],
|
'employeeId': '476051fc000711ecbbe230d0422e31b5',
|
'shopId': 'bb4e8a7d620d11ebb06bb8599f4cafbe',
|
'roleName': 'admin',
|
'dataAuth': {
|
'warehouseList': [],
|
'noAttributionData': 0,
|
'roleId': '138ef33f123511ed91d1525400b8510a',
|
'dataList': [
|
{
|
'name': '静安店',
|
'id': 'bb4e8a7d620d11ebb06bb8599f4cafbe'
|
},
|
{
|
'name': '合肥店',
|
'id': '66c581244ebb11edbebb525400b8510a'
|
},
|
{
|
'name': '芙艾美容',
|
'id': '2baa4ed774f111ecb4d45254007749be'
|
},
|
{
|
'name': '倾选店',
|
'id': '2bab614774f111ecb4d45254007749be'
|
},
|
{
|
'name': '九方店',
|
'id': '2bac145474f111ecb4d45254007749be'
|
},
|
{
|
'name': '新天地店',
|
'id': '605e391b620d11ebb06bb8599f4cafbe'
|
},
|
{
|
'name': '静安国际及VIP门诊',
|
'id': '973f9b28620e11ebb06bb8599f4cafbe'
|
},
|
{
|
'name': '艾选店',
|
'id': '66cb53b84ebb11edbebb525400b8510a'
|
},
|
{
|
'name': '北京光华店',
|
'id': '66ca982f4ebb11edbebb525400b8510a'
|
},
|
{
|
'name': '东银店',
|
'id': 'b88e3cd8620d11ebb06bb8599f4cafbe'
|
},
|
{
|
'name': '杭州店',
|
'id': 'b96aa6d1620d11ebb06bb8599f4cafbe'
|
},
|
{
|
'name': '宁波海曙店',
|
'id': 'b9fbfd79620d11ebb06bb8599f4cafbe'
|
},
|
{
|
'name': '芙艾总部',
|
'id': 'd685ff306ca54b1ea06b707fb0f57659'
|
},
|
{
|
'name': '营销助手功能测试门店',
|
'id': 'd4b9ace5a01911ecb4d45254007749be'
|
},
|
{
|
'name': '古北店',
|
'id': 'fc9f34d2994711ecb4d45254007749be'
|
}
|
]
|
},
|
'shopList': [
|
{
|
'carWay': '',
|
'clinicName': '',
|
'code': '',
|
'maxAppNum': 0,
|
'city': '',
|
'departmentId': '',
|
'colorStr': '',
|
'doctorRelaxTime': '',
|
'editTime': {
|
'date': 7,
|
'hours': 16,
|
'seconds': 10,
|
'month': 0,
|
'timezoneOffset': -480,
|
'year': 123,
|
'minutes': 55,
|
'time': 1673081710058,
|
'day': 6
|
},
|
'corpMpDepId': 0,
|
'isUp': 0,
|
'province': '',
|
'subWay': '',
|
'id': 'bb4e8a7d620d11ebb06bb8599f4cafbe',
|
'addr': '',
|
'institutionalCode': '',
|
'apiId': '',
|
'area': '',
|
'sameTimeCustomerNum': 0,
|
'shengMeiNum': 0,
|
'workTime': '',
|
'createTime': {
|
'date': 7,
|
'hours': 16,
|
'seconds': 10,
|
'month': 0,
|
'timezoneOffset': -480,
|
'year': 123,
|
'minutes': 55,
|
'time': 1673081710058,
|
'day': 6
|
},
|
'maxSwitchNum': 0,
|
'name': '静安店',
|
'clinicCode': '',
|
'isDel': 0
|
}
|
],
|
'warehouseList': []
|
}
|
}
|
}).then((inf) => {
|
this.afterLogin(inf)
|
}).catch((res) => {
|
this.loading = false
|
this.$messageError(res.msg)
|
})
|
},
|
|
noop() {}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
/* 修复input 背景不协调 和光标变色 */
|
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
|
|
$bg:#283443;
|
$light_gray:#fff;
|
$gray_gray:#1B1E2F;
|
$cursor: #fff;
|
|
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
|
.login-container .el-input input {
|
color: $cursor;
|
}
|
}
|
|
/* reset element-ui css */
|
.login-container {
|
.el-input {
|
display: inline-block;
|
height: 47px;
|
width: 70%;
|
|
input {
|
background: transparent;
|
border: 0px;
|
-webkit-appearance: none;
|
border-radius: 0px;
|
padding: 12px 5px 12px 15px;
|
color: $gray_gray;
|
height: 47px;
|
caret-color: $gray_gray;
|
|
&:-webkit-autofill {
|
box-shadow: 0 0 0px 1000px #f0f1f6 inset !important;
|
-webkit-text-fill-color: $gray_gray !important;
|
}
|
}
|
|
}
|
|
.el-form-item {
|
border: 1px solid #2B3855;
|
// background: rgba(0, 0, 0, 0.1);
|
background: transparent;
|
border-radius: 22px;
|
color: #2B3855;
|
}
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
$bg:#2d3a4b;
|
$dark_gray:#889aa4;
|
$light_gray:#eee;
|
$gray_gray:#2B3855;
|
|
.login-container {
|
min-height: 100vh;
|
width: 100vw;
|
position: relative;
|
overflow: hidden;
|
background: url('../../assets/login/login_left.png') 0 0 repeat-y, url('../../assets/login/login_mid.png') 15.2% 50% no-repeat,url('../../assets/login/login_right.png') 18% 0 no-repeat;
|
background-size: 15% auto, 15px auto, cover;
|
background-attachment: fixed;
|
.login-logo {
|
width: 40px;
|
height: 40px;
|
}
|
|
.login-form {
|
position: relative;
|
width: 85%;
|
max-width: 520px;
|
padding: 30px 35px 130px;
|
// padding: 160px 35px;
|
// padding: 0 25px;
|
margin: 0 auto;
|
// margin-top: 18vh;
|
// margin-left: 18%;
|
overflow: hidden;
|
}
|
|
.tips {
|
font-size: 14px;
|
color: #fff;
|
margin-bottom: 10px;
|
|
span {
|
&:first-of-type {
|
margin-right: 16px;
|
}
|
}
|
}
|
|
.svg-container {
|
padding: 6px 5px 6px 15px;
|
color: $dark_gray;
|
vertical-align: middle;
|
width: 30px;
|
display: inline-block;
|
}
|
|
.title-container {
|
position: relative;
|
margin-top: 100px;
|
.title {
|
font-size: 26px;
|
color: $gray_gray;
|
// margin: 0px auto 40px auto;
|
text-align: left;
|
font-weight: bold;
|
}
|
}
|
|
.show-pwd {
|
position: absolute;
|
right: 10px;
|
top: 7px;
|
font-size: 16px;
|
color: $dark_gray;
|
cursor: pointer;
|
user-select: none;
|
}
|
|
.safecode-img{
|
width: 80px;
|
height: 70%;
|
position: absolute;
|
right: 10px;
|
top: 50%;
|
transform: translateY(-50%);
|
font-size: 30px;
|
text-align: right;
|
color: $light_gray;
|
cursor: pointer;
|
}
|
|
.thirdparty-button {
|
position: absolute;
|
right: 0;
|
bottom: 6px;
|
}
|
|
@media only screen and (max-width: 470px) {
|
.thirdparty-button {
|
display: none;
|
}
|
}
|
|
// 企业微信扫码登录
|
#wx_reg{
|
padding: 30px 0 0;
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
background: rgba(0, 0, 0, 0.1);
|
border-radius: 12px;
|
margin-bottom: 30px;
|
iframe{
|
width: 300px;
|
height: 300px;
|
}
|
}
|
.role-list-title{
|
color: $gray_gray;
|
margin-bottom: 20px;
|
text-align: center;
|
font-size: 18px;
|
font-weight: bold;
|
letter-spacing: 1px;
|
}
|
.role-list{
|
// margin-bottom: 20px;
|
|
.item{
|
box-sizing: border-box;
|
width: 47.5%;
|
margin-right: 5%;
|
padding: 10px 20px;
|
border: 1px solid $gray_gray;
|
background: transparent;
|
border-radius: 12px;
|
color: $gray_gray;
|
margin-bottom: 5%;
|
cursor: pointer;
|
transition: background .1s ease;
|
position: relative;
|
|
&:nth-child(2n){
|
margin-right: 0;
|
}
|
|
&:hover, &.active{
|
background: rgba(43, 56, 85, 0.8);
|
color: #fff;
|
}
|
|
.el-icon-check{
|
font-size: 24px;
|
font-weight: bold;
|
color: #99FFCC;
|
transition: opacity .1s ease;
|
opacity: 0;
|
position: absolute;
|
right: 10px;
|
bottom: 5px;
|
}
|
|
&.active .el-icon-check{
|
opacity: 1;
|
}
|
}
|
|
&.block-list .item{
|
margin-right: 0;
|
width: 100%;
|
}
|
|
.role-name{
|
font-size: 16px;
|
margin-bottom: 10px;
|
}
|
|
.shop-name{
|
font-size: 14px;
|
// color: #aaa;
|
}
|
}
|
}
|
</style>
|
