76 lines
2.0 KiB
Vue
76 lines
2.0 KiB
Vue
|
<template>
|
||
|
|
<view class="popup-container">
|
||
|
|
<view class="popup-header">
|
||
|
|
<text class="title">筛选条件</text>
|
||
|
|
<text class="close" @click="closePopup">关闭</text>
|
||
|
|
</view>
|
||
|
|
<view class="popup-content">
|
||
|
|
<view class="row">
|
||
|
|
<picker mode="selector" :range="brands" @change="onBrandChange">
|
||
|
|
<view class="item">{{ selectedBrand || '选择品牌' }}</view>
|
||
|
|
</picker>
|
||
|
|
<picker mode="selector" :range="styles" @change="onStyleChange">
|
||
|
|
<view class="item">{{ selectedStyle || '选择风格' }}</view>
|
||
|
|
</picker>
|
||
|
|
</view>
|
||
|
|
<view class="column">
|
||
|
|
<checkbox-group @change="onAreaChange">
|
||
|
|
<label class="checkbox-item" v-for="(area, index) in areas" :key="index">
|
||
|
|
<checkbox :value="area">{{ area }}</checkbox>
|
||
|
|
</label>
|
||
|
|
</checkbox-group>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
brands: ['品牌A', '品牌B', '品牌C'], // 品牌列表
|
||
|
|
styles: ['风格1', '风格2', '风格3'], // 风格列表
|
||
|
|
areas: ['区域1', '区域2', '区域3'], // 区域列表
|
||
|
|
selectedBrand: '', // 选中的品牌
|
||
|
|
selectedStyle: '', // 选中的风格
|
||
|
|
selectedAreas: [] // 选中的区域列表
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
onBrandChange(e) {
|
||
|
|
this.selectedBrand = this.brands[e.detail.value];
|
||
|
|
},
|
||
|
|
onStyleChange(e) {
|
||
|
|
this.selectedStyle = this.styles[e.detail.value];
|
||
|
|
},
|
||
|
|
onAreaChange(e) {
|
||
|
|
this.selectedAreas = e.detail.value;
|
||
|
|
},
|
||
|
|
closePopup() {
|
||
|
|
this.$emit('close'); // 关闭弹出层，并触发父组件的方法处理筛选结果
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.popup-container {
|
||
|
|
/* 样式 */
|
||
|
|
}
|
||
|
|
.popup-header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
.row, .column {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
.row {
|
||
|
|
flex-direction: row; /* 横向排列 */
|
||
|
|
}
|
||
|
|
.column {
|
||
|
|
flex-direction: column; /* 竖向排列 */
|
||
|
|
}
|
||
|
|
.item {
|
||
|
|
margin: 10px; /* 间距 */
|
||
|
|
}
|
||
|
|
</style>
|