realty/virgo.wzfrontend/workark/src/layout/workLayout.vue

<template>
	<div class="work-layout">
		<top-nav></top-nav>
		<div :class="isCollapse ? 'small-main work-layout-main':'work-layout-main'">
			<div class="app-main-box">
				<el-menu router :default-active="key" :collapse="isCollapse" :collapse-transition="false">
					<sub-menu :menuData="menuList" :menuIndex="1"></sub-menu>
				</el-menu>
			</div>
			<div class="app-main-button" @click="isCollapse = !isCollapse">
				<i :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'"></i>
				<div class="app-main-icon">收起导航</div>
			</div>
		</div>
		<bread-crumb :class="isCollapse ? 'small-crumb':''"></bread-crumb>
		<div :class="isCollapse ? 'small-content work-layout-content':'work-layout-content'">
			<transition name="slide-fade">
				<router-view :key="key" />
			</transition>
		</div>
		<div class="chat-box">
			<el-badge :value="badge" :hidden="!badge" class="item">
				<div class="chat" @click="openChat(1)">
					<i class="el-icon-s-comment"></i>
				</div>
			</el-badge>
		</div>
		<div class="chat-box customer-serve" v-if="isCustomer">
			<el-badge :value="badges" :hidden="!badges" class="item">
				<div class="chat" @click="openChat(2)">
					<i class="iconfont huifont-kefu"></i>
				</div>
			</el-badge>
		</div>
		<el-dialog :close-on-click-modal="true" title="优惠券" :visible.sync="hasCoupon" width="600px"
			:append-to-body="true">
			<div class="hui-flex hui-dialog">
				<div class="hui-flex-box hui-dialog-content" style="background: #f7f9fc;">
					<div class="coupon-card-wrap" v-for="(item,index) in coupon" :key="index">
						<div class="price">
							<div v-if="item.type === 1">
								<span class="symbol">¥</span>
								<span>{{item.couponAmount}}</span>
							</div>
							<div v-else>
								<span>{{item.discount*100}}</span>
								<span class="symbol">折</span>
							</div>
						</div>
						<div class="center-describe">
							<div class="product">{{item.title}}</div>
							<div class="sub-title">
								<span>{{item.type === 1?`满${item.threshold}减${item.couponAmount}`:`满${item.threshold}可用，最高抵扣${item.mostConstraint}`}}</span>
							</div>
						</div>
						<el-button type="primary" size="small" @click="reviceCoupon(item)">立即领取</el-button>
					</div>
				</div>
			</div>
		</el-dialog>
		<el-dialog :close-on-click-modal="false" title="聊天列表" :visible.sync="visible" width="900px"
			:append-to-body="true">
			<chat v-if="visible && chatType === 1"></chat>
			<chats v-if="visible && chatType === 2"></chats>
		</el-dialog>
	</div>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import {
		getCouponListByUser,
		receiveCouponByUser
	} from '@/api/discount'
	import {
		getCustomerServeListByQuery
	} from '@/api/organization'
	const topNav = () => import('./components/topNav');
	const subMenu = () => import('./components/subMenu');
	const breadCrumb = () => import('./components/breadCrumb');
	const chat = () => import('./components/chat/customer/chat');
	const chats = () => import('./components/chat/customerServe/chat');
	export default {
		data() {
			return {
				menuList: [],
				isCollapse: false,
				coupon: [],
				hasCoupon: false,
				visible: false,
				badge: 0,
				badges: 0,
				isCustomer: false,
				chatType: 1
			}
		},
		mounted() {
			this.init();
			this.initCoupon();
			this.initCustomerServe();
		},
		methods: {
			init() {
				this.menuList = this.$store.getters.menuData;
				this.$chat.getConversationList(data => {
					this.countNumber('badge', data.data)
				});
			},
			initCustomerServe() {
				getCustomerServeListByQuery({
					organizationId: this.$store.getters.organization.id,
					userId: this.$store.getters.user.userId
				}).then(res => {
					if (res.state && res.data && res.data.length > 0) {
						let data = res.data[0];
						this.isCustomer = true;
						this.$store.dispatch('app/changeCustomerId', data.customerId);
						this.$chats.connect();
					}
				})
			},
			openChat(type) {
				this.chatType = type;
				this.visible = true;
			},
			countNumber(type, data) {
				let badge = 0;
				let list = data.filter(node => node.conversationId !== 'system');
				for (let i = 0; i < list.length; i++) {
					badge += list[i].unread
				}
				this[type] = badge;
			},
			initCoupon() {
				getCouponListByUser(this.$store.getters.user.userId).then(res => {
					if (res.state) {
						this.coupon = res.data;
						this.hasCoupon = this.coupon.length > 0;
					}
				})
			},
			reviceCoupon(item) {
				receiveCouponByUser(this.$store.getters.user.userId, item.id).then(res => {
					if (res.state) {
						this.$message.success('领取成功');
						this.initCoupon();
					}
				})
			}
		},
		components: {
			topNav,
			subMenu,
			breadCrumb,
			chat,
			chats
		},
		computed: {
			key() {
				return this.$route.path;
			},
			...mapGetters(['menuData', 'chatList', 'chatLists'])
		},
		watch: {
			menuData() {
				this.init();
			},
			chatList() {
				this.countNumber('badge', this.$store.getters.chatList || [])
			},
			chatLists() {
				this.countNumber('badges', this.$store.getters.chatLists || [])
			}
		}
	}
