gaobaoUniApp/components/option-bar/option-bar.vue

<template>
<view  :class="{prevent_move:flag}" :style="{height:photoheight+'px'}">
	<view class="option-bar">
	<!-- 下拉框的导航部分 -->
	    <view class="option u-f">
			<block v-for="(title,index) in tits" :key="index">
				<view class="selection u-f" @tap="selectionFun(index)">
					<view :class="{down:down[index]}">{{title}}</view>
					<view v-if="down[index]" class="icon iconfont icon-down-fill" 
					:class="{down:down[index]}">
					</view>
					<view v-else class="icon iconfont icon-up-fill" :class="{down:down[index]}">
				    </view>
			    </view>
		    </block>
		</view>
	<!-- 下拉框的主体部分 -->
	    <scroll-view class="box">
		    <block v-for="(contents,index) in contentArrs" :key="index">
				<view v-if="down[index]"  class="content">
					<block v-for="(content,key) in contents" :key="key">
						<view class="line" >
							<block v-for="(con,index) in content" :key="index">
								<view @tap="filteFun(clickNum,key,index)">{{con}}</view>
							</block>
						</view>
					</block>
			    </view>	
			</block>
		</scroll-view>
		<!-- 遮罩层 -->
		<view v-if="flag" class="page" @tap="cancel" 
		:style="{'height':photoheight-contentHeight+'px'}"></view>
    </view>
	<view class="mainstay">
		<block v-for="(list,index) in filterArrs" :key="index">
			<view class="collList">
				<view class="listLeft">
					<view class="collPic"><image src="../../static/school.png"></image></view>
					<view class="collName">{{list.name}}</view>
				</view>
				<view class="listRight">
					<view class="listTop">
						<view>
							<view>
								<view class="collAddress">
									<view class="deletDeg">{{list.address}}</view>
								</view> 
							    <view class="collType">
									<view class="deletDeg">{{list.type}}</view>
								</view>
							    <view class="collProject">
									<view class="deletDeg">{{list.project}}</view>
								</view>
							</view>
							<view>
								<view class="collMaxSco u-f"><view>最高分:</view>{{list.maxSco}}</view>
							    <view class="collMinSco u-f"><view>最低分:</view>{{list.minSco}}</view>
							</view>							
						</view>
						<view @tap="collectionFun(index)">
							<view v-if="!collectionFlag[index]" class="icon iconfont icon-shoucang" >
							</view>
							<view v-else class="icon iconfont icon-wodeshoucang"
							>
							</view>
						</view>
					</view>
					<view class="listBottom">
						<view class="collLevel"><view>综合评级:</view><view>{{list.level}}</view></view>
					</view>
				</view>
			</view>
		</block>
	</view>
</view>
</template>

