dev/dcp-web-gate/src_old/components/ballotHeader.vue

<template>
    <div>
        <div class="header-container">
            <div class="header-content">
                <span class="active language">
                    <span style="
							display: inline-block;
							width: 226px;
							height: 100%;
							position: relative;
							vertical-align: middle;
							margin-right: 20px;
						">
                        <img src="@/assets/img/home/LOGO2020-12-22.png" alt="" style="
								width: 80%;
								height: 70%;
								position: absolute;
								left: 50%;
								top: 50%;
								transform: translate(-50%, -50%);
							" />
                    </span>
                    <span class="cursor" @click="locale('zh')">{{
                    $t('common.CN')
                    }}</span>
                    <span style="
							margin: 0 14px;
							display: inline-block;
							width: 2px;
							height: 14px;
							background: #f9f9f9;
						"></span>
                    <span class="cursor" @click="locale('en')">EN</span>
                </span>
                <span class="active" style="float: right">
                    <span style="margin-left: 20px" @click="toView(2, 'Register', '')" v-if="i == 1">
                        <img src="@/assets/注册.png" style="height: 12px; width: 12px; margin-right: 4px" />{{
                        $t('common.register') }}</span>
                    <span style="margin-left: 20px" @click="toView(2, 'login', '')" v-if="i == 1"><img
                            src="@/assets/登录.png" style="height: 12px; width: 12px; margin-right: 4px" />{{
                            $t('common.login') }}</span>
                    <i class="el-icon-s-custom" style="color: #fff; margin-right: -15px" v-if="i == 2 || i == 3"></i>
                    <el-dropdown trigger="click" @command="handleCommand" style="margin-left: 20px"
                        v-if="i == 2 || i == 3">
                        <span class="el-dropdown-link">
                            {{ $t('common.Usercenter') }}
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-for="(item, index) in options" :key="index" :command="item">
                                {{ $t(item.label) }}</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <i class="el-icon-message-solid" style="margin-left: 20px; color: #fff" v-if="i == 2 || i == 3"></i>
                    <span @click="
                    	systemMessageNumToView(0, 'SystemMessage', '/SystemMessage')
                    " v-if="i == 2 || i == 3">
                        {{ $t('common.MessageNotification') }}(
                        <span style="color: #ff0000">{{ systemMessageNum }} </span>)
                    </span>
                    <!--            <span-->
                    <!--              style="margin-left: 20px;"-->
                    <!--              @click="toView(2,'helpCenter')"-->
                    <!--            >{{ $t('common.HelpCenter')}}</span>-->
                </span>
            </div>
            <div class="banner-container">
                <el-carousel :interval="5000" arrow="never">
                    <el-carousel-item key="item1" style="height: 350px; width: 100%">
                        <img @click="getNum" class="banner" src="@/assets/ballot/网站_画板 1.png" alt="" />

                        <!-- <img class="logo1" v-show="$i18n.locale == 'zh'" src="@/assets/img/home/fengcheBlue.png" alt=""> -->
                        <!-- <img class="logo1" v-show="$i18n.locale == 'en'" src="@/assets/img/home/enBlue.png" alt=""> -->
                    </el-carousel-item>
                    <!-- <el-carousel-item key="item2" style="height: 350px;">
                        <img class="banner" src="@/assets/img/home/bannerFenche.jpg" alt="">
                        <img class="logo1" v-show="$i18n.locale == 'zh'" src="@/assets/img/home/fengche.png" alt="">
                        <img class="logo1" v-show="$i18n.locale == 'en'" src="@/assets/img/home/enYellow.png" alt="">
                    </el-carousel-item> -->
                    <!-- <el-carousel-item key="item3" style="height: 350px;">
                        <img class="banner" src="@/assets/img/home/bannerTaiyang.png" alt="">
                        <img class="logo1" v-show="$i18n.locale == 'zh'" src="@/assets/img/home/taiyang.png" alt="">
                        <img class="logo1" v-show="$i18n.locale == 'en'" src="@/assets/img/home/enXing.png" alt="">
                    </el-carousel-item> -->
                </el-carousel>
                <!-- <div class="banner-content">
              <img class="logo" src="@/assets/img/home/logo1.png" alt="">
  
            </div> -->
            </div>
        </div>
    </div>
