zhixinlian
/
fontend-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

loading登录，以及获取用户成绩

Browse Source
master
unclekh 5 years ago
parent d5835fac3d
commit 2a033574ad
2 changed files with 446 additions and 479 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. 889
      src/components/common/header.vue
  2. 36
      src/pages/yyyfLogin.vue

889
src/components/common/header.vue
Unescape View File

@ -192,543 +192,510 @@
</template> </template>
<script> <script>
import {getCurrentLanguage} from '@/common/i18n'; import {getCurrentLanguage} from '@/common/i18n';
import {getExchangeRateCookie, setExchangeRateCookie} from '@/utils/auth'; import {getExchangeRateCookie, setExchangeRateCookie} from '@/utils/auth';
import {logOut} from '@/api/user'; import {logOut} from '@/api/user';
import Cookie from '@/common/cookie'; import Cookie from '@/common/cookie';
import {FILE_URL} from '@/api/app'; import {FILE_URL} from '@/api/app';
import {signIn} from '@/api/yyyf';
const Menu = {
const Menu = { icon: [{t: 'nav.menu_name', link: '/'}],
icon: [{t: 'nav.menu_name', link: '/'}], left: [
left: [ {t: 'nav.menu_home', link: '/'},
{t: 'nav.menu_home', link: '/'}, {t: 'nav.menu_markets', link: '/price'},
{t: 'nav.menu_markets', link: '/price'}, {t: 'nav.menu_exchange', link: '/trade'},
{t: 'nav.menu_exchange', link: '/trade'}, {t: 'nav.menu_OTC', link: '/exchange'},
{t: 'nav.menu_OTC', link: '/exchange'}, {t: 'footer.white', link: '/white'},
{t: 'footer.white', link: '/white'}, ],
], right: [
right: [ {t: 'nav.menu_fall', link: '/announce'},
{t: 'nav.menu_fall', link: '/announce'}, {t: 'nav.menu_orders', link: '/entrust'},
{t: 'nav.menu_orders', link: '/entrust'}, {t: 'nav.menu_dingdan', link: '/order'},
{t: 'nav.menu_dingdan', link: '/order'}, {t: 'nav.menu_funds', link: '/balances'},
{t: 'nav.menu_funds', link: '/balances'}, ],
], };
};
export default {
export default { name: 'nav-header',
name: 'nav-header', props: {
props: { border: {
border: { type: Boolean,
type: Boolean, default: true,
default: true,
},
borderStyle: {
type: String,
default: 'default',
validator: val => ['default', 'full'].indexOf(val) > -1,
},
},
data() {
return {
menuIcon: Menu.icon,
menuLeft: Menu.left,
menuRight: Menu.right,
lang: {
current: {lang: 'zh-CN', name: '简体中文'},
list: [
// {lang: 'zh-HK', name: '繁體中文'},
{lang: 'zh-CN', name: this.$t('nav.menu_china')},
{lang: 'en', name: 'English'},
],
},
exRate: {
current: {id: 'USD', name: 'nav.menu_USD'},
list: [
{id: 'HKD', name: 'nav.menu_HK'},
{id: 'USD', name: 'nav.menu_USD'},
{id: 'CNY', name: 'nav.menu_CNY'},
// {id: 'EUR', name: 'nav.menu_EUR'},
],
}, },
personal: { borderStyle: {
current: {id: 'profile', name: this.$t('personal.leftNav.profile')}, type: String,
list: [ default: 'default',
{id: 'profile', name: this.$t('personal.leftNav.profile')}, validator: val => ['default', 'full'].indexOf(val) > -1,
{id: 'security', name: this.$t('personal.leftNav.security')},
{id: 'manner', name: this.$t('personal.leftNav.manner')},
{id: 'prove', name: this.$t('personal.leftNav.prove')},
{id: 'out', name: this.$t('nav.menu_logOut')},
],
}, },
userData: '',
headerImg: '',
perUrl: 'personal',
file: '',
};
},
computed: {
rightNavWidth: function() {
if (this.userData != '' && this.userData != undefined) {
return '42%';
} else {
return '18%';
}
}, },
},
created() {
let params = this.parseUrl();
//判断是否来自以渔有方
if (
!$.isEmptyObject(params) &&
params.userId != undefined &&
params.reqType != undefined
) {
this.loginFromYyyf(params);
}
this.file = FILE_URL;
this.perUrl = window.location.pathname.split('/')[1];
// console.log(this.perUrl);
// this.userData = Cookie.get('userData');
this.userData = localStorage.getItem('userData');
if (this.userData != '' && this.userData != undefined) {
this.userData = JSON.parse(localStorage.getItem('userData'));
// console.log(this.userData);
if (this.userData.avatar != null) {
this.headerImg = this.file + this.userData.avatar;
} else {
this.headerImg = this.userData.avatar;
}
}
// console.log(this.headerImg);
const currentLang = getCurrentLanguage(); data() {
for (let item of this.lang.list) { return {
if (item.lang === currentLang) { menuIcon: Menu.icon,
this.lang.current = item; menuLeft: Menu.left,
break; menuRight: Menu.right,
} lang: {
} current: {lang: 'zh-CN', name: '简体中文'},
const currentrate = getExchangeRateCookie(); list: [
for (let item of this.exRate.list) { // {lang: 'zh-HK', name: '繁體中文'},
if (item.id === currentrate) { {lang: 'zh-CN', name: this.$t('nav.menu_china')},
this.exRate.current = item; {lang: 'en', name: 'English'},
// setExchangeRateCookie(currentrate); ],
break; },
} exRate: {
} current: {id: 'USD', name: 'nav.menu_USD'},
}, list: [
{id: 'HKD', name: 'nav.menu_HK'},
methods: { {id: 'USD', name: 'nav.menu_USD'},
parseUrl: function() { {id: 'CNY', name: 'nav.menu_CNY'},
let params = {}; //定义数组 // {id: 'EUR', name: 'nav.menu_EUR'},
let url = decodeURIComponent(location.href); ],
let paramsIndex = url.indexOf('?'); },
if (paramsIndex != -1) { personal: {
paramsIndex = paramsIndex + 1; current: {id: 'profile', name: this.$t('personal.leftNav.profile')},
let paramsStr = url.substring(paramsIndex); list: [
let paramsAttr = paramsStr.split('&'); {id: 'profile', name: this.$t('personal.leftNav.profile')},
for (let x in paramsAttr) { {id: 'security', name: this.$t('personal.leftNav.security')},
let y = paramsAttr[x].split('='); {id: 'manner', name: this.$t('personal.leftNav.manner')},
if (y[0] == undefined || y[0] == '') { {id: 'prove', name: this.$t('personal.leftNav.prove')},
continue; {id: 'out', name: this.$t('nav.menu_logOut')},
} ],
if (y[1] != undefined) { },
let value = ''; userData: '',
let len = y.length; headerImg: '',
for (let j = 1; j < len; j++) { perUrl: 'personal',
value += file: '',
y[j] == '' && };
paramsAttr[x].charAt(value.length + y[0].length + 1) != ''
? '='
: y[j];
}
params[y[0]] = value;
}
}
}
return params;
}, },
loginFromYyyf: function(params) {
signIn(params).then(res => { computed: {
// console.log(res); rightNavWidth: function() {
if (res.data.code === 200) { if (this.userData != '' && this.userData != undefined) {
debugger; return '42%';
this.loading = false;
//保存登录的token到cookie
// Cookie.set('token', res.data.data.token);
localStorage.setItem('yyyfToken', res.data.data.yyyfUserToken);
//保存登录的用户信息到cookie
// Cookie.set('userData', res.data.data);
//localStorage.setItem('userData', JSON.stringify(res.data.data));
location.href = '/';
} else { } else {
this.loading = false; return '18%';
this.$message.warning(res.data.msg);
} }
}); },
}, },
switchLang(command) {
if (!command) { created() {
return; let yyyfToken=localStorage.getItem('yyyfToken');
if(yyyfToken == '' || yyyfToken == undefined){
this.$alert('未从以渔有方登录，点击确定关闭浏览器', '提示', {
type: 'error',
showClose: false,
confirmButtonText: '确定',
confirmButtonClass: 'btn-self-style',
callback: action => {
this.closeWindow()
}
});
} }
let u = new URL(location.href); this.file = FILE_URL;
u.searchParams.set('lang', command); this.perUrl = window.location.pathname.split('/')[1];
location.href = u.href; // console.log(this.perUrl);
},
switchRate(command) { // this.userData = Cookie.get('userData');
if (!command) { this.userData = localStorage.getItem('userData');
return;
if (this.userData != '' && this.userData != undefined) {
this.userData = JSON.parse(localStorage.getItem('userData'));
// console.log(this.userData);
if (this.userData.avatar != null) {
this.headerImg = this.file + this.userData.avatar;
} else {
this.headerImg = this.userData.avatar;
}
} }
// let currentrate = getExchangeRateCookie(); // console.log(this.headerImg);
// console.log('1111'+ currentrate);
// for (let item of this.exRate.list) { const currentLang = getCurrentLanguage();
// if (item.id === currentrate) { for (let item of this.lang.list) {
// setExchangeRateCookie(command); if (item.lang === currentLang) {
// this.exRate.current = item; this.lang.current = item;
// break; break;
// } }
// };
setExchangeRateCookie(command);
window.location.reload();
// console.log('1111'+ setExchangeRateCookie(command));
},
switchPage(command) {
if (!command) {
return;
} }
if (command === 'out') { const currentrate = getExchangeRateCookie();
this.exit(); for (let item of this.exRate.list) {
} else { if (item.id === currentrate) {
location.href = '/personal?perUrl=' + this.perUrl + '#/' + command; this.exRate.current = item;
// setExchangeRateCookie(currentrate);
break;
}
} }
}, },
exit() {
logOut().then(res => { methods: {
if (res.data.code === 200 || res.data.code === 202) { closeWindow: function () {
// Cookie.set('userData', ''); if (navigator.userAgent.indexOf("Firefox") != -1 || navigator.userAgent.indexOf("Chrome") != -1) {
localStorage.setItem('userData', ''); window.location.href = "about:blank";
localStorage.removeItem('userpass'); window.close();
localStorage.removeItem('userdate');
localStorage.removeItem('nowPassNOValue');
window.location.href = '/';
// let pathName = window.location.pathname.split('/')[1];
// console.log(pathName);
//判断是否从个人中心页面退出登录
// if (pathName === 'personal') {
// window.location.href = '/login';
// } else {
// window.location.href = this.perUrl;
// }
} else { } else {
this.$message.warning(res.data.msg); window.opener = null;
window.open("", "_self");
window.close();
} }
}); },
switchLang(command) {
if (!command) {
return;
}
let u = new URL(location.href);
u.searchParams.set('lang', command);
location.href = u.href;
},
switchRate(command) {
if (!command) {
return;
}
// let currentrate = getExchangeRateCookie();
// console.log('1111'+ currentrate);
// for (let item of this.exRate.list) {
// if (item.id === currentrate) {
// setExchangeRateCookie(command);
// this.exRate.current = item;
// break;
// }
// };
setExchangeRateCookie(command);
window.location.reload();
// console.log('1111'+ setExchangeRateCookie(command));
},
switchPage(command) {
if (!command) {
return;
}
if (command === 'out') {
this.exit();
} else {
location.href = '/personal?perUrl=' + this.perUrl + '#/' + command;
}
},
exit() {
logOut().then(res => {
if (res.data.code === 200 || res.data.code === 202) {
// Cookie.set('userData', '');
localStorage.setItem('userData', '');
localStorage.removeItem('userpass');
localStorage.removeItem('userdate');
localStorage.removeItem('nowPassNOValue');
window.location.href = '/';
// let pathName = window.location.pathname.split('/')[1];
// console.log(pathName);
//判断是否从个人中心页面退出登录
// if (pathName === 'personal') {
// window.location.href = '/login';
// } else {
// window.location.href = this.perUrl;
// }
} else {
this.$message.warning(res.data.msg);
}
});
},
}, },
}, };
};
</script> </script>
<style lang="scss"> <style lang="scss">
@import '../../common/style/base'; @import '../../common/style/base';
// .main-nav{ // .main-nav{
// padding: 0 20px; // padding: 0 20px;
// } // }
.nav-header { .nav-header {
max-width: 100%; max-width: 100%;
min-width: 1180px; min-width: 1180px;
height: 65px; height: 65px;
line-height: 65px; line-height: 65px;
background-color: #23252b; background-color: #23252b;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
// padding: 0 $cec-header-padding;
$local-menu-text-color: #6880a0;
.logoBox {
display: flex; display: flex;
align-items: center; flex-wrap: nowrap;
// margin-left: 12.6%; justify-content: space-between;
margin-right: 7.9%; // padding: 0 $cec-header-padding;
img {
width: 45px;
height: 45px;
}
}
h2 { $local-menu-text-color: #6880a0;
margin: 0;
padding: 0;
}
.mainTitle { .logoBox {
color: #fff; display: flex;
font-size: 28px; align-items: center;
font-weight: normal; // margin-left: 12.6%;
margin-left: 9px; margin-right: 7.9%;
} img {
width: 45px;
height: 45px;
}
}
.leftNav { h2 {
width: 45%; margin: 0;
display: flex; padding: 0;
margin-left: 2%;
.nav-menu {
width: 60%;
} }
.menu-item {
margin-right: 3%; .mainTitle {
color: #fff;
font-size: 28px;
font-weight: normal;
margin-left: 9px;
} }
}
.rightNav { .leftNav {
width: 10%; width: 45%;
margin-right: 2%; display: flex;
// width: 350px; margin-left: 2%;
// display: flex; .nav-menu {
// flex-direction: row-reverse; width: 60%;
.nav-menu { }
.menu-item {
margin-right: 3%;
}
}
.rightNav {
width: 10%;
margin-right: 2%;
// width: 350px; // width: 350px;
// display: flex; // display: flex;
// flex-direction: row-reverse; // flex-direction: row-reverse;
.nav-menu {
// width: 350px;
// display: flex;
// flex-direction: row-reverse;
}
} }
}
.nav-menu { .nav-menu {
display: flex;
flex-wrap: wrap;
height: 100%;
justify-content: space-between;
.menu-item {
display: flex; display: flex;
align-items: center; flex-wrap: wrap;
height: 100%;
justify-content: space-between;
font-size: 14px; .menu-item {
color: $local-menu-text-color; display: flex;
align-items: center;
&.no-padding { font-size: 14px;
padding: 0; color: $local-menu-text-color;
}
> a { &.no-padding {
// color: $local-menu-text-color; padding: 0;
color: #545663; }
&.is-active {
color: white; > a {
// color: $local-menu-text-color;
color: #545663;
&.is-active {
color: white;
}
}
span {
color: #545663;
} }
} }
span {
color: #545663;
}
}
/* 对 直接子代 a ，和 .menu-item-inner 进行定位布局 */ /* 对 直接子代 a ，和 .menu-item-inner 进行定位布局 */
.menu-item > a, .menu-item > a,
.menu-item-inner { .menu-item-inner {
display: flex; display: flex;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
// padding: 0 10px; // padding: 0 10px;
}
} }
} .nav-menuRight {
.nav-menuRight {
display: flex;
flex-wrap: wrap;
height: 100%;
// justify-content: space-between;
.menu-item {
display: flex; display: flex;
align-items: center; flex-wrap: wrap;
font-size: 14px; height: 100%;
color: $local-menu-text-color; // justify-content: space-between;
&.no-padding { .menu-item {
padding: 0; display: flex;
} align-items: center;
font-size: 14px;
color: $local-menu-text-color;
&.no-padding {
padding: 0;
}
> a { > a {
// color: $local-menu-text-color; // color: $local-menu-text-color;
color: #545663; color: #545663;
&.is-active { &.is-active {
color: white; color: white;
}
}
span {
color: #545663;
} }
} }
span {
color: #545663;
}
}
/* 对 直接子代 a ，和 .menu-item-inner 进行定位布局 */ /* 对 直接子代 a ，和 .menu-item-inner 进行定位布局 */
.menu-item > a, .menu-item > a,
.menu-item-inner { .menu-item-inner {
display: flex; display: flex;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
// padding: 0 10px; // padding: 0 10px;
}
} }
}
.navColor { .navColor {
color: #e8494a !important; color: #e8494a !important;
position: relative; position: relative;
&::after { &::after {
content: ''; content: '';
width: 100%; width: 100%;
height: 3px; height: 3px;
background-color: #e8494a; background-color: #e8494a;
position: absolute; position: absolute;
bottom: 1%; bottom: 1%;
left: 0; left: 0;
}
} }
}
.nav-menu { .nav-menu {
/* logo area */ /* logo area */
.nav-logo-area { .nav-logo-area {
padding: 0; padding: 0;
.logo_text { .logo_text {
font-size: 26px; font-size: 26px;
color: #ffffff; color: #ffffff;
}
} }
} }
}
@at-root { @at-root {
&_bordered { &_bordered {
border-bottom: 1px solid #1f3e5a; border-bottom: 1px solid #1f3e5a;
}
} }
}
/* 导航栏 下拉菜单 */ /* 导航栏 下拉菜单 */
.nav-dropdown { .nav-dropdown {
&.el-dropdown { &.el-dropdown {
justify-content: center; justify-content: center;
} }
.dropdown-link { .dropdown-link {
cursor: pointer; cursor: pointer;
color: $local-menu-text-color; color: $local-menu-text-color;
} }
.el-dropdown-menu { .el-dropdown-menu {
background-color: #fff; background-color: #fff;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
margin: 0; margin: 0;
padding: 0; padding: 0;
top: 55px !important; top: 55px !important;
&__item { &__item {
height: 42px; height: 42px;
line-height: 42px; line-height: 42px;
&:not(.is-disabled):hover { &:not(.is-disabled):hover {
background-color: #d3dae2; background-color: #d3dae2;
}
.is-active {
color: #666 !important;
}
} }
.is-active { .dropdown-menu-item-inner {
color: #666 !important; color: #666;
} }
} }
.dropdown-menu-item-inner {
color: #666;
}
}
.exRateDropdown { .exRateDropdown {
left: -100% !important; left: -100% !important;
} }
.langDropdown { .langDropdown {
left: -50% !important; left: -50% !important;
}
.userDropdown {
left: -5% !important;
width: 110px;
.el-dropdown-menu__item {
padding: 0;
} }
.dropdown-menu-item-inner { .userDropdown {
text-align: center; left: -5% !important;
width: 110px;
.el-dropdown-menu__item {
padding: 0;
}
.dropdown-menu-item-inner {
text-align: center;
}
} }
} }
}
.logOut { .logOut {
border-top: 1px solid rgba(237, 238, 243, 1); border-top: 1px solid rgba(237, 238, 243, 1);
height: 50px !important; height: 50px !important;
line-height: 50px !important; line-height: 50px !important;
} }
.nav-dropdown-i18n { .nav-dropdown-i18n {
height: 100%; height: 100%;
.dropdown-menu-item-inner { .dropdown-menu-item-inner {
width: 135 - 2 * 20px; // 20px 为 el-dropdown-item padding width: 135 - 2 * 20px; // 20px 为 el-dropdown-item padding
color: $local-menu-text-color; color: $local-menu-text-color;
padding-left: 25px; padding-left: 25px;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
&.is-active { &.is-active {
color: white; color: white;
}
} }
}
.menu-item-icon { .menu-item-icon {
position: absolute; position: absolute;
left: 0; left: 0;
line-height: 42px; line-height: 42px;
font-size: 1.2em; font-size: 1.2em;
font-weight: bold; font-weight: bold;
color: $cec-color-text-regular; color: $cec-color-text-regular;
}
} }
}
.registered { .registered {
width: 70px; width: 70px;
height: 28px; height: 28px;
background-color: #e8494a; background-color: #e8494a;
border-radius: 14px; border-radius: 14px;
font-size: 14px; font-size: 14px;
padding: 0; padding: 0;
border-color: #3e5173; border-color: #3e5173;
transition: all 0.2s linear; transition: all 0.2s linear;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
span {
color: #fff !important;
}
&:hover {
background-color: #fff;
span { span {
color: #e8494a !important; color: #fff !important;
}
&:hover {
background-color: #fff;
span {
color: #e8494a !important;
}
} }
} }
// .userAvatar {
// width: 40px;
// height: 40px;
// border-radius: 40px;
// overflow: hidden;
// display: flex;
// align-items: center;
// justify-content: center;
// background-color: #fff;
// img {
// width: 100%;
// }
// }
}
.btn-self-style {
background: #f56c6c !important;
color: #fff !important;
} }
// .userAvatar {
// width: 40px;
// height: 40px;
// border-radius: 40px;
// overflow: hidden;
// display: flex;
// align-items: center;
// justify-content: center;
// background-color: #fff;
// img {
// width: 100%;
// }
// }
}
</style> </style>

