clsd/app/pages/job/position/classification.vue

<template>
	<view>
		<view class="top">
			<view class="search">
				<u-search placeholder="搜索岗位/拼音" v-model="param.title" bgColor="white" :animation="true" actionText="取消" @search="search" @clear="show = false"></u-search>
			</view>
		</view>
		<view class="left">
			<view class="item" :class="{ active: index == current }" v-for="(item, index) in list" :key="index" @click="current = index">{{ item.title }}</view>
		</view>
		<view class="right">
			<view class="list" v-if="list.length > 0">
				<view v-for="(item, index) in list[current].children" :key="item.id" style="overflow: hidden">
					<view class="title">{{ item.title }}</view>
					<view class="tags" v-for="(child, i) in item.children" :key="child.id" @click="select(child)">
						<view class="out">
							<view class="int">{{ child.title }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="search_view" v-if="show">
			<view class="list">
				<view class="item" v-for="(item, index) in search_list" :key="item.id" @click="select(item)">
					<view class="title">{{ item.title }}</view>
					<view class="desc">{{ item.tag }}</view>
				</view>
				<u-empty v-if="search_list.length == 0"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [],
			search_list: [], //搜索列表
			show: false,
			current: 0,
			param: { type: 'position' }
		};
	},
	onLoad(e) {
		this.getData();
		if (e.title) {
			setTimeout(() => {
				uni.setNavigationBarTitle({ title: e.title });
			}, 300);
		}
	},
	methods: {
		getData() {
			this.http.request({
				url: '/app/common/column/list',
				data: this.param,
				success: (res) => {
					this.list = res.data.data;
				}
			});
		},
		//选择
		select(item) {
			uni.$emit('select_position', item);
			uni.navigateBack();
		},
		//搜索
		search() {
			if (this.param.title) {
				this.show = true;
				this.http.request({
					url: '/app/common/column/search',
					data: this.param,
					success: (res) => {
						this.search_list = res.data.data;
					}
				});
			} else {
				this.show = false;
			}
		}
	},
	destroyed() {
		uni.$off('other_city');
	}
};
</script>

<style lang="scss">
.top {
	position: fixed;
	height: 70px;
	width: 100%;
	.search {
		padding: 12px 20px 15px 20px;
	}
}
.left {
	position: fixed;
	/* #ifdef H5 */
	top: 100px;
	height: 86%;
	/* #endif */
	/* #ifdef APP-PLUS||MP-WEIXIN */
	top: 60px;
	height: 92%;
	/* #endif */
	width: 35%;
	overflow-y: auto;
	z-index: 2;
	.item {
		padding: 10px 10px 10px 10px;
		font-size: 14px;
		&.active {
			background-color: white;
			color: $main-color;
		}
	}
}
.right {
	position: fixed;
	/* #ifdef H5 */
	top: 100px;
	height: 86%;
	/* #endif */
	/* #ifdef APP-PLUS||MP-WEIXIN */
	top: 60px;
	height: 92%;
	/* #endif */
	width: 65%;
	overflow-y: auto;
	left: 35%;
	z-index: 1;
	background-color: white;
	.list {
		padding: 0px 12px 12px 12px;
		.title {
			padding: 15px 10px 10px 7px;
			font-weight: bold;
		}
	}
}
.search_view {
	/* #ifdef H5 */
	top: 100px;
	height: 86%;
	/* #endif */
	/* #ifdef APP-PLUS||MP-WEIXIN */
	top: 60px;
	height: 92%;
	/* #endif */
	border-top: 1px solid $line;
}
</style>