</script>

<style lang="scss">
	.coupon-card-wrap {
		align-items: center;
		background: url('@/assets/img/coupon.png') 50% / 100% 100% no-repeat;
		display: -webkit-flex;
		display: flex;
		margin-bottom: 9px;
		height: 110px;
		padding-right: 20px;

		.price {
			color: $--color-danger;
			font-size: 24px;
			font-weight: 500;
			line-height: 24px;
			text-align: center;
			width: 120px;

			.symbol {
				margin: 0 3px;
				font-size: $--font-size-base;
			}
		}

		.center-describe {
			display: inline-block;
			margin-right: auto;
			padding-left: 20px;
			text-align: left;

			.product {
				color: $--color-text-primary;
				font-size: $--font-size-large;
				font-weight: 550;
				line-height: 14px;
				padding-bottom: 12px;
			}
		}
	}

	.work-layout {
		width: 100%;
		height: 100%;
		background: $--background-color-base;

		.chat-box {
			position: fixed;
			bottom: 60px;
			right: 20px;
			font-size: 26px;
			cursor: pointer;
			z-index: 999;

			.chat {
				width: 50px;
				height: 50px;
				background: $--color-primary;
				color: #fff;
				border-radius: 50px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			&.customer-serve {
				bottom: 120px;

				.huifont-kefu {
					font-size: 26px;
				}
			}
		}

		.work-layout-main {
			position: fixed;
			left: 0;
			top: 52px;
			width: 164px;
			bottom: 0;
			background: $--color-white;
			padding: 8px 8px 0px 8px;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			transition: all 0.4s;
			z-index: 99;
			border-right: 1px solid $--border-color-lighter;

			&.small-main {
				width: 64px;
				padding: 8px 8px 0px 8px;
			}

			.app-main-box {
				flex: 1;
				height: 0;
				overflow-y: auto;
				overflow-x: hidden;
				-ms-overflow-style: none;
				/* 隐藏 IE 中的滚动条 */
				scrollbar-width: none;
				/* 隐藏 Firefox 中的滚动条 */
			}

			.app-main-box::-webkit-scrollbar {
				width: 0;
				/* 隐藏滚动条 */
			}

			.el-menu {
				width: 100%;
				height: 100%;
				border-right: none;

				.el-icon-arrow-down {
					font-family: "iconfont" !important;
					font-size: 16px;
				}

				.el-icon-arrow-down::before {
					content: "\e72d";
				}

				.el-menu-item,
				.el-submenu__title {
					border-radius: 5px;
					height: 48px;
					line-height: 46px;
					font-size: 14px;
					min-width: auto;
					margin: 3px 0;
					padding-right: 10px;
					background-color: $--color-white;

					i.icon {
						font-size: 24px;
						margin-right: 8px;
						color: $--color-text-primary;
					}

					&:hover,
					&.is-active,
					&:focus {
						background-color: $--color-primary;
						color: $--color-white;

						i,
						span {
							color: $--color-white;
						}
					}
				}

				.el-submenu__title {
					.el-submenu__icon-arrow {
						right: 10px;
					}
				}

				.menu-index-1 {

					.el-menu-item,
					.el-submenu__title {
						padding-left: 12px !important;
					}
				}

				.menu-index-2 {

					.el-menu-item,
					.el-submenu__title {
						padding-left: 40px !important;
					}
				}

				.menu-index-3 {

					.el-menu-item,
					.el-submenu__title {
						padding-left: 45px !important;
					}
				}

				.menu-index-3 {

					.el-menu-item,
					.el-submenu__title {
						padding-left: 50px !important;
					}
				}

				.menu-index-4 {

					.el-menu-item,
					.el-submenu__title {
						padding-left: 55px !important;
					}
				}

				.menu-index-5 {

					.el-menu-item,
					.el-submenu__title {
						padding-left: 60px !important;
					}
				}
			}

			.app-main-button {
				border-top: 1px solid $--border-color-light;
				padding: 16px 13px;
				display: flex;
				cursor: pointer;
				margin-top: 12px;
				align-items: center;

				i {
					font-size: 24px;
					margin-right: 7px;
					color: $--color-text-secondary;
				}

				.app-main-icon {
					flex: 1;
					width: 0;
					overflow: hidden;
					font-weight: 400;
					word-spacing: break-all;
					height: 20px;
				}
			}
		}

		.el-menu--collapse {
			.el-submenu.is-active .el-submenu__title {
				background-color: $--color-primary;
				color: $--color-white;

				i,
				span {
					color: $--color-white;
				}
			}

			.el-submenu__icon-arrow,
			.menu-title {
				display: none;
			}
		}

		.work-layout-content {
			position: absolute;
			top: 89px;
			left: 176px;
			right: 12px;
			bottom: 12px;
			transition: left 0.4s;

			.slide-fade-enter-active {
				transition: all 0.1s ease;
			}

			.slide-fade-leave-active {
				transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
			}

			.slide-fade-enter,
			.slide-fade-leave-to {
				transform: translateX(10px);
				opacity: 0;
			}

			&.small-content {
				left: 76px;
			}
		}


	}
</style>