|
|
|
@ -1,15 +1,15 @@ |
|
|
|
|
<template> |
|
|
|
|
<view> |
|
|
|
|
<image mode="widthFix" class="width100" src="../../../static/img/banner3.png" @click="showPopup"></image> |
|
|
|
|
<image mode="widthFix" class="width100" :src="storeList.gasLogoSmall"></image> |
|
|
|
|
<view class="height100p titlecon backcorfff"> |
|
|
|
|
<view class="height60 paddtop25 width90"> |
|
|
|
|
<view class="flleft width85"> |
|
|
|
|
<view class="width100 text1 font18 fontwig6 fcor333">乌江能源加油站(大一型国企)</view> |
|
|
|
|
<view class="width100 font14 fcor666 mart5">贵州省贵阳市什么什么大道65号</view> |
|
|
|
|
<view class="flleft width80p"> |
|
|
|
|
<view class="width100 text1 font18 fontwig6 fcor333">{{storeList.gasName}}</view> |
|
|
|
|
<view class="width100 font14 fcor666 mart5">{{storeList.gasAddress}}</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="flright reimg fotct width15"> |
|
|
|
|
<view class="flright reimg fotct width20"> |
|
|
|
|
<image mode="widthFix" src="../../../static/img/dhl.png"></image> |
|
|
|
|
<view class="fcor089">1.9km</view> |
|
|
|
|
<view class="fcor089">{{storeList.distance}}km</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="fcor999 font14 width90"> |
|
|
|
@ -19,20 +19,21 @@ |
|
|
|
|
<!-- 标价 --> |
|
|
|
|
<view class="width90 relbj"> |
|
|
|
|
<view class="height60"> |
|
|
|
|
<view class="flleft mart10 bjcss font16 fontwig6"> |
|
|
|
|
92# <image mode="widthFix" src="../../../static/img/xiala.png"></image> |
|
|
|
|
<view class="flleft mart10 bjcss font16 fontwig6" @click="showPopup(1)"> |
|
|
|
|
{{oilNo}} |
|
|
|
|
<image mode="widthFix" src="../../../static/img/xiala.png"></image> |
|
|
|
|
</view> |
|
|
|
|
<view class="margle20 font15 fcoreb5 flleft mart20 borRit"> |
|
|
|
|
<view class="fontspec fotct ">团购价</view> |
|
|
|
|
<view class="fontwig6 font20"><text class="font14">¥</text>6.38</view> |
|
|
|
|
<view class="fontwig6 font20"><text class="font14">¥</text>{{priceVip}}</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="margle20 font15 fcor666 flleft mart20 borRit"> |
|
|
|
|
<view class="fontspec fotct ">油站价</view> |
|
|
|
|
<view class="fontwig6 font20"><text class="font14">¥</text>6.88</view> |
|
|
|
|
<view class="fontwig6 font20"><text class="font14">¥</text>{{priceGun}}</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="margle20 font15 fcor666 flleft mart20 "> |
|
|
|
|
<view class="fontspec fotct ">国标价</view> |
|
|
|
|
<view class="fontwig6 font20"><text class="font14">¥</text>6.88</view> |
|
|
|
|
<view class="fontwig6 font20"><text class="font14">¥</text>{{priceOfficial}}</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
@ -40,20 +41,20 @@ |
|
|
|
|
<!-- 我要加油 --> |
|
|
|
|
<view class="width90 mart15 font16 fcor666">我要加油</view> |
|
|
|
|
<view class="width90 relbj mart15"> |
|
|
|
|
<view class="width50 flleft fotct"> |
|
|
|
|
<view class="width50 flleft fotct" @click="showPopup(1)"> |
|
|
|
|
<view class="width100 fcor999 font14 mart10">选择油号</view> |
|
|
|
|
<view class="width100 mart10"> |
|
|
|
|
<image mode="widthFix" style="width: 20px;" src="../../../static/img/yhl.png"></image> |
|
|
|
|
<text class="font20 fcor333 fontwig6 margle">92#</text> |
|
|
|
|
<text class="font20 fcor333 fontwig6 margle">{{oilNo}}</text> |
|
|
|
|
<image mode="widthFix" class="margle" style="width: 10px; " src="../../../static/img/xiala.png"> |
|
|
|
|
</image> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="width50 flright fotct"> |
|
|
|
|
<view class="width50 flright fotct" @click="showPopup(2)"> |
|
|
|
|
<view class="width100 fcor999 font14 mart10">选择油枪</view> |
|
|
|
|
<view class="width100 mart10 "> |
|
|
|
|
<image mode="widthFix" style="width: 20px;" src="../../../static/img/yql.png"></image> |
|
|
|
|
<text class="font20 fcor333 fontwig6 margle">2号</text> |
|
|
|
|
<text class="font20 fcor333 fontwig6 margle">{{gunNo}}号</text> |
|
|
|
|
<image mode="widthFix" class="margle" style="width: 10px; " src="../../../static/img/xiala.png"> |
|
|
|
|
</image> |
|
|
|
|
</view> |
|
|
|
@ -74,8 +75,6 @@ |
|
|
|
|
<view class="box" v-for="(amount,index) in amountList" :key="index" @click="select(amount)" |
|
|
|
|
:class="{'on':amount.id == inputAmount}"> |
|
|
|
|
<view class="heTitle fcor333" :class="{'fcor089':amount.id == inputAmount}">{{amount.price}}元</view> |
|
|
|
|
<view class="mitext fcor999" :class="{'fcor089':amount.id == inputAmount}">最高优惠¥{{amount.realPrice}} |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="height60 width100"></view> |
|
|
|
@ -88,93 +87,122 @@ |
|
|
|
|
</view> |
|
|
|
|
<!-- 底部弹窗 --> |
|
|
|
|
<wybPopup ref="popup" type="bottom" height="600" width="500" radius="6" :showCloseIcon="true"> |
|
|
|
|
<view class="fotct font18 fontwig6 fcor333 mart10 height30">选择油号</view> |
|
|
|
|
<view class="font15 fcor666 width90 mart10 height22">汽油油号</view> |
|
|
|
|
<view :class="swiper.value == detailsId?'activeRefuel':'refuel'" v-for="(swiper,index) in detailList" |
|
|
|
|
:key="index" @click="changeValue(swiper)"> |
|
|
|
|
{{swiper.value}} |
|
|
|
|
<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="font15 fcor666 width90 mart10 height22" v-if="typeId == 1">汽油油号</view> |
|
|
|
|
<view class="font15 fcor666 width90 mart10 height22" v-if="typeId == 2">汽油油枪</view> |
|
|
|
|
<view v-if="typeId == 1"> |
|
|
|
|
<view :class="swiper.oilNoName == oilNo?'activeRefuel':'refuel'" v-for="(swiper,index) in detailList" |
|
|
|
|
:key="index" @click="changeValue(swiper)"> |
|
|
|
|
{{swiper.oilNoName}} |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<view v-if="typeId == 2"> |
|
|
|
|
<view :class="item.gunNo == gunNo?'activeRefuel':'refuel'" v-for="(item,index) in gunnumber" |
|
|
|
|
:key="index" @click="changeValue2(item)"> |
|
|
|
|
{{item.gunNo}} |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</wybPopup> |
|
|
|
|
</view> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import wybPopup from '../../../components/wyb-popup/wyb-popup.vue' |
|
|
|
|
import { |
|
|
|
|
getGasDetailByStoreKey |
|
|
|
|
} from '../../../Utils/Api.js'; |
|
|
|
|
import wybPopup from '../../../components/wyb-popup/wyb-popup.vue'; |
|
|
|
|
let app = getApp(); |
|
|
|
|
export default { |
|
|
|
|
components: { |
|
|
|
|
wybPopup |
|
|
|
|
}, |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
detailList: [{ |
|
|
|
|
'title': '不限', |
|
|
|
|
'value': '不限' |
|
|
|
|
}, { |
|
|
|
|
'title': '89#', |
|
|
|
|
'value': '89#' |
|
|
|
|
}, { |
|
|
|
|
'title': '92#', |
|
|
|
|
'value': '92#' |
|
|
|
|
}, { |
|
|
|
|
'title': '95#', |
|
|
|
|
'value': '95#' |
|
|
|
|
}, { |
|
|
|
|
'title': '98#', |
|
|
|
|
'value': '98#' |
|
|
|
|
}], |
|
|
|
|
gunnumber: [{ |
|
|
|
|
'title': '1号', |
|
|
|
|
'value': '1号' |
|
|
|
|
}, { |
|
|
|
|
'title': '2号', |
|
|
|
|
'value': '2号' |
|
|
|
|
}, { |
|
|
|
|
'title': '3号', |
|
|
|
|
'value': '3号' |
|
|
|
|
}, { |
|
|
|
|
'title': '4号', |
|
|
|
|
'value': '4号' |
|
|
|
|
}, { |
|
|
|
|
'title': '5号', |
|
|
|
|
'value': '5号' |
|
|
|
|
}], |
|
|
|
|
detailList: [], |
|
|
|
|
gunnumber: [], |
|
|
|
|
amountList: [{ |
|
|
|
|
id: '1', |
|
|
|
|
price: '200', |
|
|
|
|
realPrice: '13.08' |
|
|
|
|
price: '200' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: '2', |
|
|
|
|
price: '300', |
|
|
|
|
realPrice: '23.08' |
|
|
|
|
price: '300' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: '3', |
|
|
|
|
price: '400', |
|
|
|
|
realPrice: '33.08' |
|
|
|
|
price: '400' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: '4', |
|
|
|
|
price: '500', |
|
|
|
|
realPrice: '43.08' |
|
|
|
|
price: '500' |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
detailsId: '', |
|
|
|
|
inputAmount: '' |
|
|
|
|
inputAmount: '', |
|
|
|
|
store_key: '', |
|
|
|
|
storeList: '', |
|
|
|
|
oilNo: '', |
|
|
|
|
priceVip: '', |
|
|
|
|
priceOfficial: '', |
|
|
|
|
priceGun: '', |
|
|
|
|
gunNo: '', |
|
|
|
|
typeId: '' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
onLoad(options) { |
|
|
|
|
this.store_key = options.id; |
|
|
|
|
this.getGasDetailByStoreKey(); |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
//显示弹出 |
|
|
|
|
showPopup() { |
|
|
|
|
showPopup(item) { |
|
|
|
|
this.$refs.popup.show(); |
|
|
|
|
this.typeId = item; |
|
|
|
|
}, |
|
|
|
|
//查询详情 |
|
|
|
|
getGasDetailByStoreKey() { |
|
|
|
|
uni.showLoading({ |
|
|
|
|
title: '加载中...' |
|
|
|
|
}) |
|
|
|
|
let params = { |
|
|
|
|
storeKey: this.store_key, |
|
|
|
|
latitude: app.globalData.latitude, |
|
|
|
|
longitude: app.globalData.longitude |
|
|
|
|
} |
|
|
|
|
getGasDetailByStoreKey(params).then(res => { |
|
|
|
|
uni.hideLoading(); |
|
|
|
|
if (res.return_code == '000000') { |
|
|
|
|
this.storeList = res.return_data; |
|
|
|
|
this.oilNo = res.return_data.oilPriceList[0].oilNoName; |
|
|
|
|
this.priceVip = res.return_data.oilPriceList[0].priceVip; |
|
|
|
|
this.priceGun = res.return_data.oilPriceList[0].priceGun; |
|
|
|
|
this.priceOfficial = res.return_data.oilPriceList[0].priceOfficial; |
|
|
|
|
this.detailList = res.return_data.oilPriceList; |
|
|
|
|
this.gunnumber = res.return_data.gasGunList; |
|
|
|
|
for (var i = 0; i < res.return_data.gasGunList.length; i++) { |
|
|
|
|
if (this.oilNo == res.return_data.gasGunList[i].oilNoName) { |
|
|
|
|
this.gunNo = res.return_data.gasGunList[i].gunNo |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//选择规格 |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
//选择油号 |
|
|
|
|
changeValue(item) { |
|
|
|
|
this.detailsId = item.value; |
|
|
|
|
this.oilNo = item.oilNoName; |
|
|
|
|
this.priceVip = item.priceVip; |
|
|
|
|
this.priceOfficial = item.priceOfficial; |
|
|
|
|
this.priceGun = item.priceGun; |
|
|
|
|
this.$refs.popup.hide(); |
|
|
|
|
}, |
|
|
|
|
//选择油枪 |
|
|
|
|
changeValue2(item) { |
|
|
|
|
this.gunNo = item.gunNo; |
|
|
|
|
this.$refs.popup.hide(); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
select(amount) { |
|
|
|
|
this.inputAmount = amount.id; |
|
|
|
|
}, |
|
|
|
@ -264,6 +292,7 @@ |
|
|
|
|
margin-top: 20upx; |
|
|
|
|
float: left; |
|
|
|
|
height: 120upx; |
|
|
|
|
line-height: 120upx; |
|
|
|
|
// display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
@ -281,9 +310,8 @@ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.heTitle { |
|
|
|
|
margin-top: 15upx; |
|
|
|
|
width: 100%; |
|
|
|
|
font-size: 15px; |
|
|
|
|
font-size: 16px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.mitext { |
|
|
|
@ -305,7 +333,8 @@ |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
align-items: center; |
|
|
|
|
.reBtn{ |
|
|
|
|
|
|
|
|
|
.reBtn { |
|
|
|
|
width: 110px; |
|
|
|
|
background-color: #089bf5; |
|
|
|
|
color: #FFFFFF; |
|
|
|
@ -317,5 +346,4 @@ |
|
|
|
|
line-height: 40px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
</style> |
|
|
|
|