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}}
				</p>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "leftNav",
		data() {
			return {
				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
				}

				this.$store.dispatch("SET_NAVSTATE", str);
				// this.$store.dispatch("SET_DRAWER",false);
				this.$router.push({path,query: { pid:escape("～！@#¥%……&*（）——+,./;'[]") }});
			}
		},
		// computed: {
		//   getTitleActive() {
		//     return this.titleActive;
		//   }
		// },
		// watch: {
		//   getTitleActive(val) {
		//     console.log(this.titleActive =='TheCurrentSession'? '' : val)
		//     this.$router.push("/" + this.titleActive =='TheCurrentSession'? '' : val);
		//   }
		// },
		mounted() {

			this.titleActive = this.$store.getters.get_navState;
			this.logo = sessionStorage.getItem('logo');
			console.log(this.logo, '========logo')
			// // 获取系统时间
			// this.get('api'+this.$ports.TIME).then(res => {
			//   if (res.data.data.time) {
			//     sessionStorage.setItem("time", res.data.data.time);
			//     let apiToken = this.$md5('customer-service'+res.data.data.time+window.location.origin)
			//     sessionStorage.setItem('apiToken',apiToken)
			//   }
			// });
		},
	};
</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;
	}
</style>