elink-star
/
ShibeiWorkPlatform_Frontend
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化登录体验

shibei_master
dai 3 years ago
parent
2f46af47b9
commit
19b758ca30
3 changed files with 176 additions and 325 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 45
      src/assets/scss/pages/loginWork.scss
  2. 155
      src/views/pages/login copy.vue
  3. 301
      src/views/pages/login.vue

45
src/assets/scss/pages/loginWork.scss
View File

@ -166,29 +166,30 @@
} }
} }
.div_row { .m-pop {
height: 50px; height: auto;
text-align: center;
line-height: 50px; .div_row {
height: 50px;
/* width: 100px; */ text-align: center;
/* background-color: rgb(241, 241, 241); */ line-height: 50px;
&:hover { &:hover {
color: rgb(2, 119, 173); color: rgb(2, 119, 173);
font-weight: bold; font-weight: bold;
text-decoration: underline; text-decoration: underline;
} }
.i_icon { .i_icon {
width: 15px; width: 15px;
height: 15px; height: 15px;
margin-right: 10px; margin-right: 10px;
float: left; float: left;
} }
.span_name { .span_name {
font-size: 18px; font-size: 18px;
cursor: pointer; cursor: pointer;
/* color: rgb(37, 156, 235); */ /* color: rgb(37, 156, 235); */
}
} }
} }

155
src/views/pages/login copy.vue
View File

@ -1,155 +0,0 @@
<template>
<div class="aui-wrapper aui-page__login">
<div class="aui-content__wrapper">
<main class="aui-content">
<div class="login-header">
<h2 class="login-brand">{{ $t('brand.lg') }}</h2>
</div>
<div class="login-body">
<h3 class="login-title">{{ $t('login.title') }}</h3>
<el-form :model="dataForm"
:rules="dataRule"
ref="dataForm"
@keyup.enter.native="dataFormSubmitHandle()"
status-icon>
<!-- <el-form-item>
<el-select v-model="$i18n.locale"
class="w-percent-100">
<el-option v-for="(val, key) in i18nMessages"
:key="key"
:label="val._lang"
:value="key"></el-option>
</el-select>
</el-form-item> -->
<el-form-item prop="phone">
<el-input v-model="dataForm.phone"
placeholder="手机号">
<span slot="prefix"
class="el-input__icon">
<svg class="icon-svg"
aria-hidden="true">
<use xlink:href="#icon-user"></use>
</svg>
</span>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="dataForm.password"
type="password"
:placeholder="$t('login.password')">
<span slot="prefix"
class="el-input__icon">
<svg class="icon-svg"
aria-hidden="true">
<use xlink:href="#icon-lock"></use>
</svg>
</span>
</el-input>
</el-form-item>
<el-form-item prop="captcha">
<el-row :gutter="20">
<el-col :span="14">
<el-input v-model="dataForm.captcha"
:placeholder="$t('login.captcha')">
<span slot="prefix"
class="el-input__icon">
<svg class="icon-svg"
aria-hidden="true">
<use xlink:href="#icon-safetycertificate"></use>
</svg>
</span>
</el-input>
</el-col>
<el-col :span="10"
class="login-captcha">
<img :src="captchaPath"
@click="getCaptcha()">
</el-col>
</el-row>
</el-form-item>
<el-form-item>
<el-button type="primary"
@click="dataFormSubmitHandle()"
class="w-percent-100">{{ $t('login.title') }}</el-button>
</el-form-item>
</el-form>
</div>
<div class="login-footer">
<p>
<a href="https://demo.cloud.renren.io/renren-cloud"
target="_blank">{{ $t('login.demo') }}</a>
</p>
<!-- 2020 © renren.io -->
<p><a href="https://www.renren.io/"
target="_blank">{{ $t('login.copyright') }}</a></p>
</div>
</main>
</div>
</div>
</template>
<script>
import Cookies from 'js-cookie'
import debounce from 'lodash/debounce'
import { messages } from '@/i18n'
import { getUUID } from '@/utils'
export default {
data () {
return {
i18nMessages: messages,
captchaPath: '',
dataForm: {
app: 'oper',
client: 'web',
username: '',
phone: '',
password: '',
uuid: '',
captcha: ''
}
}
},
computed: {
dataRule () {
return {
phone: [
{ required: true, message: '手机号不能为空', trigger: 'blur' }
],
password: [
{ required: true, message: '密码不能为空', trigger: 'blur' }
],
captcha: [
{ required: true, message: '验证码不能为空', trigger: 'blur' }
]
}
}
},
created () {
this.getCaptcha()
},
methods: {
// 获取验证码
getCaptcha () {
this.dataForm.uuid = getUUID()
this.captchaPath = `${window.SITE_CONFIG['apiURL']}/auth/login/captcha?uuid=${this.dataForm.uuid}`
},
// 表单提交
dataFormSubmitHandle: debounce(function () {
this.$refs['dataForm'].validate((valid, messageObj) => {
if (!valid) {
app.util.validateRule(messageObj)
}
this.$http.post('/auth/login/operweb/loginbypassword', this.dataForm).then(({ data: res }) => {
if (res.code !== 0) {
this.getCaptcha()
return this.$message.error(res.msg)
}
localStorage.setItem('userType', 'oper')
localStorage.setItem('token', res.data.token)
this.$router.replace({ name: 'home' }).catch(() => { })
}).catch(() => { })
})
}, 1000, { 'leading': true, 'trailing': false })
}
}
</script>

