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.
380 lines
10 KiB
380 lines
10 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(3)">{{onilName}}
|
|
<image mode="widthFix" class="stuimg margle" :src="imagewxUrl+imgadres2"></image>
|
|
</view>
|
|
<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>
|
|
</view>
|
|
|
|
<view v-if="refuelList == '' " class="mart60 fotct font14 fcor666">
|
|
<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres3"></image>
|
|
</view>
|
|
<view class="width96 dis-flex border-box backcorfff border-r mart10 " v-for="(item,index) in refuelList" :key="index">
|
|
<image mode="widthFix" :src="item.store_logo" class="recontleft height50 border-r"
|
|
@click="goDetails(item.store_key,item.id)">
|
|
</image>
|
|
<view class="recontright flex-1">
|
|
<view class="text1 width100 font18 fontwig6 " @click="goDetails(item.store_key,item.id)">
|
|
{{item.store_name}}
|
|
</view>
|
|
<view class="width100 mart5 dis-flex">
|
|
<view class="width70 flex-s0 text1 font13 fcor999" @click="goDetails(item.store_key,item.id)">
|
|
{{item.address}}
|
|
</view>
|
|
<view class="width30 flex-s0 font13 fcor666 fotct" v-if="item.distance" @click="seeloaction(item)">
|
|
<image mode="widthFix" :src="imagewxUrl+imgadres1" style="width: 10px;margin-right: 3px;height:10px;"></image>
|
|
{{item.distance}}km
|
|
</view>
|
|
</view>
|
|
<view class="font14 width100 fcoreb5 mart5 " @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>
|
|
<view class="height10"></view>
|
|
|
|
|
|
|
|
<wybPopup ref="popup" type="bottom" height="500" 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 class="font15 fcor666 width90 mart10 height22">油品</view>
|
|
<view :class="items.codeName == onilName?'activeRefuel':'refuel'" v-for="(items,indexs) in oilList"
|
|
:key="indexs" @click="changeValue2(items)">
|
|
{{items.codeName}}
|
|
</view>
|
|
</view>
|
|
</wybPopup>
|
|
<!-- <authorize></authorize> -->
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getGasStoreList,
|
|
getDictionaryByCodeType
|
|
} 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',
|
|
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: [],
|
|
onilName: '92#',
|
|
latitudeful: '',
|
|
longitudeful: '',
|
|
isTyAgent: false //是否是代理商
|
|
}
|
|
},
|
|
onLoad() {
|
|
// let that = this;
|
|
// that.getDictionaryByCodeType();
|
|
// if (app.globalData.accountId) {
|
|
// that.isTyAgent = true;
|
|
// }
|
|
// that.getGasStoreList();
|
|
|
|
},
|
|
onShow() {
|
|
let that = this;
|
|
that.getDictionaryByCodeType();
|
|
if (app.globalData.accountId) {
|
|
that.isTyAgent = true;
|
|
}
|
|
that.getGasStoreList();
|
|
},
|
|
onReachBottom() {
|
|
this.getGasStoreList();
|
|
},
|
|
methods: {
|
|
//查询油品
|
|
getDictionaryByCodeType() {
|
|
let datas = {
|
|
codeType: 'GAS_OIL_TYPE'
|
|
}
|
|
getDictionaryByCodeType(datas).then(res => {
|
|
if (res.return_code == '000000') {
|
|
this.oilList = res.return_data;
|
|
}
|
|
})
|
|
},
|
|
//筛选距离
|
|
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) {
|
|
// #ifdef H5
|
|
window.location.href =
|
|
`http://apis.map.qq.com/uri/v1/marker?marker=coord:(${item.latitude},${item.longitude})&addr:${item.address}`;
|
|
// #endif
|
|
// #ifdef MP
|
|
uni.openLocation({
|
|
latitude: Number(item.latitude), //目的地的定位
|
|
longitude: Number(item.longitude), //目的地的定位
|
|
name: item.store_name,
|
|
address: item.address
|
|
})
|
|
// #endif
|
|
},
|
|
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.codeName;
|
|
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: app.globalData.latitude,
|
|
longitude: app.globalData.longitude,
|
|
pageNum: pagenum,
|
|
pageSize: this.pageSize,
|
|
isTyAgent: this.isTyAgent
|
|
}
|
|
|
|
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 + '&oilNo=' + this
|
|
.onilName
|
|
})
|
|
uni.setStorage({
|
|
key: "store_key",
|
|
data: items
|
|
})
|
|
},
|
|
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;
|
|
height: 10px;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.sear {
|
|
margin-left: 10px;
|
|
width: 50px;
|
|
height:19px;
|
|
}
|
|
|
|
.searImg {
|
|
margin-left: 55px;
|
|
}
|
|
|
|
.recontleft {
|
|
flex-shrink: 0;
|
|
width: 80px;
|
|
margin : 20rpx;
|
|
|
|
}
|
|
|
|
.recontright {
|
|
padding: 20rpx 20rpx 20rpx 0;
|
|
}
|
|
|
|
.text {
|
|
margin-top: 50px;
|
|
margin-left: 20px;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
|