learning-system-mobile/pages/learnPath/pathSearch.vue

<template>
	<view class="searchs">
		<view class="item">
			<view class="title updown">
				岗位
				<view v-if="!isTrue" @click="listslice" class="up">
					收起
					<image class="img" src="../../static/images/learnpath/updown.png" mode=""></image>
				</view>
			</view>
			<view class="check">
				<view :style="{marginRight:index/2!=0||index==0?'12rpx':''}" :class="indexs.includes(index)?'items':'item'" @click="searchItem(item,index)" v-for="(item,index) in posiLists" :key="index" class="item">
					{{item.positionName}}
				</view>
				<view v-if="startList.length > 9 && isTrue" class="item" @click="allList">
					<text class="text">查看更多</text>
					<image class="img" src="../../static/images/learnpath/uotdown.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="item">
			<view class="title">
				职级
			</view>
			<view class="downlist">
				<view class="title">
					<view @click="downList" class="btn">
						<text>{{bandFirst || '职级'}}</text>
						<img class="img" src="../../static/images/learnpath/uotdown.png" alt="">
					</view>
					<text class="line"></text>
					<view @click="downList" class="btn">
						<text>{{bandEnd || '职级'}}</text>
						<img class="img" src="../../static/images/learnpath/uotdown.png" alt="">
					</view>
				</view>
				<view v-if="bandShow" class="body">
					<view @click="isBand(item,index)" :class="bandIndexs.includes(index)?'item2':''" v-for="(item,index) in bandLists" :key="index" class="item">
						{{item.bandCode}}
					</view>
				</view>
			</view>
		</view>
		<view class="footers">
			<view class="btn left" @click="reach">
				重置
			</view>
			<view class="btn right" @click="goAllPath">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	import { getAllPosition,getAllBandInfo } from "@/api/modules/growth.js"
	export default {
		data() {
			return {
				posiLists: [],
				startList: [],
				isTrue: true,
				indexs: [],
				posiData: [],
				bandLists: [],
				bandShow: false,
				bandIndexs: [],
				bandItem: [],
				bandFirst: '',
				bandEnd: '',
			}
		},
		onLoad() {
			this.getPosiList()
		},
		methods: {
			reach(){
				this.bandIndexs = []
				this.bandItem = []
				this.indexs = []
				this.posiData = []
				this.bandFirst = ''
				this.bandEnd = ''
			},
			goAllPath(){
				console.log(this.bandItem,this.posiData)
				uni.navigateTo({
					url: '/pages/learnPath/allPath',
					
				})
			},
			getPosiList(){
				getAllPosition().then(res=>{
					this.startList = res.data
					if(res.code == 200 ){
						this.posiLists = res.data
						this.indexs.push(0)
						if(this.posiLists.length > 9){
							this.posiLists = this.posiLists.slice(0, 9)
						}
					}
				})
				getAllBandInfo().then(res=>{
					if(res.code == 200){
						this.bandLists = res.data
					}
				})
			},
			allList(){
				this.posiLists = this.startList
				this.isTrue = false
			},
			listslice(){
				this.posiLists = this.startList.slice(0, 9)
				this.isTrue = true
			},
			searchItem(item,index){
				if(index == 0){
					return
				}
				const indexToRemove = this.indexs.indexOf(index);
				if (indexToRemove !== -1) {
				    this.indexs.splice(indexToRemove, 1);
				} else {
				    this.indexs.push(index);
				}
				this.posiData = this.indexs.map(index => this.startList[index]);
			},
			downList(){
				this.bandShow = !this.bandShow
			},
			isBand(item,index){
				const indexToRemove = this.bandIndexs.indexOf(index);
				if (indexToRemove !== -1) {
				    this.bandIndexs.splice(indexToRemove, 1);
				} else {
				    this.bandIndexs.push(index);
				}
				this.bandItem = this.bandIndexs.map(index => this.bandLists[index])
				this.bandItem = this.bandItem.sort((a, b) => parseInt(a.bandId, 10) - parseInt(b.bandId, 10));
				this.bandFirst = this.bandItem[0].bandCode
				if(this.bandItem && this.bandItem.length > 1){
					this.bandEnd = this.bandItem[this.bandItem.length - 1].bandCode
				}
			},
		}
	}
</script>

<style>
.searchs{
	background: #fff;
	height: 100vh;
	padding: 56rpx 56rpx 180rpx 38rpx;
	.item{
		.downlist{
			margin: 0 auto;
			.body{
				display: flex;
				flex-wrap: wrap;
				.item{
					margin-right: 18rpx;
					width: 190rpx;
					margin-bottom: 28rpx;
					height: 60rpx;
					background: #F7F7F7;
					border-radius: 34rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					text-align: center;
					line-height: 60rpx;
				}
				.item2{
					background: #EAF2FF;
					border: 2rpx solid #387DF7;
					font-weight: 400;
					font-size: 28rpx;
					color: #387DF7;
				}
			}
			.title{
				display: flex;
				justify-content: center;
				align-items: center;
				.line{
					width: 16rpx;
					border: 2rpx solid #979797;
					margin-left: 6rpx;
					margin-right: 6rpx;
				}
				.btn{
					width: 316rpx;
					height: 60rpx;
					background: #F7F7F7;
					border-radius: 34rpx;
					padding: 0 32rpx 0 40rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					.img{
						width: 20rpx;
						height: 10rpx;
					}
				}
			}
		}
		.updown{
			display: flex;
			justify-content: space-between;
			.up{
				margin-right: 18rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				.img{
					width: 24rpx;
					height: 16rpx;
					margin-left: 10rpx;
				}
			}
		}
		.title{
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			line-height: 44rpx;
			text-align: left;
			margin-bottom: 34rpx;
		}
			.check{
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				margin-bottom: 34rpx;
				.item{
					margin-bottom: 28rpx;
					width: 240rpx;
					height: 60rpx;
					padding: 0 30rpx 0 34rpx;
					border-radius: 34rpx;
					background: #F7F7F7;
					line-height: 60rpx;
					text-align: center;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					.text{
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;
						line-height: 40rpx;
					}
					.img{
						width: 24rpx;
						height: 16rpx;
						margin-left: 14rpx;
					}
				}
				.items{
					width: 240rpx;
					height: 60rpx;
					background: #EAF2FF;
					border-radius: 34rpx;
					border: 1rpx solid #387DF7;
					font-weight: 400;
					font-size: 28rpx;
					color: #387DF7;
				}
			}
		
	}
	.footers{
		position: fixed;
		bottom: 0;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		justify-content: center;
		.btn{
			width: 284rpx;
			height: 96rpx;
			line-height: 96rpx;
			border-radius: 48rpx;
			text-align: center;
		}
		.left{
			border: 2rpx solid #387DF7;
			font-weight: 500;
			font-size: 28rpx;
			color: #387DF7;
			margin-right: 36rpx;
		}
		.right{
			background: linear-gradient( 112deg, #5491FD 0%, #2A58FA 100%);
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
}
</style>