301
src/views/pages/login.vue
View File

@ -1,55 +1,58 @@
<template> <template>
<div class="g-app"> <div class="g-app">
<div class="g-bd" <div class="g-bd" v-if="isShowLogin || true">
v-if="isShowLogin || true">
<div class="m-fm"> <div class="m-fm">
<div class="wrap"> <div class="wrap">
<h2 class="title">{{ $t('brand.work') }}</h2> <h2 class="title">{{ $t("brand.work") }}</h2>
<div class="fm"> <div class="fm">
<el-form :model="dataForm" <el-form
:rules="dataRule" :model="dataForm"
ref="dataForm" :rules="dataRule"
@keyup.enter.native="dataFormSubmitHandle()" ref="dataForm"
status-icon> @keyup.enter.native="dataFormSubmitHandle()"
status-icon
>
<div class="fm-item"> <div class="fm-item">
<div class="ico"> <div class="ico">
<img src="@/assets/img/login/zhanghao.png" <img src="@/assets/img/login/zhanghao.png" alt="" />
alt="" />
</div> </div>
<div class="input"> <div class="input">
<input type="text" <input
v-model="dataForm.phone" type="text"
placeholder="账号" /> v-model="dataForm.phone"
placeholder="账号"
/>
</div> </div>
</div> </div>
<div class="fm-item"> <div class="fm-item">
<div class="ico"> <div class="ico">
<img src="@/assets/img/login/mima.png" <img src="@/assets/img/login/mima.png" alt="" />
alt="" />
</div> </div>
<div class="input"> <div class="input">
<input type="password" <input
v-model="dataForm.password" type="password"
:placeholder="$t('login.password')" /> v-model="dataForm.password"
:placeholder="$t('login.password')"
/>
</div> </div>
</div> </div>
<div class="fm-captcha"> <div class="fm-captcha">
<div class="fm-item"> <div class="fm-item">
<div class="input"> <div class="input">
<input type="text" <input
v-model="dataForm.captcha" type="text"
placeholder="验证码" /> v-model="dataForm.captcha"
placeholder="验证码"
/>
</div> </div>
</div> </div>
<div class="captcha"> <div class="captcha">
<img :src="captchaPath" <img :src="captchaPath" @click="getCaptcha()" />
@click="getCaptcha()" />
</div> </div>
</div> </div>
<div class="fm-btn" <div class="fm-btn" @click="dataFormSubmitHandle()">
@click="dataFormSubmitHandle()"> {{ $t("login.title") }}
{{ $t('login.title') }}
</div> </div>
<div class="hint">请使用小程序端的账号密码登录</div> <div class="hint">请使用小程序端的账号密码登录</div>
</el-form> </el-form>
@ -60,128 +63,128 @@
<div class="m-footer"> <div class="m-footer">
<div class="login-footer"> <div class="login-footer">
<p> <p>
<a href="" <a href="" target="_blank">{{ $t("login.copyright") }}</a>
target="_blank">{{ $t('login.copyright') }}</a>
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<c-dialog :showFooter="false" <c-dialog
:title="'选择客户'" :showFooter="false"
:isNest="false" :title="'选择客户'"
:visible="diaVisible" :isNest="false"
:dialogHeight="0.8" :visible="diaVisible"
:width="30" :dialogHeight="0.8"
:top="'120px'" :width="30"
@cancel="diaCancel"> :top="'120px'"
<div v-for="(item, index) in tableData" @cancel="diaCancel"
:key="index" >
class="div_row"> <div class="m-pop">
<span @click="selectCustomer(item)" <div v-for="(item, index) in tableData" :key="index" class="div_row">
class="span_name">{{ <span @click="selectCustomer(item)" class="span_name">{{
item.customerName item.customerName
}}</span> }}</span>
</div>
</div> </div>
</c-dialog> </c-dialog>
</div> </div>
</template> </template>
<script> <script>
import Cookies from 'js-cookie' import Cookies from "js-cookie";
import CDialog from '@c/CDialog' import CDialog from "@c/CDialog";
import debounce from 'lodash/debounce' import debounce from "lodash/debounce";
import { messages } from '@/i18n' import { messages } from "@/i18n";
import { getUUID } from '@/utils' import { getUUID } from "@/utils";
import { Loading } from 'element-ui' // 引入Loading服务 import { Loading } from "element-ui"; // 引入Loading服务
import JSEncrypt from 'jsencrypt' //引入加密 import JSEncrypt from "jsencrypt"; //引入加密
let loading // 加载动画 let loading; // 加载动画
export default { export default {
data () { data() {
return { return {
pubKey: null, // 获取到公钥 pubKey: null, // 获取到公钥
isShowLogin: true, isShowLogin: true,
i18nMessages: messages, i18nMessages: messages,
captchaPath: '', captchaPath: "",
dataForm: { dataForm: {
customerId: '', customerId: "",
app: 'gov', app: "gov",
client: 'web', client: "web",
username: '', username: "",
phone: '', phone: "",
password: '', password: "",
uuid: '', uuid: "",
captcha: '' captcha: "",
}, },
// 客户列表相关 // 客户列表相关
diaVisible: false, diaVisible: false,
tableLoading: false, tableLoading: false,
tableData: [] tableData: [],
} };
}, },
components: { components: {
CDialog CDialog,
}, },
computed: { computed: {
dataRule () { dataRule() {
return { return {
phone: [{ required: true, message: '手机号不能为空', trigger: 'blur' }], phone: [{ required: true, message: "手机号不能为空", trigger: "blur" }],
password: [ password: [
{ required: true, message: '密码不能为空', trigger: 'blur' } { required: true, message: "密码不能为空", trigger: "blur" },
], ],
captcha: [ captcha: [
{ required: true, message: '验证码不能为空', trigger: 'blur' } { required: true, message: "验证码不能为空", trigger: "blur" },
] ],
} };
} },
}, },
created () { created() {
//平阴联动平台 登陆 //平阴联动平台 登陆
if (this.$route.query.platformToken) { if (this.$route.query.platformToken) {
this.isShowLogin = false this.isShowLogin = false;
this.getAutoLogin(this.$route.query.platformToken) this.getAutoLogin(this.$route.query.platformToken);
} else { } else {
this.getCaptcha() this.getCaptcha();
//获取公钥 //获取公钥
this.getPubKey() this.getPubKey();
} }
}, },
mounted () { mounted() {
localStorage.removeItem('showHeader') localStorage.removeItem("showHeader");
}, },
methods: { methods: {
// 获取公钥 // 获取公钥
getPubKey () { getPubKey() {
this.$http this.$http
.post('/auth/govweb/getKey') .post("/auth/govweb/getKey")
.then(({ data: res }) => { .then(({ data: res }) => {
if (res.code !== 0) { if (res.code !== 0) {
return this.$message.error(res.msg) return this.$message.error(res.msg);
} }
this.pubKey = res.data // 获取到公钥; this.pubKey = res.data; // 获取到公钥;
}) })
.catch(() => { }) .catch(() => {});
}, },
// 获取验证码 // 获取验证码
getCaptcha () { getCaptcha() {
this.dataForm.uuid = getUUID() this.dataForm.uuid = getUUID();
this.captchaPath = `${window.SITE_CONFIG['apiURL']}/auth/login/captcha?uuid=${this.dataForm.uuid}` this.captchaPath = `${window.SITE_CONFIG["apiURL"]}/auth/login/captcha?uuid=${this.dataForm.uuid}`;
}, },
// 表单提交 // 表单提交
dataFormSubmitHandle () { dataFormSubmitHandle() {
this.$refs['dataForm'].validate((valid, messageObj) => { this.$refs["dataForm"].validate((valid, messageObj) => {
if (!valid) { if (!valid) {
app.util.validateRule(messageObj) app.util.validateRule(messageObj);
} }
this.startLoading() this.startLoading();
// const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/epmetuser/customerstaff/customerlist' // const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/epmetuser/customerstaff/customerlist'
const url = '/epmetuser/customerstaff/customerlist' const url = "/epmetuser/customerstaff/customerlist";
const params = { const params = {
phone: this.dataForm.phone phone: this.dataForm.phone,
} };
// this.$http // this.$http
// .post(url, params).then(({ data })=> { // .post(url, params).then(({ data })=> {
// console.log('res--comll', data) // console.log('res--comll', data)
@ -208,105 +211,107 @@ export default {
(data, rspMsg) => { (data, rspMsg) => {
if (data.length === 0) { if (data.length === 0) {
//没有客户，提示无法登录 //没有客户，提示无法登录
this.$message.error('账号不存在') this.$message.error("账号不存在");
this.endLoading() this.endLoading();
} else if (data.length === 1) { } else if (data.length === 10) {
this.selectCustomer(data[0]) this.selectCustomer(data[0]);
} else { } else {
this.endLoading() this.endLoading();
this.diaVisible = true this.diaVisible = true;
this.$nextTick(() => { this.$nextTick(() => {
this.tableData = data this.tableData = data;
}) });
} }
}, },
(rspMsg, data) => { (rspMsg, data) => {
this.endLoading() this.endLoading();
this.$message.error(rspMsg) this.$message.error(rspMsg);
} }
) );
}) });
}, },
// 平阴联动 自动登录接口 // 平阴联动 自动登录接口
getAutoLogin (platformToken) { getAutoLogin(platformToken) {
this.dataForm.thirdToken = platformToken this.dataForm.thirdToken = platformToken;
this.dataForm.platform = 'pyld' this.dataForm.platform = "pyld";
this.$http this.$http
.post(`/auth/sso/oper/third/login`, this.dataForm) .post(`/auth/sso/oper/third/login`, this.dataForm)
.then(({ data: res }) => { .then(({ data: res }) => {
if (res.code !== 0) { if (res.code !== 0) {
if (res.code == 8302) { if (res.code == 8302) {
return this.$message.error(res.msg) return this.$message.error(res.msg);
} }
return this.$message.error(res.msg) return this.$message.error(res.msg);
} }
localStorage.setItem('customerId', res.data.customerId) localStorage.setItem("customerId", res.data.customerId);
localStorage.setItem('userType', 'work') localStorage.setItem("userType", "work");
localStorage.setItem('showHeader', '0') localStorage.setItem("showHeader", "0");
localStorage.setItem('token', res.data.token) localStorage.setItem("token", res.data.token);
this.$router.replace({ name: 'home' }) this.$router.replace({ name: "home" });
}) })
.catch(() => { }) .catch(() => {});
// epmet-ext9.elinkservice.cn/platform-admin // epmet-ext9.elinkservice.cn/platform-admin
}, },
//选择客户 //选择客户
selectCustomer (row) { selectCustomer(row) {
localStorage.setItem('customerId', row.customerId) localStorage.setItem("customerId", row.customerId);
localStorage.setItem('customerName', row.customerName) localStorage.setItem("customerName", row.customerName);
this.startLoading() this.startLoading();
// const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/auth/govweb/login' // const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/auth/govweb/login'
const url = '/auth/govweb/login' const url = "/auth/govweb/login";
this.dataForm.customerId = row.customerId this.dataForm.customerId = row.customerId;
let param = {} let param = {};
Object.assign(param, this.dataForm) Object.assign(param, this.dataForm);
param.password = this.encryptedData(this.pubKey, this.dataForm.password) param.password = this.encryptedData(this.pubKey, this.dataForm.password);
this.$http this.$http
.post(url, param) .post(url, param)
.then(({ data: res }) => { .then(({ data: res }) => {
this.endLoading();
if (res.code !== 0) { if (res.code !== 0) {
this.getCaptcha() this.getCaptcha();
return this.$message.error(res.msg) return this.$message.error(res.msg);
} }
this.diaVisible = false this.diaVisible = false;
localStorage.setItem('userType', 'work') localStorage.setItem("userType", "work");
localStorage.setItem('token', res.data.token) localStorage.setItem("token", res.data.token);
this.$router.replace({ name: 'indexWork' }).catch(() => { }) this.$router.replace({ name: "index" });
}) })
.catch(() => { }) .catch(() => {
this.endLoading() this.endLoading();
});
}, },
// 取消 // 取消
diaCancel () { diaCancel() {
this.diaVisible = false this.diaVisible = false;
}, },
// 开启加载动画 // 开启加载动画
startLoading () { startLoading() {
loading = Loading.service({ loading = Loading.service({
lock: true, // 是否锁定 lock: true, // 是否锁定
text: '正在加载……', // 加载中需要显示的文字 text: "正在加载……", // 加载中需要显示的文字
background: 'rgba(0,0,0,.7)' // 背景颜色 background: "rgba(0,0,0,.7)", // 背景颜色
}) });
}, },
// 结束加载动画 // 结束加载动画
endLoading () { endLoading() {
// clearTimeout(timer); // clearTimeout(timer);
if (loading) { if (loading) {
loading.close() loading.close();
} }
}, },
// 加密 // 加密
encryptedData (key, data) { encryptedData(key, data) {
// 新建JSEncrypt对象 // 新建JSEncrypt对象
let encryptor = new JSEncrypt() let encryptor = new JSEncrypt();
// 设置公钥 // 设置公钥
encryptor.setPublicKey(key) encryptor.setPublicKey(key);
// 加密数据 // 加密数据
return encryptor.encrypt(data) return encryptor.encrypt(data);
} },
} },
} };
</script> </script>
<style lang="scss" src="@/assets/scss/pages/loginWork.scss" scoped></style> <style lang="scss" src="@/assets/scss/pages/loginWork.scss" scoped></style>

Write Preview
Loading…
Cancel
Save