zhapp/pages/reward/benefitSingleItem.vue

<template>
	<view class="page">
		<!-- 头部切换 -->
		<u-sticky zIndex="999" customNavHeight="0" style="position: relative;">
			<uni-NavBar headerTitle="权益单品" background="#fff" :isSlot="false" :rightSlot="true"
				borderBottom="1rpx solid #eee">
			</uni-NavBar>
			<uni-dropdown :close-on-click-mask="mask" ref="uDropdown" :activeColor="activeColor" border-radius="10"
				menuIcon="arrow-down-fill" :borderBottom="borderBottom" @menuClick="menuClick">
				<uni-dropdown-item :title="location.cityName || '地区'"></uni-dropdown-item>
				<uni-dropdown-item title="价格区间">
					<view class="slotArea">
						<view class="p-3">
							<!-- 双边滑动选择器 -->
							<view class="slider-header dis a-c j-s ">
								<text>价值</text>
								<text>{{ queryInfo.minPrice }}-{{ queryInfo.maxPrice }}元</text>
							</view>
							<view style="padding: 0 40rpx;">
								<uni-tianzai-slider-range :step="50" :min="0" :max="1000"
									:value="[queryInfo.minPrice, queryInfo.maxPrice]" @change="onChange" @end="onEnd">
								</uni-tianzai-slider-range>
							</view>
							<view class="options dis a-c f-wrap mt-3">
								<view class="options-card  dis a-c j-c"
									:class="item.label == priceRangeName ? 'active' : ''"
									v-for="(item, index) in priceRangeOptions" :key="index"
									@click="filterCriteriaClick(item)">
									{{ item.label }}
								</view>
							</view>
						</view>
						<!-- 按钮 -->
						<view class="slider-btn dis a-c j-s">
							<view class="btn dis a-c j-c mr-3" @click="clearForm">
								清空
							</view>
							<view class="btn btns dis a-c j-c" @click="querySearch">
								确定
							</view>
						</view>
					</view>
				</uni-dropdown-item>
				<uni-dropdown-item title="默认排序">
					<view class="slotArea">
						<view class="sort">
							<view class="item dis a-c  " @click="sortItem(item.value)"
								v-for="(item, index) in sortOrderOptions" :key="index">
								<text class="text" :class="{ 'sort-active': item.value === queryInfo.sortType }">{{
									item.label }}</text>
								<view class="slice dis a-c j-c " v-if="item.value === queryInfo.sortType">
									<u-icon name="checkmark" color="#333" size="11" :bold="true"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</uni-dropdown-item>
			</uni-dropdown>
			<view class="tabView">
				<u-tabs :list="tabsList" @click="tabClick" :current="statusCurrent" :scrollable="true" lineWidth="32"
					:activeStyle="{ color: '#333', fontWeight: 'bold', fontSize: '30rpx' }"
					:inactiveStyle="{ color: '#999', fontSize: '30rpx' }" :itemStyle="{ height: '48rpx' }">
					<view slot="right" class="moreFilters dis a-c j-c" @tap="toggleFilterPanel">
						<text>更多</text>
						<u-icon name="list" size="21" color="#999"></u-icon>
					</view>
				</u-tabs>
			</view>
			<!-- 下拉筛选内容 -->
			<view class="dropdown-content" :class="{ 'show': showFilterPanel }">
				<view class="p-3" style="position: relative;">
					<!-- 筛选条件 -->
					<view class="overflow-content">
						<view class="filterCriteria-item mb-3" v-for="(item, index) in tabsList" :key="index">
							<view class="header dis a-c ">
								<image src="/static/icon/equity/Tabler.png" mode=""></image>
								<text class="title">{{ item.name }}</text>
							</view>
							<view class="content">
								<view class="options dis a-c f-wrap mt-3" :class="{ 'collapsed': !item.isExpanded }">
									<view class="options-card dis a-c j-c" :class="childrenitem.active ? 'active' : ''"
										v-for="(childrenitem, childrenindex) in item.children" :key="childrenindex"
										@click="filterOptionClick(childrenitem)">
										{{ childrenitem.name }}
									</view>
								</view>
								<view class="Collapse dis a-c j-c" @click="toggleExpand(item)">
									<image src="/static/icon/equity/Vector.png" mode=""
										:style="{ transform: `rotate(${item.isExpanded ? 180 : 0}deg)` }"></image>
								</view>
							</view>
						</view>

					</view>
					<view class="backgroundBlur"></view>
				</view>
				<view class="dropdown-footer">
					<view class="btn btns dis a-c j-c" @click="confirmFilter">
						确认
					</view>
				</view>
			</view>
			<!-- 下拉遮罩 -->
			<view class="overlay-mask" :class="{ 'show': showFilterPanel }" @click="closeFilterPanel"></view>
		</u-sticky>
		<!-- 内容 -->
		<view class="content-body">
			<!-- 权益列表 -->
			<view class="view-card dis f-c " v-for="(item, index) in privilegeItem" :key="index"
				v-if="privilegeItem.length">
				<!-- 权益信息 -->
				<view class="dis view-header" @click="rightsDetails(item)">
					<!-- 图片 -->
					<image class="image" :src="item.rightsPicture" mode=""></image>
					<view class="content dis f-c j-s">
						<u--text :lines="1" :text="item.rightsName" color="#333" size="16" :bold="true"
							style="line-height: 1;flex:0  auto;"></u--text>
						<view class="sum dis a-c  ">
							<!-- 市场价/ 券数量 -->
							<text class="marketPrice">市场价 {{ item.marketPrice }}</text>
							<u-number-box v-model="item.rightsCount" :min="0" style="margin-left: auto;"
								@change="val => onRightsCountChange(val, index, 'privilegeItem', 'contractRate')"
								:asyncChange="true">
								<view slot="minus" class="numberBoxMinus dis a-c j-c ">
									<u-icon name="minus" size="12" color="#333" bold></u-icon>
								</view>
								<text slot="input" class="numberBoxInput">
									{{ item.rightsCount }}
								</text>
								<view slot="plus" class="numberBoxPlus dis a-c j-c ">
									<u-icon name="plus" color="#333" size="12" bold></u-icon>
								</view>
							</u-number-box>
						</view>
						<view class=" dis a-c j-s ">
							<text class="plice">￥{{ item.contractRate }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-empty v-if="privilegeItem.length == 0" mode="car" icon="/static/image/Empty1.png" text="没有可用的权益券，换个地区试试~"
			width="120" height="120">
		</u-empty>
		<!-- 底部样式 -->
		<view class="footer dis a-c">
			<!-- 图标 -->
			<view class="icon-view dis f-c a-c ">
				<view class="">
					<image src="/static/icon/balance/balance.png" mode=""></image>
					<u-badge numberType="overflow" :max="99" :value="selectedCount" :absolute="true" color="#fff"
						bgColor="#FF4545" :offset="[-5, -5]" style="font-size: 18rpx;"></u-badge>
				</view>
				<text>已选</text>
			</view>
			<!-- 价格 -->
			<view class="dis f-c a-start">
				<view class="price">
					<text>￥</text>
					<text>{{ totalPriceCount }}</text>
				</view>
				<text class="marketPrice">市场价：{{ totalMarketPriceCount }}</text>
			</view>
			<view class="footer-btn" @click="userRightsSubmit">
				立即发放
			</view>
		</view>
		<!-- 省市区组件 -->
		<uni-areaCascadePicker :show="addressPickershow" @confirm="addressConfirm" @close="areaCascadeClose"
			@cancel="addressPickershow = false"></uni-areaCascadePicker>
		<!-- 自定义加载动画 -->
		<u-overlay :show="loadingShow" style="background-color: rgba(255, 255, 255, 0.6);">
			<view class="dis f-c a-c j-c " style="height: 100%;">
				<u-loading-icon></u-loading-icon>
				<text style="color: #909399;" class="mt-1">{{ loadingText }}</text>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import LocationService from '@/utils/location';
	import Decimal from 'decimal.js';
	export default {
		data() {
			return {
				availableAmount: 0, //可用金额
				loadingShow: true, //加载
				loadingText: '加载中', //加载提示文字
				vehicleTaxIsExpanded: false, //明细 展开收起
				// 位置信息
				location: {
					cityName: "",
				},
				privilegeItem: [], //权益单品列表
				// 页面初始化查询信息
				queryInfo: {
					countryAll: "", //省市区
					minPrice: 0,
					maxPrice: 1000,
					sortType: 0, //排序  0 默认 1低价  2高价
					classifyList: [],
					pageNo: 1,
					pageSize: 20,
				},
				addressPickershow: false, //省市区组件
				mask: true, //点遮罩关闭
				borderBottom: true,
				activeColor: '#333', //下拉菜单选中激活项
				doubleResult: null,
				singleResult: null,
				statusCurrent: 0, //状态tabs切换
				showFilterPanel: false, //更多筛选面板显示控制

				// 筛选选项
				filterOptions: [{
						label: '选项1',
						value: 1,
						active: false
					},
					{
						label: '选项2',
						value: 2,
						active: false
					},
					{
						label: '选项3',
						value: 3,
						active: false
					},
					{
						label: '选项4',
						value: 4,
						active: false
					},
				],

				// 分类tab列表
				tabsList: [],
				// 排序
				sortOrderOptions: [{
						label: '默认排序',
						value: 0,
					},
					{
						label: '低价优先',
						value: 1,
					},
					{
						label: '高价优先',
						value: 2,
					}
				],
				priceRangeName: "", //区间选中
				// 价格区间列表
				priceRangeOptions: [{
						label: "100元以下",
						value: [0, 100]
					},
					{
						label: "100-200元",
						value: [100, 200]
					},
					{
						label: "200-300元",
						value: [200, 300]
					},
					{
						label: "300-400元",
						value: [300, 400]
					},
					{
						label: "400-500元",
						value: [400, 500]
					},
					{
						label: "500-1000元",
						value: [500, 1000]
					},
				],
			}
		},
		onShow() {

		},
		async onLoad(options) {
			this.loadingShow = true;
			try {
				if (options) {
					this.availableAmount = options.availableAmount;
				}
				// 获取定位城市信息
				const locationData = await LocationService.initLocation();
				console.log(locationData);
				if (locationData.provinceCode) {
					this.queryInfo.countryAll =
						`${locationData.provinceCode},${locationData.cityCode},${locationData.districtCode}`; //
					this.location.cityName =
						`${locationData.provinceName}-${locationData.cityName}-${locationData.districtName}`;
				}

				await this.getequityClassification(); //权益分类
				await this.getprivilegeItem(); //权益单品列表
				console.log();
				this.loadingShow = false;
			} catch (error) {
				this.loadingShow = false;
			}


		},
		computed: {
			selectedCount() {
				const total = this.privilegeItem.reduce(
					(sum, item) => sum.plus(new Decimal(item.rightsCount)),
					new Decimal(0)
				);
				const sum = new Decimal(total);
				return sum.toString();
			},
			//选中售价总和
			totalPriceCount() {
				const total = this.privilegeItem.reduce(
					(sum, item) => {
						// 计算当前项的 packagePrice * quantity（高精度乘法）
						const itemTotal = new Decimal(item.contractRate).times(new Decimal(item.rightsCount));
						// 累加到总和
						return sum.plus(itemTotal);
					},
					new Decimal(0) // 初始值
				);
				const sum = new Decimal(total);
				return sum.toString(); // 返回字符串
			},
			//选中市场价总和
			totalMarketPriceCount() {
				const total = this.privilegeItem.reduce(
					(sum, item) => {
						// 计算当前项的 packagePrice * quantity（高精度乘法）
						const itemTotal = new Decimal(item.marketPrice).times(new Decimal(item.rightsCount));
						// 累加到总和
						return sum.plus(itemTotal);
					},
					new Decimal(0) // 初始值
				);
				const sum = new Decimal(total);
				return sum.toString(); // 返回字符串
			}

		},
		methods: {

			//权益商品详情
			async rightsDetails(item) {
				await this.$http.post('/rightsGrant/get/product', {
					rightsId: item.id
				}).then(res => {
					if (res.code == 200) {}
				});
			},
			// 获取权益分类
			async getequityClassification() {
				// 递归添加 active 字段
				const addActiveField = (data) => {
					if (!data || !Array.isArray(data)) return;

					data.forEach(item => {
						item.active = false;
						item.isExpanded = false;
						if (item.children && Array.isArray(item.children)) {
							addActiveField(item.children);
						}
					});
				};
				await this.$http.post('/rightsGrant/get/category').then(res => {
					if (res.code == 200) {
						addActiveField(res.data);
						this.tabsList = res.data;
						this.queryInfo.classifyList = [this.tabsList[0].id];
					}
				});
			},

			// 权益数量变化监听
			onRightsCountChange(e, index, name, field) {
				// 获取当前项
				const item = this[name][index];
				// 获取当前数量和新数量
				const currentCount = item.rightsCount;
				const newCount = e.value;

				// 计算价格
				const price = parseFloat(item[field]);
				// 计算当前总价
				const currentTotalPrice = parseFloat(this.totalPriceCount);

				// 计算数量变化和价格变化
				const countChange = newCount - currentCount;
				const priceChange = countChange * price;
				// 计算新总价
				const newTotalPrice = currentTotalPrice + priceChange;

				// 如果是增加数量，检查是否超过可用金额
				if (countChange > 0 && newTotalPrice > this.availableAmount) {
					uni.showToast({
						title: `权益总价不能超过可用金额${this.availableAmount}元`,
						icon: 'none'
					});
				} else {
					// 无论是减少数量还是增加数量且未超过限制，都允许更新
					item.rightsCount = newCount;
				}
			},
			// 确认选择
			async userRightsSubmit() {
				// 验证是否有选择权益
				if (parseInt(this.selectedCount) === 0) {
					uni.showToast({
						title: '请至少选择一项权益',
						icon: 'none'
					});
					return;
				}
				// 收集选择的权益单品
				const selectedItems = this.privilegeItem
					.filter(item => item.rightsCount > 0)
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				console.log(selectedItems);
				prevPage.$vm.insOrderRightsList = selectedItems; //选中权益列表
				uni.navigateBack({ //uni.navigateTo跳转的返回，默认1为返回上一级
					delta: 1
				});
			},
			//获取权益单品列表
			async getprivilegeItem() {
				let res = await this.$http.post('/rightsGrant/rights/list', this.queryInfo);
				if (res.code == 200) {
					this.privilegeItem = res.data.records;
				}
			},
			// 省市区选择回调
			async addressConfirm(e) {
				console.log(e);
				this.queryInfo.countryAll = e.codes.join(',') || "";
				this.location.cityName = e.fullAddress;
				this.addressPickershow = false;
				this.$refs.uDropdown.close();
				await this.getprivilegeItem();
			},
			// 查看明细
			detailClick() {

			},
			async querySearch() {
				this.$refs.uDropdown.close();
				await this.getprivilegeItem();
			},
			//清空价格区间
			async clearForm() {
				this.queryInfo.minPrice = 0;
				this.queryInfo.maxPrice = 1000;
				this.priceRangeName = "";
				this.$refs.uDropdown.close();

				await this.getprivilegeItem();
			},
			filterCriteriaClick(item) {
				this.priceRangeName = item.label;
				this.queryInfo.minPrice = item.value[0];
				this.queryInfo.maxPrice = item.value[1];
			},
			//排序选择
			async sortItem(value) {
				this.queryInfo.sortType = value;
				this.$refs.uDropdown.close();
				await this.getprivilegeItem();
			},
			// 价格区间选择
			onChange(values) {
				this.queryInfo.minPrice = values[0];
				this.queryInfo.maxPrice = values[1];
			},
			// 下拉菜单选项事件
			menuClick(value) {
				if (value == 0) {
					this.addressPickershow = true;
				}
			},
			onEnd(event) {
				console.log('最终选择:', event.values);
			},
			areaCascadeClose() {
				this.addressPickershow = false;
				this.$refs.uDropdown.close();
			},
			// tabs状态切换
			async tabClick(e) {
				console.log(e);
				this.statusCurrent = e.index;
				this.queryInfo.classifyList = [e.id];
				await this.getprivilegeItem();
				if (this.scrollTop > 0) {
					uni.pageScrollTo({
						selector: 'content-body', // 滚动到顶部
						duration: 100, // 动画时长（ms）
					});
				}

			},
			// 切换筛选面板
			toggleFilterPanel() {
				this.showFilterPanel = !this.showFilterPanel;
			},
			// 关闭筛选面板
			closeFilterPanel() {
				this.showFilterPanel = false;
			},
			// 筛选选项点击
			filterOptionClick(item) {
				item.active = !item.active;
				if (item.active) {
					// 选中：添加到 classifyList
					if (!this.queryInfo.classifyList.includes(item.id)) {
						this.queryInfo.classifyList.push(item.id);
					}
				} else {
					// 取消选中：从 classifyList 中删除
					const index = this.queryInfo.classifyList.indexOf(item.id);
					if (index > -1) {
						this.queryInfo.classifyList.splice(index, 1);
					}
				}
			},
			// 展开收起
			toggleExpand(item) {
				console.log(item);
				item.isExpanded = !item.isExpanded;
			},
			// 重置筛选
			resetFilter() {
				this.filterOptions.forEach(item => {
					item.active = false;
				});
				this.$u.toast('已重置筛选条件');
			},
			// 确认筛选
			async confirmFilter() {
				// 获取选中的筛选项
				const selectedFilters = this.filterOptions.filter(item => item.active);
				console.log('选中的筛选条件:', selectedFilters);
				this.closeFilterPanel();
				await this.getprivilegeItem();
				this.$u.toast('筛选成功');
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F8F8F8;
		height: 100vh;
	}

	.container {
		padding: 20rpx;
	}

	.dropdown-title {
		font-size: 32rpx;
		color: #333;
	}

	.reward-tabs {
		margin-right: 48rpx;
		flex: 1;
	}

	/* 自定义tab滑块样式 */
	::v-deep .u-tabs__wrapper__nav__line {
		background-color: transparent !important;
		font-size: 30px;
	}

	::v-deep .u-tabs__wrapper__nav__item__text {
		font-size: 32rpx;
	}

	/* 自定义tab滑块样式 */
	::v-deep .u-tabs__wrapper__nav__line {
		background: linear-gradient(90deg, #FDE935 10%, rgba(253, 233, 53, 0.1) 100%) !important;
		border-radius: 6rpx;
	}



	.slotArea {
		background-color: #FFFFFF;
		border-top: 1rpx solid #eee;

		.slider-header {
			text:first-child {
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
			}

			text:last-child {
				font-size: 28rpx;
				color: #333;
			}
		}

		.slider-btn {
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 20rpx 20rpx;
			border-top: 1rpx solid #EEEEEE;
			padding: 30rpx 44rpx;
			box-sizing: border-box;

			.btn {
				padding: 18rpx 30rpx;
				box-sizing: border-box;
				width: 50%;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				border: 1rpx solid #FDE935;
				font-size: 30rpx;
				color: #333;
			}

			.btns {
				width: 50%;
				background: #FDE935;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
			}
		}

		.sort {
			padding: 30rpx;
			box-sizing: border-box;
			display: grid;
			grid-template-columns: repeat(1, 1fr);
			grid-template-rows: auto;
			row-gap: 30rpx;

			.item {
				text {
					font-size: 30rpx;
					color: #333;
				}

				.slice {
					margin-left: auto;
					width: 32rpx;
					height: 32rpx;
					background: #FDE935;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
				}

			}

			.sort-active {
				font-weight: bold;
			}

		}

		.item-box {
			margin-bottom: 50rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.item {
				border: 1px solid #f2f2f2;
				color: #333;
				padding: 8rpx 40rpx;
				border-radius: 100rpx;
				margin-top: 30rpx;
			}

			.active {
				color: #FFFFFF;
				background-color: #000;
			}
		}

		.options {
			display: grid;
			/* 启用网格布局 */
			grid-template-columns: repeat(3, 1fr);
			/* 3 列，每列等宽 */
			grid-template-rows: auto;
			/* 行高自适应 */
			row-gap: 30rpx;
			/* 只设置行间距（上下） */
			column-gap: 20rpx;
			/* 列间距设为 0（可选） */
		}

		.options-card {
			padding: 11rpx 24rpx;
			box-sizing: border-box;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			border: 1rpx solid #EEEEEE;
			font-size: 28rpx;
			color: #666;
		}

		.active {
			background-color: rgba(253, 233, 53, 0.2);
			border: 1rpx solid #FDE935;
			color: #333;
		}
	}

	.content-body {
		padding: 20rpx 30rpx 166rpx;
		box-sizing: border-box;
		position: relative;

		.view-card {
			background-color: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;

			.view-header {
				padding: 25rpx 30rpx;
				box-sizing: border-box;

				.image {
					width: 136rpx;
					height: 136rpx;
					border-radius: 10rpx;
					flex-shrink: 0;
					margin-right: 20rpx;
				}

				.content {
					flex: 1;
					min-width: 0;
					line-height: 1;

					.sum {
						text {
							font-size: 24rpx;
							color: #666;
						}
					}

					.plice {
						font-size: 30rpx;
						color: #FF540A;
						font-weight: bold;
						line-height: 1;
					}

					.Detail {
						font-size: 26rpx;
						color: #FFAC1D;
						line-height: 1.4;

						text {
							margin-right: 5rpx;
						}
					}
				}
			}



			.Detail-list {
				padding: 0 30rpx 25rpx;
				box-sizing: border-box;



				.Detail-header {
					width: 100%;
					height: 30rpx;
					background: linear-gradient(0deg, #FFFCEA 0%, #FFFFFF 100%);
					border-radius: 6rpx 6rpx 0rpx 0rpx;
					border-top: 1rpx solid #FFE1A4;
				}

				.Detail-footer {
					width: 100%;
					height: 30rpx;
					background: linear-gradient(0deg, #FFFCEA 0%, #FFFFFF 100%);
					border-radius: 6rpx 6rpx 0rpx 0rpx;
					border-bottom: 1rpx solid #FFE1A4;
				}

				.view {
					.view-header {
						padding: 0 20rpx 20rpx;
						box-sizing: border-box;
						border-bottom: 1rpx solid #eee;
						margin: 20rpx 0;
					}

					.view-header:last-child {
						border-bottom: none;
					}
				}
			}
		}
	}

	// 步进器自定义样式
	.numberBoxMinus {
		width: 32rpx;
		height: 32rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 1rpx solid #FDE935;
	}

	.numberBoxInput {
		font-size: 30rpx;
		color: #333;
		padding: 0 20rpx;
		box-sizing: border-box;
		text-align: center;
	}

	.numberBoxPlus {
		width: 32rpx;
		height: 32rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		background-color: #FDE935;
		border: 1rpx solid #FDE935;
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 25rpx 30rpx 55rpx;
		box-sizing: border-box;
		background: linear-gradient(0deg, #FFFFFF 0%, rgba(255, 254, 245, 0.7) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		backdrop-filter: blur(12rpx);

		.icon-view {
			margin-right: 30rpx;

			>view {
				position: relative;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}



			text {
				font-size: 20rpx;
				color: #333;
			}
		}

		.price {
			text:nth-child(1) {
				font-size: 28rpx;
				color: #FF540A;
			}

			text:nth-child(2) {
				font-size: 42rpx;
				color: #FF540A;
			}

		}

		.marketPrice {
			font-size: 20rpx;
			color: #999;
			letter-spacing: 1rpx;
			margin-left: 4rpx;
		}

		.footer-btn {
			padding: 20rpx 68rpx;
			box-sizing: border-box;
			background: #FDE935;
			border-radius: 58rpx 58rpx 58rpx 58rpx;
			font-size: 36rpx;
			color: #1F1F1F;
			font-weight: bold;
			margin-left: auto;
		}
	}

	.tabView {
		padding: 13rpx 30rpx;
		box-sizing: border-box;
		background-color: #fff;
	}

	.u-empty {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		/* 反向偏移自身宽高的50% */
	}

	.moreFilters {
		font-size: 30rpx;
		color: #999;
	}

	/* 下拉筛选内容 */
	.dropdown-content {
		position: fixed;
		top: 182rpx;
		left: 0;
		right: 0;
		height: 0px;
		background: white;
		overflow: hidden;
		z-index: 100;
		transition: height 0.4s ease;
		border-radius: 0 0 20rpx 20rpx;

		.overflow-content {
			overflow-y: auto;
			height: 926rpx;
			padding-bottom: 45rpx;
			box-sizing: border-box;

		}

		.backgroundBlur {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 115rpx;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 40%, #FFFFFF 100%);
			backdrop-filter: blur(12rpx);
			-webkit-backdrop-filter: blur(12rpx);

			mask-image: linear-gradient(to top,
					rgba(0, 0, 0, 1) 0%,
					rgba(0, 0, 0, 0.6) 60%,
					rgba(0, 0, 0, 0) 100%);
			-webkit-mask-image: linear-gradient(to top,
					rgba(0, 0, 0, 1) 0%,
					rgba(0, 0, 0, 0.6) 60%,
					rgba(0, 0, 0, 0) 100%);
		}


		// 筛选条件
		.filterCriteria-item {
			>.header {
				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 6rpx;
				}

				.title {
					flex: 1;
					font-size: 30rpx;
					color: #333;
					font-weight: bold;
				}
			}

			.content {
				display: flex;
				align-items: start;
				justify-content: space-between;

				.options {
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					grid-template-rows: auto;
					row-gap: 30rpx;
					column-gap: 20rpx;
					transition: all 0.3s ease; // 添加这行

					&.collapsed {
						// 添加这个嵌套样式
						overflow: hidden;
						max-height: 160rpx; // 两行的高度，可以根据实际效果调整
					}

					>.options-card {
						padding: 11rpx 40rpx;
						box-sizing: border-box;
						background: #F5F5F5;
						border-radius: 4rpx;
						font-size: 28rpx;
						color: #333;
					}

					.active {
						background: #FDE935;
					}
				}

				.Collapse {
					margin-top: 30rpx;
					width: 50rpx;
					height: 50rpx;
					background: #F5F5F5;
					border-radius: 50%;

					image {
						width: 20rpx;
						height: 12rpx;
					}

				}
			}

		}

		// 底部按钮
		.footer {
			padding: 30rpx 0;
			border-top: 1rpx solid #eee;

			.btn {
				padding: 18rpx 30rpx;
				box-sizing: border-box;
				width: 50%;
				border-radius: 50rpx;
				border: 1rpx solid #FDE935;
				font-size: 30rpx;
				color: #333;
			}

			.btns {
				width: 50%;
				background: #FDE935;
				border-radius: 50rpx;
			}
		}
	}

	.dropdown-content.show {
		opacity: 1;
		height: 1126rpx;
		overflow: auto;
	}

	/* 下拉区域底部按钮 */
	.dropdown-footer {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 30rpx 44rpx;
		box-sizing: border-box;
		border-top: 1rpx solid #eee;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.btn {
			padding: 18rpx 30rpx;
			box-sizing: border-box;
			width: 100%;
			border-radius: 50rpx;
			border: 1rpx solid #FDE935;
			font-size: 30rpx;
			color: #1f1f1f;
			background: #FDE935;
		}


	}

	/* 遮罩层 */
	.overlay-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		display: none;
		z-index: 99;
	}

	.overlay-mask.show {
		display: block;
	}
</style>