</template>

<script>
import Bus from '@/api/bus' //注意引入
import { selectPushMsgNum, selectNoticeInfoNum } from '@/api/userCenter'
export default {
	name: 'Headers',
	data() {
		return {
			arrowList: false,
			//消息通知消息类型
			messageType: 0,
			systemMessageNum: 0,
			i: '1',
			options: [
				{
					value: 'userCenterView',
					label: 'common.Usercenter',
					json: '',
				},
				{
					value: 'SystemMessage',
					label: 'common.MessageCenter',
					json: '/SystemMessage',
				},
				{
					value: 'myConcerns',
					label: 'common.ManagementCenter',
					json: '/myConcerns',
				},
				{
					value: 'information',
					label: 'common.MyAccount',
					json: '/information',
				},
				{
					value: 'loginOut',
					label: 'common.Logout',
					json: '',
				},
			],
		}
	},

	mounted() {
		this.getInitData()
		this.getMessageNum()
	},
	methods: {
		getNum() {
			// this.$emit('getLoginNum', true)
			// this.$parent.getLogin()
            this.$router.push({ path: 'videoInfo1' })
		},
		getInitData() {
			debugger
			let locale = window.localStorage.getItem('locale')
			if (!locale) {
				window.localStorage.setItem('locale', 'en')
			}
			document.title = this.$t('common.GEIDcpTitleSeptember')
			this.$i18n.locale = locale
			console.log(
				window.localStorage.getItem('locale'),
				window.localStorage.getItem('userLogin')
			)
			//if (window.localStorage.getItem('userLogin')) {
			if (this.$Cookies.get('token') && this.$i18n.locale == 'zh') {
				return (this.i = 2)
			} else if (this.$i18n.locale == 'en' && this.$Cookies.get('token')) {
				return (this.i = 3)
			} else {
				return (this.i = 1)
			}
			debugger
			if (this.i != 1) {
				this.getMessageNum()
			}
		},
		getMessageNum() {
			if (this.i != 1) {
				this.messageType = 0
				this.systemMessageNum = 0
				let readStatus = 'unread'
				selectPushMsgNum(readStatus).then((res) => {
					if (res.data.page.totalCount > 0) {
						this.systemMessageNum =
							this.systemMessageNum + parseInt(res.data.page.totalCount)
						this.messageType = 1
					}
				})
				selectNoticeInfoNum(readStatus).then((res) => {
					if (res.data.page.totalCount > 0) {
						this.systemMessageNum =
							this.systemMessageNum + parseInt(res.data.page.totalCount)
						this.messageType = 2
					}
				})
			}
		},
		locale(lang) {
			this.$i18n.locale = lang
			let locale = window.localStorage.getItem('locale')
			if (locale) {
				window.localStorage.setItem('locale', lang)
			} else {
				window.localStorage['locale'] = lang
			}
		},
		getInitData() {
			let locale = window.localStorage.getItem('locale')
			let langdefaultLanguage = navigator.language || navigator.userLanguage //常规浏览器语言和IE浏览器
			langdefaultLanguage = langdefaultLanguage.substr(0, 2) //截取lang前2位字符
			if (langdefaultLanguage !== 'zh') {
				langdefaultLanguage = 'en'
			}
			if (!locale) {
				window.localStorage.setItem('locale', langdefaultLanguage)
				locale = langdefaultLanguage
			}
			this.$i18n.locale = locale
			console.log(
				window.localStorage.getItem('locale'),
				window.localStorage.getItem('userLogin')
			)
			//if (window.localStorage.getItem('userLogin')) {
			if (this.$Cookies.get('token') && this.$i18n.locale == 'zh') {
				return (this.i = 2)
			} else if (this.$i18n.locale == 'en' && this.$Cookies.get('token')) {
				return (this.i = 3)
			} else {
				return (this.i = 1)
			}
		},
		locale(lang) {
			this.$i18n.locale = lang
			let locale = window.localStorage.getItem('locale')
			if (locale) {
				window.localStorage.setItem('locale', lang)
			} else {
				window.localStorage['locale'] = lang
			}
			console.log(window.localStorage.getItem('locale'))
		},
		handleCommand(command) {
			if (command.value == 'loginOut') {
				sessionStorage.removeItem('pathReminder')
				this.loginOut()
			} else {
				this.toView(0, command.value, command.json)
			}
		},
		// 退出登录
		loginOut() {
			this.$confirm(
				this.$t('common.Thisoperationwilllogout') + '?',
				this.$t('common.Tips'),
				{
					confirmButtonText: this.$t('common.OK'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning',
				}
			)
				.then(() => {
					// 退出的逻辑代码
					this.$store
						.dispatch('user/LOGOUT')
						.then(() => {
							// location.href = "/";
							this.$router.push({
								path: '/login',
							})
						})
						.catch((error) => {
							location.href = '/'
						})
					// this.toView(2,'login','')// 返回登录
					// window.localStorage.removeItem('token')
					window.sessionStorage.removeItem('token')
					// Cookies.remove('login');

					this.getInitData()
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: this.$t('common.Cancelled'),
					})
				})
		},
		systemMessageNumToView(num, router, json) {
			if (this.messageType == 2) {
				this.toView(0, 'notification', '/notification')
			} else {
				this.toView(0, 'SystemMessage', '/SystemMessage')
			}
		},
		toView(num, router, json) {
			this.$router.push({ name: router, query: { key: json } })
			// this.$store.state.router=router
			this.$store.commit('modify', router)
			// this.$router.push({name:'userCenterView'})
			//  this.$store.state.router=router
			// this.$store.commit('modify', router)
			window.localStorage.setItem('router', router)
			if (num == 1) {
				let i = {
					label: '用户中心',
					value: 'userCenterView',
				}
				if (this.$Cookies.get('token')) {
					return (this.i = 2)
				} else if (this.$i18n.locale == 'en') {
					return (this.i = 3)
				} else {
					return (this.i = 1)
				}
				this.$nextTick(() => {
					Bus.$emit('title', i)
				})

				//  this.BusChange(i)
			}
		},
	},
}
</script>
<style scoped>
* {
	box-sizing: border-box;
}

