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

<template>
	<div>
		<div class="left_box">
			<div class="header row center">
				<img id="logo" :src="img_http + logo" alt="">
			</div>
			<div class="nav">
				<p
						class="title row item-center"
						:class="titleActive == item.type?'titleActive':''"
						v-for="(item,index) in data"
						:key="index"
						@click="titleClick(item.type)"
				>
					<img style="margin-right:10px;" :src="titleActive == item.type?item.imgsrcA:item.imgsrc"/>
					{{item.title}}
					<el-badge :value="megnum" class="item" v-if="index == 0 && showMeg">
						<i style="font-size:14px; color:#5399F5;   margin-left: 10px;"
						   class="el-icon-chat-dot-square"> </i>
					</el-badge>
				</p>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "leftNav",
		data() {
			return {
				megnum: 0,
				showMeg: false,
				logo: '',
				img_http: 'http://kfadmin.bocai186.com',//图片路径域
				// img_http: 'http://192.168.2.187:8090',//图片路径域
				titleActive: "TheCurrentSession",
				data: [
					{
						title: "当前会话",
						type: "TheCurrentSession",
						imgsrc: require("@/assets/img/left1.png"),
						imgsrcA: require("@/assets/img/left1a.png"),
					},
					{
						title: "留言",
						type: "LeaveMessage",
						imgsrc: require("@/assets/img/left2.png"),
						imgsrcA: require("@/assets/img/left2a.png")
					},
					{
						title: "历史会话",
						type: "SessionHistory",
						imgsrc: require("@/assets/img/left3.png"),
						imgsrcA: require("@/assets/img/left3a.png")
					},
					{
						title: "个人信息",
						type: "PersonalInformation",
						imgsrc: require("@/assets/img/left4.png"),
						imgsrcA: require("@/assets/img/left4a.png")
					},
					{
						title: "快捷回复",
						type: "FastReply",
						imgsrc: require("@/assets/img/left5.png"),
						imgsrcA: require("@/assets/img/left5a.png")
					}
				]
			};
		},
		methods: {
			// 激活样式
			titleClick(str) {
				this.titleActive = str;
				let path = '/'
				if (str != 'TheCurrentSession') {
					path = "/" + str
				}
				if(str == 'TheCurrentSession'){
					this.$store.dispatch("SET_MEG", false);
					this.megnum = 0;
					this.$store.dispatch("SET_MEGNNUM",0);
				}else {
					this.$store.dispatch("SET_MEG", true);
				}

				this.$store.dispatch("SET_NAVSTATE", str);
				// this.$store.dispatch("SET_DRAWER",false);
				this.$router.push({path, query: {pid: escape("这就是一个编码没有什么用啊")}});
			}
		},

		computed: {
			getTitleActive() {
				return this.$store.getters.get_megnum
			}
		},
		watch: {
			getTitleActive(val){
				this.megnum = this.megnum = val;
			}
		},
		mounted() {
			this.titleActive = this.$store.getters.get_navState;
			this.logo = sessionStorage.getItem('logo');
			this.showMeg = this.$store.getters.get_meg;
			this.megnum = this.$store.getters.get_megnum;
		},
	};
</script>

<style scoped>
	#logo {
		width: 40px;
		height: 40px;
	}

	.left_box {
		width: 10vw;
		height: 100vh;
		background: #122757;
	}

	.header {
		height: 60px;
		font-size: 24px;
		color: #eaf3ff;
		font-weight: bold;
	}

	.title {
		font-size: 14px;
		padding: 0 20px;
		height: 48px;
		color: #7ba2d8;
	}

	.titleActive {
		color: #eaf3ff;
		background: #0d1f47;
	}

	.nav p {
		cursor: pointer;
	}
</style>