中品加油
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

484 lines
12 KiB

2 years ago
<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 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 {
filterData: {
// oilProductCode: '0#'
},
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'
})
}
}
},
},
onLoad() {
this.refreshLocation()
if (!uni.getStorageSync('filterData')) {
this.getFilterData()
}
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() {
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')
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[0].detailList.push({
// title: item.name,
// value: item.id
// })
// })
// res.data.productCodes.map(item => {
// this.menuList[1].detailList.push({
// title: item.name,
// value: item.id
// })
// })
// res.data.siteBrands.map(item => {
// this.menuList[2].detailList.push({
// title: item.name,
// value: item.id
// })
// })
// // console.log(channelCodes, productCodes, siteBrands)
// this.$refs.slFilter.resetMenuList(this.menuList)
}
})
},
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 必有字段 备注:// 筛选对象
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,
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)
},
onSearch() {
this.currentPage = 1
this.siteList = []
this.getSiteList()
}
}
}
</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>