<script>
	export default {
		data() {
			return {
				// list1:getApp().globalData.global_colle,
				"photoheight":504,           //可用屏幕的高度
				contentHeight:300,           //下拉框底部距离屏幕顶部的距离
				contenttop:20,               //下拉框顶部距离屏幕顶部的距离  
				down:[],                     //空数组，保存每个下拉框的状态。当down【index】为true时，出现下拉框
				flag:false,                  //当falg为true时，出现遮罩层，并且作为下拉框状态传递的中间参数
				clickNum:-1,                 //纪录上次点击的是哪个下拉框，初始值是-1，表示上次没有选中下拉框
				collectionFlag:getApp().globalData.global_collectionFlag,
				collectionArr:getApp().globalData.global_collection_arr  ,//收藏的学校
				tits:[],             //导航栏 
				filterArrs:this.list
			}
		},
		props:{
			titles:Array,
			contentArrs:Array,
			list:Array
		},
		onReady() {
			this.tits=["所在地","级别","高校层次","类型"]
			console.log(this.titles);
		},
		updated() {                              //在.content部分下拉弹出以后，获得dom元素的具体高度信息
			let view=uni.createSelectorQuery().in(this).select('.box');
			view.boundingClientRect(data=>{
				// console.log(data.bottom)
				this.contentHeight=data.bottom
				this.contenttop=data.top
				// console.log(data);
			}).exec();
			uni.getSystemInfo({
				success:e=>{
					 // console.log(e.windowHeight)
					 this.photoheight=e.windowHeight
				}
			});
		},
		methods: {
			filteFun(clickNum,key,index){
				let list=this.list    //渲染的数组
				let filterArr=list
				this.filterArrs=filterArr;
				console.log(this.titles);
				// 	//换导航栏的内容
				this.tits[clickNum]=this.contentArrs[clickNum][key][index];
				console.log(this.titles);
				for(let i=0;i<this.tits.length;i++){
					filterArr=[]          //搜寻的数组
					if(this.tits[i]!="全部"&&this.tits[i]!="级别"&&
					   this.tits[i]!="所在地"&&this.tits[i]!="高校层次"&&
					   this.tits[i]!="类型"){
						   switch(true){
							   case i==0:
							   for(let j=0;j<list.length;j++){
								   if(list[j].address==this.tits[i]){
									   filterArr.push(list[j])
							   		}		
							   	};
								this.filterArrs=filterArr;
								list=this.filterArrs
								break;
								case i==1:
								console.log("这里应该选择学校级别");
								break;
								case i==2:
								for(let j=0;j<list.length;j++){
									if(list[j].project+'工程'==this.tits[i]){
										filterArr.push(list[j])
									}		
								};
								this.filterArrs=filterArr;
								list=this.filterArrs
								break;
								case i==3:
								for(let j=0;j<list.length;j++){
									if(list[j].type==this.tits[i]){
										filterArr.push(list[j])
									}		
								};
								this.filterArrs=filterArr;
								list=this.filterArrs
								break;
						   }
					}
			    }
				// console.log(this.filterArrs);
				// console.log(this.list);
				this.cancel()
			},
			selectionFun(index){
				if(this.clickNum==index){
					this.down=[]                        //每次点击时，使得其他兄弟节点不出现下拉框
					this.down[index]=this.flag            
					this.down[index]=!this.down[index]
					this.flag=this.down[index]         //保存该下拉框的状态
				}else{
					this.down=[]
					this.down[index]=!this.down[index]
					this.flag=this.down[index]
				}
				this.clickNum=index                   //纪录这次点击的是哪个下拉框
				// console.log(this.down)
				// console.log(this.flag)
				// console.log(index);
				// return Promise.this.clickNum
			},
			cancel(){
				this.down=[],
				this.flag=false
			},
			collectionFun(index){
				this.collectionFlag[index]=!this.collectionFlag[index];
				getApp().globalData.global_collectionFlag=this.collectionFlag;
				// this.collectionFlag=getApp().globalData.global_collectionFlag;
				// console.log(this.collectionFlag[index]);
				// console.log(getApp().globalData.global_collectionFlag);
				if(this.collectionFlag[index]){
					uni.showToast({
					"title":"收藏成功"
					});	
					this.collectionArr.push(getApp().globalData.global_colle[index])
					// console.log(this.collectionArr)
					 getApp().globalData.global_collection_arr=this.collectionArr
				}else{
					uni.showToast({
						"title":"取消收藏"
					});
					for(let i=0;i<getApp().globalData.global_collection_arr.length;i++){
						// console.log(getApp().globalData.global_collection_arr[i].name);
						if(getApp().globalData.global_collection_arr[i].name==
						   getApp().globalData.global_colle[index].name){
							   this.collectionArr.splice(i,1)
							   getApp().globalData.global_collection_arr=this.collectionArr
							   // console.log(this.collectionArr);
						   }
					}
				}	
			}
		}
	}
</script>