.header-container {
	width: 100%;
	background: #0e4891;
}

.header-content {
	width: 1200px;
	height: 60px;
	margin: 0 auto;
	color: #f9f9f9;
	font-weight: 400;
	font-size: 16px;
	line-height: 60px;
}

/* .language span{
                  display: inline-block;
                  height: 14px;
                }
                .language span:first-child{
                  position: relative;
                }
                .language span:first-child::after{
                  content: '';
                  display: inline-block;
                  width: 2px;
                  height: 14px;
                  background: #F9F9F9;
                  position: absolute;
                  top: 0;
                  right: 0;
                } */
.banner-container {
	position: relative;
}

/deep/ .el-carousel__button {
	width: 0px;
	height: 0px;
	display: none;
}

.banner-content {
	width: 1200px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -600px;
}

.logo {
	position: absolute;
	top: 27px;
	left: 0;
}

.header-container >>> .el-carousel__container {
	height: 350px;
}

.logo1 {
	width: 600px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.banner {
	cursor: pointer;
	width: 100%;
	height: 100%;
}

.title {
	position: absolute;
	top: 60px;
	left: 450px;
	font-size: 30px;
	font-weight: 700;
	color: #fff;
}

.active span:hover {
	color: #ff0000;
	cursor: pointer;
}

.header-container /deep/ .el-dropdown {
	color: #f9f9f9;
	font-size: 16px;
}
</style>