<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 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" v-if="item.distance" @click="seeloaction(item)"> <image mode="widthFix" :src="imagewxUrl+imgadres1" style="width: 10px;margin-right: 3px"></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="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; 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>