134 lines
3.4 KiB
Vue
134 lines
3.4 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<custom-navbar
|
||
|
|
title="预约到家"
|
||
|
|
:leftImg="'/static/images/whiteBack.png'"
|
||
|
|
:showUser="true"
|
||
|
|
backgroundColor="linear-gradient( 134deg, #F52540 0%, #E8101E 100%)"
|
||
|
|
titleColor="#fff"
|
||
|
|
borderBottom="none"
|
||
|
|
></custom-navbar>
|
||
|
|
<searchBox placeholder="搜索手艺人名称" v-model="queryData.title" @confirm="searchConfrim" @search="searchConfrim"></searchBox>
|
||
|
|
<serviecFirstTab
|
||
|
|
:tabs="tabs"
|
||
|
|
:activeId="activeId"
|
||
|
|
activeColor="#E8101E"
|
||
|
|
@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>
|