talent_map/pc/components/category.vue

<template>
	<div class="category">
		<div type="primary" class="title">
			<div class="flex lg">
				<i class="el-icon-s-fold"></i>
				<div class="m-l-8">人才图谱分类</div>
			</div>
		</div>
		<div class="category-con bg-white" v-show="category.length && showCate">
			<ul class="category-one">
				<li v-for="(item, index) in cateList" :key="index" :class="{ active: index === selectIndex }"
					@click="changeActive(index)">
					<div class="flex row-between">
						<span class="line-1">{{ item.title }}</span>
						<i v-if="item.children.length"
							:class="index === selectIndex ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
					</div>
					<ul class="category-two" v-show="index === selectIndex">
						<li v-for="(itemTwo, indexTwo) in cateTwoList" :key="indexTwo"
							@click.stop="changeTwoActive(indexTwo)" :class="{ active: indexTwo === selectTowIndex }">
							<div class="flex row-center">
								<span class="line-1">{{ itemTwo.title }}</span>
							</div>
						</li>
					</ul>
				</li>

				<div class="category-float bg-white" v-show="showCateFloat && cateTwoList.length">
					<div class="float-con">
						<div class="m-t-16" v-for="(item, index) in cateTwoList" :key="index">
							<div class="category-two weight-500 m-b-15">
								<nuxt-link :to="`/category?id=${item.id}`">{{
                                    item.title
                                }}</nuxt-link>
							</div>
							<div class="category-three flex flex-wrap">
								<div class="item" v-for="(titem, idx) in item.children" :key="idx">
									<nuxt-link :to="`/category?id=${titem.id}`" class="flex">
										<!--                                        <el-image-->
										<!--                                            style="width: 48px; height: 48px"-->
										<!--                                            :src="titem.image"-->
										<!--                                            fit="contain"-->
										<!--                                        ></el-image>-->
										<span class="m-l-8">{{
                                            titem.title
                                        }}</span>
									</nuxt-link>
								</div>
							</div>
						</div>
					</div>
				</div>
			</ul>
		</div>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				cateList: [],
				selectIndex: 0, //一级分类索引
				selectTowIndex: 0, //二级分类索引
				cateTwoList: [], //二级分类列表
				cateThreeList: [], //三级分类列表
				cateTwoId: 0,
				showCate: true,
				showCateFloat: false,

				//产业链配置
				currentTab: 0,

			}
		},
		created() {},
		mounted() {},
		updated() {},
		methods: {
			changeActive(index) {
				this.selectIndex = index
				this.selectTowIndex = 0 //二级分类索引重置0
				this.cateTwoList = this.cateList[this.selectIndex].children
				this.cateThreeSet()
			},
			changeTwoActive(index) {
				this.selectTowIndex = index
				this.cateThreeSet()
				console.log(this.selectTowIndex)
				this.$forceUpdate()
			},
			//产业链
			cateThreeSet() {
				this.cateTwoId = this.cateTwoList[this.selectTowIndex].id
				let children = this.cateTwoList[this.selectTowIndex].children.slice()
				if (children[0].title != '全部') {
					children.unshift({
						type: 1,
						pid: this.cateTwoId,
						title: '全部'
					})
				}
				this.currentTab = 0;
				this.cateThreeList = children.filter((item, index) => item.type == 1)

				if (this.cateThreeList.length > 0) {
					this.$emit('chain', this.cateThreeList)
				} else {
					// this.cateTwoId = 0;
				}
			},
		},
		watch: {
			$route: {
				immediate: true,
				handler: function(val) {
					this.showCate = val.path == '/' ? true : false
				},
			},
			category: {
				handler: function(val) {
					this.cateList = val.slice()
					if (this.cateList.length > 0) {
						this.cateTwoList = this.cateList[this.selectIndex].children
						this.cateThreeSet()
					}
				},
				immediate: true,
				deep: false,
			}
		},
		computed: {
			...mapState(['category']),
		},
	}
</script>

<style lang="scss" scoped>
	.category {
		position: relative;

		.title {
			padding: 12px 20px;
			flex: none;
			width: 160px;
			box-sizing: border-box;
			border-radius: 0;
			background: $--color-primary;
			color: white;
		}

		.category-con {
			position: absolute;
			width: 100%;
			z-index: 999;
			height: 440px;
			padding: 10px 0;
			box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
			cursor: pointer;

			.category-one {
				height: 100%;
				overflow-y: auto;

				&::-webkit-scrollbar {
					display: none;
					/*隐藏滚动条*/
				}

				&>li {
					border-bottom: $--border-base;

					&>a {
						height: 42px;
						padding: 0 20px;
					}

					&>div {
						height: 42px;
						padding: 0 20px;
					}

					&.active {

						// background-color: #ffeeef;
						&>div {
							color: $--color-primary;
							font-weight: bold;
						}
					}

				}

				.category-float {
					box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
					position: absolute;
					left: 160px;
					top: 0;
					width: 880px;
					height: 440px;
					padding: 0 24px;
					overflow-y: auto;

					&::-webkit-scrollbar {
						display: none;
						/*隐藏滚动条*/
					}

					a:hover {
						color: #ff2c3c;
					}

					.float-con {
						.category-three {
							border-bottom: 1px dashed $--border-color-base;

							.item {
								width: 20%;
								margin-bottom: 20px;
								padding-right: 10px;
							}
						}
					}
				}
			}

			.category-two {
				height: 100%;
				overflow-y: auto;

				&::-webkit-scrollbar {
					display: none;
					/*隐藏滚动条*/
				}

				&>li {

					&>a {
						height: 42px;
						padding: 0 20px;
					}

					&>div {
						height: 42px;
						padding: 0 20px;
					}

					&.active {
						// background-color: #ffeeef;

						div {
							color: $--color-primary;
							font-weight: bold;
						}
					}
				}

				.category-float {
					box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
					position: absolute;
					left: 160px;
					top: 0;
					width: 880px;
					height: 440px;
					padding: 0 24px;
					overflow-y: auto;

					&::-webkit-scrollbar {
						display: none;
						/*隐藏滚动条*/
					}

					a:hover {
						color: #ff2c3c;
					}

					.float-con {
						.category-three {
							border-bottom: 1px dashed $--border-color-base;

							.item {
								width: 20%;
								margin-bottom: 20px;
								padding-right: 10px;
							}
						}
					}
				}
			}
		}
	}
</style>