@ -1,111 +1,85 @@
< template >
< view class = "content" >
< view class = "container" >
<!-- 外层 -- >
<!-- 顶部 -- >
< view class = "conttainer-top" >
<!-- 轮播图 -- >
< view style = "width: 100%;height: 300px;" >
< swiper class = "swiper" style = "width: 100%;height: 300px;" circular :indicator-dots ="indicatorDots"
: autoplay = "autoplay" : interval = "interval" : duration = "duration" >
< swiper -item v-for ="(item,index) in list1" :key="index" @click="goPage(item.routeUrl)" >
< swiper class = "swiper" style = "width: 100%;height: 160px; border-radius: 6px;overflow: hidden; " circular
: indicator - dots = "indicatorDots" : autoplay = "autoplay" : interval = "interval" : duration = "duration" >
< swiper -item v-for ="(item,index) in 3" :key="index" @click="goPage(item.routeUrl)" >
< view class = "swiper-item uni-bg-red" >
< image style = "width: 100%;" :src ="item.bannerUrl" > < / image >
< image src = "../../static/new/banners.png" style = "height: 163px; width: 100%;" > < / image >
< / view >
<!-- < image style = "width: 100%;" :src ="getBannerUrl(item.bannerUrl)" > < / image > -- >
< / s w i p e r - i t e m >
< / swiper >
< / view >
<!-- 标题 -- >
< view class = "top-title" >
出行服务 优惠加油
< / view >
< view class = "lan-gang" >
< view class = "lsiez" > < uni -icons type = "checkbox" color = "#ffffff" size = "10" > < / u n i - i c o n s > 一 键 加 油 < / v i e w >
< view class = "lsiez" > < uni -icons type = "checkbox" color = "#ffffff" size = "10" > < / u n i - i c o n s > 最 近 油 站 < / v i e w >
< view class = "lsiez" > < uni -icons type = "checkbox" color = "#ffffff" size = "10" > < / u n i - i c o n s > 地 址 导 航 < / v i e w >
< / view >
<!-- 金刚区 -- >
< view class = "conttainer-jg" >
< view class = "jg-box" @click ="toQRcode" >
< view class = "jg-img" >
< image src = "../../static/imgs/viprwm.png" mode = "aspectFit" > < / image >
< / view >
< view class = "jg-size" > 二维码 < / view >
< / view >
< view class = "jg-box" @click ="goActivity()" >
< view class = "jg-img" >
< image src = "../../static/imgs/bzhd.png" mode = "aspectFit" > < / image >
< / view >
< view class = "jg-size" > 本站活动 < / view >
< / view >
< view class = "jg-box" @click ="goCard()" v-if ="isOpen" >
< view class = "jg-img" >
< image src = "../../static/imgs/ykcz.png" mode = "aspectFit" > < / image >
< / view >
< view class = "jg-size" > 油卡充值 < / view >
< / view >
< view class = "jg-box" @click ="goMall()" >
< view class = "jg-img" >
< image src = "../../static/imgs/jfsc.png" mode = "aspectFit" > < / image >
< / view >
< view class = "jg-size" > 积分商城 < / view >
< / view >
< / view >
<!-- 金刚区结束 -- >
< / view >
<!-- 顶部结束 -- >
<!-- centenr -- >
< view class = "conttainer-cetr" >
< view class = "conttainer-title" > 今日会员价 < / view >
<!-- < view class = "conttainer-box" v-for ="(item,index) in oilTypeList" :key ="index" >
< view class = "c-box-box1" >
< view class = "" > { { item . oilName || '' } } < / view >
< view class = "_jgbox" >
< view class = "_bgox" >
< image src = "../../static/new/n1.png" mode = "" > < / image >
< view class = "" > 扫码买单 < / view >
< / view >
< view class = " c-box-box2 ">
< view class = "xred" > 会员价 < / view >
< view class = " dred"> < text class = "xred" > ￥ < / text > { { item . oilPrice || 0 } } < / view >
< view class = "_bgox" >
< image src = "../../static/new/n2.png" mode = "" > < / image >
< view class = "" > 一键加油 < / view >
< / view >
< view class = " c-box-box3" >
< view class = "xblck" > 国标价 < / view >
< view class = " dblck"> < text class = "xblck" > ￥ < / text > { { item . gbPrice || 0 } } < / view >
< view class = "_bgox" @click ="goMemberRecharge()" >
< image src = "../../static/new/n3.png" mode = "" > < / image >
< view class = "" > 会员充值 < / view >
< / view >
< / view > -- >
< swiper class = "swiper" style = "width: 100%;height: 70px;" circular :autoplay ="autoplay"
: interval = "interval" : vertical = "true" : duration = "duration" >
< swiper -item class = "conttainer-box" v-for ="(item,index) in oilTypeList" :key ="index" >
< view class = "c-box-box1" >
< view class = "" > { { item . oilName || '' } } < / view >
< view class = "_bgox" >
< image src = "../../static/new/n4.png" mode = "" > < / image >
< view class = "" > 积分兑换 < / view >
< / view >
< view class = " c-box-box2 ">
< view class = "xred" > 会员价 < / view >
< view class = " dred"> < text class = "xred" > ￥ < / text > { { item . oilPrice || 0 } } < / view >
< view class = "_bgox" >
< image src = "../../static/new/n5.png" mode = "" > < / image >
< view class = "" > 领券中心 < / view >
< / view >
< view class = " c-box-box3 ">
< view class = "xblck" > 国标价 < / view >
< view class = " dblck"> < text class = "xblck" > ￥ < / text > { { item . gbPrice || 0 } } < / view >
< view class = "_bgox" >
< image src = "../../static/new/n6.png" mode = "" > < / image >
< view class = "" > 邀请有礼 < / view >
< / view >
< / s w i p e r - i t e m >
< / swiper >
< view class = "_bgox" >
< image src = "../../static/new/n7.png" mode = "" > < / image >
< view class = "" > 每日抽奖 < / view >
< / view >
<!-- centenr结束 -- >
<!-- 加油站卡片 -- >
< view class = "station" >
< view class = "station-box" >
< view class = "_bgox" >
< image src = "../../static/new/n8.png" mode = "" > < / image >
< view class = "" > 签到有礼 < / view >
< / view >
< / view >
<!-- 今日油价 -- >
< view class = "_yjbox" >
< view class = "title-img" >
< image src = "../../static/new/t1.png" mode = "" > < / image >
< / view >
< view class = "_gbox" >
< view class = "_ns" > 92 # 汽油 < / view >
< view class = "_ns" > ¥ 8.99 < / view >
< view class = "_ns _lv" > 0.12 % ↑ < / view >
< / view >
< view class = "_gbox" >
< view class = "_ns" > 92 # 汽油 < / view >
< view class = "_ns" > ¥ 8.99 < / view >
< view class = "_ns _red" > 0.12 % ↓ < / view >
< / view >
< view class = "_gbox" >
< view class = "_ns" > 92 # 汽油 < / view >
< view class = "_ns" > ¥ 8.99 < / view >
< view class = "_ns _red" > 0.12 % ↓ < / view >
< / view >
< view class = "_gbox" >
< view class = "_ns" > 92 # 汽油 < / view >
< view class = "_ns" > ¥ 8.99 < / view >
< view class = "_ns _red" > 0.12 % ↓ < / view >
< / view >
< / view >
< view class = "station-box" @ click = "ruleShow = true " >
< view class = "station-title" style = "display: flex;justify-content: space-between;" >
{ { store . name } } { { store . description ? "(" + store . description + ")" : "" } }
<!-- < view class = "" @click ="goChooseAddress" style = "width: 22%;font-size: 14px;font-weight: 400;" >
< view style = "font-size: 12px;" > 切换位置 < uni -icons type = "right" color = "#304fff"
size = "14" > < / u n i - i c o n s > < / v i e w >
< / view > -- >
< view > { { store . name } } { { store . description ? "(" + store . description + ")" : "" } } < / view >
< view class = " lananniu" @click ="goGoGo" v-if ="distance!=''" >
< uni -icons type = " paperplane-filled" color = "#E02020" size = "16" > < / u n i - i c o n s >
导航
< / view >
< / view > <!-- 顺通石化加油站 ( 工业南路站 ) -- >
< view style = "display: flex;" >
< view class = "bule-icon" v-if ="welfare.length!=0" v-for="(item,index) in welfare" :key ="index" >
@ -114,34 +88,30 @@
< / view >
< view class = "dis-bt" >
< view class = "" >
< view class = "hui1" > { { store . address } } < / view >
< view class = "hui2" v-if ="distance" > {{ distance }} km < / view >
< view class = "hui1" > { { store . address } } | { { distance || 0 } } km < / view >
< view class = "hui2" v-if ="distance" > < / view >
< / view >
< view class = "lananniu" @click ="goGoGo" v-if ="distance!=''" >
<!-- < view class = "lananniu" @click ="goGoGo" v-if ="distance!=''" >
< uni -icons type = "paperplane-filled" color = "#195ADA" size = "16" > < / u n i - i c o n s >
{ { distance || "0" } } KM
< / view > -- >
< / view >
< / view >
< u -swiper :list ="list3" previousMargin = "30" nextMargin = "30" circular :autoplay ="false" radius = "5"
bgColor = "#ffffff" > < / u - s w i p e r >
< view class = "juanniu" @click ="goOil()" >
< view class = "" > 一键加油 < / view >
< / view >
< / view >
< view style = "height: 88px; width: 100%;" > < / view >
< / view >
<!-- 加油站卡片结束 -- >
< view style = "width: 100%; height: 68px; " > < / view >
< u -picker :columns ="columns" @confirm ="confirm" :show ="show" @ cancel = "show = false"
keyName = "label" > < / u - p i c k e r >
< u -overlay : show = "shows == true" >
< image src = "../../static/imgs/zzxryl.png"
style = "width: 280px; height: 350px; margin: 20px auto; margin-top: 200px; "
< / mag e>
< view class = " anniuprp" @click ="drawDown()" >
< text > 立即领取 < / text >
<!-- < u -popup :show ="ruleShow" mode = "bottom" @close ="close" @open ="open" >
< view class = "_tbox" >
< view class = "_btop" > 百业兴加油站申请 < / view
< v iew class = "" >
< view class = " "> 获取您的位置信息 < / view >
< view class = "" > 我们将获取您的当前位置信息 ， 以便精准推荐 < / view >
< / view >
< / u - o v e r l a y >
< view class = "b-cen" > < / view >
< / view >
< / u - p o p u p > - - >
<!-- 外层结束 -- >
< tabbar :msg ="msg" > < / tabbar >
< / view >
@ -159,6 +129,7 @@
export default {
data ( ) {
return {
ruleShow : false ,
isOpen : false ,
chainStoreId : '' ,
indicatorDots : true ,
@ -280,6 +251,11 @@
tabbar
} ,
methods : {
goMemberRecharge ( ) {
uni . navigateTo ( {
url : '/pagesHome/memberRecharge/index'
} )
} ,
isRecharge ( ) {
request ( {
url : 'business/storeInformation/store/isRecharge' ,
@ -785,19 +761,22 @@
< style scoped lang = "scss" >
. content {
background : # ebf5ff ;
background : # f9f9f9 ;
box - sizing : border - box ;
}
. container {
width : 100 % ;
height : 100 vh ;
box - sizing : border - box ;
padding : 10 px ;
/ / h e i g h t : 1 0 0 v h ;
}
. conttainer - top {
width : 100 % ;
height : 250 px ;
/ / b a c k g r o u n d - c o l o r : # 3 d a 4 d f ;
/ / b a c k g r o u n d : u r l ( ' h t t p : / / 4 7 . 9 5 . 2 0 6 . 1 8 5 : 8 3 / t o p b j . p n g ' ) c e n t e r n o - r e p e a t ;
background - size : 100 % 100 % ;
position : relative ;
margin - bottom : 60 px ;
@ -955,12 +934,12 @@
}
. station - box {
width : 95 % ;
width : 100 % ;
background - color : white ;
border - radius : 8 px ;
box - sizing : border - box ;
padding : 15 px ;
margin : 0 px auto ;
margin : 15 px auto ;
}
. station - title {
@ -971,13 +950,13 @@
. bule - icon {
width : 85 px ;
font - size : 12 px ;
color : # 195ADA ;
color : # 333333 ;
box - sizing : border - box ;
padding : 2 px 5 px ;
padding : 2 px 2 px ;
display : flex ;
align - items : center ;
justify - content : center ;
border : 1 px solid # 195 ADA ;
border : 1 px solid # FF9655 ;
border - radius : 4 px ;
margin : 5 px 3 px ;
}
@ -1004,13 +983,13 @@
. lananniu {
box - sizing : border - box ;
padding : 3 px 10 px ;
background : # DBE9FF ;
border - radius : 12 px ;
display : flex ;
align - items : center ;
justify - content : center ;
font - size : 14 px ;
color : # 195 ADA ;
color : # E02020 ;
}
@ -1059,4 +1038,78 @@
color : white ;
margin : 0 auto ;
}
. _jgbox {
width : 100 % ;
background : # fff ;
box - sizing : border - box ;
padding : 0 px 15 px ;
display : flex ;
flex - wrap : wrap ;
margin : 10 px auto ;
}
. title - img {
text - align : center ;
image {
height : 30 px ;
width : 100 % ;
}
}
. _gbox {
display : flex ;
align - items : center ;
justify - content : space - between ;
width : 100 % ;
}
. _ns {
width : 33 % ;
text - align : center ;
margin : 10 px auto ;
}
. _yjbox {
width : 100 % ;
background : # fff ;
box - sizing : border - box ;
}
. _bgox {
width : 25 % ;
text - align : center ;
font - size : 14 px ;
color : # 333333 ;
margin : 10 px auto ;
image {
width : 50 px ;
height : 50 px ;
}
}
. _lv {
color : # 6 DD400 ! important ;
}
. _red {
color : # E02020 ! important ;
}
. _tbox {
border - radius : 10 px ;
background : # fff ;
width : 100 % ;
height : 100 px ;
}
. b - cen {
width : 100 % ;
display : flex ;
align - items : center ;
justify - content : center ;
}
< / style >
