uniapp-ZHSQ/packages/homeServer/serverInfo/index.vue

<template>
  <view class="container">
    <div class="banner">
      <swiper @animationfinish="swipers" autoplay circular>
        <swiper-item
          v-for="(item, index) in bannerList"
          :key="index"
          @click="lookImage(item, index)"
        >
          <image :src="item.pic_src" mode="aspectFill" />
        </swiper-item>
      </swiper>

      <view class="cirList">
        <view
          :class="['cir', currentIdx == index ? 'active' : '']"
          v-for="(item, index) in bannerList"
          :key="index"
        >
        </view>
      </view>
    </div>
    <div class="line"></div>
    <div class="serverTitBox">
      <div class="serverTit">
        <div class="serverTit_left">
          <div class="tit">空调清洗</div>
          <div class="msg">平台保障</div>
        </div>
        <div class="serverTit_right">已预约100+</div>
      </div>
      <div class="serverCon">
        专业保洁团队，全屋深度清洁，去除顽固污渍，还您清新居所还您清新居所
      </div>
    </div>
    <div class="line"></div>

    <div class="serverList">
      <div class="serverListTit">找到8个匹配服务商</div>
      <view class="tabs">
        <view
          v-for="(item, index) in categoryList"
          :key="index"
          :class="['tabItem', selectedTab === index ? 'active2' : '']"
          @click="selectTab(index, item)"
        >
          {{ item.category_name }}
        </view>
      </view>
      <div class="FilterMore" v-if="showPrice">
        <div class="filter-section">
          <div class="price-range">
            <input
              type="number"
              v-model="minPrice"
              placeholder="最低价"
              class="price-input"
              @input="validatePriceRange"
            />
            <span class="price-separator">—</span>
            <input
              type="number"
              v-model="maxPrice"
              placeholder="最高价"
              class="price-input"
              @input="validatePriceRange"
            />
          </div>
        </div>
        <div class="filter-buttons">
          <button class="reset-button" @click="resetFilters">重置</button>
          <button class="confirm-button" @click="applyFilters">确定</button>
        </div>
      </div>

      <div class="serverItem" @click="selectVendor">
        <div class="serverItem_left">
          <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png"></image>
        </div>
        <div class="serverItem_right">
          <div class="serverItem_right_msg">
            <div class="msg_tit">
              <view>安心家政</view>
              <div class="serverItem_right_btn" @click="selectMaster">
                选择服务
              </div>
            </div>
            <div class="msg_meta">
              <span class="rating">
                <image
                  class="infoImage"
                  src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/serverInfo_xing.png"
                />
                4.8
              </span>
              <span class="distance">
                <image
                  class="infoImage"
                  src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/serverInfo_weizhi.png"
                />3.3km</span
              >
              <span class="served">
                <image
                  class="infoImage"
                  src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/serverInfo_fuwu.png"
                />服务12226人</span
              >
            </div>
            <div class="msg_price">价格范围： <span>￥80-￥150</span></div>
          </div>
        </div>
      </div>
    </div>
  </view>
</template>

<script>
import {
  request,
  picUrl,
  NavgateTo,
  menuButtonInfo,
} from "../../../utils/index";
import { apiArr } from "../../../api/reservation";
import SliderRange from "@/components/primewind-sliderrange/components/primewind-sliderrange/index.vue";

export default {
  components: {
    // 注册组件
    SliderRange,
  },
  data() {
    return {
      bannerList: [
        {
          pic_src: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
        },
        {
          pic_src:
            "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_banner.png",
        },
        {
          pic_src: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
        },
      ],
      currentIdx: 0,
      top: "",
      localHeight: "",
      rangeMin: 5,
      rangeMax: 200,
      rangeValue: [10, 50],

      selectedTab: 0,
      categoryList: [
        { category_name: "推荐" },
        { category_name: "评分优先" },
        { category_name: "距离最近" },
        { category_name: "价格最低" },
        { category_name: "服务最多" },
        { category_name: "价格范围" },
      ],

      showPrice: false,
      minPrice: "",
      maxPrice: "",
    };
  },
  methods: {
    swipers(e) {
      this.currentIdx = e.detail.current;
    },
    format(val) {
      return val + "%";
    },
    handleRangeChange(e) {
      this.rangeValue = e;
    },
    selectVendor() {
      NavgateTo("../vendor/index");
    },
    selectMaster() {
      NavgateTo("../searchInfo/index");
    },
    lookImage(item, index) {
      // 提取所有图片URL
      const urls = this.bannerList.map((item) => item.pic_src);
      // 调用UniApp预览图片API
      uni.previewImage({
        current: index,
        urls: urls,
        loop: true,
      });
    },
    selectTab(index, item) {
      this.selectedTab = index;
      if (item.category_name === "价格范围") {
        this.showPrice = !this.showPrice;
      } else {
        this.showPrice = false;
      }
    },

    validatePriceRange() {
      // 确保最小值在0-99999之间
      if (this.minPrice < 0) this.minPrice = 0;
      if (this.minPrice > 99999) this.minPrice = 99999;
      // 确保最大值在0-99999之间且不小于最小值
      if (
        this.maxPrice &&
        (this.maxPrice < this.minPrice || this.maxPrice > 99999)
      ) {
        this.maxPrice = Math.min(Math.max(this.maxPrice, this.minPrice), 99999);
      }
    },
    resetFilters() {
      this.minPrice = "";
      this.maxPrice = "";
    },
    applyFilters() {
      const filterData = {
        priceRange: {
          min: this.minPrice || 0,
          max: this.maxPrice || 99999,
        },
      };
      console.log("筛选条件:", filterData);
      this.showPrice = false;
    },
  },
  onReady() {},

  onLoad(options) {
    const meun = menuButtonInfo();
    this.top = meun.top;
    this.localHeight = meun.height;
  },
  onShow() {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {},
};
</script>

<style>
@import url("./index.css");
</style>