343 lines
11 KiB
Vue
343 lines
11 KiB
Vue
<template>
|
|
<div class="nav">
|
|
<div class="logo" :style="{'background-color': types == 0 ? 'unset' : ''}" @click="toindex">
|
|
|
|
<img src="@/static/images/logo.png" alt="" class="img">
|
|
<div class="title" :style="{'color': types == 0 ? '#07AD97' : ''}">Beelink</div>
|
|
</div>
|
|
<div class="navigation">
|
|
<div class="item" v-for="(i,j) in nav" :key="j" @click="navto(j)">
|
|
<div :class="i.route==nowroute?'active':''">{{i.name}}</div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%"></div>
|
|
<div class="setting">
|
|
<a-dropdown :trigger="['click']" :getPopupContainer="triggerNode => triggerNode.parentNode">
|
|
<div class="item" @click="e => e.preventDefault()">
|
|
<img src="@/static/images/shijian.png" alt="" class="icon">
|
|
<div class="name">{{userinfo.zoneStr}}</div>
|
|
<img src="@/static/images/jiantou2.png" alt="" class="down">
|
|
</div>
|
|
<template v-slot:overlay >
|
|
<a-menu style="max-height:70vh;overflow: auto;">
|
|
<!-- 时区 -->
|
|
<a-menu-item v-for="(i,j) in zonelist" :key="j" @click="zonechange(i.zoneid)" style="position: relative;">
|
|
<div class="selitem">
|
|
<span>{{i.city}}{{i.gmt}}</span>
|
|
<img src="@/static/images/duihao.png" alt="" v-if="i.zoneid == userinfo.zoneid" class="duihao">
|
|
</div>
|
|
</a-menu-item>
|
|
<!-- <a-menu-item key="1">
|
|
<div class="selitem">
|
|
<span>时区2a</span>
|
|
</div>
|
|
</a-menu-item>
|
|
<a-menu-item key="3">
|
|
<div class="selitem">
|
|
<span>时区3a</span>
|
|
</div>
|
|
</a-menu-item> -->
|
|
</a-menu>
|
|
</template>
|
|
</a-dropdown>
|
|
|
|
<a-dropdown :trigger="['click']" :getPopupContainer="triggerNode => triggerNode.parentNode">
|
|
<div class="item" @click="e => e.preventDefault()">
|
|
<img src="@/static/images/qianbi.png" alt="" class="icon">
|
|
<div class="name">{{userinfo.currency}}</div>
|
|
<img src="@/static/images/jiantou2.png" alt="" class="down">
|
|
</div>
|
|
<template v-slot:overlay>
|
|
<a-menu style="max-height:70vh;overflow: auto;">
|
|
<!-- 货币 -->
|
|
<a-menu-item v-for="(i,j) in currencylist" :key="j" style="position: relative;">
|
|
<div class="selitem" @click="currencychange(i.value)">
|
|
<span>{{i.name}} </span>
|
|
<img src="@/static/images/duihao.png" alt="" v-if="i.name == userinfo.currency" class="duihao">
|
|
</div>
|
|
</a-menu-item>
|
|
<!-- <a-menu-item key="1">
|
|
<div class="selitem">
|
|
<span>时区2b</span>
|
|
</div>
|
|
</a-menu-item>
|
|
<a-menu-item key="3">
|
|
<div class="selitem">
|
|
<span>时区3b</span>
|
|
</div>
|
|
</a-menu-item> -->
|
|
</a-menu>
|
|
</template>
|
|
</a-dropdown>
|
|
<a-dropdown :trigger="['click']" :getPopupContainer="triggerNode => triggerNode.parentNode">
|
|
<div class="item" @click="e => e.preventDefault()">
|
|
<img src="@/static/images/yuyan.png" alt="" class="icon">
|
|
<div class="name">{{userinfo.language}}</div>
|
|
<img src="@/static/images/jiantou2.png" alt="" class="down">
|
|
</div>
|
|
<template v-slot:overlay>
|
|
<a-menu style="max-height:70vh;overflow: auto;">
|
|
<!-- 语言 -->
|
|
<a-menu-item v-for="(i,j) in languagelist" :key="j" style="position: relative;">
|
|
<div class="selitem" @click="setlanguage(i.value)">
|
|
<span>{{i.name}}</span>
|
|
<img src="@/static/images/duihao.png" alt="" v-if="i.name == userinfo.language" class="duihao">
|
|
</div>
|
|
</a-menu-item>
|
|
<!-- <a-menu-item key="1">
|
|
<div class="selitem">
|
|
<span>时区2cc</span>
|
|
</div>
|
|
</a-menu-item>
|
|
<a-menu-item key="3">
|
|
<div class="selitem">
|
|
<span>时区3c</span>
|
|
</div>
|
|
</a-menu-item> -->
|
|
</a-menu>
|
|
</template>
|
|
</a-dropdown>
|
|
<div class="item" style="border-right: none;" @click="navto('/regime/date')">
|
|
<img src="@/static/images/rili.png" alt="" class="icon">
|
|
<div class="name">{{lan.$t('rili')}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.nav ::v-deep(.ant-dropdown-menu-item:hover, .ant-dropdown-menu-submenu-title:hover){
|
|
background: white;
|
|
.selitem{
|
|
color:#06C7AE ;
|
|
}
|
|
}
|
|
.nav{
|
|
display: flex;
|
|
user-select: none;
|
|
.duihao{
|
|
width: 15px;
|
|
height: 15px;
|
|
position: absolute;
|
|
right: 15px;
|
|
top: 8px;
|
|
}
|
|
.logo{
|
|
width: 171px;
|
|
height: 57px;
|
|
background-color: #06C7AE;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
.img{
|
|
width: 38px;
|
|
height: 38px;
|
|
margin-left: 14px;
|
|
border-radius: 50%;
|
|
}
|
|
.title{
|
|
margin-left: 9px;
|
|
font-size: 17px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
.navigation{
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
margin-left: 28px;
|
|
.item{
|
|
padding: 0 28px;
|
|
height: 18px;
|
|
border-right: 1px solid #eee;
|
|
font-size: 11px;
|
|
color: #111;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
&:last-child{
|
|
border-right: none;
|
|
}
|
|
}
|
|
.item:hover{
|
|
color: #06C7AE;
|
|
}
|
|
}
|
|
.active{
|
|
color: #06C7AE;
|
|
}
|
|
.setting{
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
padding: 0 16px;
|
|
.selitem{
|
|
text-align: center;
|
|
font-size: 11px;
|
|
color: #111;
|
|
}
|
|
.item{
|
|
display: flex;
|
|
align-items: center;
|
|
border-right: 1px solid #eee;
|
|
padding: 0 23px;
|
|
height: 18rpx;
|
|
.icon{
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
.name{
|
|
margin-left: 6px;
|
|
font-size: 11px;
|
|
color: #111;
|
|
font-weight: bold;
|
|
}
|
|
.down{
|
|
width: 9px;
|
|
height: 5px;
|
|
margin-left: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { editsystemsetting, getcurrencys, getlanguages, getzonelist } from '@/api';
|
|
import router from '@/router';
|
|
import store from '@/store';
|
|
import { computed, defineComponent, onMounted, ref } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import axios from 'axios'
|
|
import { useI18n } from '@/utils/i18n';
|
|
|
|
export default defineComponent({
|
|
props:{
|
|
type: {
|
|
type: Number,
|
|
default:0
|
|
}
|
|
},
|
|
setup(props){
|
|
const lan: any = useI18n();
|
|
|
|
const routes = useRoute();
|
|
console.log(routes.path);
|
|
const types = ref(props.type)
|
|
const zonelist=ref<any>([{
|
|
city: "中途岛",
|
|
gmt: "GMT-11:00",
|
|
id: "Pacific/Midway",
|
|
zoneid: 1
|
|
|
|
}])
|
|
const selectedzone=ref([])
|
|
const currencylist=ref<any>([{
|
|
alias: "CNY",
|
|
code: "104110041000",
|
|
createdAt: "2020-08-19 11:54:59",
|
|
deletedAt: null,
|
|
dictionaryid: 241,
|
|
name: "人民币￥",
|
|
position: 1,
|
|
publish: 1,
|
|
updatedAt: "2020-08-19 11:54:59",
|
|
value: "1"
|
|
}])
|
|
const languagelist=ref<any>([{
|
|
alias: "",
|
|
code: "104110011000",
|
|
createdAt: "2020-08-14 11:08:28",
|
|
deletedAt: null,
|
|
dictionaryid: 210,
|
|
name: "中文",
|
|
position: 1,
|
|
publish: 1,
|
|
updatedAt: "2020-08-14 11:08:28",
|
|
value: "zh"
|
|
}])
|
|
console.log(types.value)
|
|
interface Nav{
|
|
name: string;
|
|
route: string;
|
|
}
|
|
const nav: Array<Nav> = [
|
|
{
|
|
name: lan.$t('zhiboguanli'),
|
|
route: "/regime/live"
|
|
},
|
|
{
|
|
name: lan.$t('shipinguanli'),
|
|
route: "/regime/video"
|
|
},
|
|
{
|
|
name: lan.$t("dingyuezheguanli"),
|
|
route: "/regime/subscriber"
|
|
},
|
|
{
|
|
name: lan.$t("gerenzhongxin"),
|
|
route: "/mine/archives"
|
|
}
|
|
]
|
|
const userinfo = computed(() => {
|
|
return store.state.userinfo;
|
|
})
|
|
const nowroute=ref<string>("")
|
|
|
|
function navto(index: number | string){
|
|
if(!store.state.islogin){
|
|
return ;
|
|
}
|
|
if(typeof index == "number"){
|
|
nowroute.value=nav[index].route
|
|
router.push({
|
|
path: nav[index].route
|
|
})
|
|
}else{
|
|
router.push(index)
|
|
}
|
|
|
|
}
|
|
onMounted(async () => {
|
|
zonelist.value=await getzonelist()
|
|
// console.log(zonelist.value)
|
|
currencylist.value=await getcurrencys()
|
|
languagelist.value=await getlanguages()
|
|
console.log(routes.path)
|
|
nowroute.value=routes.path
|
|
})
|
|
|
|
function zonechange(e?: any){
|
|
// console.log(e,1002)
|
|
editsystemsetting({zoneid:e})
|
|
}
|
|
function currencychange(e?: any){
|
|
console.log(e)
|
|
editsystemsetting({currency:parseInt(e)})
|
|
}
|
|
function setlanguage(e?: any){
|
|
console.log(e)
|
|
editsystemsetting({language:e})
|
|
lan.locale.value = e
|
|
}
|
|
function toindex(){
|
|
router.push("/")
|
|
}
|
|
|
|
return {
|
|
nav,
|
|
types,
|
|
navto,
|
|
userinfo,
|
|
zonelist,
|
|
zonechange,
|
|
selectedzone,
|
|
currencylist,
|
|
currencychange,
|
|
languagelist,
|
|
setlanguage,
|
|
nowroute,
|
|
toindex,
|
|
lan
|
|
}
|
|
}
|
|
})
|
|
</script> |