循環以上數據
<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>
)
