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