mrr.sj.front/components/filter-popup/filter-popup.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: #FF4767;
          height: 6rpx;
          width: 6rpx;
          border-radius: 50%;
          margin-right: 3rpx;
          position: absolute;
          left: 21rpx;
          top: 50%;
          transform: translateY(-50%);
        }
      }
      .active {
        background: #ffffff;
        color: #FF4767;
      }
    }
    &__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: #FF4767;
      line-height: 42rpx;
      text-align: left;
      font-style: normal;
    }
    &__sure {
      border-radius: 41rpx;
      border: 2rpx solid #FF4767;
    }
    &__reset {
      background: #FF4767;
      border-radius: 41rpx;
      color: #ffffff;
    }
  }
}
</style>