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

<template>
	<div>
		<div class="header1">
			<div class="header2">
				<div class="language">
					<span
						class="active"
						v-if="
							$store.state.router != 'ConferenceNetwork' &&
							$store.state.router != 'MeetingApplyForm'
						"
					>
						<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 style="margin-right: 9px" class="cursor" @click="locale('en')"
							>EN</span
						>
					</span>
					<span class="active" style="float: right">
						<span
							class="cursor"
							style="margin-right: 12px"
							@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
							class="cursor"
							style="margin-right: 12px"
							@click="toView(2, 'login', '')"
							v-if="i == 1"
							><img
								src="@/assets/登录.png"
								style="height: 12px; width: 12px; margin-right: 4px"
							/>{{ $t('common.login') }}</span
						>
						<!-- <span class="cursor" style="margin-right: 12px;" v-if="i==2 || i==3">{{ $t('common.OngoingProject')}}（<span style="color: #ff0000;">0</span>）</span> -->
						<!-- <span class="cursor" style="margin-right: 12px;" v-if="i==2 || i==3">{{ $t('common.MyAttention')}}（<span style="color: #ff0000;">0</span>）</span> -->
						<!-- <span class="cursor" style="margin-right: 12px;" v-if="i==2 || i==3">{{ $t('common.MyCollection')}}</span> -->
						<i
							class="el-icon-s-custom"
							style="color: #fff; margin-right: 4px"
							v-if="i == 2 || i == 3"
						></i>
						<el-dropdown
							trigger="click"
							@command="handleCommand"
							v-if="i == 2 || i == 3"
						>
							<!-- <i class="el-icon-s-custom" style="color: #fff;"></i> -->
							<span
								style="margin-right: 9px; cursor: pointer; font-size: 16px"
								v-if="i == 2 || i == 3"
							>
								{{ $t('common.Usercenter') }}
								<i class="el-icon-arrow-down"></i>
								<el-dropdown-menu slot="dropdowns">
									<el-dropdown-item
										v-for="(item, index) in options"
										:key="index"
										:command="item"
										>{{ $t(item.label) }}
										<el-dropdown-menu slot="dropdowns">
											<el-dropdown-item
												v-for="(item, index) in options"
												:key="index"
												:command="item"
												>{{ $t(item.label) }}
											</el-dropdown-item>
										</el-dropdown-menu>
									</el-dropdown-item>
								</el-dropdown-menu>
							</span>
						</el-dropdown>
						<i
							class="el-icon-message-solid"
							style="margin-left: 20px; color: #fff"
							v-if="i == 2 || i == 3"
						></i>
						<span
							class="cursor"
							@click="
								systemMessageNumToView(0, 'SystemMessage', '/SystemMessage')
							"
							style="margin-right: 12px"
							v-if="i == 2 || i == 3"
						>
							{{ $t('common.MessageNotification') }}
							（ <span style="color: #ff0000">{{ systemMessageNum }}</span> ）
						</span>

						<!-- <span class="cursor" style="margin-right: 12px;" @click="toView(2,'customerService')">{{ $t('common.CustomerService')}}</span> -->
						<!-- <span class="cursor" style="margin-right: 12px;" @click="toView(2,'helpCenter')">{{ $t('common.HelpCenter')}}</span> -->
					</span>
				</div>
				<div class="logo">
					<img
						src="@/assets/img/home/LOGO2020-12-22.png"
						alt=""
						style="width: 260px"
						class="cursor"
						@click="toView(0, 'home')"
					/>
				</div>
				<div class="title" v-show="searchLoad">
					<!-- <span  class="cursor" style="font-family: Microsoft YaHei;font-size: 34px;">GEIDCP</span>  -->
					<span style="float: left; width: 74%">
						<el-input
							:placeholder="$t('common.EnterContent')"
							class="input-with-select"
							v-model="homeItemTitle"
							maxlength="50"
							show-word-limit
							@keyup.enter.native="toViewChange('WholeStationSearch')"
						>
							<el-select v-model="select" slot="prepend">
								<el-option
									:label="$t('common.WholeStation')"
									value="all"
								></el-option>
								<el-option
									:label="$t('common.Project')"
									value="project"
								></el-option>
								<el-option
									:label="$t('common.Enterprise')"
									value="unit"
								></el-option>
								<el-option
									:label="$t('common.News')"
									value="information"
								></el-option>
								<el-option
									:label="$t('common.Events')"
									value="activity"
								></el-option>
								<el-option
									:label="$t('common.Conference')"
									value="meeting"
								></el-option>
								<el-option
									:label="$t('common.Publications')"
									value="journal"
								></el-option>
								<el-option
									:label="$t('common.Country')"
									value="country"
								></el-option>
							</el-select>
							<el-button
								slot="append"
								icon="el-icon-search"
								@click="toViewChange('WholeStationSearch')"
							></el-button>
						</el-input>
					</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import Bus from '@/api/bus' //注意引入
