<template>
<view style="height: 100vh;" class="my-bg flex_column">
<cu-custom class="main-totextbar bg-main-oil" bgColor="bg-main-oil">
<block slot="content">附近油站</block>
</cu-custom>
<view style="flex: 1;" class="flex_column">
<view class="headList">
<view class="headList_head" v-for="(list,i) in tabHeadS" :class="[TabHead == i? 'ativeHead':'']"
:key='i' @tap='changeHaed(list.value)'>
{{list.title}}
</view>
</view>
<!-- fixed-top-site -->
<view class="">
<view class="cu-bar search bg-white">
<view class="search-form round">
<text class="cuIcon-search"></text>
<input @focus="InputFocus" confirm-type="search" @confirm="onSearch" @blur="InputBlur"
v-model="siteAddress" :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>
<!-- 筛选开始 -->
<scroll-view style="flex: 1;" class="screentop bg-white">
<view @click="reunrnFn" class="">
<sl-filter reflexTitle ref="slFilter" v-if="TabHead == 0" :productCodeList="productCodeList"
:areaCodeList="areaCodeList" @result="filterRes" :menuList="menuList"></sl-filter>
<sl-filter reflexTitle ref="slFilter" @result="filterRes" :menuList="ureaMenuList"
v-if="TabHead == 1 && changeHs == true"></sl-filter>
<sl-filter reflexTitle ref="slFilter" @result="filterRes" :menuList="productTypes"
v-if="changeHs == false && TabHead == 1 "></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"
class="cu-list menu-avatar cu-item" @tap="toDetail(item)" v-if="TabHead == 0">
</site-item>
<ureaItem v-for="(list,index) in siteList" :key="list.id" :site-item="list" :first="index==0"
class="cu-list menu-avatar cu-item" @tap="ureaToDetail(list)" v-if="TabHead == 1">
</ureaItem>
<view class="placeholder-hidden"></view>
</view>
<view style="min-height: 100vh;" class="" v-else>
<my-empty></my-empty>
</view>
</scroll-view>
</view>
<view class="bg-white">
<uni-load-more :status="loadText"></uni-load-more>
</view>
<!-- <tabbar :current-page="1"/> -->
</view>
</template>
<script>
import StationItem from '@/components/site-item/site-item.vue'
import ureaItem from '@/components/site-item/urea-site-item.vue'
import oilSiteApi from '@/api/oil-site.js'
import slFilter from '@/components/sl-filter/sl-filter.vue'
import oilMongoApi from '../../../api/oil-mongo.js'
import ureaSiteApi from '../../../api/urea_site.js'
export default {
components: {
StationItem,
slFilter,
ureaItem
},
data() {
return {
companyCard: uni.getStorageSync('companyCard'),
getSiteListTimer: null,
areaCodeList: [],
loadText: 'more',
changeHs: true,
TabHead: 0,
tabHeadS: [{
title: '加油站',
value: 0,
}, {
title: '尿素站',
value: 1,
}],
productCodeList: null,
filterDatas: {
oilProductCode: '0#'
},
ureaFilterDatas: [],
loadStatus: 'load',
siteAddress: '',
menuList: [{
title: '距离优先',
isMutiple: false,
key: 'sort',
detailList: [{
title: "距离优先",
value: 'juli'
},
{
title: "价格优先",
value: 'price'
}
]
},
{
title: '距离',
isMutiple: false,
key: 'distance',
detailList: [{
title: "默认",
value: ''
},
{
title: "20Km",
value: 20000
},
{
title: "30Km",
value: 30000
},
{
title: "50Km",
value: 50000
},
{
title: "省市",
value: 10
}
]
},
{
title: '0#轻柴油',
key: 'oilProductCode',
isMutiple: false,
detailList: [{
title: "全部",
value: ""
}]
},
{
title: '品牌',
key: 'siteBrand',
isSort: true,
isMutiple: false,
detailLists: [{
title: "全部",
value: ""
}],
detailList: [{
title: "全部",
value: ""
}]
}
],
ureaMenuList: [{
title: '加注方式',
isMutiple: false,
key: 'formats',
detailList: [{
title: "全部",
value: ""
}, {
title: "加注机",
value: "1"
}, {
title: "桶装",
value: "2"
}, ]
},
{
title: '桶装品牌',
key: 'productType',
isMutiple: false,
detailList: [{
title: "全部",
value: ""
}]
},
],
productTypes: [{
title: '加注方式',
isMutiple: false,
key: 'formats',
detailList: [{
title: "全部",
value: ""
}, {
title: "加注机",
value: "1"
}, {
title: "桶装",
value: "2"
}, ]
}],
siteList: [],
InputBottom: 0,
show: false,
currentPage: 1,
brandName: '',
productType: '',
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'
})
}
}
},
},
onTabItemTap(res) {
this.showThreeSites = false
},
onShow() {
this.refreshLocation()
let storykey = uni.getStorageInfoSync()
let nowCompanyCard = uni.getStorageSync('companyCard')
if (this.companyCard && this.companyCard !== nowCompanyCard) {
this.companyCard = uni.getStorageSync('companyCard');
this.updateFn()
}
},
onLoad() {
if (!uni.getStorageSync('filterDatas')) {
this.getFilterData()
}
this.findPriceDetails()
if (uni.getStorageSync('productCodeList')) {
this.productCodeList = uni.getStorageSync('productCodeList')
}
// this.getSiteList()
},
onPullDownRefresh() {
this.updateFn()
},
onReachBottom() {
if (this.loadStatus == 'load') {
setTimeout(() => {
if (this.TabHead == 0) {
this.getSiteList()
} else if (this.TabHead == 1) {
this.getUreaList()
}
}, 100)
} else {
uni.showToast({
title: '到底啦',
icon: 'none'
})
}
},
methods: {
updateFn() {
this.filterRes(this.filterDatas)
setTimeout(function() {
uni.stopPullDownRefresh()
}, 600);
},
reunrnFn() {
},
getUreaList() {
let location = uni.getStorageSync('location')
let data1 = {
currentPage: this.currentPage,
pageSize: 10,
params: { //类型：Object 必有字段 备注：// 筛选对象
// siteNameOrId: this.siteName, //产品类型(加注方式)：
address: this.siteAddress,
productType: this.productType ? this.productType : '', //1-加注机； 2-桶装
brandName: this.brandName ? this.brandName : '', // 桶装品牌名称
currentLongitude: location.longitude + '', // 当前经度
currentLatitude: location.latitude + '', // 当前纬度
}
}
ureaSiteApi.getByPageMobile(data1).then(res => {
if (res.code == 20000) {
let objs = []
res.data.list.forEach(ele => {
let tag
if (ele.productType == 1) {
tag = '加注机'
} else if (ele.productType == 2) {
tag = '桶装'
}
let obj = {
address: ele.address,
id: ele.id,
juli: ele.totalDistance,
latitude: parseInt(ele.lat),
listTag: tag,
longitude: parseInt(ele.lng),
siteCustomerMark: null,
siteId: ele.siteId,
siteName: ele.siteName,
sitePrice: ele.price,
formats: ele.formats,
price: ele.price
}
objs.push(obj)
})
this.siteList = this.siteList.concat(objs)
if (res.data.list.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
this.loadStatus = 'nomore'
} else {
this.currentPage++
this.loadStatus = 'load'
}
}
})
},
changeHaed(code) {
this.TabHead = code
// this.siteList = []
this.siteAddress = ''
this.currentPage = 1
if (code == 1) {
if (uni.getStorageSync('user')) {
this.getUreaList()
} else {
uni.showModal({
content: "登录后才能查看哦",
confirmText: '去登陆',
success: (res) => {
if (res.confirm) {
uni.reLaunch({
url: '/BagAuth/pages/login/login'
})
} else {
this.changeHaed(0)
}
}
})
}
} else if (code == 0) {
this.getSiteList()
}
},
ureaToDetail(list) {
let itemS = JSON.stringify(list)
uni.navigateTo({
url: `/BagStation/pages/ureaDetail/ureaDetail?item=${itemS}`
})
// if (uni.getStorageSync('user')) {
// } else {
// uni.showModal({
// content: "登录后才能查看哦",
// confirmText: '去登陆',
// success: (res) => {
// if (res.confirm) {
// uni.reLaunch({
// url: '/BagAuth/pages/login/login'
// })
// }
// }
// })
// }
},
filterRes(val) {
if (this.TabHead == 0) {
this.filterDatas = val
this.currentPage = 1
// this.siteList = []
this.getSiteList()
} else {
if (val.formats == 2) {
this.changeHs = true
} else {
this.changeHs = false
}
this.filterDatas = val
this.productType = val.formats
this.brandName = val.productType
this.currentPage = 1
// this.siteList = []
this.getUreaList()
}
},
getFilterData() {
oilSiteApi.getCheckInfo().then(res => {
if (res.code == 20000) {
uni.setStorageSync('productCodeList', res.data.productCodeList)
uni.setStorageSync('areaCodeList', res.data.areaCodeList)
if (uni.getStorageSync('areaCodeList')) {
this.areaCodeList = uni.getStorageSync('areaCodeList')
} else {
this.areaCodeList = res.data.areaCodeList
}
this.productCodeList = uni.getStorageSync('productCodeList')
res.data.channelCodes.map(item => {
// this.menuList[3].detailLists.push({
// title: item.name,
// value: item.id
// })
})
res.data.productCodes.map(item => {
this.menuList[2].detailList.push({
title: item.name,
value: item.id
})
})
res.data.siteBrands.map(item => {
this.menuList[3].detailList.push({
title: item.name,
value: item.id
})
})
let data = [{
title: '全部',
value: ''
},
{
title: '一级油站',
value: 'A'
}, {
title: '二级油站',
value: 'B'
}, {
title: '三级油站',
value: 'C'
}, {
title: '四级油站',
value: 'D'
}, {
title: '一级油站',
value: 'E'
},
]
}
// console.log(this.menuList, uni.getStorageSync('areaCodeList'), '----')
})
},
onSelected(e) {
// console.log(e)
},
findPriceDetails() {
ureaSiteApi.findPriceDetails().then(res => {
res.data.forEach(item => {
let obj = {
title: item,
value: item
}
this.ureaMenuList[1].detailList.push(obj)
})
})
},
refreshLocation() {
uni.getLocation({
type: 'wgs84',
success: function(res) {
uni.setStorageSync('location', res)
},
fail: err => {
if (err.errMsg === "getLocation:fail auth deny") {
uni.showModal({
title: "提示",
content: "您已拒绝获取位置信息，请重新授权",
confirmText: "开启定位",
success: (res) => {
if (res.confirm) {
uni.openSetting({
success: (res) => {
if (res.authSetting[
"scope.userLocation"]) {
this.currentPage = 1
// this.siteList = []
this.refreshLocation()
}
},
});
}
},
});
}
},
complete: () => {
this.getSiteList()
}
})
},
getSiteList() {
// this.refreshLocation()
// let location = uni.getStorageSync('location')
let data1 = {
currentPage: this.currentPage,
pageSize: 10,
params: {
siteAddress: this.siteAddress,
longitude: 116.397451,
latitude: 39.909187,
...uni.getStorageSync('location'),
siteBrand: this.filterDatas
.siteBrand, // 备注：// 石油品牌 ( 1-中国石油 2-中国石化 3-壳牌 4-民营 5-中海油 6-京博 7-中化石油 8-其他 )
channelCode: this.filterDatas
.channelCode, // 备注：// 渠道编码 ( OIL：星油 WJY：万金油 LV：老吕（找油网） TY：团油 YDJY：一点加油（壳牌）)
oilProductCode: this.filterDatas
.oilProductCode, // 备注：// 油号选择 ( 0# 92# 92#)
siteLevel: this.filterDatas
.siteLevel,
sort: this.filterDatas.sort ? this.filterDatas.sort : 'juli',
provinceCode: this.filterDatas.provinceCode,
cityCode: this.filterDatas.cityCode,
areaCode: this.filterDatas.areaCode,
distance: this.filterDatas.distance
}
}
if (!uni.getStorageSync('Authorization')) {
data1.params.role = 1
oilSiteApi.readOnlySites(data1).then(res => {
if (res.code == 20000) {
if (this.currentPage == 1) {
this.siteList = []
}
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.getSiteList(data1).then(res => {
if (res.code == 20000) {
if (this.currentPage == 1) {
this.siteList = []
}
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 = JSON.stringify(item)
if (item.channelCode === 'TY') {
uni.setStorageSync('OtherSiteInfo', item)
uni.navigateTo({
url: `/BagStation/pages/stationDetail/stationDetail?channerCode=${item.channelCode}`
})
return
}
uni.navigateTo({
url: `/BagStation/pages/stationDetail/stationDetail?item=${itemS}`
})
// if (uni.getStorageSync('user')) {
// } else {
// uni.showModal({
// content: "登录后才能查看哦",
// confirmText: '去登陆',
// success: (res) => {
// if (res.confirm) {
// uni.reLaunch({
// url: '../../../BagAuth/pages/login/login'
// })
// }
// }
// })
// }
},
nameSelect(value, item) {
this.title2 = item.text
},
typeSelect(value, item) {
this.title1 = item.text
},
optionSelect(value, item) {
this.title3 = item.text
},
toMap() {
uni.navigateTo({
url: '/BagStation/pages/stationMap/stationMap',
})
},
InputFocus(e) {
this.InputBottom = e.detail.height
},
InputBlur(e) {
this.InputBottom = 0
},
onInput() {
clearTimeout(this.getSiteListTimer);
this.getSiteListTimer = setTimeout(() => {
this.currentPage = 1
// this.siteList = []
this.getSiteList()
}, 500);
},
onSearch() {
clearTimeout(this.getSiteListTimer);
this.getSiteListTimer = setTimeout(() => {
this.currentPage = 1
// this.siteList = []
if (this.TabHead == 0) {
this.getSiteList()
} else if (this.TabHead == 1) {
this.getUreaList()
}
}, 500)
}
}
}
</script>
<style scoped>
.flex_column {
display: flex;
flex-direction: column;
}
.headList_head {
padding: 2% 0;
width: 16%;
text-align: center;
font-size: 36rpx;
font-weight: 700;
border-bottom: 2px solid #fff;
margin: 0% 3%;
}
.headList {
display: flex;
justify-content: space-around;
align-items: center;
background-color: #fff;
padding: 1% 3%;
}
.ativeHead {
color: red;
border-bottom: 2px solid red;
}
.icon-gasstation {
width: 1.2rem;
height: 1.2rem;
}
.placeholder-hidden {
/* min-height: 95upx; */
}
.fixed-top-site {
/* top: 120rpx; */
z-index: 4;
position: fixed;
width: 750upx;
}
.min-height-50 {
min-height: 50vh;
}
</style>