36
src/pages/yyyfLogin.vue
Unescape View File

@ -10,6 +10,7 @@
import {FILE_URL} from '@/api/app'; import {FILE_URL} from '@/api/app';
import {signIn} from '@/api/yyyf'; import {signIn} from '@/api/yyyf';
import {Loading} from 'element-ui'; import {Loading} from 'element-ui';
export default { export default {
name: 'yyyfLogin', name: 'yyyfLogin',
props: {}, props: {},
@ -21,39 +22,35 @@
}, },
computed: {}, computed: {},
created() { created() {
this.startLoading(); this.startLoading();
let params = this.parseUrl(); let params = this.parseUrl();
//判断是否来自以渔有方 //判断是否来自以渔有方
if (!$.isEmptyObject(params) &&params.userId != undefined && params.reqType != undefined) { if (!$.isEmptyObject(params) && params.userId != undefined && params.reqType != undefined) {
this.loginFromYyyf(params); this.loginFromYyyf(params);
}else{ } else {
let self=this;
this.$alert('参数错误', '提示', { this.$alert('参数错误', '提示', {
type:'error', type: 'error',
showClose:false, showClose: false,
confirmButtonText: '确定', confirmButtonText: '确定',
confirmButtonClass: 'btn-self-style', confirmButtonClass: 'btn-self-style',
callback: action => { callback: action => {
self.closeWindow() this.closeWindow()
} }
}); });
} }
}, },
methods: { methods: {
startLoading: function () { //使用Element loading-start 方法 startLoading: function () { //使用Element loading-start 方法
this.loading = Loading.service({ this.loading = Loading.service({
lock: true, lock: true,
text: '初始化登录1ing...', text: '初始化登录ing...',
background: 'rgba(204, 0, 0, 0.7)' background: 'rgba(204, 0, 0, 0.7)'
}) });
}, },
endLoading: function () { //使用Element loading-close 方法 endLoading: function () { //使用Element loading-close 方法
loading.close() this.loading.close()
}, },
parseUrl: function () { parseUrl: function () {
let params = {}; //定义数组 let params = {}; //定义数组
@ -88,8 +85,6 @@
signIn(params).then(res => { signIn(params).then(res => {
// console.log(res); // console.log(res);
if (res.data.code === 200) { if (res.data.code === 200) {
debugger;
this.loading = false;
//保存登录的token到cookie //保存登录的token到cookie
// Cookie.set('token', res.data.data.token); // Cookie.set('token', res.data.data.token);
localStorage.setItem('yyyfToken', res.data.data.yyyfUserToken); localStorage.setItem('yyyfToken', res.data.data.yyyfUserToken);
@ -100,8 +95,13 @@
this.endLoading() this.endLoading()
location.href = '/'; location.href = '/';
} else { } else {
//this.loading = false; self.$message.warning({
this.$message.warning(res.data.msg); message: res.data.msg,
onClose: function () {
this.closeWindow();
}
});
} }
}); });
}, },
@ -120,8 +120,8 @@
</script> </script>
<style> <style>
.btn-self-style{ .btn-self-style {
background: #f56c6c !important; background: #f56c6c !important;
color:#fff !important; color: #fff !important;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save