You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
302 lines
8.2 KiB
302 lines
8.2 KiB
<template>
|
|
<header class="navbar home-navbar">
|
|
<div class="navbar-header header-logo">
|
|
<router-link to="/">
|
|
<img src="@/assets/images/logo2.png" />
|
|
</router-link>
|
|
</div>
|
|
|
|
<nav class="header-nav">
|
|
<ul class="navbar-nav" v-if="!isLogin || userIsActive">
|
|
<li>
|
|
<router-link to="/index">{{$t('首页')}}</router-link>
|
|
</li>
|
|
<li>
|
|
<router-link to="/coincoin">{{$t('币币交易')}}</router-link>
|
|
</li>
|
|
<li>
|
|
<router-link to="/release">{{$t('解封交易')}}</router-link>
|
|
</li>
|
|
<li>
|
|
<router-link to="/currency">{{$t('法币交易')}}</router-link>
|
|
</li>
|
|
|
|
<li>
|
|
<router-link to="/news">{{$t('公告')}}</router-link>
|
|
</li>
|
|
</ul>
|
|
|
|
<ul class="navbar-nav" v-if="isLogin && !userIsActive">
|
|
<li>
|
|
<router-link to="/index">{{$t('首页')}}</router-link>
|
|
</li>
|
|
<li>
|
|
<span @click="noActive">{{$t('币币交易')}}</span>
|
|
</li>
|
|
<li>
|
|
<span @click="noActive">{{$t('解封交易')}}</span>
|
|
</li>
|
|
<li>
|
|
<span @click="noActive">{{$t('法币交易')}}</span>
|
|
</li>
|
|
|
|
<li>
|
|
<span @click="noActive">{{$t('公告')}}</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<ul class="navbar-nav navbar-right" v-if="isLogin && userIsActive">
|
|
<li @mouseover="showAsssets = true" @mouseleave="showAsssets = false">
|
|
<router-link to="/assets">{{$t('资产')}}</router-link>
|
|
|
|
<ul class="header-menu-dropdowns" v-if="showAsssets">
|
|
<li>
|
|
<router-link to="/assets/coincoin">{{$t('币币账户（充币&提币）')}}</router-link>
|
|
</li>
|
|
<li>
|
|
<router-link to="/assets/currency">{{$t('法币账户')}}</router-link>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li @mouseover="showOrder = true" @mouseleave="showOrder = false">
|
|
<router-link to="/order">{{$t('订单')}}</router-link>
|
|
|
|
<ul class="header-menu-dropdowns" v-if="showOrder">
|
|
<li>
|
|
<router-link to="/order/coincoin">{{$t('币币订单')}}</router-link>
|
|
</li>
|
|
<li>
|
|
<router-link to="/order/release">{{$t('解封订单')}}</router-link>
|
|
</li>
|
|
<li>
|
|
<router-link to="/currency/order">{{$t('法币订单')}}</router-link>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li @mouseover="showMy = true" @mouseleave="showMy = false">
|
|
<router-link to="/user">{{$t('我的')}}</router-link>
|
|
|
|
<ul class="header-menu-dropdowns header-menu-my" v-if="showMy">
|
|
<li>
|
|
<div class="user-desc-box" v-if="userInfoData">
|
|
<h2>
|
|
<em>Hi,</em>
|
|
{{userInfoData.phone || userInfoData.email}}
|
|
</h2>
|
|
<p>UID:{{userInfoData.uid}}</p>
|
|
</div>
|
|
<div class="user-desc-box" v-else>
|
|
<h2>{{$t('您还未登录')}}</h2>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<router-link to="/user/account">{{$t('账户中心')}}</router-link>
|
|
</li>
|
|
<li>
|
|
<router-link to="/user/setting">{{$t('个人设置')}}</router-link>
|
|
</li>
|
|
<li>
|
|
<router-link to="/user/invite">{{$t('邀请好友')}}</router-link>
|
|
</li>
|
|
<li v-if="merchantStatus == 'M_E_S_PASS'">
|
|
<router-link to="/user/shop">{{$t('商户信息')}}</router-link>
|
|
</li>
|
|
<li>
|
|
<span @click="logout">{{$t('退出')}}</span>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li @mouseover="showLan = true" @mouseleave="showLan = false">
|
|
<span>{{currentLanText}}</span>
|
|
|
|
<ul class="header-menu-language" v-if="showLan">
|
|
<li :class="{'active': item.id == currentLan}" v-for="item of languageList" :key="item.id" @click="changeLan(item.id)">
|
|
<span>{{item.name}}</span>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
<ul class="navbar-nav navbar-right" v-if="isLogin && !userIsActive">
|
|
<li @mouseover="showAsssets = true" @mouseleave="showAsssets = false">
|
|
<span>{{$t('资产')}}</span>
|
|
|
|
<ul class="header-menu-dropdowns" v-if="showAsssets">
|
|
<li>
|
|
<span>{{$t('币币账户（充币&提币）')}}</span>
|
|
</li>
|
|
<li>
|
|
<span>{{$t('法币账户')}}</span>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li @mouseover="showOrder = true" @mouseleave="showOrder = false">
|
|
<span @click="noActive">{{$t('订单')}}</span>
|
|
|
|
<ul class="header-menu-dropdowns" v-if="showOrder">
|
|
<li>
|
|
<span @click="noActive">{{$t('币币订单')}}</span>
|
|
</li>
|
|
<li>
|
|
<span @click="noActive">{{$t('解封订单')}}</span>
|
|
</li>
|
|
<li>
|
|
<span @click="noActive">{{$t('法币订单')}}</span>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li @mouseover="showMy = true" @mouseleave="showMy = false">
|
|
<span @click="noActive">{{$t('我的')}}</span>
|
|
|
|
<ul class="header-menu-dropdowns header-menu-my" v-if="showMy">
|
|
<li>
|
|
<div class="user-desc-box">
|
|
<h2>
|
|
<em>Hi,</em>
|
|
{{userInfoData.phone || userInfoData.email}}
|
|
</h2>
|
|
<p>UID:{{userInfoData.uid}}</p>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<span @click="noActive">{{$t('账户中心')}}</span>
|
|
</li>
|
|
<li>
|
|
<span @click="noActive">{{$t('个人设置')}}</span>
|
|
</li>
|
|
<li>
|
|
<span @click="noActive">{{$t('邀请好友')}}</span>
|
|
</li>
|
|
<li v-if="merchantStatus == 'M_E_S_PASS'">
|
|
<span @click="noActive">{{$t('商户信息')}}</span>
|
|
</li>
|
|
<li>
|
|
<span @click="logout">{{$t('退出')}}</span>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li @mouseover="showLan = true" @mouseleave="showLan = false">
|
|
<span>{{currentLanText}}</span>
|
|
|
|
<ul class="header-menu-language" v-if="showLan">
|
|
<li :class="{'active': item.id == currentLan}" v-for="item of languageList" :key="item.id" @click="changeLan(item.id)">
|
|
<span>{{item.name}}</span>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
<ul class="navbar-nav navbar-right nav-dropdown" v-if="!isLogin">
|
|
<li>
|
|
<router-link to="/login">{{$t('登录')}}</router-link>
|
|
</li>
|
|
<li>
|
|
<router-link to="/register">{{$t('注册')}}</router-link>
|
|
</li>
|
|
|
|
<li @mouseover="showLan = true" @mouseleave="showLan = false">
|
|
<span>{{currentLanText}}</span>
|
|
|
|
<ul class="header-menu-language" v-if="showLan">
|
|
<li :class="{'active': item.id == currentLan}" v-for="item of languageList" :key="item.id" @click="changeLan(item.id)">
|
|
<span>{{item.name}}</span>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex'
|
|
export default {
|
|
name: 'myHeader',
|
|
data() {
|
|
return {
|
|
showAsssets: false, //资产菜单
|
|
showOrder: false, //订单菜单
|
|
showMy: false, //我的菜单
|
|
|
|
showLan: false, //语言菜单
|
|
currentLan: '', //当前语言
|
|
languageList: [
|
|
{
|
|
id: 'cn',
|
|
name: '简体中文'
|
|
},
|
|
{
|
|
id: 'en',
|
|
name: 'English'
|
|
},
|
|
{
|
|
id: 'korean',
|
|
name: '한글'
|
|
},
|
|
]
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState('user', ['isLogin', 'userInfoData', 'userIsActive', 'merchantStatus']),
|
|
|
|
currentLanText() { //当前语言
|
|
let text;
|
|
this.languageList.forEach(item => {
|
|
if (item.id == this.currentLan) {
|
|
text = item.name;
|
|
}
|
|
})
|
|
return text;
|
|
}
|
|
},
|
|
methods: {
|
|
changeLan(lan) { //切换语言
|
|
this.currentLan = lan;
|
|
// 此处记录语言选择
|
|
this.common.setItem('lan', lan)
|
|
// 修改显示语言
|
|
this.$i18n.locale = lan;
|
|
},
|
|
logout() {
|
|
this.$confirm(this.$t('您是否确定退出当前账号？'), this.$t('提示'), {
|
|
cancelButtonText: this.$t('取消'),
|
|
confirmButtonText: this.$t('确定'),
|
|
type: 'warning'
|
|
})
|
|
.then(() => {
|
|
this.$message.success(this.$t('退出登录成功！'));
|
|
this.$store.dispatch('user/logout');
|
|
})
|
|
},
|
|
noActive() { //没激活的时候，不给点链接
|
|
this.$confirm(this.$t('您还未激活账号！'), this.$t('提示'), {
|
|
cancelButtonText: this.$t('稍后再说'),
|
|
confirmButtonText: this.$t('去激活'),
|
|
type: 'warning'
|
|
})
|
|
.then(() => {
|
|
this.postAxios('/api/levl/upload/valid')
|
|
.then(() => {
|
|
this.$message.success('激活成功！');
|
|
setTimeout(() => {
|
|
this.$store.dispatch('user/getUserStatus');
|
|
}, 600);
|
|
})
|
|
})
|
|
}
|
|
},
|
|
created() {
|
|
this.currentLan = this.common.getItem('lan') || 'cn';
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style>
|