bocai_supplyChain_uni/pages/home/child/select.vue

<template>
	<div class="p-home-child-select">
		<view class="g_flex_row_between">
			<view class="g_flex_none g_w_88 menu-box">
				<view class="g_bg_f g_h_52 g_pt_10 g_pb_10 menu-item" 
							v-for="(item,index) in menuInfo.list" :key="index"
					    :class="menuInfo.active == index ? 'menuActive' : ''" 
							@click="handleUpdateMenu(item,index)"
				>
					<view class="g_flex_row_center">
						<view class="g_h_32 g_flex_column_center g_fs_14" :style="{
										'color': menuInfo.active == index ? themeColor : '#999'
									}">
							<view class="g_ell_1" style="max-width: 56px;">{{item.name}}</view>
						</view>
					</view>
					<view class="bor" :style="{
									'background-color': menuInfo.active == index ? themeColor : ''
								}"></view>
				</view>
			</view>
			<view class="g_flex_1 g_pl_16 g_pr_16" style="height: 100vh;overflow-y: auto;">
				<view class="" v-for="(item,index) in menuInfo.list[menuInfo.active].content" :key="index">
					<view class="g_h_50 g_flex_column_center g_fw_600">{{item.name}}</view>
					<view class="g_flex_row_between">
						<view v-for="(itm,inx) in item.child" :key="inx" style="width: 50%;" 
									:class="inx % 2 == 0 ? 'g_flex_row_start' : 'g_flex_row_end'"
									@click="goHome(item,index,itm,inx)"
						>
							<view class="itm g_flex_c">{{itm.name}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				themeColor:getApp().globalData.themeColor,
				menuInfo:{
					active:0,
					list:[
						{
							name:'工厂招工',
							num:99,
							content:[
								{
									id:1,
									name:'普工',
									child:[
										{
											id:1,
											name:'操作工'
										},
										{
											id:2,
											name:'包装工'
										},
										{
											id:3,
											name:'学徒工'
										},
									]
								},
								{
									id:2,
									name:'普工AA',
									child:[
										{
											id:1,
											name:'操作工1'
										},
										{
											id:2,
											name:'包装工2'
										},
									]
								}
							]
						},
						{
							name:'生产制作',
							num:98,
							content:[
								{
									id:1,
									name:'普工a',
									child:[
										{
											id:1,
											name:'操作工'
										},
										{
											id:2,
											name:'包装工'
										},
										{
											id:3,
											name:'学徒工'
										},
									]
								},
								{
									id:2,
									name:'普工b',
									child:[
										{
											id:1,
											name:'操作工1'
										},
										{
											id:2,
											name:'包装工2'
										},
									]
								}
							]
						},
						{
							name:'生活服务',
							num:1,
							content:[
								{
									id:1,
									name:'普工99',
									child:[
										{
											id:1,
											name:'操作工9'
										},
										{
											id:2,
											name:'包装工'
										},
										{
											id:3,
											name:'学徒工'
										},
									]
								},
								{
									id:2,
									name:'普工88',
									child:[
										{
											id:1,
											name:'操作工1'
										},
										{
											id:2,
											name:'包装工2'
										},
									]
								}
							]
						}
					]
				}
			}
		},
		methods:{
			handleUpdateMenu($item,$index){
				let that = this;
				that.menuInfo.active = $index;
			},
			goHome(){
				uni.switchTab({
					url:'/pages/home/index'
				})
			}
		}
	}
</script>

<style lang="less">
	.p-home-child-select{
		.menu-box {
			height: 100vh;
			overflow-y: auto;
			background-color: #fff;
			width: 100px;
		}
		
		.menu-item {
			position: relative;
		
			.bor {
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 4px;
				height: 22px;
			}
		}
		
		.menuActive {
			background-color: #f5f5f5;
			position: relative;
		}
		
		
		.itm{
			width: calc(100% - 8px);
			background-color: #fff;
			border-radius: 8px;
			padding: 6px 0;
			margin-bottom: 8px;
		}
	}
</style>