<template>
<view class="my-bg" style="display: flex;flex-direction: column;height: 100vh;">
<cu-custom class="main-totextbar bg-main-oil" bgColor="bg-main-oil">
<block slot="content">附近油站</block>
</cu-custom>
<view class="fixed-top-site">
<view class="cu-bar search bg-white">
<view class="search-form round">
<text class="cuIcon-search"></text>
<input @focus="InputFocus" confirm-type="search" @input="onInput" @confirm="onSearch"
@blur="InputBlur" v-model="siteName" :adjust-position="false" type="text" placeholder="加油站名称" />
</view>
<view class="action" @tap="toMap">
<image class="icon shadow-blur round icon-gasstation" src="https://www.51xingka.net/LSMOIL/static/img/gas-station.png" mode=""></image>
</view>
</view>
</view>
<!-- <view class="placeholder-hidden">
<view class="cu-bar search bg-white">
<view class="search-form round">
<text class="cuIcon-search"></text>
<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text"
placeholder="加油站名称" confirm-type="search" />
</view>
<view class="action" @tap="toMap">
<image class="icon shadow-blur round icon-gasstation"
src="https://www.51xingka.net/LSMOIL/static/img/gas-station.png" mode=""></image>
</view>
</view>
</view> -->
<!-- 筛选开始 -->
<scroll-view class="screentop bg-white" style="flex: 1;">
<view class="">
<sl-filter v-if="isFilterData&&areaCodeList.length>1" reflexTitle ref="slFilter" :productCodeList="productCodeList" :areaCodeList="areaCodeList"
@result="filterRes" :menuList="menuList"></sl-filter>
<!-- <sl-filter reflexTitle ref="slFilter" @result="filterRes" :menuList="menuList"></sl-filter> -->
</view>
<view class="bg-white min-height-50 padding-top" v-if="siteList.length>0">
<site-item v-for="(item,index) in siteList" :key="item.id" :site-item="item" :first="index==0"
:listHeight="listHeight" class="cu-list menu-avatar cu-item" @tap="toDetail(item)">
</site-item>
<view class="placeholder-hidden">
</view>
</view>
<view class="" v-else>
<my-empty :contentTitle="contentTitle"></my-empty>
</view>
</scroll-view>
<view class="bg-white">
<uni-load-more status="more"></uni-load-more>
</view>
</view>
</template>
<script>
import StationItem from '@/components/site-item/site-item.vue'
import oilSiteApi from '@/api/oil-site.js'
import slFilter from '@/components/sl-filter/sl-filter.vue'
export default {
components: {
StationItem,
slFilter
},
data() {
return {
getSiteListTimer:null,
filterData: {
// oilProductCode: '0#'
},
isFilterData:false,
contentTitle: '您当前位置附近没有油站，可以点击左上角-距离-选择其他省市进行查看。',
loadStatus: 'load',
listHeight: 160,
areaCodeList: [],
siteName: '',
menuList: [{
title: '距离',
isMutiple: false,
key: 'distance',
detailList: [{
title: "全部",
value: ''
},
{
title: "20Km",
value: 20
},
{
title: "30Km",
value: 30
},
{
title: "50Km",
value: 50
},
{
title: "省市",
value: 10
}
]
},
{
title: '油品',
key: 'oilProductCode',
isMutiple: false,
detailList: [{
title: "全部",
value: ""
},
{
title: "0#",
value: "0#"
},
{
title: "-10#",
value: "-10#"
},
{
title: "-20#",
value: "-20#"
},
{
title: "-35#",
value: "-35#"
},
{
title: "LNG",
value: "LNG"
}
]
},
// {
// title: '油品',
// key: 'oilProductCode',
// isMutiple: false,
// detailList: {全部:[{
// title: "全部",
// value: ""
// }],
// 柴油:[{
// title: "0#",
// value: "0#"
// },
// {
// title: "-10#",
// value: "-10#"
// },
// {
// title: "-20#",
// value: "-20#"
// },
// {
// title: "-35#",
// value: "-35#"
// }],
// 天然气:[{
// title: "LNG",
// value: "LNG"
// }]}
// },
{
title: '距离优先',
isMutiple: false,
key: 'comprehensiveSort',
detailList: [{
title: "距离优先",
value: 1
},
{
title: "价格优先",
value: 2
}
]
},
],
// menuList: uni.getStorageSync('filterData') ? uni.getStorageSync('filterData') : [
// {
// title: '渠道',
// isMutiple: false,
// key: 'channelCode',
// detailList: [{
// title: "全部",
// value: ""
// }]
// },
// {
// title: '距离',
// isMutiple: false,
// key: 'distance',
// detailList: [{
// title: "默认",
// value: 20
// },
// {
// title: "20Km",
// value: 20
// },
// {
// title: "30Km",
// value: 30
// },
// {
// title: "50Km",
// value: 50
// }
// ]
// },
// {
// title: '0#轻柴油',
// key: 'oilProductCode',
// isMutiple: false,
// detailList: [{
// title: "全部",
// value: ""
// }]
// },
// {
// title: '品牌',
// key: 'siteBrand',
// isSort: true,
// isMutiple: false,
// detailList: [{
// title: "全部",
// value: ""
// }]
// }
// ],
siteList: [],
InputBottom: 0,
show: false,
currentPage: 1,
isLoadMore: false, //是否加载中
}
},
watch: {
loadStatus: {
deep: true,
immediate: true,
handler: function(val, oldVal) {
if (val.status == 'load') {
setTimeout(() => {
this.getSiteList()
}, 100)
} else {
uni.showToast({
title: '到底啦',
icon: 'none'
})
}
}
},
},
created() {
this.areaCodeList = uni.getStorageSync('areaCodeList');
},
onLoad() {
this.refreshLocation()
if (!uni.getStorageSync('filterData')) {
this.getFilterData()
} else {
this.isFilterData=true
}
this.getSiteList();
},
onPullDownRefresh() {
this.filterRes(this.filterData)
setTimeout(function() {
uni.stopPullDownRefresh()
}, 600);
},
onReachBottom() {
if (this.loadStatus == 'load') {
setTimeout(() => {
this.getSiteList()
}, 100)
} else {
uni.showToast({
title: '到底啦',
icon: 'none'
})
}
},
methods: {
filterRes(val) {
this.filterData = val
this.currentPage = 1
this.siteList = []
this.getSiteList()
},
getFilterData() {
let menuList = [{
title: '渠道',
isMutiple: false,
key: 'channelCode',
detailList: [{
title: "全部",
value: ""
}]
},
{
title: '0#轻柴油',
key: 'oilProductCode',
isMutiple: false,
detailList: [{
title: "全部",
value: ""
}]
},
{
title: '品牌',
key: 'siteBrand',
isSort: true,
isMutiple: false,
detailList: [{
title: "全部",
value: ""
}]
}
]
oilSiteApi.getCheckInfo().then(res => {
if (res.code == 20000) {
uni.setStorageSync('productCodeList', res.data.productCodeList)
uni.setStorageSync('areaCodeList', res.data.areaCodeList)
this.areaCodeList = uni.getStorageSync('areaCodeList');
let channelCodes = []
res.data.channelCodes.map(item => {
channelCodes.push({
title: item.name,
value: item.id
})
})
let productCodes = []
res.data.productCodes.map(item => {
productCodes.push({
title: item.name,
value: item.id
})
})
let siteBrands = []
res.data.siteBrands.map(item => {
siteBrands.push({
title: item.name,
value: item.id
})
})
menuList[0].detailList = menuList[0].detailList.concat(channelCodes)
menuList[1].detailList = menuList[1].detailList.concat(productCodes)
menuList[2].detailList = menuList[2].detailList.concat(siteBrands)
uni.setStorageSync('filterData', this.menuList);
if (uni.getStorageSync('areaCodeList')) {
this.areaCodeList = uni.getStorageSync('areaCodeList')
} else {
this.areaCodeList = res.data.areaCodeList
}
// this.$forceUpdate();
}
this.isFilterData = true
})
},
onSelected(e) {
// console.log(e)
},
refreshLocation() {
uni.getLocation({
type: 'wgs84',
success: function(res) {
uni.setStorageSync('location', res)
}
});
},
getSiteList() {
this.refreshLocation()
let data1 = {
currentPage: this.currentPage,
pageSize: 10,
params: { //类型：Object 必有字段 备注：// 筛选对象
clientBelong:'ZHONGPIN',
targetApp:'SAAS',
sort: "juli", //类型：String 必有字段 备注：// 智能排序 ( price：价格最低 juli：距离最近 ) 默认距离排序
siteName: this.siteName,
...uni.getStorageSync('location'),
// ...this.filterData
siteBrand: this.siteName ? '' : this.filterData.siteBrand, // 备注：// 石油品牌 ( 1-中国石油 2-中国石化 3-壳牌 4-民营 5-中海油 6-京博 7-中化石油 8-其他 )
channelCode: this.siteName ? '' : this.filterData.channelCode, // 备注：// 渠道编码 ( OIL：星油 WJY：万金油 LV：老吕（找油网） TY：团油 YDJY：一点加油（壳牌）)
oilProductCode: this.siteName ? '' : this.filterData.oilProductCode, // 备注：// 油号选择 ( 0# 92# 92#)
provinceCode: this.filterData.provinceCode,
cityCode: this.filterData.cityCode,
areaCode: this.filterData.areaCode,
distance: this.filterData.distance,
<<<<<<< HEAD
juli:this.filterData.distance,
=======
zpDisable:'ENABLE',
>>>>>>> ec08020202bf7a2252bf4634c43842a7de91db40
comprehensiveSort: this.filterData.comprehensiveSort ? this.filterData.comprehensiveSort : 1
}
}
if (!uni.getStorageSync('Authorization')) {
oilSiteApi.readOnlySites(data1).then(res => {
if (res.code == 20000) {
this.siteList = this.siteList.concat(res.data.list)
if (res.data.list.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
this.loadStatus = 'nomore'
} else {
this.currentPage++
this.loadStatus = 'load'
}
}
})
} else {
oilSiteApi.getSiteLists(data1).then(res => {
if (res.code == 20000) {
this.siteList = this.siteList.concat(res.data.list)
if (res.data.list.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
this.loadStatus = 'nomore'
} else {
this.currentPage++
this.loadStatus = 'load'
}
}
})
}
},
toDetail(item) {
let itemS = encodeURIComponent(JSON.stringify(item))
if (uni.getStorageSync('user')) {
uni.navigateTo({
url: `/BagStation/pages/stationDetail/stationDetail?item=${itemS}`,
fail: (err) => {
// console.log(err)
},
success: () => {
// console.log('err')
}
})
} else {
uni.showModal({
title: '请您登录',
content: "登录小星加油才可以加油 |˛˙꒳˙)♡",
confirmText: '去登陆',
success: (res) => {
if (res.confirm) {
uni.reLaunch({
url: '../../../BagAuth/pages/login/login'
})
}
}
})
}
},
nameSelect(value, item) {
this.title2 = item.text
// console.log(item)
},
typeSelect(value, item) {
// console.log(item)
this.title1 = item.text
},
optionSelect(value, item) {
// console.log(item)
this.title3 = item.text
},
toMap() {
uni.navigateTo({
url: '/BagStation/pages/stationMap/stationMap',
})
},
InputFocus(e) {
this.InputBottom = e.detail.height
// console.log(e.detail)
// console.log(this.InputBottom)
},
InputBlur(e) {
this.InputBottom = 0
// console.log(this.InputBottom)
// console.log(e.detail)
},
onInput() {
// setTimeout(() => {
// this.currentPage = 1
// this.siteList = []
// this.getSiteList()
// }, 100)
clearTimeout(this.getSiteListTimer);
this.getSiteListTimer = setTimeout(()=>{
this.currentPage = 1
this.siteList = []
this.getSiteList()
},500);
},
onSearch() {
// this.currentPage = 1
// this.siteList = []
// this.getSiteList()
clearTimeout(this.getSiteListTimer);
this.getSiteListTimer = setTimeout(()=>{
this.currentPage = 1
this.siteList = []
this.getSiteList()
},500);
}
}
}
</script>
<style scoped>
.icon-gasstation {
width: 1.2rem;
height: 1.2rem;
}
.placeholder-hidden {
/* min-height: 95upx; */
opacity: 0;
}
.fixed-top-site {
/* top: 120rpx; */
z-index: 4;
/* position: fixed; */
width: 750upx;
}
.min-height-50 {
min-height: 50vh;
}
</style>