mrr.sj.front/pages/service/appointment.vue

<template>
  <view>
    <custom-navbar
      title="预约到家"
      :leftImg="'/static/images/whiteBack.png'"
      :showUser="true"
      backgroundColor="linear-gradient( 134deg, #F52540 0%, #FF4767 100%)"
      titleColor="#fff"
      borderBottom="none"
    ></custom-navbar>
    <searchBox placeholder="搜索手艺人名称" v-model="queryData.title" @confirm="searchConfrim" @search="searchConfrim"></searchBox>
    <serviecFirstTab
      :tabs="tabs"
      :activeId="activeId"
      activeColor="#FF4767"
      @tab-click="tabClick"
      bgColor="#fff"
    ></serviecFirstTab>
    <!-- <FilterPanel @filterConfirm="handleFilter"></FilterPanel> -->
    <CommonList
      ref="groupRef"
      :apiUrl="'/user/getSearchList'"
      :initialQuery="queryData"
      :listScrollHeight="`calc(100vh - ${statusBarHeight * 2 + 350}rpx)`"
    >
      <template #listData="{ list }">
        <syrCardList :list="list" btnText="去预约"></syrCardList>
      </template>

      <!-- 空数据状态 -->
      <template #empty>
        <noData></noData>
      </template>
    </CommonList>
  </view>
</template>

<script>
import syrCardList from "@/pages/search/components/syrCardList.vue";
import request from "../../utils/request";
import serviecFirstTab from "@/components/common/service-first-tab.vue";
import searchBox from "./components/search-box.vue";
import FilterPanel from "./components/intmentFilter.vue";
import CommonList from "@/components/common/CommonList.vue";
export default {
  components: {
    searchBox,
    serviecFirstTab,
    FilterPanel,
    CommonList,
	syrCardList
  },
  data() {
    return {
		statusBarHeight: 0,
      queryData: {
		type: 1
	  },
      activeId: "",
      tabs: [],
    };
  },
  onLoad() {
	   this.getLocation();
	const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight;
    this.getFirstClass();
  },
  methods: {
	  getLocation(){
	         let addressRes = {};
	       let userAdrees = uni.getStorageSync("userAdrees");
	          if (userAdrees) {
	            addressRes = userAdrees.addressRes;
	          } else {
	            addressRes = getApp().globalData.addressRes;
	          }
	          this.queryData.userLat = addressRes.latitude;
	        this.queryData.userLngz = addressRes.longitude;
	      },
    search() {
      this.$refs.groupRef.manualRefresh(this.queryData);
    },
	searchConfrim(e){
		this.search();
	},
    tabClick(id) {
      this.activeId = id;
	  this.queryData.first_class =  id;
	  this.search();
    },
    getFirstClass() {
      // 加载一级类目
      request.post("/user/firstclass").then((res) => {
        this.queryData.first_class = res.data[0].id;
        this.activeId = res.data[0].id;
        this.tabs = res.data;
		this.search();
      });
    },
    handleFilter(data) {
      console.log("筛选结果：", data); // data包含date、distance的选中值
	  this.queryData.distance = data.selectedDistance
	  // if(data.type=="distance"){
		 //  this.queryData.distance = data.value
	  // }
      // 此处可根据筛选结果请求数据、更新页面等
    },
  },
};
</script>

<style lang="less">
::v-deep .navbar-content {
  border: none !important;
}

//firstTab样式
.service-first-tab {
  border-bottom: none;
  padding-bottom: 27rpx;
  border-bottom: 2rpx solid #f1f1f1;
}


//list样式
.common-list{
  background-color: #fafafa!important;
  ::v-deep .list-container{
    padding: 0rpx;
  }
}
</style>