Customer-Service-Web/service/src/components/hader.vue

<template>
	<div>
		<div class="header row allAlignment">
			<div class="row item-center box_div" style="color:#666;font-size:14px;font-weight:bold;">
				<img style="width:38px;height:38px;margin: 0 10px;" :src="img_http + user_info.user_avatar">
				你好，<span>{{user_info.user_name}}--{{user_info.group}}</span>
			</div>
			<div class="row item-center rightAlignment msg box_div" style="padding: 0 30px;font-size:12px;color:#999">
				<div>
					<el-dropdown @command="handleCommand">
						<span class="el-span-1" v-if="value == '在线'" style="color: #00eb00">
                            <i class="el-icon-user"></i>
                            {{value}}
                        </span>
                        <span class="el-span-1" v-if="value == '隐身'" style="color: gray">
                            <i class="el-icon-user"></i>
                            {{value}}
                        </span>
						<span class="el-span-1" v-if="value == '休息'" style="color: #f4f400">
                            <i class="el-icon-user"></i>
                            {{value}}
                        </span>


						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command=0>在线</el-dropdown-item>
							<el-dropdown-item command=1>隐身</el-dropdown-item>
							<el-dropdown-item command=2>休息</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
				<el-badge :value="unreadNum" class="item">
					<el-button @click="openDrawer" style="margin:0 15px">
						<i style="font-size:14px; color:#5399F5;" class="el-icon-chat-dot-square"> </i>消息中心
					</el-button>
				</el-badge>
				<span @click="isExit()" class="el-span-1"><i style="font-size:13px; margin-right: 3px; color:#5399F5;" class="el-icon-switch-button"></i>退出</span>
			</div>
		</div>
	</div>
</template>

<script>
	import Vue from 'vue';
	import '@/css/index.css'

	export default {
		name: 'hader',
		data() {
			return {
				state: true,//在线状态
				announcement: true,//公告
				network: true,
				HeadPortrait: '',
				loginTo: false,//登录状态
				options: ['在线', '隐身', '休息'],
				value: '在线',
				user_info: '',//
				userID:null,
				unreadNum:null, // 未读数量
				img_http:'http://kfadmin.bocai186.com',//图片路径域
				// img_http: 'http://192.168.2.187:8090',//图片路径域
			}
		},
		computed: {
			get_drawer() {
				return this.$store.getters.get_drawer;
			},

		},
		watch: {
			get_drawer(data) {
				this.unreadnotice();
			},
		},
		methods: {
			openDrawer() {
				this.$store.dispatch("SET_DRAWER", true);
			},
			/**********************************************/
			//切换用户状态
			handleCommand(e) {
				console.log(e,"切换用户状态");
				this.websocketsend(JSON.stringify({
					type: 'kfOnline',
					data: {
						uid: 'KF' + this.user_info.id,
						status: e * 1 + 1,
					}
				}));
				//Vue.prototype.$stateValue =  this.options[e];
				this.$store.dispatch("SET_STATEVALUE", this.options[e]);
				this.value = this.options[e];
			},

			/************************************************/
			//退出系统
			isExit() {
				this.$store.dispatch("SET_STATEVALUE", '在线');
				this.$store.dispatch("SET_SESSION",[]);//会话列表
				this.$store.dispatch("SET_USER",'');//用户退出
				this.$store.dispatch("SET_OFFLINE",[]);//离线列表
		  		this.$store.dispatch("SET_TYPE",1);//选择类型(会话/离线)
				this.$store.dispatch("SET_NUM",0);//列表下标
				this.$store.dispatch("SET_CURRENT",[]);//当前会话数据
      			this.$store.dispatch("SET_SESSION_NAME",'');//当前会话对象名
				this.$store.dispatch("SET_SESSION_MESSAGE",{});
				this.$store.dispatch("SET_SOCKET_OPEN",false);//列表下标  
				this.$websocket.close();
				// this.$socket_open = false;
				
				// console.log(this.$socket_open)
				this.$token = '';
				this.$router.push({path:'/login',query: { pid:escape("～！@#¥%……&*（）——+,./;'[]") }})
			},

			/**************************************/
			//数据发送
			websocketsend(Data) {
				this.$websocket.send(Data);
			},
			// 未读信息
			unreadnotice(){
				let str = "unreadnotice" + "customer-service" + "index" + this.time + "service";
				let obj = {
					headers: {
						"Content-Type": "application/x-www-form-urlencoded",
						apiToken: this.$md5(str),
						userToken: this.token
					},
					user_id: this.userID
				};
				this.post("api/service/index/unreadnotice", obj).then(res => {
					if(res.data.code === 1){
						// console.log(res.data.data)
						 this.unreadNum =  res.data.data.length;
					}
				});
			},
		},

		mounted() {
			if (this.$store.getters.get_stateValue) {
				this.value = this.$store.getters.get_stateValue;
			}
			this.user_info = this.$store.getters.get_user_info;
			this.userID = this.$store.getters.get_user_info.id;
			this.unreadnotice();
			let _this = this;
			let get = setTimeout(function(){
				_this.unreadnotice();
			},1000*60)



		}
	}
</script>

<style scoped>
	.header {
		width: 90vw;
		height: 7vh;
		border-bottom: 1px solid #D5E5FF;
	}

	.box_div {
		width: 50%;
		height: 100%;
		background: #ECF4FF;
	}

	.msg p {
		margin-left: 30px;
		display: flex;
		align-items: center;
	}

	.msg p img {
		margin-right: 6px;
	}

	.el-span-1 {
		margin-left: 6px;
		font-size: 14px;
		color: #666;
	}

	.el-span-1:hover {
		color: #5399f5;
		cursor: pointer;
		font-weight: 400;
	}

	button {
		outline: none;
		/* border: 1px solid #ECF4FF; */
	}

	.el-button {
		background: #ECF4FF;
		font-size: 14px;
		color: #666;
	}

	.el-button:hover {
		color: #5399f5;
	}

	.msg_left {
		width: 360px;
		height: 400px !important
	}

	.msg_right {
		width: 440px;
	}

	.el-popover {
		height: 700px !important;
	}

	/* .el-dropdown{
		border: 1px solid #ECF4FF;
	} */
</style>

<style>
	.el-badge__content.is-fixed {
		position: absolute;
		top: -2px !important;
		right: 18px !important;
	}
</style>