parent
247655cd7e
commit
13f517750f
@ -0,0 +1,16 @@ |
|||||||
|
@font-face {font-family: "iconfont"; |
||||||
|
src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAKUAAsAAAAABlAAAAJJAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcApcdgE2AiQDCAsGAAQgBYRtBy8bmwXIrjBu4UkbIjvjLimCmu1EP9KHAd4jgmi/3+zde18toRbpnkUTzRKRUkgQE6RA9xL+tMuG6RYp8bFsgmbcecAB9mDhH67tDS3pQsIsmSbPL7chM1RKsFr5mNDBoUDPJItlaZG8fvhi/tciWcbRfJ7L6U2gA1l9oBz3orEmTRpAvTigAPfCKLISSiNtGLvAJdwn0DCHgMfN/kgLK1jLAvE0p7YWzoUVCparCZWavYV4U6qllxTNa/j5+JeKMEmZWQ1njw1PK39hF+TnFG59QoSADpfI2AEUxFVt+oQpGIc10pYlYF+1wRfTfZfYq12wv86qboEZqLgnpau61VyC21L06V8d9cuJmT795hWPJp8ayHj0wrZNx+/+1Nzdf8MBtu9H2p+tgB5tn/W1PEZvgeD5Xf/if61ZgE9foa3Qz0ttd57gtyh79hS62nKmQlXWDiczp2tqaGAK+we+sZbxPeRDzXiEt2o2RVazQhbsDkpNu6io2UPDNn24aagxRVHHlgkQehaSjg9kPYcs2IvSxENFL0w03ASd2bQW82is0d6iB+YE2ZWCOO5tNKodIN0xe51Vh/wE15t5DGQsUcy1UOB6jg19T1NjSyCsJQcFHkPGJJS1XKC7jaXtVpV4nNS9KGYl16KOrCHbFvIA4wRkLkkg/uitaOn9A4jaYWzrlq6a/ARa25hPDiRG9CBbBtGr616e6faolGGLAMGaxAEFZiGGkUCpn7WAXFsxaURSKeH2oNDXEFvfxL/uGDRY1hT2lKy8Y3KDmgYA') format('woff2') |
||||||
|
} |
||||||
|
|
||||||
|
.iconfont { |
||||||
|
font-family: "iconfont" !important; |
||||||
|
font-size: 20px; |
||||||
|
font-style: normal; |
||||||
|
-webkit-font-smoothing: antialiased; |
||||||
|
-moz-osx-font-smoothing: grayscale; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-close:before { |
||||||
|
content: "\e622"; |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,420 @@ |
|||||||
|
<template> |
||||||
|
<view v-if="isShow"> |
||||||
|
<view |
||||||
|
@tap.stop.prevent |
||||||
|
@touchmove.stop.prevent |
||||||
|
class="wyb-popup-box" |
||||||
|
:style="{ |
||||||
|
transitionDuration: duration + 'ms', |
||||||
|
opacity: contentOpacity || (type === 'center' ? 0 : 1), |
||||||
|
transform: contentTransform || autoTransform, |
||||||
|
zIndex: zIndex, |
||||||
|
borderTopRightRadius: type === 'center' || type === 'bottom' || type === 'left' ? radius + 'px' : 0, |
||||||
|
borderTopLeftRadius: type === 'center' || type === 'bottom' || type === 'right' ? radius + 'px' : 0, |
||||||
|
borderBottomRightRadius: type === 'center' || type === 'top' || type === 'left' ? radius + 'px' : 0, |
||||||
|
borderBottomLeftRadius: type === 'center' || type === 'top' || type === 'right' ? radius + 'px' : 0, |
||||||
|
width: autoWidth, |
||||||
|
height: autoHeight, |
||||||
|
minWidth: width + 'rpx', |
||||||
|
minHeight: height + 'rpx', |
||||||
|
top: sizeChange && type === 'center' ? winReTop : autoTop, |
||||||
|
bottom: autoBottom, |
||||||
|
left: autoLeft, |
||||||
|
right: autoRight, |
||||||
|
backgroundColor: bgColor}"> |
||||||
|
<view |
||||||
|
class="wyb-popup-close" |
||||||
|
v-if="showCloseIcon" |
||||||
|
:style="{ |
||||||
|
width: closeIcon ? closeIconSize + 'rpx' : 'auto', |
||||||
|
height: closeIcon ? closeIconSize + 'rpx' : 'auto', |
||||||
|
top: closeIconPos === 'top-right' || closeIconPos === 'top-left' ? vertOffset + 'rpx' : 'auto', |
||||||
|
bottom: closeIconPos === 'bottom-right' || closeIconPos === 'bottom-left' ? vertOffset + 'rpx' : 'auto', |
||||||
|
left: closeIconPos === 'bottom-left' || closeIconPos === 'top-left' ? horiOffset + 'rpx' : 'auto', |
||||||
|
right: closeIconPos === 'bottom-right' || closeIconPos === 'top-right' ? horiOffset + 'rpx' : 'auto'}"> |
||||||
|
<image class="wyb-popup-custom-close" v-if="showCloseIcon&&closeIcon" :src="closeIcon" @tap="hide" :style="{ |
||||||
|
width: closeIconSize + 'rpx', |
||||||
|
height: closeIconSize + 'rpx'}" /> |
||||||
|
<view v-if="showCloseIcon&&!closeIcon" class="iconfont icon-close" @tap="hide" /> |
||||||
|
</view> |
||||||
|
|
||||||
|
<scroll-view |
||||||
|
class="wyb-popup-container" |
||||||
|
:style="{ |
||||||
|
width: autoWidth, |
||||||
|
height: autoHeight}" |
||||||
|
:enable-flex="true" |
||||||
|
:scroll-y="scrollY" |
||||||
|
:scroll-x="scrollX"> |
||||||
|
<view class="wyb-popup-slot"><slot></slot></view> |
||||||
|
</scroll-view> |
||||||
|
</view> |
||||||
|
<view |
||||||
|
class="wyb-popup-mask" |
||||||
|
@tap.stop="close" |
||||||
|
@touchmove.stop.prevent |
||||||
|
:style="{ |
||||||
|
opacity: maskOpacity, |
||||||
|
transitionDuration: duration + 'ms', |
||||||
|
backgroundColor: 'rgba(0, 0, 0, ' + maskAlpha + ')', |
||||||
|
zIndex: zIndex - 1}" /> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
w: uni.getSystemInfoSync().screenWidth, |
||||||
|
h: uni.getSystemInfoSync().screenHeight, |
||||||
|
isShow: false, |
||||||
|
winReBottom: '', |
||||||
|
winReTop: '', |
||||||
|
sizeChange: false, |
||||||
|
contentOpacity: null, |
||||||
|
contentTransform: null, |
||||||
|
maskOpacity: 0 |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
autoCenterTop() { |
||||||
|
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight |
||||||
|
let windowHeight = uni.getSystemInfoSync().windowHeight |
||||||
|
let popupHeight = this.rpxToPx(this.height) |
||||||
|
let navHeight = 44 |
||||||
|
let result = `${(windowHeight - popupHeight) / 2 - this.negativeTop}px` |
||||||
|
return result |
||||||
|
}, |
||||||
|
autoTransform() { |
||||||
|
let result = '' |
||||||
|
switch(this.type) { |
||||||
|
case 'center': |
||||||
|
if (this.centerAnim === 'zoom-lessen') { |
||||||
|
result = `scale(${this.zoomLessenMulti})` |
||||||
|
} else if (this.centerAnim === 'slide-up') { |
||||||
|
result = `translateY(${100 * this.slideMulti}%)` |
||||||
|
} else if (this.centerAnim === 'slide-down') { |
||||||
|
result = `translateY(${-100 * this.slideMulti}%)` |
||||||
|
} else if (this.centerAnim === 'fade') { |
||||||
|
result = 'auto' |
||||||
|
} |
||||||
|
break |
||||||
|
case 'bottom': |
||||||
|
result = 'translateY(100%)' |
||||||
|
break |
||||||
|
case 'top': |
||||||
|
result = 'translateY(-100%)' |
||||||
|
break |
||||||
|
case 'left': |
||||||
|
result = 'translateX(-100%)' |
||||||
|
break |
||||||
|
case 'right': |
||||||
|
result = 'translateX(100%)' |
||||||
|
break |
||||||
|
} |
||||||
|
return result |
||||||
|
}, |
||||||
|
autoWidth() { |
||||||
|
if (this.type === 'center') { |
||||||
|
return `${this.width}rpx` |
||||||
|
} else { |
||||||
|
if (this.mode === 'size-fixed') { |
||||||
|
if (this.type === 'top' || this.type === 'bottom') { |
||||||
|
return '100%' |
||||||
|
} else { |
||||||
|
return `${this.width}rpx` |
||||||
|
} |
||||||
|
} else { |
||||||
|
if (this.type === 'top' || this.type === 'bottom') { |
||||||
|
return '100%' |
||||||
|
} else { |
||||||
|
return 'auto' |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
autoHeight() { |
||||||
|
if (this.type === 'center') { |
||||||
|
return `${this.height}rpx` |
||||||
|
} else { |
||||||
|
if (this.mode === 'size-fixed') { |
||||||
|
if (this.type === 'left' || this.type === 'right') { |
||||||
|
return '100%' |
||||||
|
} else { |
||||||
|
return `${this.height}rpx` |
||||||
|
} |
||||||
|
} else { |
||||||
|
if (this.type === 'left' || this.type === 'right') { |
||||||
|
return '100%' |
||||||
|
} else { |
||||||
|
return 'auto' |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
autoTop() { |
||||||
|
if (this.type === 'center') { |
||||||
|
return this.autoCenterTop |
||||||
|
} else if (this.type === 'bottom') { |
||||||
|
return 'auto' |
||||||
|
} else { |
||||||
|
return 0 |
||||||
|
} |
||||||
|
}, |
||||||
|
autoBottom() { |
||||||
|
if (this.type === 'center' || this.type === 'top') { |
||||||
|
return 'auto' |
||||||
|
} else { |
||||||
|
return 0 |
||||||
|
} |
||||||
|
}, |
||||||
|
autoLeft() { |
||||||
|
if (this.type === 'center') { |
||||||
|
return `${(this.w - this.rpxToPx(this.width)) / 2}px` |
||||||
|
} else if (this.type === 'right') { |
||||||
|
return 'auto' |
||||||
|
} else { |
||||||
|
return 0 |
||||||
|
} |
||||||
|
}, |
||||||
|
autoRight() { |
||||||
|
if (this.type === 'center' || this.type === 'left') { |
||||||
|
return 'auto' |
||||||
|
} else { |
||||||
|
return 0 |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
props: { |
||||||
|
type: { |
||||||
|
type: String, |
||||||
|
default: 'bottom' |
||||||
|
}, |
||||||
|
mode: { |
||||||
|
type: String, |
||||||
|
default: 'size-auto' |
||||||
|
}, |
||||||
|
height: { |
||||||
|
type: [String, Number], |
||||||
|
default: 400 |
||||||
|
}, |
||||||
|
width: { |
||||||
|
type: [String, Number], |
||||||
|
default: 500 |
||||||
|
}, |
||||||
|
radius: { |
||||||
|
type: [String, Number], |
||||||
|
default: 0 |
||||||
|
}, |
||||||
|
zIndex: { |
||||||
|
type: [String, Number], |
||||||
|
default: 10076 |
||||||
|
}, |
||||||
|
maskClickClose: { |
||||||
|
type: Boolean, |
||||||
|
default: true |
||||||
|
}, |
||||||
|
maskAlpha: { |
||||||
|
type: Number, |
||||||
|
default: 0.5 |
||||||
|
}, |
||||||
|
duration: { |
||||||
|
type: Number, |
||||||
|
default: 400 |
||||||
|
}, |
||||||
|
showCloseIcon: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
scrollY: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
scrollX: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
closeIconPos: { |
||||||
|
type: String, |
||||||
|
default: 'top-right' |
||||||
|
}, |
||||||
|
closeIcon: { |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
}, |
||||||
|
closeIconSize: { |
||||||
|
type: [String, Number], |
||||||
|
default: '20' |
||||||
|
}, |
||||||
|
vertOffset: { |
||||||
|
type: [String, Number], |
||||||
|
default: '22' |
||||||
|
}, |
||||||
|
horiOffset: { |
||||||
|
type: [String, Number], |
||||||
|
default: '22' |
||||||
|
}, |
||||||
|
centerAnim: { |
||||||
|
type: String, |
||||||
|
default: 'zoom-lessen' |
||||||
|
}, |
||||||
|
bgColor: { |
||||||
|
type: String, |
||||||
|
default: '#ffffff' |
||||||
|
}, |
||||||
|
zoomLessenMulti: { |
||||||
|
type: Number, |
||||||
|
default: 1.15 |
||||||
|
}, |
||||||
|
slideMulti: { |
||||||
|
type: Number, |
||||||
|
default: 1 |
||||||
|
}, |
||||||
|
negativeTop: { |
||||||
|
type: Number, |
||||||
|
default: 0 |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
// #ifdef H5 |
||||||
|
let winHeight = uni.getSystemInfoSync().windowHeight |
||||||
|
uni.onWindowResize(res => { |
||||||
|
this.sizeChange = true |
||||||
|
if (this.type === 'bottom') { |
||||||
|
this.winReBottom = winHeight - res.size.windowHeight + 'px' |
||||||
|
} else if (this.type === 'center') { |
||||||
|
this.winReTop = ((res.size.windowHeight - this.rpxToPx(this.height)) / 2 - this.negativeTop) + 'px' |
||||||
|
} |
||||||
|
}) |
||||||
|
// #endif |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
close() { |
||||||
|
this.maskClickClose && this.hide() |
||||||
|
}, |
||||||
|
show() { |
||||||
|
this.isShow = true |
||||||
|
// #ifndef H5 |
||||||
|
this.$nextTick(() => { |
||||||
|
this.maskIn() |
||||||
|
this.contentIn() |
||||||
|
this.wait(this.duration + 1).then(() => { |
||||||
|
this.$emit('show', { |
||||||
|
pageScroll: false, |
||||||
|
overflow: 'hidden' |
||||||
|
}) |
||||||
|
}) |
||||||
|
}) |
||||||
|
// #endif |
||||||
|
// #ifdef H5 |
||||||
|
this.wait(10).then(() => { |
||||||
|
this.maskIn() |
||||||
|
this.contentIn() |
||||||
|
this.wait(this.duration + 1).then(() => { |
||||||
|
this.$emit('show', { |
||||||
|
pageScroll: false, |
||||||
|
overflow: 'hidden' |
||||||
|
}) |
||||||
|
}) |
||||||
|
}) |
||||||
|
// #endif |
||||||
|
}, |
||||||
|
hide() { |
||||||
|
this.contentOut() |
||||||
|
this.maskOut() |
||||||
|
this.wait(this.duration + 1).then(() => { |
||||||
|
this.isShow = false |
||||||
|
this.$emit('hide', { |
||||||
|
pageScroll: true, |
||||||
|
overflow: 'scroll' |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
contentIn() { |
||||||
|
switch (this.type) { |
||||||
|
case 'center': |
||||||
|
if (this.centerAnim === 'zoom-lessen') { |
||||||
|
this.contentOpacity = 1 |
||||||
|
this.contentTransform = 'scale(1)' |
||||||
|
} else if (this.centerAnim === 'slide-up' || this.centerAnim === 'slide-down') { |
||||||
|
this.contentOpacity = 1 |
||||||
|
this.contentTransform = 'translateY(0)' |
||||||
|
} else if (this.centerAnim === 'fade') { |
||||||
|
this.contentOpacity = 1 |
||||||
|
} |
||||||
|
break |
||||||
|
case 'bottom': |
||||||
|
case 'top': |
||||||
|
this.contentTransform = 'translateY(0)' |
||||||
|
break |
||||||
|
case 'left': |
||||||
|
case 'right': |
||||||
|
this.contentTransform = 'translateX(0)' |
||||||
|
break |
||||||
|
} |
||||||
|
}, |
||||||
|
contentOut() { |
||||||
|
this.contentOpacity = null |
||||||
|
this.contentTransform = null |
||||||
|
}, |
||||||
|
maskIn() { |
||||||
|
this.maskOpacity = 1 |
||||||
|
}, |
||||||
|
maskOut() { |
||||||
|
this.maskOpacity = 0 |
||||||
|
}, |
||||||
|
rpxToPx(rpx) { |
||||||
|
return rpx / 750 * this.w |
||||||
|
}, |
||||||
|
wait(time) { |
||||||
|
return new Promise(resolve => { |
||||||
|
setTimeout(() => { |
||||||
|
resolve() |
||||||
|
}, time) |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style> |
||||||
|
@import "./iconfont.css"; |
||||||
|
.wyb-popup-box{ |
||||||
|
position: fixed; |
||||||
|
transition-timing-function: ease-out; |
||||||
|
transition-property: opacity, transform; |
||||||
|
} |
||||||
|
|
||||||
|
.wyb-popup-container { |
||||||
|
position: relative; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
.wyb-popup-slot { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.wyb-popup-mask { |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
bottom: 0; |
||||||
|
right: 0; |
||||||
|
transition-timing-function: ease; |
||||||
|
transition-property: opacity, transform; |
||||||
|
} |
||||||
|
|
||||||
|
.wyb-popup-close { |
||||||
|
position: absolute; |
||||||
|
fontSize: 40rpx; |
||||||
|
color: #808080; |
||||||
|
z-index: 20000; |
||||||
|
} |
||||||
|
|
||||||
|
.wyb-popup-custom-close { |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
position: absolute; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,57 @@ |
|||||||
|
<template> |
||||||
|
<view> |
||||||
|
<view class="width90 height90 backcorfff"> |
||||||
|
|
||||||
|
</view> |
||||||
|
<!-- 底部按钮 --> |
||||||
|
<view class="footer"> |
||||||
|
<view class="width50 flleft fcoreb5 padleft15 font15"> |
||||||
|
合计: ￥<text class="font24">0.00</text> |
||||||
|
</view> |
||||||
|
<button class="reBtn flright">去支付</button> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less"> |
||||||
|
page { |
||||||
|
background-color: #f8f8f8; |
||||||
|
} |
||||||
|
.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: 100px; |
||||||
|
background-color: #089bf5; |
||||||
|
color: #FFFFFF; |
||||||
|
text-align: center; |
||||||
|
padding: 0; |
||||||
|
font-size: 16px; |
||||||
|
border-radius: 22px; |
||||||
|
height: 40px; |
||||||
|
line-height: 40px; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,321 @@ |
|||||||
|
<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 paddleft10">团购价</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 paddleft10">油站价</view> |
||||||
|
<view class="fontwig6 font20"><text class="font14">￥</text>6.88</view> |
||||||
|
</view> |
||||||
|
<view class="margle20 font15 fcor666 flleft mart20 "> |
||||||
|
<view class="fontspec fotct paddleft10">国标价</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: 100px; |
||||||
|
background-color: #089bf5; |
||||||
|
color: #FFFFFF; |
||||||
|
text-align: center; |
||||||
|
padding: 0; |
||||||
|
font-size: 16px; |
||||||
|
border-radius: 22px; |
||||||
|
height: 40px; |
||||||
|
line-height: 40px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
</style> |
||||||
Loading…
Reference in new issue