处理key value数据

在这里插入图片描述

循环以上数据

	<u-popup :round="10" :show="tab === 'OilType'" @close="close" mode="bottom"><view class="container"><view v-for="(allData, allType) in allList" :key="allType"><view class="title">{{ allType }}</view><view class="box"><view v-for="item in allData" :key="item.id" @click="checkItem(item,allType)":class="{ active: isActive(item, allType) }">{{ item.name }}</view></view></view></view></u-popup>

css

	.container .title {display: flex;margin: 10rpx 0;font-family: PingFang SC, PingFang SC;font-weight: 700;font-size: 32rpx;color: #1A1D1F;}.container .box {display: flex;margin: 10rpx 0;flex-wrap: wrap;justify-content: left;}.container .box>view {border: 1px solid #ccc;border-radius: 50rpx;font-size: 30rpx;padding: 6rpx 46rpx;margin: 10rpx;text-align: center;}.container .box .content:last-child {margin-right: 0;}.container .box>view.active {padding: 6rpx 46rpx;background-color: rgb(251, 227, 213) !important;text-align: center;font-size: 24rpx;border-radius: 50rpx;border: 2rpx solid #FD893F !important;color: #FD893F;}

完整代码

<template><view class="hello"><view class="filter"><view @click="checkTab('OilType')" :class="{ active: !!allSelectData }">{{ allSelectData ? allSelectData : "全部" }}<text class="icon cuIcon-triangledownfill"></text></view><view @click="checkTab('distance')" :class="{ active: !!disSelectData }">{{ disSelectData ? disSelectData : "距离" }}<text class="icon cuIcon-triangledownfill"></text></view><view @click="checkTab('filter')">筛选<text class="icon cuIcon-triangledownfill"></text></view></view><u-popup :round="10" :show="tab === 'OilType'" @close="close" mode="bottom"><view class="container"><view v-for="(allData, allType) in allList" :key="allType"><view class="title">{{ allType }}</view><view class="box"><view v-for="item in allData" :key="item.id" @click="checkItem(item,allType)":class="{ active: isActive(item, allType) }">{{ item.name }}</view></view></view></view></u-popup><u-popup :round="10" :show="tab === 'distance'" @close="close" mode="bottom"><view class="distance"><view class="disItem" v-for="(item, index) in distance" :key="index" @click="checkDistance(item)"><view class="title">{{ item.title }}</view></view></view></u-popup><u-popup :round="10" :show="tab === 'filter'" @close="close" mode="bottom"><view class="container"><view v-for="(item, itemIndex) in filter" :key="itemIndex"><view><view class="title">{{ item.title }}</view><view class="box"><view class="content" v-for="(f, fIndex) in item.children" :key="fIndex"@click="checkFilter(itemIndex, fIndex)" :class="{ active: f.check }">{{ f.title }}</view></view></view></view><view class="bottom"><button class="btnOne" type="info" @click="reSet">重置</button><button class="btnTwo" type="primary" @click="success">确定</button></view></view></u-popup></view>
</template><script>import {oilType} from '@/api/distance.js'export default {props: {},data() {return {activeType: null, // 当前活动的类型（汽油、柴油等）  activeId: null, // 当前活动的ID  allSelectData: "", //全部disSelectData: "", //距离tab: "", //控制弹框的显示与隐藏 allList: {},distance: [{title: '距离最近'}, {title: '推荐排序'}, {title: '价格降序'}, {title: '价格升序'}],filter: [{title: "周边",children: [{title: "洗手间",check: false,}, {title: "提供发票",check: false,}, {title: "便利店",check: false,},{title: "免费洗车",check: false,},{title: "免费就餐",check: false,},],}, ]};},onShow() {},methods: {// 全部数据getOilType() {oilType().then(res => {this.allList = res.data.data})},// 全部弹框信息checkItem(item, allType) {// 更新活动的类型和ID  this.activeType = allType;this.activeId = item.id;// 关闭弹框  this.close();},// 高亮isActive(item, allType) {// 判断当前项是否是活动的  return this.activeType === allType && this.activeId === item.id;},// 关闭close() {this.tab = "";},// tab栏checkTab(type) {this.tab = type;this.getOilType()},// 距离checkDistance(item) {item.check = true;if (item.title === '推荐排序') {this.disSelectData = '推荐';} else if (item.title === '距离最近') {this.disSelectData = '距离';} else if (item.title === '价格降序' || item.title === '价格升序') {this.disSelectData = '价格';}this.tab = "";},// 筛选checkFilter(f) {f.check = truethis.tab = "";},checkFilter(itemIndex, fIndex) {// 切换当前选项的选中状态  this.filter[itemIndex].children[fIndex].check = !this.filter[itemIndex].children[fIndex].check;},success() {// 处理确定按钮的逻辑，比如提交筛选条件等  // 然后关闭弹出窗口  this.tab = ''; // 假设关闭弹出窗口是通过将tab设置为空字符串实现的  },reSet() {// 重置所有选项的选中状态  this.filter.forEach(item => {item.children.forEach(f => {f.check = false;});});}},};
</script><style lang="scss">.icon {color: #A7A7A7;}.filter {display: flex;justify-content: space-between;}.filter>view {margin-left: 80rpx;/* width: 33%; */}.filter>view.active {color: #FD893F;}.distance {padding: 30rpx 48rpx;.disItem {text-align: center;line-height: 100rpx;height: 100rpx;width: 100%;border-bottom: 2rpx solid #f9f9f9;}}.container {padding: 30rpx 48rpx;.bottom {display: flex;justify-content: space-between;.btnOne {width: 100%;margin-right: 10rpx;font-size: 28rpx;}.btnTwo {width: 100%;font-size: 28rpx;}}}.container .title {display: flex;margin: 10rpx 0;font-family: PingFang SC, PingFang SC;font-weight: 700;font-size: 32rpx;color: #1A1D1F;}.container .box {display: flex;margin: 10rpx 0;flex-wrap: wrap;justify-content: left;}.container .box>view {border: 1px solid #ccc;border-radius: 50rpx;font-size: 30rpx;padding: 6rpx 46rpx;margin: 10rpx;text-align: center;}.container .box .content:last-child {margin-right: 0;}.container .box>view.active {padding: 6rpx 46rpx;background-color: rgb(251, 227, 213) !important;text-align: center;font-size: 24rpx;border-radius: 50rpx;border: 2rpx solid #FD893F !important;color: #FD893F;}
</style>