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

Write Preview
Loading…
Cancel
Save