【uniapp】多规格选择

效果图

VUE

<template>
<view>
	<view class="wp-80 pd-tb-40 mg-auto">
		<button type="warn" @click="showDrawer('showRight')">筛选</button>
	</view>
	<!-- 筛选-uni-drawer -->
	<uni-drawer ref="showRight" mode="right" :width="300" :top="44"
	@change="change($event,'showRight')">
	<view class="dra_position safe_area">
		<scroll-view class="scroll-view-box dra_position" scroll-y="true">
			<view class="pd-25">
				<block v-for="(item,n) in drawer_list" :key="n">
					<view class="pd-b-20">{{item.title}}</view>
					<view class="fss flex-wrap scroll-view-div">
					<block v-for="(aitem,index) in item.options" :key="index">
						<view class="radius5 fcc" :class="subIndex[n] == index?'active':''"
						@click="chooseItem(n,aitem.name,index)">
							<text>{{aitem.name}}</text>
						</view>
					</block>
					</view>
				</block>
			</view>
		</scroll-view>
		<view class="dra_close fbc bg-fff">
			<view class="btns wp-47 radius50" @click="reset">重置</view>
			<view class="btns1 wp-47 radius50" @click="closeDrawer('showRight')">确定</view>
		</view>
	</view>
	</uni-drawer>
</view>
</template>

<script>
import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
export default {
	components: { uniDrawer },
	data() {
		return {
			drawer_list: [
				{ "title": "客户来源", "name": "source",
					options:[
						{ id: 25, "name": "百度贴吧" },
						{ id: 26, "name": "淘宝" },
						{ id: 27, "name": "抖音粉丝" },
						{ id: 28, "name": "官网客服" },
						{ id: 29, "name": "百度点击" },
					]
				},{ "title": "客户级别", "name": "level",
					options:[
						{ id: 22, "name": "意向极高" },
						{ id: 23, "name": "中等意向" },
						{ id: 24, "name": "一般意向" },
					]
				},{ "title": "客服", "name": "kefu",
					options:[
						{ id: 1, "name": "男客服" },
						{ id: 2, "name": "女客服" },
					]
				}
			],
			selectArr: [],
			subIndex: [],
		}
	},
	methods: {
		chooseItem( _pIndex, _name, index) {
			if (this.selectArr[_pIndex] != _name) {
				this.$set(this.selectArr, _pIndex, _name);
				this.$set(this.subIndex, _pIndex, index);
			} else {
				this.$set(this.selectArr, _pIndex, '');
				this.$set(this.subIndex, _pIndex, -1); //去掉选中颜色
			}
			console.log(this.selectArr)
		},
		// 抽屉状态发生变化触发
		change(e, type) { this[type] = e },
		// 打开抽屉
		showDrawer(e) { this.$refs[e].open() },
		// 关闭抽屉
		closeDrawer(e) { this.$refs[e].close() },
		// 重置
		reset() {
			this.selectArr=[]
			this.subIndex=[]
		},
	}
}
</script>

<style lang="scss">
.wp-80{ width: 80%; }
.wp-47{ width: 47%; }
.mg-auto{ margin: 0 auto; }
.pd-25{ padding: 25rpx; }
.pd-b-20{ padding: 0 0 20rpx; }
.pd-tb-40{ padding: 40rpx 0; }
.bg-fff{ background-color: #FFFFFF; }
.radius5{ border-radius: 5rpx; }
.radius50{ border-radius: 50rpx; }
.flex-wrap{ flex-wrap: wrap; }
.fss{
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}
.fbc{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.fcc{
	display: flex;
	justify-content: center;
	align-items: center;
}
.safe_area{
	margin-bottom: constant(safe-area-inset-bottom);  
	margin-bottom: env(safe-area-inset-bottom); 
}
.dra_position{
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	height: auto;
}
.scroll-view-box{ font-size: 28rpx; bottom: 84rpx; }
.dra_close{
	box-sizing: border-box;
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 15rpx 30rpx 20rpx;
	>view{
		height: 68rpx;
		line-height: 68rpx;
		text-align: center;
	}
	.btns{ color: #a12a30; border: 1px solid #a12a30; }
	.btns1{ color: #FFFFFF; background-color: #a12a30; }
}
.scroll-view-div{
	>view:nth-child(3n-1){ margin: 0 10rpx; }
	>view{
		width: 32%;
		height: 72rpx;
		margin-bottom: 16rpx;
		text-align: center;
		background-color: #F5F5F5;
	}
	.active{
		color: #ff000b;
		background-color: #fff4f3;
	}
}
</style>