talent_map/uniapp/components/cate-two/cate-two.vue

<template>
	<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 v-if="twoIndex == selectTowIndex" class="active-line bg-primary"></view> -->
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
		<!-- 右侧 -->
		<view class="main" id="main">

			<!-- 产业链 -->
			<u-tabs :list="cateThreeList" name="title" :is-scroll="true" :current="currentTab" :bold="false"
				active-color="#DD4250" height="80" font-size="24" @change="changeTab" />
			<!-- 列表 -->
			<talents-list :cid="cateTwoId" :chain="chain" :top="top"></talents-list>

			<!-- 过时的 -->
			<view class="main-wrap" v-if="false">
				<view class="cate-two">
					<view class="p-t-20">
						<!-- <view class="bg-white" v-for="(item, index) in list" :key="index">
									<record-cell :remark="item.source_type" :date="item.create_time_format"
										:money="item.change_amount_format" :type="item.change_type" />
								</view> -->

					</view>

					<view class="two-item bg-white m-b-20" v-if="false">
						<!-- 产业链 -->
						<view class="title flex col-center row-between">
							<text
								style="width: 12rpx;height: 12rpx;background: #DD4250;border-radius: 50%; margin-right: 20rpx;"></text>
							<text class="name bold sm flex-1">产业链</text>
						</view>
						<view class="three-list flex flex-wrap" style="padding: 20rpx;">
							<view class="three-item" style="padding: 6rpx;width: 50%;"
								v-for="(sitem, sindex) in cateThreeList" :key="sindex" v-if="sitem.type == 1"
								@tap="childrenCate(sitem)">
								<view class=" flex-col col-center" style="background: #F7F8FA; padding: 16rpx 50rpx;">
									<view class="text xs">{{ sitem.title }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		getCategoryTree
	} from '@/api/app';
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		loadingType,
	} from '@/utils/type.js'
	import {
		pxToRpx
	} from '@/utils/tools'
	export default {
		name: "cate-two",
		props: {
			// top: {
			//     type: Number
			// },
		},
		data() {
			return {
				cateList: [],
				selectIndex: 0, //一级分类索引
				selectTowIndex: 0, //二级分类索引
				cateTwoList: [], //二级分类列表
				cateThreeList: [], //三级分类列表
				cateTwoId: 0,
				sortConfig: {
					goodsType: 'double',
					priceSort: '',
					saleSort: '',
				},
				status: loadingType.LOADING,
				hasData: true,

				chain: '', //todo 搜索关键词

				//产业链配置
				currentTab: 0,
				upOption: {
					empty: {
						icon: '/static/images/order_null.png',
						tip: '暂无数据', // 提示
					}
				},
				top: 0
			};
		},
		created() {
			this.getListFun()
		},
		mounted() {
		},

		updated: function() {
			this.$nextTick(() => {
				//  仅在整个视图都被重新渲染之后才会运行的代码     
				setTimeout(() => {
					uni.createSelectorQuery().in(this).select('#main')
						.boundingClientRect(data => {
							console.log("得到布局位置信息" + JSON.stringify(data));
							this.top = pxToRpx(data.top) + 80
						}).exec();

				}, 30)
			});
		},

		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()
			},
			onRefresh() {
				this.status = loadingType.LOADING
				this.page = 1
			},
			//产业链
			cateThreeSet() {
				this.cateTwoId = this.cateTwoList[this.selectTowIndex].id
				let children = this.cateTwoList[this.selectTowIndex].children
				console.log(children)
				if (children[0].title != '全部') {
					children.unshift({
						type: 1,
						title: '全部'
					})
				}
				this.currentTab = 0;
				this.cateThreeList = children.filter((item, index) => item.type == 1)
				if (this.cateThreeList.length > 0) {
					this.refreshTalents();
				} else {
					// this.cateTwoId = 0;
				}
			},
			childrenCate(cate) {
				if (cate.children) {
					this.cateThreeList = cate.children
				} else {
					//没有子分类，跳转人才列表页面
					console.log(cate)
					uni.navigateTo({
						url: '/pages/talents/talents?cate_id=' + cate.id
					})
				}
			},

			// 改变当前的Tabs位置
			changeTab(index) {
				this.currentTab = index;
				this.refreshTalents()
			},

			refreshTalents() {
				// this.cateTwoId = this.cateThreeList[this.currentTab].id
				this.chain = this.cateThreeList[this.currentTab].title
				//通风报信
				uni.$emit("refreshTalentsList", {
					cid: this.cateTwoId,
					chain: this.chain,
					top: this.top
				})
			},
		},


		watch: {
			'sortConfig.saleSort'() {
				this.onRefresh()
			},
			'sortConfig.priceSort'() {
				this.onRefresh()
			}
		},
		computed: {
			...mapGetters(['appConfig', 'sysInfo']),
		}
	}
</script>

<style lang="scss" scoped>
	.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 {
						width: 33%;

						.text {
							text-align: center;
						}
					}
				}
			}

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