talent_map/uniapp/pages/user/components/chain.vue

<template>
	<u-popup v-model="show" mode="bottom" closeable border-radius="14" safe-area-inset-bottom :duration="100">
		<view class="content-wrapper">
			<!-- 头部 -->
			<u-sticky>
				<view class="sticky">
					<view class="sticky-title xl normal bold">产业链</view>
				</view>

			</u-sticky>

			<!-- 内容 -->
			<view class="cate-two flex col-top" style="height: 100%;">

				<!-- 左侧 -->
				<view class="aside bg-white">
					<scroll-view style="height: 100%" scroll-y="true" scroll-with-animation="true">
						<block v-for="(item, index) in cateList" :key="index">
							<view class="first-cate"></view>
							<view :class="'one-item xs ' + (index == selectIndex ? 'active' : 'muted')"
								@click="changeActive(index)">
								<view v-if="index == selectIndex" class="active-line bg-primary "></view>
								<text class="name xs flex-1">{{ item.title }}</text>
								<u-icon :name="(index == selectIndex ? 'arrow-down' : 'arrow-right')"
									size="28"></u-icon>
							</view>
							<!-- 二级分类 -->
							<view class="muted xs" v-for="(twoItem, twoIndex) in cateTwoList" :key="twoIndex"
								v-if="index == selectIndex">
								<view :class="'one-item xs ' + (twoIndex == selectTowIndex ? 'active' : '')"
									@click.stop="changeTwoActive(twoIndex)">
									<text class="name xs flex-1">{{ twoItem.title }}</text>
								</view>
							</view>
						</block>
					</scroll-view>
				</view>
				<!-- 右侧 -->
				<view class="main">
					<view class="main-wrap">
						<view class="cate-two">
							<view class="two-item bg-white m-b-20">
								<view class="three-list flex flex-wrap" style="padding: 20rpx;">
									<view class="text-center w-full p-6" v-for="(sitem, sindex) in cateThreeList"
										:key="sindex" v-if="sitem.type == 1" @tap="changeThreeActive(sitem)">
										<view class="three-item flex row-between"
											:class="{ 'three-active': cateThreeId == sitem.id }">
											<view></view>
											<view class="flex-1 xs">{{ sitem.title }}</view>
											<view>
												<u-icon name="checkmark" size="28" color="#F37171" v-if="cateThreeId == sitem.id"></u-icon>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {
		getCategoryTree
	} from '@/api/app';
	export default {
		name: "chain",
		props: {
			value: {
				type: Boolean
			},
		},
		data() {
			return {
				keyword: '',
				hideRight: true,
				menuCurrentIndex: 0,
				topicData: [],

				cateList: [],
				selectIndex: 0, //一级分类索引
				selectTowIndex: 0, //二级分类索引
				selectThreeIndex: null, //二级分类索引
				cateTwoList: [], //二级分类列表
				cateThreeList: [], //三级分类列表
				cateThreeId: 0,
			}
		},
		created() {
			this.getListFun()
		},
		computed: {
			// 弹窗Popup显示状态
			show: {
				get: function() {
					return this.value
				},
				set: function(value) {
					this.$emit('input', value)
				}
			}
		},
		methods: {
			// 获取
			async getListFun() {
				const {
					code,
					data
				} = await getCategoryTree({})
				if (code == 1) {
					this.cateList = data
					this.cateTwoList = data[this.selectIndex].children
					this.cateThreeSet()
				}
			},
			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()
			},
			changeThreeActive(item) {
				this.cateThreeId = item.id
				this.$emit('change', item)
				this.$emit('input', false)
			},
			cateThreeSet() {
				let children = this.cateTwoList[this.selectTowIndex].children
				this.cateThreeList = children.filter((item, index) => item.type == 1)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bb {
		border-bottom: 1px solid $-color-body;
	}

	.content-wrapper {
		height: 900rpx;

		.sticky {
			width: 100vw;
		}

		.sticky-title {
			padding: 24rpx 0;
			text-align: center;
		}

		.container {
			height: 712rpx;
			display: flex;

			// 左侧菜单
			.left-menu {
				width: 250rpx;

				.submenu {
					height: 90rpx;
					line-height: 90rpx;
					text-align: center;
					font-size: 26rpx;
				}

				// 菜单选中
				.active {
					font-weight: 500;
					color: $-color-primary;
					position: relative;
					background-color: rgba($-color-primary, 0.1);
				}

				.active::before {
					content: '';
					width: 6rpx;
					height: 30rpx;
					position: absolute;
					left: 10rpx;
					top: 50%;
					transform: translateY(-50%);
					background-color: $-color-primary;
				}
			}

			// 右侧内容
			.right-content {
				width: 100%;

				.tags {
					padding: 20rpx;

					.tags-item {
						margin-bottom: 30rpx;
					}

					image {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
						position: relative;
					}

					image::after {
						content: '';
						color: #FFFFFF;
						font-size: 50rpx;
						font-weight: 500;
						text-align: center;
						line-height: 120rpx;
						width: 120rpx;
						height: 120rpx;
						position: absolute;
						border-radius: 50%;
						left: 0;
						top: 0;
						background: rgba(0, 0, 0, 0.1) url('/bundle_b/static/icon_tags.png') no-repeat center center;
						background-size: 40rpx;
					}
				}
			}
		}
	}

	.cate-two {
		.aside {
			width: 250rpx;
			flex: none;
			height: 100%;

			.first-cate {
				margin: 0 20rpx 0rpx 40rpx;
				border-top: $-solid-border;
			}

			.first-cate:first-child {
				border: none;
			}

			.one-item {
				position: relative;
				text-align: center;
				padding: 26rpx 10rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				&.active {
					color: $-color-primary;
					font-size: 26rpx;
					font-weight: bold;
				}

				.active-line {
					position: absolute;
					width: 6rpx;
					height: 30rpx;
					left: 4rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		.main {
			height: 100%;
			flex: 1;
			width: 500rpx;
			padding-left: 16rpx;

			/deep/ .u-tabs {
				border-radius: 0 0 12rpx 12rpx;
				box-shadow: 0px 4px 8px 1px rgba(0, 0, 0, 0.03)
			}

			.main-wrap {
				position: relative;

				.two-item {
					border-radius: 10rpx;

					.title {
						height: 90rpx;
						padding: 0 20rpx;

						.line {
							width: 40rpx;
							height: 1px;
							background-color: #BBBBBB;
						}
					}
				}

				.three-list {
					align-items: flex-start;
					padding: 0 10rpx;

					.three-item {
						background: #F7F8FA;
						padding: 16rpx 50rpx;
						text-align: center;
						border-radius: 12rpx;
					}
					.three-item.three-active {
						border: 2rpx solid #F37171;
						font-weight: bold;
						color: #F37171;
					}
					
				}
			}

			.goods .item {
				border-radius: 14rpx;
			}
		}
	}
</style>