discounts-minapp/components/zs-choose-tab/index.vue

<template>
	<view class="">
		
	<view class="choose-tab" :style="{position}">
		<view class="tab-list">
			<view class="tab" v-for="(item,index) in tabList" :class="[chooseList[index] ?'active':'']" :key="index" @click="handleTab(item,index)">
				{{chooseList[index].label|| item.label}}
				<u-icon name="arrow-down" color="#222" size="24"></u-icon>
			</view>
			
		</view>
			 <view class="box" v-show="show">
				<view class="item " :class="[chooseList[active].id == item.id ?'active':'']" v-for="(item,index) in tabList[active].list" :key="index" @click="choose(item)">
					{{item.label}}
				 </view>
				
			 </view>
		
	</view>
		<view class="choose-modal" :style="{background:showModal?'rgba(0, 0, 0, .4)':'none'}" v-show="show" @click="show = false">
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			position: {
				type: String,
				default: 'fixed'
			},
			showModal: {
				type: Boolean,
				default: true
			},
			tabList: {
				type: Array,
				default: ()=>{
					return []
				}
			},
		},
		data() {
			return {
				show:false,
				chooseList:['','','',''],
				list:[],
				active:0,
				// tabList: [{
				// 		id: 1,
				// 		label: '区域',
				// 		list: [

				// 			{
				// 				label: '观山湖'
				// 			},
				// 			{
				// 				label: '白云区'
				// 			},
				// 			{
				// 				label: '花果山区'
				// 			}
				// 		]
				// 	},
				// 	{
				// 		id: 1,
				// 		label: '全部分类',
				// 		list: [{
				// 				label: '甜点饮品'
				// 			},
				// 			{
				// 				label: '特色美食'
				// 			},
				// 			{
				// 				label: '风味小吃'
				// 			}
				// 		]
				// 	},
				// 	{
				// 		id: 1,
				// 		label: '智能排序',
				// 		list: [

				// 			{
				// 				label: '距离优先'
				// 			},
				// 			{
				// 				label: '销量优先'
				// 			},
				// 			{
				// 				label: '低价优先'
				// 			}
				// 		]
				// 	},
				// 	{
				// 		id: 1,
				// 		label: '附近',
				// 		list: [

				// 			{
				// 				label: '500m'
				// 			},
				// 			{
				// 				label: '1KM'
				// 			},
				// 			{
				// 				label: '2KM'
				// 			}
				// 		]
				// 	},
				// ]
			}
		},
		methods: {
			handleTab(item,index) {
				this.active = index
				this.$nextTick(()=>{
					this.show = true
				})
			},
			choose(item){
				this.show = false
				this.chooseList[this.active] = item.id == this.chooseList[this.active].id?'':item
				this.$emit('choose',this.chooseList)
			},
		},
	}
</script>

<style lang="scss" >
	.choose-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .4);
		z-index: 99;
	}

	.choose-tab {
		// position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;
		.tab-list{
			display: flex;
			align-items: center;
			padding: 22rpx;
			background: #fff;
			.tab {
				background: #F0F0F0;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				height: 40rpx;
				line-height: 40rpx;
				color: #222222;
				font-size: 24rpx;
				padding: 0 20rpx;
				margin-right: 16rpx;
				display: flex;
				align-items: center;
				.u-icon{
					margin-left: 5rpx;
				}
			}
		}
		
		.box{
			background: #fff;
			border-radius: 0rpx 0rpx 16rpx 16rpx;
			padding: 14rpx 0;
			max-height: 600rpx;
			overflow: auto;
			.item{
				font-size: 24rpx;
				color: #222222;
				padding: 14rpx 24rpx;
			}
		}
			.active{
				color: #3879F9!important;
			}
	}
</style>