yizhizan-h5/package/jobIntention/jobList.vue

<template>
	<view class="flex flex-direction" style="height: 100vh;">
		<!-- 职业选择头部 -->
		<view class="profession-header" :style="{ paddingTop: (12 + statusBarHeight) + 'px' }">
			<view class="header-content">
				<view class="header-left" @click="goBack">
					<u-icon name="close" color="#333" size="32"></u-icon>
				</view>
				<view class="header-title">职位选择</view>
				<view class="header-right"></view>
			</view>
		</view>
		
		<!-- 搜索 -->
		<view class="search flex justify-center align-center">
			<view class="search-box">
				<u-search placeholder="搜索职位" :show-action="false" @change="getSearchList" v-model="keyword"></u-search>
			</view>
		</view>
		<!-- 搜索列表 -->
		<view class="searchList flex justify-center" v-if="keyword!=''">
			<view class="searchList-box">
				<scroll-view scroll-y="true" class="searchList-box-scroll" style="height: 100%;">
					<view class="searchList-box-item" @click="selectJob(item)" v-for="(item,index) in searchList" :key="index">
						<view class="">
							{{item.ruleClassifyName}}
						</view>
						<view class="" style="font-size: 24rpx;color: #999999;margin-top: 10rpx;">
							{{item.title}}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 列表 -->
		<view class="list flex justify-between" v-else>
			<!-- 左侧分类 -->
			<view class="list-l">
				<scroll-view scroll-y="true" style="width: 100%;height: 100%;padding-bottom: 20rpx;">
					<view class="list-l-item flex align-center " @click="setRightList(index)" :class="current==index?'active':''" v-for="(item,index) in list" :key="index">
						{{item.ruleClassifyName}}
					</view>
				</scroll-view>
				
			</view>
			<!-- 右侧列表 -->
			<view class="list-r">
				<view class="list-r-container">
					<!-- 中间标题列 -->
					<view class="list-r-titles">
						<scroll-view scroll-y="true" style="width: 100%;height: 100%;padding-bottom: 20rpx;">
							<view class="list-r-title-item" @click="setActiveTitle(index)" :class="activeTitle==index?'active':''" v-for="(item,index) in rightList" :key="index">
								{{item.title}}
							</view>
						</scroll-view>
					</view>
					<!-- 最右侧子内容列 -->
					<view class="list-r-content">
						<scroll-view scroll-y="true" style="width: 100%;height: 100%;padding-bottom: 20rpx;">
							<view class="list-r-item-childs-vertical" v-if="rightList.length>0 && rightList[activeTitle]">
								<view class="list-r-item-childs-i" @click="selectJob(ite)" v-for="(ite,ind) in rightList[activeTitle].childrens" :key="ind">
									{{ite.ruleClassifyName}}
								</view>
							</view>
							<empty v-if="rightList.length==0" />
						</scroll-view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部确定按钮 -->
		<view class="bottom-btn-container">
			<view class="confirm-btn" @click="confirmSelection">
				<text>确定</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	import empty from '../../components/empty.vue'
	export default {
		components:{
			empty
		},
		data() {
			return {
				statusBarHeight: 0, // 状态栏高度
				searchList:[],
				keyword:'',
				current:0,
				activeTitle:0,
				rightList:[],
				list:[],
			};
		},
		onLoad() {
			// 获取状态栏高度
			let systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 0;
			this.getJobList()
		},
		methods:{
			/**
			 * 返回上一页
			 */
			goBack(){
				uni.navigateBack()
			},
			/**
			 * 搜索岗位
			 */
			getSearchList(){
				let data = {
					ruleClassifyName:this.keyword
				}
				this.$Request.getT('/app/rule/userGetClassify',data).then(res => {
					if(res.code==0){
						this.searchList = res.data
					}
				})
			},
			/**
			 * @param {Object} info
			 * 选择岗位并返回
			 */
			selectJob(info){
				uni.$emit('jobs',{
					ruleClassifyId:info.ruleClassifyId,//岗位分类id
					ruleClassifyName:info.ruleClassifyName,//岗位分类名称
					price:info.price,//岗位价格
					// ruleClassifyId2:topInfo.ruleClassifyId,//上级分类id
					// ruleClassifyId1:topInfo.parentId//一级分类id
				})
				uni.navigateBack()
			},
			/**
			 * 切换菜单
			 */
			setRightList(index){
				this.current=index
				this.rightList = this.list[index].childrens
				this.activeTitle = 0 // 重置为第一个标题
			},
			/**
			 * 设置激活的标题
			 */
			setActiveTitle(index){
				this.activeTitle = index
			},
			/**
			 * 确定选择
			 */
			confirmSelection(){
				// 获取当前选中的职位信息
				if(this.rightList.length > 0 && this.rightList[this.activeTitle] && this.rightList[this.activeTitle].childrens.length > 0) {
					// 这里可以获取选中的职位信息
					uni.showToast({
						title: '选择成功',
						icon: 'success'
					})
					// 返回上一页
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				} else {
					uni.showToast({
						title: '请先选择职位',
						icon: 'none'
					})
				}
			},
			/**
			 * 获取岗位列表
			 */
			getJobList(){
				this.$Request.getT('/app/rule/getClassifyList').then(res => {
					if(res.code==0){
						
						if(res.data){
							this.list = res.data
							this.rightList = this.list[this.current].childrens
							this.activeTitle = 0 // 初始化时选择第一个标题
						}
						
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FCFCFC;
		padding: 0 20rpx;
	}
	
	.profession-header {
		// padding-top: 80rpx;
		background-color: #FCFCFC;
		z-index: 9999;
		box-sizing: border-box;
		margin-bottom: 40rpx;
		
		.header-content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100%;
			
			.header-left, .header-right {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.header-title {
				color: rgba(51, 51, 51, 1);
				font-family: DM Sans;
				font-size: 36rpx;
				font-weight: 700;
				line-height: 26px;
				letter-spacing: 0px;
				text-align: center;
			}
		}
	}
	.searchList{
		width: 100%;
		flex: 1;
		overflow: auto;
		.searchList-box{
			width: 686rpx;
			.searchList-box-scroll{
				width: 100%;
				// background-color: red;
				.searchList-box-item{
					// margin-bottom: 20rpx;
					border-bottom: 1rpx solid #F2F2F2;
					padding-top: 20rpx;
					padding-bottom: 20rpx;
				}
			}
		}
	}
	.search{
		width: 100%;
		height: 100rpx;
		border-bottom: 1rpx solid #F2F2F7;
		box-sizing: border-box;
		.search-box{
			width: 686rpx;
			height: 60rpx;
			border-radius: 44rpx;
			background-color: #F2F2F7;
		}
	}
	.active{
		border-left: 16rpx solid rgba(1, 107, 246, 1) !important;
		padding: 10px 0px 10px 0px;
		color: rgba(1, 107, 246, 1) !important;
		background: rgba(255, 255, 255, 1);
		border-radius: 6px;
	}
	.list{
		width: 100;
		flex: 1;
		gap: 12rpx;
		overflow: auto;
		.list-l{
			width: 25%;
			height: 100%;
			border-radius: 6px;
			background: rgba(245, 245, 245, 1);
			
			.list-l-item{
				margin-top: 20rpx;
				color: rgba(102, 102, 102, 1);
				font-family: DM Sans;
				padding: 20rpx 10rpx;
				font-size: 16px;
				font-weight: 400;
				line-height: 21px;
				letter-spacing: 0%;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.list-r{
			width: 75%;
			height: 100%;
			background-color: #ffffff;
			border-left: 1rpx solid #F2F2F7;
			box-sizing: border-box;
			
			.list-r-container{
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: row;
			}
			
			.list-r-titles{
				width: 50%;
				height: 100%;
				border-right: 1rpx solid #F2F2F7;
				box-sizing: border-box;
				
				.list-r-title-item{
					margin-top: 20rpx;
					padding: 20rpx 10rpx;
					color: var(--016BF6, rgba(1, 107, 246, 1));
					font-family: DM Sans;
					font-size: 16px;
					font-weight: 400;
					line-height: 21px;
					letter-spacing: 0%;
					text-align: center;
					
					&.active{
						color: rgba(1, 107, 246, 1) !important;
						background: rgba(252, 233, 220, 1);
						padding: 20rpx 10rpx;
						border-left: none !important;
						border-radius: 0 !important;
					}
				}
			}
			
			.list-r-content{
				width: 70%;
				height: 100%;
				flex: 1;
				
				.list-r-item-childs-vertical{
					width: 100%;
					display: flex;
					flex-direction: column;
					gap: 12rpx;
					padding: 20rpx;
					
					.list-r-item-childs-i{
						width: 100%;
						padding: 15rpx 20rpx;
						background-color: #F5F5F5;
						border-radius: 8rpx;
						margin-bottom: 4rpx;
						color: rgba(102, 102, 102, 1);
						font-family: DM Sans;
						font-size: 14px;
						font-weight: 400;
						line-height: 18px;
						letter-spacing: 0.5%;
						text-align: center;
						
						&:active {
							background-color: #E5E5E5;
							transform: scale(0.98);
						}
					}
				}
			}
		}
	}
	
	.bottom-btn-container {
		// position: fixed;
		// bottom: 0;
		// left: 0;
		// right: 0;
		padding: 30rpx 20rpx;
		background: #fff;
		border-top: 1px solid #f0f0f0;
		z-index: 9999;
	}
	
	.confirm-btn {
		width: 100%;
		height: 88rpx;
		background: var(--线性渐变, linear-gradient(90.00deg, rgba(13, 39, 247, 1),rgba(19, 193, 234, 1) 100%));
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
		text {
			font-size: 32rpx;
			font-weight: 600;
			color: #fff;
		}
	}
</style>