<style scoped>
.u-f{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.option{
	display: flex;
	width: 100%;
	position: fixed;
	background: rgba(255,255,255,1);
	top: 0;
}
.selection{
	flex: 1;
	height: 55upx;
	line-height: 55upx;
	font-size: 30upx;
	color: #999999;
}
.selection .icon{
	font-size: 20upx;
	margin-left: 15upx;
	margin-top: 10upx;
}
.icon-up-fill{
	margin-bottom: 15upx;
}
.down{
	color: red;
}
.option-bar .content{
	max-height: 600upx;
	overflow-y: scroll;
	color: #000000;
	background: rgba(255,255,255,1);
}
.line>view{
	border-bottom: 1px solid #B2B2B2;
	margin-left: 30upx;
	padding: 20upx;
}
.line>view:last-child{
	border-bottom: 1px solid white;
}
//遮罩层
.page{
	width: 100%;
	position: fixed;
	bottom: 0upx;
	background: rgba(0,0,0,0.2);
	z-index: 100;
}
.box{
	position: fixed;
	top: 55upx;
	z-index: 999;
}
.prevent_move{
	overflow: hidden;
}
/* 内容部分 */
.mainstay{
	margin-top: 55upx;
	width: 100%;
}
.mainstay .collList{
	width:100%;
	height: 310upx;
	border-top: 25upx solid rgba(245,245,245,1);
	display: flex;
}
/* 校徽部分 */
.mainstay .collList .listLeft{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	flex: 1;
	padding: ;
	justify-content: center;
	align-items: center;
}
.mainstay .collList .listLeft .collPic{
	width: 100%;
	height: 210upx;
}
.mainstay .collList .listLeft .collPic image{
	margin-left: 5%;
	margin-top: 20%;
	width: 90%;
	height: 80%;
}
/* 左边学校名字 */
.mainstay .collList .listLeft .collName{
	width: 100%;
	height: 100upx;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 30upx;
}
.mainstay .collList .listRight{
	display: flex;
	flex: 3;
	flex-direction: column;
}
.mainstay .collList .listRight .listTop{
	display: flex;
	flex-wrap: wrap;
	height: 210upx;
}
/* 右边的分布 */
.mainstay .collList .listRight .listTop>view{
	display: flex;
	flex-direction: column;
	color: black;
	flex-wrap: nowrap;
}
/* 地区,类型,985/211 */
.mainstay .collList .listRight .listTop>view>view:first-of-type{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	height: 120upx;
	align-items: center;
}
/* 平行四边形样式 */
.mainstay .collList .listRight .listTop>view>view:first-of-type>view{
	display: flex;
	background: #F1F1F1;
	min-width: 20%;
	max-width: 42%;
	margin: 20upx 0upx 20upx 20upx;
	justify-content: center;
	align-items: center;
	transform: skew(-12deg);
	z-index: -1;
}
/* 平行四边形里面字体的样式 去除倾斜*/
.deletDeg{
	font-size: 25upx;
	transform: skew(12deg);
}
/* 最低分,最高分 */
.mainstay .collList .listRight .listTop>view>view:last-of-type{
	display: flex;
	height: 90upx;
	flex-direction: row;
	font-size: 30upx;
}
/* 最高分,最低分颜色 */
.mainstay .collList .listRight .listTop .collMaxSco>view{
	color: #999999;
	margin-right: 15upx;
}
.mainstay .collList .listRight .listTop .collMaxSco{
	margin-right: 50upx;
	margin-left: 20upx;
}
.mainstay .collList .listRight .listTop .collMinSco>view{
	color: #999999;
	margin-right: 15upx;
}
/* 收藏图标和左边内容的比例是3:1 */
.mainstay .collList .listRight .listTop>view:first-of-type{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	flex: 3;
}
.mainstay .collList .listRight .listTop>view:last-of-type{
	flex: 1;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: 50upx!important;
	display: flex;
}
.mainstay .collList .listRight .listTop .icon{
	flex: 1;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: 50upx!important;
	font-weight: 100;
}
.icon-wodeshoucang{
	color:#FFB400;
	font-size: 50upx!important;
}
/* 综合评级行的设置 */
.mainstay .collList .listRight .listBottom{
	padding-top: 20upx;
	padding-left: 350upx;
	font-size: 30upx;
	color: #999999;
}
.mainstay .collList .listRight .listBottom>view{
	display: flex;
	flex-direction: row;
}
.mainstay .collList .listRight .listBottom .collLevel>view:last-of-type{
	color: red;
	margin-left: 10upx;
}
</style>