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.
321 lines
7.7 KiB
321 lines
7.7 KiB
<template>
|
|
<view>
|
|
<image mode="widthFix" class="width100" src="../../../static/img/banner3.png" @click="showPopup"></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>
|
|
<view class="flright reimg fotct width15">
|
|
<image mode="widthFix" src="../../../static/img/dhl.png"></image>
|
|
<view class="fcor089">1.9km</view>
|
|
</view>
|
|
</view>
|
|
<view class="fcor999 font14 width90">
|
|
营业时间 : 00:00-23:59 <text class="relab">站内开票</text>
|
|
</view>
|
|
</view>
|
|
<!-- 标价 -->
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<view class="margle20 font15 fcor666 flleft mart20 ">
|
|
<view class="fontspec fotct ">国标价</view>
|
|
<view class="fontwig6 font20"><text class="font14">￥</text>6.88</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="line10 mart15"></view>
|
|
<!-- 我要加油 -->
|
|
<view class="width90 mart15 font16 fcor666">我要加油</view>
|
|
<view class="width90 relbj mart15">
|
|
<view class="width50 flleft fotct">
|
|
<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>
|
|
<image mode="widthFix" class="margle" style="width: 10px; " src="../../../static/img/xiala.png">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
<view class="width50 flright fotct">
|
|
<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>
|
|
<image mode="widthFix" class="margle" style="width: 10px; " src="../../../static/img/xiala.png">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="line10 mart15"></view>
|
|
<!--加油金额-->
|
|
<view class="width90 mart15 font16 fcor666">加油金额</view>
|
|
<view class="width90 height40 mart10" style="border: 1px solid #f2f2f2;">
|
|
<view class="width8 flleft">￥</view>
|
|
<input type="number" class="font16 width70 flleft height40" placeholder="请输入金额" v-model="inputPhone" />
|
|
<view class="width20 height40 flright font14 fcor999 fotct"
|
|
style="border-left: 1px solid #f2f2f2;line-height: 40px;">
|
|
约0.01L
|
|
</view>
|
|
</view>
|
|
<view class="list width90">
|
|
<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>
|
|
<!-- 底部按钮 -->
|
|
<view class="footer">
|
|
<view class="width50 flleft fcor666 padleft15 font15">
|
|
合计: ￥<text class="font24">0.00</text>
|
|
</view>
|
|
<button class="reBtn flright">去支付</button>
|
|
</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>
|
|
</wybPopup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import wybPopup from '../../../components/wyb-popup/wyb-popup.vue'
|
|
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号'
|
|
}],
|
|
amountList: [{
|
|
id: '1',
|
|
price: '200',
|
|
realPrice: '13.08'
|
|
},
|
|
{
|
|
id: '2',
|
|
price: '300',
|
|
realPrice: '23.08'
|
|
},
|
|
{
|
|
id: '3',
|
|
price: '400',
|
|
realPrice: '33.08'
|
|
},
|
|
{
|
|
id: '4',
|
|
price: '500',
|
|
realPrice: '43.08'
|
|
}
|
|
],
|
|
detailsId: '',
|
|
inputAmount: ''
|
|
}
|
|
},
|
|
methods: {
|
|
//显示弹出
|
|
showPopup() {
|
|
this.$refs.popup.show();
|
|
},
|
|
|
|
//选择规格
|
|
changeValue(item) {
|
|
this.detailsId = item.value;
|
|
this.$refs.popup.hide();
|
|
},
|
|
|
|
select(amount) {
|
|
this.inputAmount = amount.id;
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.titlecon {
|
|
border-radius: 10px 10px 0 0;
|
|
position: relative;
|
|
top: -30px;
|
|
}
|
|
|
|
.refuel {
|
|
padding: 6px 15px;
|
|
border-radius: 5px;
|
|
background-color: #f6f6f6;
|
|
color: #666666;
|
|
margin-right: 10px;
|
|
margin-left: 15px;
|
|
margin-top: 15px;
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
width: 10%;
|
|
text-align: center;
|
|
}
|
|
|
|
.activeRefuel {
|
|
padding: 6px 15px;
|
|
border-radius: 5px;
|
|
border: 1px solid #089bf5;
|
|
color: #089bf5;
|
|
margin-right: 10px;
|
|
margin-left: 15px;
|
|
margin-top: 15px;
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
width: 10%;
|
|
text-align: center;
|
|
}
|
|
|
|
.reimg {
|
|
image {
|
|
width: 20px;
|
|
}
|
|
}
|
|
|
|
.relab {
|
|
padding: 5px;
|
|
border-radius: 5px;
|
|
margin-left: 10px;
|
|
color: #089bf5;
|
|
background-color: #e5f2fe;
|
|
}
|
|
|
|
.relbj {
|
|
height: 80px;
|
|
box-shadow: 0 0 8px 2px #f6f6f6;
|
|
border-radius: 5px;
|
|
|
|
}
|
|
|
|
.bjcss {
|
|
line-height: 60px;
|
|
margin-left: 10px;
|
|
|
|
image {
|
|
width: 10px;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
.borRit {
|
|
padding-right: 10px;
|
|
border-right: 1px solid #f4f4f4;
|
|
}
|
|
|
|
.list {
|
|
display: flow-root;
|
|
justify-content: space-between;
|
|
padding: 20upx 0;
|
|
|
|
.box {
|
|
width: 30%;
|
|
margin-right: 2%;
|
|
margin-top: 20upx;
|
|
float: left;
|
|
height: 120upx;
|
|
// display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
border-radius: 10upx;
|
|
box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.05);
|
|
font-size: 36upx;
|
|
color: #666666;
|
|
border: 1px solid #f2f2f2;
|
|
|
|
&.on {
|
|
// background-color: #089bf5;
|
|
border: 1px solid #089bf5;
|
|
}
|
|
}
|
|
|
|
.heTitle {
|
|
margin-top: 15upx;
|
|
width: 100%;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.mitext {
|
|
margin-top: 10upx;
|
|
width: 100%;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
position: fixed;
|
|
bottom: 0upx;
|
|
width: 100%;
|
|
height: 99upx;
|
|
color: #FFFFFF;
|
|
border-top: solid 1upx #eee;
|
|
background-color: #FFFFFF;
|
|
z-index: 2;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.reBtn{
|
|
width: 110px;
|
|
background-color: #089bf5;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
padding: 0;
|
|
font-size: 16px;
|
|
border-radius: 22px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|