111
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.
 
 
 
 

740 lines
20 KiB

<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="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>
<!-- 筛选开始 -->
<scroll-view style="flex: 1;" class="screentop bg-white">
<view @click="reunrnFn" class="">
<sl-filter reflexTitle ref="slFilter" :productCodeList="productCodeList" :areaCodeList="areaCodeList" @result="filterRes" :menuList="menuList" v-if="TabHead == 0"></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>
</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 {
areaCodeList:[],
loadText:'more',
changeHs:true,
TabHead:0,
tabHeadS:[
{
title:'加油站',
value:0,
},{
title:'尿素站',
value:1,
}
],
productCodeList:null,
filterDatas: {
oilProductCode: '0#'
},
ureaFilterDatas:[],
loadStatus: 'load',
siteName: '',
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: '渠道',
// isMutiple: false,
// key: 'channelCode',
// detailList: [{
// title: "全部",
// value: ""
// }]
// },
{
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()
// console.log('%c look here↓','color:green;font-size:50px')
// console.log(storykey)
},
onLoad() {
if (!uni.getStorageSync('filterDatas')) {
this.getFilterData()
console.log('dhgiuhihqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq')
} else{
console.log('dhgiuhihiiiiiiiiiiiiiiiiiiiiiiiiiiiii')
}
this.findPriceDetails()
if (uni.getStorageSync('productCodeList')) {
this.productCodeList = uni.getStorageSync('productCodeList')
}
this.getSiteList()
},
onPullDownRefresh() {
this.filterRes(this.filterDatas)
setTimeout(function() {
uni.stopPullDownRefresh()
}, 600);
},
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: {
reunrnFn(){
},
getUreaList(){
let location = uni.getStorageSync('location')
let data1 = {
currentPage: this.currentPage,
pageSize: 10,
params: { //类型:Object 必有字段 备注:// 筛选对象
siteNameOrId:this.siteName,//产品类型(加注方式):
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.siteName = ''
this.currentPage = 1
if(code == 1){
this.getUreaList()
}else if(code == 0){
this.getSiteList()
}
},
ureaToDetail(list){
let itemS = JSON.stringify(list)
if (uni.getStorageSync('user')) {
uni.navigateTo({
url: `/BagStation/pages/ureaDetail/ureaDetail?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'
})
}
}
})
}
},
filterRes(val) {
console.log(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)
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')
// console.log(this.productCodeList,'新的列表格式')
res.data.channelCodes.map(item => {
// this.menuList[1].detailList.push({
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'
},
]
// this.oliMenuList[3].detailList = data
// // console.log(channelCodes, productCodes, siteBrands)
// this.$refs.slFilter.resetMenuList(this.menuList)
}
console.log(this.menuList,'----')
})
},
onSelected(e) {
// console.log(e)
},
findPriceDetails(){
ureaSiteApi.findPriceDetails().then(res=>{
// console.log(res)
res.data.forEach(item=>{
let obj={
title:item,
value:item
}
// console.log(obj)
this.ureaMenuList[1].detailList.push(obj)
// this.productTypes[0].detailList.push(obj)
})
console.log(this.ureaMenuList)
console.log(this.productTypes)
})
},
refreshLocation() {
uni.getLocation({
type: 'wgs84',
success: function(res) {
uni.setStorageSync('location', res)
},
complete(res) {
console.log('定位', res)
var msgTip = ''
if (res.errMsg == 'getLocation:fail auth deny') {
msgTip = '请允许小程序获取您的位置'
} else if (res.errMsg == 'getLocation:fail:ERROR_NOCELL&WIFI_LOCATIONSWITCHOFF') {
msgTip = '请您打开手机定位'
}
if (msgTip) {
setTimeout(() => {
uni.showToast({
title: msgTip,
icon: 'none'
})
}, 300)
}
}
})
},
getSiteList() {
this.refreshLocation()
let location = uni.getStorageSync('location')
console.log(this.filterDatas)
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.filterDatas
siteBrand: this.filterDatas
.siteBrand, // 备注:// 石油品牌 ( 1-中国石油 2-中国石化 3-壳牌 4-民营 5-中海油 6-京博 7-中化石油 8-其他 )
// channelCode: this.siteName ? '' : this.filterDatas
channelCode: this.filterDatas
.channelCode, // 备注:// 渠道编码 ( OIL:星油 WJY:万金油 LV:老吕(找油网) TY:团油 YDJY:一点加油(壳牌))
// oilProductCode: this.siteName ? '' : this.filterDatas
oilProductCode:this.filterDatas
.oilProductCode ,// 备注:// 油号选择 ( 0# 92# 92#)
// siteLevel: this.siteName ? '' : this.filterDatas
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) {
console.log(res,'+++')
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) {
console.log(res,'+++')
this.siteList = this.siteList.concat(res.data.list)
if (res.data.list.length < 10) { //判断接口返回数据量小于请求数据量,则表示此为最后一页
this.loadStatus = 'nomore'
} else {
this.currentPage++
this.loadStatus = 'load'
}
}
})
}
},
// getSiteList() {
// this.refreshLocation()
// let data1 = {
// currentPage: this.currentPage,
// pageSize: 10,
// params: { //类型:Object 必有字段 备注:// 筛选对象
// sort: "juli", //类型:String 必有字段 备注:// 智能排序 ( price:价格最低 juli:距离最近 ) 默认距离排序
// siteName: this.siteName,
// longitude: 116.397451, // 必有字段 备注:// 当前位置经度
// latitude: 39.909187, // 必有字段 备注:// 当前位置维度
// ...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#)
// }
// }
// 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.getSiteList(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) {
console.log(item)
console.log('这里是进入前')
let itemS = JSON.stringify(item)
if (uni.getStorageSync('user')) {
if(item.channelCode==='TY'){
uni.setStorageSync('OtherSiteInfo',item)
uni.navigateTo({
url: `/BagStation/pages/stationDetail/stationDetail?channerCode=${item.channelCode}`,
fail: (err) => {
// console.log(err)
},
success: () => {
// console.log('err')
}
})
return
}
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 = []
if(this.TabHead == 0){
this.getSiteList()
}else if (this.TabHead == 1){
this.getUreaList()
}
}
}
}
</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>