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.
497 lines
11 KiB
497 lines
11 KiB
<template>
|
|
<view>
|
|
<view class="width100 backcorfff">
|
|
<image mode="widthFix" class=" flleft sear mart15" :src="imagewxUrl+imgadres"></image>
|
|
<uSearchBar @confirm="search" @input="input"></uSearchBar>
|
|
</view>
|
|
<!-- <slFilter :independence="true" :color="titleColor" :themeColor="themeColor" :menuList.sync="menuList"
|
|
@result="result"></slFilter> -->
|
|
<view class="width100 height40 backcorfff">
|
|
<view class="width90">
|
|
<view class="stuMenu flleft fotct" @click="showPopup(1)">{{distance}}
|
|
<image mode="widthFix" class="stuimg margle" :src="imagewxUrl+imgadres2"></image>
|
|
</view>
|
|
<view class="stuMenu flleft fotct" @click="showPopup(2)">{{distanceName}}
|
|
<image mode="widthFix" class="stuimg margle" :src="imagewxUrl+imgadres2"></image>
|
|
</view>
|
|
<view class="stuMenu flleft fotct" @click="showPopup(3)">{{onilName}}
|
|
<image mode="widthFix" class="stuimg margle" :src="imagewxUrl+imgadres2"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="refuelList == '' " class="mart60 fotct font14 fcor666">
|
|
<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres3"></image>
|
|
</view>
|
|
<view class="width96 height100p backcorfff border-r mart10" v-for="(item,index) in refuelList" :key="index">
|
|
<image mode="widthFix" :src="item.store_logo" class="recontleft flleft mart10 border-r"
|
|
style="max-height: 80px;" @click="goDetails(item.store_key,item.id)">
|
|
</image>
|
|
<view class="recontright">
|
|
<view class="text1 width100 font18 fontwig6 paddtop10" @click="goDetails(item.store_key,item.id)">
|
|
{{item.store_name}}</view>
|
|
<view class="width100 mart5 height22">
|
|
<view class="width70 flleft text1 font13 fcor999" @click="goDetails(item.store_key,item.id)">
|
|
{{item.address}}
|
|
</view>
|
|
<view class="width30 flright font13 fcor666 fotct" @click="seeloaction(item)">
|
|
<image mode="widthFix" :src="imagewxUrl+imgadres1" style="width: 10px;"></image>
|
|
{{item.distance}}km
|
|
</view>
|
|
</view>
|
|
<view class="font14 width100 fcoreb5 mart5 height22" @click="goDetails(item.store_key,item.id)">
|
|
<text class="font18 fontwig6">{{item.price_vip}}</text>起<text
|
|
class="fcor999 margle">油站价￥{{item.price_gun}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<wybPopup ref="popup" type="bottom" height="800" width="500" radius="6" :showCloseIcon="false">
|
|
<view class="fotct font18 fontwig6 fcor333 mart10 height30" v-if="typeId == 1">筛选距离</view>
|
|
<view class="fotct font18 fontwig6 fcor333 mart10 height30" v-if="typeId == 2">优先条件</view>
|
|
<view class="fotct font18 fontwig6 fcor333 mart10 height30" v-if="typeId == 3">油号选择</view>
|
|
<view class="mart15" v-if="typeId == 1">
|
|
<view :class="item.name == distance?'activeRefuel':'refuel'" v-for="(item,index) in gunnumber"
|
|
:key="index" @click="changeValue(item)">
|
|
{{item.name}}
|
|
</view>
|
|
</view>
|
|
|
|
<view class="mart15" v-if="typeId == 2">
|
|
<view :class="item.name == distanceName?'activeRefuel':'refuel'" v-for="(item,index) in detailList"
|
|
:key="index" @click="changeValue1(item)">
|
|
{{item.name}}
|
|
</view>
|
|
</view>
|
|
<view class="mart15" v-if="typeId == 3">
|
|
<view v-for="(item,index) in oilList" :key="index">
|
|
<view class="font15 fcor666 width90 mart10 height22">{{item.name}}</view>
|
|
<view :class="items.name == onilName?'activeRefuel':'refuel'"
|
|
v-for="(items,indexs) in item.nillist" :key="indexs" @click="changeValue2(items)">
|
|
{{items.name}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</wybPopup>
|
|
<!-- <authorize></authorize> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getGasStoreList
|
|
} from '../../../Utils/Api.js';
|
|
import slFilter from '@/components/sl-filter/sl-filter.vue';
|
|
import wybPopup from '../../../components/wyb-popup/wyb-popup.vue';
|
|
import uSearchBar from '../../../components/uni-search-bar/components/uni-search-bar/uni-search-bar.vue';
|
|
// import authorize from '../../../components/Authorize.vue'
|
|
let app = getApp();
|
|
export default {
|
|
components: {
|
|
slFilter,
|
|
// authorize,
|
|
uSearchBar,
|
|
wybPopup
|
|
},
|
|
data() {
|
|
return {
|
|
themeColor: '#089bf5',
|
|
titleColor: '#666666',
|
|
filterResult: '',
|
|
imagewxUrl: app.globalData.imageWxImg,
|
|
imgadres:'btjy.png',
|
|
imgadres1:'dh.png',
|
|
imgadres2:'xiala.png',
|
|
imgadres3:'noorder.png',
|
|
menuList: [
|
|
{
|
|
'title': '油号',
|
|
'key': 'single2',
|
|
'isMutiple': false,
|
|
'detailTitle': '',
|
|
'reflexTitle': true,
|
|
'defaultSelectedIndex': 0,
|
|
'detailList': [{
|
|
'title': '90#',
|
|
'value': ''
|
|
}, {
|
|
'title': '92#',
|
|
'value': '92#'
|
|
}, {
|
|
'title': '95#',
|
|
'value': '95#'
|
|
}, {
|
|
'title': '98#',
|
|
'value': '98#'
|
|
}, {
|
|
'title': '101#',
|
|
'value': '101#'
|
|
}, ]
|
|
},
|
|
{
|
|
'title': '距离',
|
|
'key': 'single3',
|
|
'isMutiple': false,
|
|
'detailTitle': '',
|
|
'reflexTitle': true,
|
|
'defaultSelectedIndex': 0,
|
|
'detailList': [{
|
|
'title': '6km内',
|
|
'value': ''
|
|
},
|
|
{
|
|
'title': '10km内',
|
|
'value': '10km内'
|
|
},
|
|
{
|
|
'title': '15km内',
|
|
'value': '15km内'
|
|
},
|
|
{
|
|
'title': '20km内',
|
|
'value': '20km内'
|
|
},
|
|
{
|
|
'title': '50km内',
|
|
'value': '50km内'
|
|
}, {
|
|
'title': '2000km内',
|
|
'value': '2000'
|
|
}
|
|
]
|
|
}, {
|
|
'title': '距离',
|
|
'key': 'single1',
|
|
'isMutiple': false,
|
|
'detailTitle': '',
|
|
'reflexTitle': true,
|
|
'defaultSelectedIndex': 0,
|
|
'detailList': [{
|
|
'title': '距离最近',
|
|
'value': ''
|
|
}]
|
|
|
|
}
|
|
],
|
|
refuelList: [],
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
isNoMoreData: false,
|
|
searname: '',
|
|
gunnumber: [{
|
|
id: 1,
|
|
name: '6km内',
|
|
value: 6
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '10km内',
|
|
value: 10
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '15km内',
|
|
value: 15
|
|
},
|
|
{
|
|
id: 4,
|
|
name: '20km内',
|
|
value: 20
|
|
},
|
|
{
|
|
id: 5,
|
|
name: '50km内',
|
|
value: 50
|
|
}, {
|
|
id: 6,
|
|
name: '2000km内',
|
|
value: 2000
|
|
}
|
|
],
|
|
distance: '50km内',
|
|
distanceNum: '50',
|
|
distanceName: '距离最近',
|
|
detailList: [{
|
|
id: 1,
|
|
name: '距离最近'
|
|
}],
|
|
typeId: '',
|
|
oilList: [{
|
|
id: 1,
|
|
name: '汽油',
|
|
nillist: [{
|
|
id: 1,
|
|
name: '90#'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '92#'
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '95#'
|
|
},
|
|
{
|
|
id: 4,
|
|
name: '98#'
|
|
},
|
|
{
|
|
id: 5,
|
|
name: '101#'
|
|
},
|
|
{
|
|
id: 6,
|
|
name: '95(甲醇)#'
|
|
},
|
|
{
|
|
id: 7,
|
|
name: '92(甲醇)#'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '柴油',
|
|
nillist: [{
|
|
id: 1,
|
|
name: '-40#'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '-35#'
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '-30#'
|
|
},
|
|
{
|
|
id: 4,
|
|
name: '-20#'
|
|
},
|
|
{
|
|
id: 5,
|
|
name: '-10#'
|
|
},
|
|
{
|
|
id: 6,
|
|
name: '车队0#'
|
|
},
|
|
{
|
|
id: 7,
|
|
name: '0#'
|
|
},
|
|
{
|
|
id: 8,
|
|
name: '柴油#'
|
|
},
|
|
]
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '天然气',
|
|
nillist: [{
|
|
id: 1,
|
|
name: 'CNG'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'LNG'
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'LPG'
|
|
}
|
|
]
|
|
}
|
|
],
|
|
onilName: '92#',
|
|
latitudeful:'',
|
|
longitudeful:''
|
|
}
|
|
},
|
|
onLoad() {
|
|
let that = this;
|
|
uni.getLocation({
|
|
type: 'wgs84',
|
|
success: function(res) {
|
|
that.latitudeful = res.latitude;
|
|
that.longitudeful = res.longitude;
|
|
that.getGasStoreList();
|
|
}
|
|
})
|
|
},
|
|
onReachBottom() {
|
|
this.getGasStoreList();
|
|
},
|
|
methods: {
|
|
//筛选距离
|
|
changeValue(item) {
|
|
this.distance = item.name;
|
|
this.distanceNum = item.value;
|
|
this.pageNum = 1;
|
|
this.isNoMoreData = false;
|
|
this.refuelList = [];
|
|
this.getGasStoreList();
|
|
this.$refs.popup.hide();
|
|
},
|
|
|
|
seeloaction(item) {
|
|
uni.openLocation({
|
|
latitude: Number(item.latitude), //目的地的定位
|
|
longitude: Number(item.longitude), //目的地的定位
|
|
name: item.store_name,
|
|
address: item.address
|
|
})
|
|
},
|
|
changeValue1(item) {
|
|
this.distanceName = item.name;
|
|
this.pageNum = 1;
|
|
this.isNoMoreData = false;
|
|
this.refuelList = [];
|
|
this.getGasStoreList();
|
|
this.$refs.popup.hide();
|
|
},
|
|
|
|
changeValue2(item) {
|
|
this.onilName = item.name;
|
|
this.pageNum = 1;
|
|
this.isNoMoreData = false;
|
|
this.refuelList = [];
|
|
this.getGasStoreList();
|
|
this.$refs.popup.hide();
|
|
},
|
|
//显示弹出
|
|
showPopup(item) {
|
|
this.typeId = item;
|
|
this.$refs.popup.show();
|
|
},
|
|
search(res) {
|
|
uni.showToast({
|
|
title: '搜索：' + res.value,
|
|
icon: 'none'
|
|
})
|
|
},
|
|
input(res) {
|
|
this.searname = res;
|
|
this.pageNum = 1;
|
|
this.isNoMoreData = false;
|
|
this.refuelList = [];
|
|
this.getGasStoreList();
|
|
},
|
|
//查询列表
|
|
getGasStoreList() {
|
|
uni.showLoading({
|
|
title: '加载中...'
|
|
})
|
|
if (this.isNoMoreData) {
|
|
uni.hideLoading()
|
|
return false;
|
|
}
|
|
let pagenum = this.pageNum;
|
|
let params = {
|
|
storeName: this.searname,
|
|
distance: this.distanceNum,
|
|
regionId: app.globalData.cityId,
|
|
oilNoName: this.onilName,
|
|
latitude: this.latitudeful,
|
|
longitude: this.longitudeful,
|
|
pageNum: pagenum,
|
|
pageSize: this.pageSize
|
|
}
|
|
getGasStoreList(params).then(res => {
|
|
if (res.return_code == '000000') {
|
|
uni.hideLoading();
|
|
this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true;
|
|
if (res.return_data.total == (this.pageNum * this.pageSize)) {
|
|
this.isNoMoreData = true;
|
|
}
|
|
this.refuelList = this.refuelList.concat(res.return_data.list);
|
|
this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum;
|
|
} else {
|
|
this.refuelList = [];
|
|
uni.hideLoading()
|
|
}
|
|
})
|
|
},
|
|
//跳转详情
|
|
goDetails(items, itemId) {
|
|
uni.navigateTo({
|
|
url: '../refuel-details/refuel-details?id=' + items + '&desId=' + itemId
|
|
})
|
|
},
|
|
result(val) {
|
|
console.log('filter_result:' + JSON.stringify(val));
|
|
this.filterResult = JSON.stringify(val, null, 2)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #f1f3f5;
|
|
}
|
|
|
|
.refuel {
|
|
padding: 6px 5px;
|
|
border-radius: 5px;
|
|
background-color: #f6f6f6;
|
|
color: #666666;
|
|
margin-left: 10px;
|
|
margin-top: 15px;
|
|
display: inline-block;
|
|
font-size: 13px;
|
|
width: 18%;
|
|
text-align: center;
|
|
}
|
|
|
|
.activeRefuel {
|
|
padding: 6px 5px;
|
|
border-radius: 5px;
|
|
border: 1px solid #089bf5;
|
|
color: #089bf5;
|
|
margin-left: 10px;
|
|
margin-top: 15px;
|
|
display: inline-block;
|
|
font-size: 13px;
|
|
width: 18%;
|
|
text-align: center;
|
|
}
|
|
|
|
.stuMenu {
|
|
width: 33.3%;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
font-size: 14px;
|
|
color: #333333;
|
|
|
|
.stuimg {
|
|
width: 10px;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.sear {
|
|
margin-left: 10px;
|
|
width: 50px;
|
|
}
|
|
|
|
.searImg {
|
|
margin-left: 55px;
|
|
}
|
|
|
|
.recontleft {
|
|
width: 80px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.recontright {
|
|
margin-left: 95px;
|
|
}
|
|
|
|
.text {
|
|
margin-top: 50px;
|
|
margin-left: 20px;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
|