import { selectPushMsgNum, selectNoticeInfoNum } from '@/api/userCenter'
export default {
	name: 'HeaderItem',
	props: ['selectShow'],
	data() {
		return {
			//消息通知消息类型
			messageType: 0,
			title: '项目资源',
			systemMessageNum: 0,
			homeItemTitle: '',
			select: 'all',
			searchLoad: true,
			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.BasicInformation',
					json: 'information',
				},
				{
					value: 'loginOut',
					label: 'common.Logout',
					json: '',
				},
			],
		}
	},
	created() {
		Bus.$on('title', (val) => {
			this.title = val.label
		})
		// Bus.$on("serch", (val) => {
		//     this.serch=val.label.substring(0,2)
		// });
	},
	watch: {
		'$route.path'() {
			this.getSearchLoad()
		},
		'$i18n.locale'() {
			if (this.$i18n.locale == 'en' && this.$Cookies.get('token')) {
				this.i = 3
			} else if (this.$i18n.locale == 'zh' && this.$Cookies.get('token')) {
				this.i = 2
			} else {
				this.i = 1
			}
		},
	},

	mounted() {
		this.getSearchLoad()
		this.getInitData()
		this.getMessageNum()
	},
	methods: {
		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
					}
				})
			}
		},
		getSearchLoad() {
			let router = this.$route.path
			this.searchLoad = true
			if (router == '/WholeStationSearch') {
				this.searchLoad = false
				this.$forceUpdate()
			}
		},
		getInitData() {
			let locale = window.localStorage.getItem('locale')
			if (!locale) {
				this.$store.commit('modify', router)
				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)
			}
		},
		handleCommand(command) {
			if (command.value == 'loginOut') {
				sessionStorage.removeItem('pathReminder')
				this.loginOut()
			} else {
				this.toView(0, command.value, command.json)
			}
		},
		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'))
			this.$bus.emit('setLang', window.localStorage.getItem('locale'))
		},
		loginOut() {
			this.$confirm(
				this.$t('common.Thisoperationwilllogout') + '?',
				this.$t('common.Tips'),
				{
					confirmButtonText: this.$t('common.OK'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning',
				}
			)
				.then(() => {
					// Cookies.remove('login');
					// let ss=Cookies.get('login');
					// debugger
					// 退出的逻辑代码
					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')
					// debugger
					this.getInitData()
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: this.$t('common.Cancelled'),
					})
				})
		},
		toViewChange(router, json) {
			if (!this.homeItemTitle) {
				this.$message({
					message: this.$t('common.Theinputboxcannotbeempty'),
					type: 'warning',
				})
			} else {
				this.$store.commit('modify', router)
				window.localStorage.setItem('router', router)
				const { href } = this.$router.resolve({
					name: router,
					query: {
						select: this.select,
						input: this.homeItemTitle,
					},
				})
				window.open(href, '_blank')
			}
		},
		systemMessageNumToView(num, router, json) {
			if (this.messageType == 2) {
				this.toView(0, 'notification', '/notification')
			} else {
				this.toView(0, 'SystemMessage', '/SystemMessage')
			}
		},
		toView(num, router, json) {
			if (json) {
				this.$store.commit('modify', router)
				window.localStorage.setItem('router', router)
				this.$router.push({ name: router, query: { key: json } })
			} else {
				this.$store.commit('modify', router)
				window.localStorage.setItem('router', router)
				this.$router.push({ name: 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)
				})
			}
		},
	},
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
body {
	margin: 0;
	padding: 0;
}
.header1 {
	/* width:1500px; */
	height: 170px;
	margin: auto;
	/* background: #2c558a; */
	/* background: url("../assets/img/home/banner2.jpg") no-repeat ; */
	/* animation: panoramic 10s linear infinite alternate; */
}
/* .header1:hover {
              animation-play-state: paused;
  } */

/* @keyframes panoramic {
      to {
          background-position: 100% 0;
      }
  } */
.header2 {
	width: 1200px;
	height: 170px;
	margin: auto;
	position: relative;
	/* background: skyblue; */
}
.language {
	line-height: 12px;
	color: #f9f9f9;
	font-weight: 400;
	font-size: 16px;
	padding-top: 15px;
}
.logo {
	position: absolute;
	top: 50px;
	left: 70px;
	/* width: 200px; */
	/* height: 55px; */
	margin-top: 15px;
	/* background-image: url(@/assets/logo.png); */
}
.title {
	margin-top: 15px;
	position: absolute;
	top: 60px;
	left: 605px;
	font-size: 27px;
	font-weight: 700;
	height: 50px;
	color: #fff;
	width: 705px;
}
@media (max-width: 1199px) {
	.title {
		width: 580px;
	}
}
.header1 >>> .el-input__inner {
	height: 50px !important;
}
.header1 >>> .el-input-group__prepend {
	background-color: #fff;
	color: #000;
}

.active span:hover {
	color: #ff0000;
	cursor: pointer;
}
.el-dropdown {
	color: #f9f9f9;
	font-size: 16px;
}
.header1 >>> .el-select {
	width: 88px;
}
</style>