315 lines
7.6 KiB
Vue
315 lines
7.6 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<uni-popup
|
||
|
|
ref="popup"
|
||
|
|
type="bottom"
|
||
|
|
@change ="change"
|
||
|
|
border-radius="20rpx"
|
||
|
|
style="z-index: 10000"
|
||
|
|
>
|
||
|
|
<view class="filter-popup">
|
||
|
|
<view class="filter-popup__header"> 全部筛选 </view>
|
||
|
|
<view class="filter-popup__content">
|
||
|
|
<view class="filter-popup__content__left">
|
||
|
|
<view
|
||
|
|
class="filter-popup__content__left__item"
|
||
|
|
v-for="(item, index) in filterList"
|
||
|
|
:class="{ active: selectTabId === item.id }"
|
||
|
|
@click="handleTap(item.id)"
|
||
|
|
:key="item.id"
|
||
|
|
>
|
||
|
|
<view
|
||
|
|
class="filter-popup__content__left__item__point"
|
||
|
|
v-show="filterListSelectLists[item.id]"
|
||
|
|
></view>
|
||
|
|
{{ item.title }}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<scroll-view
|
||
|
|
scroll-y
|
||
|
|
class="filter-popup__content__right"
|
||
|
|
:scroll-into-view="targetId"
|
||
|
|
scroll-with-animation
|
||
|
|
>
|
||
|
|
<slot> </slot>
|
||
|
|
</scroll-view>
|
||
|
|
</view>
|
||
|
|
<view class="filter-popup__footer">
|
||
|
|
<view class="filter-popup__footer__sure filter-popup__footer__btn"
|
||
|
|
@click="sure"
|
||
|
|
>确定</view
|
||
|
|
>
|
||
|
|
<view class="filter-popup__footer__reset filter-popup__footer__btn"
|
||
|
|
@click="reset"
|
||
|
|
>重置</view
|
||
|
|
>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</uni-popup>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
distanceList: [], // 右侧各部分距离顶部的距离
|
||
|
|
targetId: "", // 当前滚动到的目标ID
|
||
|
|
selectTabId: null, // 当前选中的tab id
|
||
|
|
start_price: null,
|
||
|
|
end_price: null,
|
||
|
|
// Filter details
|
||
|
|
filterDetailsLists: [
|
||
|
|
{
|
||
|
|
id: 1,
|
||
|
|
title: "营业时间",
|
||
|
|
details: [
|
||
|
|
{ id: 1, name: "24小时营业" },
|
||
|
|
{ id: 2, name: "9-12时" },
|
||
|
|
{ id: 3, name: "12-14时" },
|
||
|
|
{ id: 4, name: "14-18时" },
|
||
|
|
{ id: 5, name: "18-24时" },
|
||
|
|
{ id: 6, name: "0-9时" },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 2,
|
||
|
|
title: "价格",
|
||
|
|
details: [
|
||
|
|
{ id: 1, name: "0-10元" },
|
||
|
|
{ id: 2, name: "10-30元" },
|
||
|
|
{ id: 3, name: "30-50元" },
|
||
|
|
{ id: 4, name: "50-100元" },
|
||
|
|
{ id: 5, name: "100-300元" },
|
||
|
|
{ id: 6, name: "300+" },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 3,
|
||
|
|
title: "排序",
|
||
|
|
details: [
|
||
|
|
{ id: 1, name: "价格最低" },
|
||
|
|
{ id: 2, name: "价格最高" },
|
||
|
|
{ id: 3, name: "销量最高" },
|
||
|
|
{ id: 4, name: "评分最高" },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
// Filter list select status
|
||
|
|
filterListSelectLists: {
|
||
|
|
type: Array,
|
||
|
|
default: () => [],
|
||
|
|
},
|
||
|
|
filterList: {
|
||
|
|
type: Array,
|
||
|
|
default: () => [
|
||
|
|
{
|
||
|
|
id: 1,
|
||
|
|
title: "营业时间",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 2,
|
||
|
|
title: "价格",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 3,
|
||
|
|
title: "排序",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
watch: {},
|
||
|
|
mounted() {},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
handleTap(id) {
|
||
|
|
this.targetId = `filter_${id}`;
|
||
|
|
this.selectTabId = id;
|
||
|
|
// this.filterListId = id;
|
||
|
|
// this.$emit("filterChange", id);
|
||
|
|
},
|
||
|
|
getDistanceToTop() {
|
||
|
|
//获取右侧各部分距离顶部的距离
|
||
|
|
let that = this;
|
||
|
|
let selectorQuery = uni.createSelectorQuery().in(this);
|
||
|
|
selectorQuery
|
||
|
|
.selectAll(".filter-popup__content__right__items")
|
||
|
|
.boundingClientRect(function (rects) {
|
||
|
|
rects.forEach(function (rect) {
|
||
|
|
that.distanceList.push(rect.top);
|
||
|
|
});
|
||
|
|
console.log("that.distanceList", that.distanceList);
|
||
|
|
})
|
||
|
|
.exec();
|
||
|
|
},
|
||
|
|
open() {
|
||
|
|
this.$refs.popup.open("bottom");
|
||
|
|
// this.getDistanceToTop();
|
||
|
|
},
|
||
|
|
change(e){
|
||
|
|
|
||
|
|
this.$emit("change",e);
|
||
|
|
},
|
||
|
|
reset() {
|
||
|
|
this.$emit("reset");
|
||
|
|
},
|
||
|
|
sure() {
|
||
|
|
this.$emit("sure");
|
||
|
|
this.$refs.popup.close();
|
||
|
|
},
|
||
|
|
close() {
|
||
|
|
this.$refs.popup.close();
|
||
|
|
},
|
||
|
|
// Open the time selection popup
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="less">
|
||
|
|
.filter-popup {
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 20rpx 20rpx 0 0;
|
||
|
|
&__header {
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 36rpx;
|
||
|
|
color: #333333;
|
||
|
|
line-height: 50rpx;
|
||
|
|
text-align: left;
|
||
|
|
font-style: normal;
|
||
|
|
padding-top: 30rpx;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
&__content {
|
||
|
|
padding-top: 50rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: nowrap;
|
||
|
|
justify-content: flex-start;
|
||
|
|
&__left {
|
||
|
|
margin-right: 10rpx;
|
||
|
|
width: 160rpx;
|
||
|
|
&__item {
|
||
|
|
height: 86rpx;
|
||
|
|
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 26rpx;
|
||
|
|
color: #666666;
|
||
|
|
line-height: 37rpx;
|
||
|
|
text-align: left;
|
||
|
|
font-style: normal;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: flex-start;
|
||
|
|
background: #f3f6f8;
|
||
|
|
border-radius: 0rpx 10rpx 10rpx 0rpx;
|
||
|
|
padding-left: 30rpx;
|
||
|
|
position: relative;
|
||
|
|
&__point {
|
||
|
|
background-color: #E8101E;
|
||
|
|
height: 6rpx;
|
||
|
|
width: 6rpx;
|
||
|
|
border-radius: 50%;
|
||
|
|
margin-right: 3rpx;
|
||
|
|
position: absolute;
|
||
|
|
left: 21rpx;
|
||
|
|
top: 50%;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.active {
|
||
|
|
background: #ffffff;
|
||
|
|
color: #E8101E;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&__right {
|
||
|
|
flex: 1;
|
||
|
|
margin-left: 10rpx;
|
||
|
|
height: 50vh;
|
||
|
|
padding-bottom: 20rpx;
|
||
|
|
// &__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: 180rpx;
|
||
|
|
// height: 80rpx;
|
||
|
|
// background: #f3f6f8;
|
||
|
|
// border-radius: 10rpx;
|
||
|
|
// display: flex;
|
||
|
|
// align-items: center;
|
||
|
|
// justify-content: center;
|
||
|
|
// }
|
||
|
|
// .price-input {
|
||
|
|
// display: flex;
|
||
|
|
// justify-content: space-between;
|
||
|
|
// align-items: center;
|
||
|
|
// width: 370rpx;
|
||
|
|
// height: 80rpx;
|
||
|
|
// background: #f3f6f8;
|
||
|
|
// border-radius: 10rpx;
|
||
|
|
// .price-input-field {
|
||
|
|
// width: 166rpx;
|
||
|
|
// height: 80rpx;
|
||
|
|
// line-height: 50rpx;
|
||
|
|
// text-align: center;
|
||
|
|
// border-radius: 26rpx;
|
||
|
|
// font-size: 24rpx;
|
||
|
|
// color: #3d3d3d;
|
||
|
|
// }
|
||
|
|
// .price-separator {
|
||
|
|
// height: 3rpx;
|
||
|
|
// width: 38rpx;
|
||
|
|
// background-color: #dddddd;
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&__footer {
|
||
|
|
height: 164rpx;
|
||
|
|
background: #ffffff;
|
||
|
|
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
|
||
|
|
padding: 16rpx 30rpx 0 30rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: flex-start;
|
||
|
|
&__btn {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
width: 340rpx;
|
||
|
|
height: 82rpx;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 30rpx;
|
||
|
|
color: #E8101E;
|
||
|
|
line-height: 42rpx;
|
||
|
|
text-align: left;
|
||
|
|
font-style: normal;
|
||
|
|
}
|
||
|
|
&__sure {
|
||
|
|
border-radius: 41rpx;
|
||
|
|
border: 2rpx solid #E8101E;
|
||
|
|
}
|
||
|
|
&__reset {
|
||
|
|
background: #E8101E;
|
||
|
|
border-radius: 41rpx;
|
||
|
|
color: #ffffff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|