140 lines
3.4 KiB
Vue
140 lines
3.4 KiB
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"
|
|
|
|
></serviecFirstTab>
|
|
<CommonList
|
|
ref="groupRef"
|
|
:apiUrl="'/user/getSearchList'"
|
|
:initialQuery="queryData"
|
|
:listScrollHeight="`calc(100vh - ${statusBarHeight * 2 + 360}rpx)`"
|
|
>
|
|
<template #listData="{ list }">
|
|
<shopCard :shop="item" v-for="(item, index) in list" :key="index"></shopCard>
|
|
</template>
|
|
|
|
<!-- 空数据状态 -->
|
|
<template #empty>
|
|
<noData></noData>
|
|
</template>
|
|
</CommonList>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
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";
|
|
import shopCard from "./components/shopCard.vue";
|
|
export default {
|
|
components: {
|
|
searchBox,
|
|
serviecFirstTab,
|
|
FilterPanel,
|
|
CommonList,
|
|
shopCard
|
|
},
|
|
data() {
|
|
return {
|
|
statusBarHeight: 0,
|
|
queryData: {
|
|
type: 2,
|
|
userLngz:"",
|
|
userLat:"",
|
|
},
|
|
activeId: "",
|
|
tabs: [],
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.getLocation();
|
|
const systemInfo = uni.getSystemInfoSync();
|
|
this.statusBarHeight = systemInfo.statusBarHeight;
|
|
this.getFirstClass();
|
|
},
|
|
methods: {
|
|
searchConfrim(e){
|
|
this.search();
|
|
},
|
|
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);
|
|
},
|
|
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的选中值
|
|
// 此处可根据筛选结果请求数据、更新页面等
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less">
|
|
page {
|
|
background: linear-gradient(to bottom, #ffffff , #fafafa);
|
|
}
|
|
|
|
//firstTab样式
|
|
.service-first-tab {
|
|
border-bottom: none;
|
|
padding-bottom: 27rpx;
|
|
border-bottom: none;
|
|
background-color: #fff!important;
|
|
box-shadow:none;
|
|
}
|
|
|
|
//list样式
|
|
.common-list{
|
|
background-color: #fafafa!important;
|
|
padding-top: 20rpx;
|
|
border-radius: 30rpx 30rpx 0rpx 0rpx;
|
|
::v-deep .list-container{
|
|
padding: 0 20rpx;
|
|
}
|
|
::v-deep .list-scroll{
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|