star-uni/pages/task/filter.vue

<template>
	<view class="task-status">
		<view class="platform">
			<view class="platform-item active">
				<view class="name">全部</view>
				<image src="https://blue-data.oss-cn-guangzhou.aliyuncs.com/star/tab-active-badge.png"></image>
			</view>
			<view class="platform-item">
				<view class="name">抖音</view>
				<image src="https://blue-data.oss-cn-guangzhou.aliyuncs.com/star/tab-active-badge.png"></image>
			</view>
			<view class="platform-item">
				<view class="name">快手</view>
				<image src="https://blue-data.oss-cn-guangzhou.aliyuncs.com/star/tab-active-badge.png"></image>
			</view>
			<view class="platform-item">
				<view class="name">小红书</view>
				<image src="https://blue-data.oss-cn-guangzhou.aliyuncs.com/star/tab-active-badge.png"></image>
			</view>
			<view class="platform-item">
				<view class="name">视频号</view>
				<image src="https://blue-data.oss-cn-guangzhou.aliyuncs.com/star/tab-active-badge.png"></image>
			</view>
		</view>
		<view class="filter" @click="showFilter(1)">
			<view class="filter-item" v-for="(item,indx) in filterData" :key="indx">
				{{item.name}}
				<text class="cuIcon-triangledownfill"></text>
			</view>
		</view>
		
		<uni-popup ref="filterPop" type="bottom" border-radius="10px 10px 0 0" background-color="#ffffff" :mask-click="false">
			<view class="filter-popup">
				<view class="title">
					<view class="name">
						<text>任务筛选</text>
						<image src="https://blue-data.oss-cn-guangzhou.aliyuncs.com/star/tab-active-badge.png"></image>
					</view>
					<view class="close" @click="showFilter(2)"><text class="cuIcon-close"></text></view>
				</view>
				<view class="filter-option-body">
					<view class="filter-check" v-for="(item,indx) in filterData" :key="indx">
						<view class="name">{{item.name}}</view>
						<view class="children">
							<view :class="sub.index==0?'children-item active':'children-item'" v-for="(sub,inddx) in item.children" :key="inddx">
								{{ sub.name }}
							</view>
						</view>
					</view>
				</view>
				<view class="filter-btn-group">
					<view class="u-button full">确定</view>
					<view class="u-button" @click="showFilter(2)">取消</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			filterData:this.data
		}
	},
	props: {
		data: {
			type: Array,
			default: []
		},
	},
	methods: {
		showFilter(type){
			if (type == 1) {
				uni.hideTabBar()
				this.$refs.filterPop.open();
			}
			if (type == 2){
				uni.showTabBar() 
				this.$refs.filterPop.close();
			}
		},
	}
}
</script>

<style>


.filter-popup{height: 60vh;}

.filter-popup .filter-option-body{padding: 20rpx;}
.filter-popup .filter-option-body .filter-check{}
.filter-popup .filter-option-body .filter-check .name{font-size: 28rpx;color: #000;}
.filter-popup .filter-option-body .filter-check .children{display: flex;align-items: center;gap: 20rpx;flex-wrap: wrap;}
.filter-popup .filter-option-body .filter-check .children-item{background-color: rgba(246, 246, 246, 1);border-radius: 6rpx;color: rgba(89, 91, 98, 1);font-size: 24rpx;padding: 15rpx 20rpx;text-align: center;margin: 20rpx 0;}
.filter-popup .filter-option-body .filter-check .children-item.active{background-color: rgba(89, 91, 98, 1);color: #fff;}

.filter-popup .title{display: flex;align-items: center;justify-content: space-between;padding: 20rpx;}
.filter-popup .title .name{font-size: 32rpx;color: #000;font-weight: 800;position: relative;}
.filter-popup .title .name text{position: relative;z-index: 999;font-family: "bluevBold";}
.filter-popup .title .name image{width: 82rpx;height: 52rpx;position: absolute;right: -20rpx;bottom: 0;z-index: 99;}

.filter-popup .filter-option-body{height: calc(100% - 200rpx);overflow-y: auto;}
.filter-popup .filter-btn-group{display: flex;align-items: center;gap: 20rpx;padding: 20rpx;}
.filter-btn-group .u-button{font-size: 28upx;height: 80upx;border-radius: 10upx;line-height: 80upx;margin-top: 40upx;color: #333;border: 2upx solid rgba(33, 34, 38, 1);background-color: #fff;flex: 1;text-align: center;font-family: "bluevBold";}
.filter-btn-group .u-button::after{border: 0;}
.filter-btn-group .u-button.full{background-color: rgba(33, 34, 38, 1);color: #fff;}

.task-status .filter{display: flex;align-items: center;justify-content: space-around;gap: 10rpx;}
.task-status .filter .filter-item{display: flex;align-items: center;background-color: rgba(246, 246, 246, 1);border-radius: 12rpx;color: rgba(89, 91, 98, 1);flex: 1;font-size: 24rpx;justify-content: center;padding: 10rpx;}
.task-status .filter .filter-item.active{background-color: rgba(89, 91, 98, 1);color: #fff;}
.task-status .filter .filter-item text{margin-left: auto;margin-right: 0;color: rgba(200, 200, 200, 1);font-size: 28rpx;}

.task-status .platform{display: flex;align-items: center;font-size: 32rpx;color: #666;justify-content: space-around;margin: 20rpx 0;}
.task-status .platform .platform-item{display: flex;align-items: center;position: relative;}
.task-status .platform .platform-item .name{position: relative;z-index: 999;}
.task-status .platform .platform-item image{width: 82rpx;height: 52rpx;position: absolute;right: -20rpx;bottom: 0;z-index: 99;display: none;}
.task-status .platform .platform-item.active image{display: block;}
.task-status .platform .platform-item.active{color: #000;font-weight: 800;font-family: "bluevBold";}
</style>