122 lines
2.6 KiB
Vue
122 lines
2.6 KiB
Vue
<template>
|
|
<view class="filter-popup__content__right__items" :id="`filter_${info.id}`">
|
|
<view class="filter-popup__content__right__items__title">{{
|
|
info.title
|
|
}}</view>
|
|
<view
|
|
v-for="(detailItem, index) in info.details"
|
|
:key="detailItem.id"
|
|
class="filter-popup__content__right__items__item"
|
|
:class="{ active: detailLists.includes(detailItem.value) }"
|
|
@click="selectDetail(detailItem)"
|
|
>
|
|
{{ detailItem.name }}
|
|
</view>
|
|
<slot></slot>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
/**
|
|
* selectDetail 块被点击
|
|
* isSingle 是否单选
|
|
*/
|
|
export default {
|
|
name: "filterCard",
|
|
props: {
|
|
info: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
//是否单选
|
|
isSingle: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
// 选中的详情列表
|
|
infoDetailList: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
detailLists: [], // 选中的详情列表
|
|
};
|
|
},
|
|
created() {
|
|
|
|
},
|
|
computed: {
|
|
|
|
},
|
|
watch: {
|
|
infoDetailList: {
|
|
handler(newVal, oldVal) {
|
|
// 当父组件传入的 infoDetailList 变化时，执行此处逻辑
|
|
if(newVal.value=[]){
|
|
this.detailLists = newVal;
|
|
}
|
|
|
|
},
|
|
deep: true, // 若 infoDetailList 是复杂数组/对象（含嵌套），需要深度监听
|
|
immediate: true // 初始化时立即执行一次（获取初始值）
|
|
}
|
|
},
|
|
methods: {
|
|
selectDetail(detail) {
|
|
if (this.detailLists.includes(detail.value)) {
|
|
//如果已经存在删除存在的字段
|
|
this.detailLists = this.detailLists.filter(
|
|
(item) => item !== detail.value
|
|
);
|
|
} else {
|
|
if (this.isSingle) {
|
|
//如果是单选，清空之前的选择
|
|
this.detailLists = [];
|
|
}
|
|
this.detailLists = [...this.detailLists, detail.value];
|
|
}
|
|
this.$emit("selectDetail", this.detailLists);
|
|
},
|
|
reset() {
|
|
this.detailLists = [];
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.filter-popup__content__right__items {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10rpx;
|
|
margin-bottom: 40rpx;
|
|
&__title {
|
|
width: 100%;
|
|
font-weight: 500;
|
|
font-size: 26rpx;
|
|
color: #333333;
|
|
line-height: 37rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
margin-bottom: 14rpx;
|
|
}
|
|
&__item {
|
|
width: 178rpx;
|
|
height: 78rpx;
|
|
background: #f3f6f8;
|
|
border-radius: 10rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1rpx solid #f3f6f8;
|
|
}
|
|
.active {
|
|
background: rgba(252, 67, 124, 0.1);
|
|
color: #E8101E;
|
|
border: 1rpx solid #E8101E;
|
|
}
|
|
}
|
|
</style>
|