|
|
|
@ -1,27 +1,36 @@ |
|
|
|
|
<template> |
|
|
|
|
<view class="cu-item cur padding no-mr-border site-item" :style="{'min-height': siteItem.activitySwitch?mHeight+'rpx !important':''}"> |
|
|
|
|
<view class="cu-avatar radius lg " |
|
|
|
|
<view class="cu-item cur padding no-mr-border site-item" |
|
|
|
|
:style="{'min-height': siteItem.activitySwitch?mHeight+'rpx !important':''}"> |
|
|
|
|
<view class="cu-avatar radius lg " |
|
|
|
|
:style="'background-image:url('+(siteItem.siteImages?siteItem.siteImages:defaultLogo)+');'"> |
|
|
|
|
|
|
|
|
|
</view> |
|
|
|
|
<view class="content"> |
|
|
|
|
<view style="display: flex;"> |
|
|
|
|
<view style="flex-shrink:1" class="text-cut text-black text-lg padding-right-sm "> {{siteItem.siteName}}</view> |
|
|
|
|
<view v-if="siteItem.siteLevel" class="siteName_tag">{{siteItem.siteLevel}}</view> |
|
|
|
|
|
|
|
|
|
</view> |
|
|
|
|
<view class="content"> |
|
|
|
|
<view style="display: flex;"> |
|
|
|
|
<view style="flex-shrink:1" class="text-cut text-black text-lg padding-right-sm "> |
|
|
|
|
{{siteItem.siteName}}</view> |
|
|
|
|
<!-- <view v-if="siteItem.siteLevel" class="siteName_tag">{{siteItem.siteLevel}}</view> --> |
|
|
|
|
</view> |
|
|
|
|
<view style="display: flex;" class="listTages"> |
|
|
|
|
<view :style="{background:siteItem.siteType==1?'#FF6700':'#00c15e'}" class=" cu-tag round bg-self--dark-yellow yu-tag text-xs">{{siteItem.siteType==1?'加油站':'加气站'}}</view> |
|
|
|
|
<view :style="{background:siteItem.siteType==1?'#FF6700':'#00c15e'}" |
|
|
|
|
class=" cu-tag round bg-self--dark-yellow yu-tag text-xs">{{siteItem.siteType==1?'加油站':'加气站'}} |
|
|
|
|
</view> |
|
|
|
|
<view class="cu-tag round bg-self--dark-blue yu-tag text-xs" v-show="siteItem.ureaNumber>0">尿素</view> |
|
|
|
|
<!-- <view v-if="siteItem.siteLevel" class=" cu-tag round bg-self--dark-yellow yu-tag text-xs">{{siteItem.siteLevel}}级</view> --> |
|
|
|
|
<view class="cu-tag round bg-self-yellow yu-tag text-xs" :class="siteItem.channelCode=='XOIL'?'tag-red':''">{{siteItem.listTag|channelCodeFamt}}</view> |
|
|
|
|
<view class="cu-tag round bg-self-yellow yu-tag text-xs" |
|
|
|
|
:class="siteItem.channelCode=='XOIL'?'tag-red':''">{{siteItem.listTag|channelCodeFamt}}</view> |
|
|
|
|
<view class="cu-tag round bg-self--dark-yellow yu-tag text-xs" v-show="first">距离最近</view> |
|
|
|
|
<view v-if="siteItem.highSpeedMark||siteItem.roadTpye" class="cu-tag round bg-self--dark-blue yu-tag text-xs" :style="{background:speedMarkColor(siteItem.highSpeedMark,siteItem.roadTpye)}">{{speedMark(siteItem.highSpeedMark,siteItem.roadTpye)}}{{siteItem.roadName?':'+siteItem.roadName:''}}</view> |
|
|
|
|
<view v-if="siteItem.highSpeedMark||siteItem.roadTpye" |
|
|
|
|
class="cu-tag round bg-self--dark-blue yu-tag text-xs" |
|
|
|
|
:style="{background:speedMarkColor(siteItem.highSpeedMark,siteItem.roadTpye)}"> |
|
|
|
|
{{speedMark(siteItem.highSpeedMark,siteItem.roadTpye)}}{{siteItem.roadName?':'+siteItem.roadName:''}} |
|
|
|
|
</view> |
|
|
|
|
<!-- <view v-if="siteItem.highSpeedMark!=null" class="cu-tag round bg-self--dark-blue yu-tag text-xs" :style="{background:speedMarkColor(siteItem.highSpeedMark)}">{{siteItem.highSpeedMark?siteItem.highSpeedMark:siteItem.roadTpye|speedMark(siteItem.highSpeedMark,siteItem.roadTpye)}}{{siteItem.roadName?':'+siteItem.roadName:''}}</view> --> |
|
|
|
|
</view> |
|
|
|
|
<view class=""> |
|
|
|
|
<view class="text-cut color-666 text-sm "> |
|
|
|
|
{{siteItem.address}} |
|
|
|
|
</view> |
|
|
|
|
<view class=""> |
|
|
|
|
<view class="text-cut color-666 text-sm "> |
|
|
|
|
{{siteItem.address}} |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="text-gray flex"> |
|
|
|
|
<view class="text-bold yellow-oil text-xl padding-right-xs"> |
|
|
|
@ -29,20 +38,21 @@ |
|
|
|
|
</view> |
|
|
|
|
<view class="oil-main-color text-xl text-bold padding-right-xs"> |
|
|
|
|
¥{{siteItem.sitePrice|moneyFormat}} |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class=""> |
|
|
|
|
<text class="cu-tag oil-tag radius text-xs" v-if="siteItem.oilSitePrice - siteItem.sitePrice>0">省¥{{(siteItem.oilSitePrice - siteItem.sitePrice)|moneyFormat}}</text> |
|
|
|
|
</view> |
|
|
|
|
<view class="text-cut padding-left-sm text-lg"> |
|
|
|
|
<text class="text-delete color-333 text-sm padding-right-xs"> |
|
|
|
|
¥{{siteItem.oilSitePrice|moneyFormat}}/L |
|
|
|
|
</text> |
|
|
|
|
<text class="cu-tag oil-tag radius text-xs" |
|
|
|
|
v-if="siteItem.oilSitePrice - siteItem.sitePrice>0">省¥{{(siteItem.oilSitePrice - siteItem.sitePrice)|moneyFormat}}</text> |
|
|
|
|
</view> |
|
|
|
|
<view class="text-cut padding-left-sm text-lg"> |
|
|
|
|
<text class="text-delete color-333 text-sm padding-right-xs"> |
|
|
|
|
¥{{siteItem.oilSitePrice|moneyFormat}}/L |
|
|
|
|
</text> |
|
|
|
|
<!-- <my-icon iconName="¥.png" class="padding-right-xs icon-rectangle"></my-icon> |
|
|
|
|
|
|
|
|
|
<my-icon iconName="f.png" class="padding-right-xs "></my-icon> --> |
|
|
|
|
|
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="text-gray" v-if="siteItem.activitySwitch"> |
|
|
|
|
<view class="activity-cu"> |
|
|
|
|
<text>活动</text> |
|
|
|
@ -51,12 +61,12 @@ |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<view class="action" style=" width: 88px;"> |
|
|
|
|
<view class="text-grey text-sm " style="padding-top: 6rpx;"> |
|
|
|
|
<view class="action" style=" width: 88px;"> |
|
|
|
|
<view class="text-grey text-sm " style="padding-top: 6rpx;"> |
|
|
|
|
<!-- <my-icon iconName="sy-der-icon.png" class="padding-right-xs text-sm"></my-icon> --> |
|
|
|
|
{{siteItem.juli|distanceFilter}} |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
{{siteItem.juli|distanceFilter}} |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
@ -76,51 +86,52 @@ |
|
|
|
|
return { |
|
|
|
|
mHeight: 156, |
|
|
|
|
starUrl: this.global.starUrl, |
|
|
|
|
defaultLogo:'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/logo_default.png' |
|
|
|
|
defaultLogo: 'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/logo_default.png' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
const query = uni.createSelectorQuery().in(this); |
|
|
|
|
|
|
|
|
|
query.select('.activity-cu').boundingClientRect(data => {undefined |
|
|
|
|
|
|
|
|
|
// console.log(data,'1111111111111111111') |
|
|
|
|
if(data){ |
|
|
|
|
this.mHeight = this.mHeight + data.height*2 |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
query.select('.activity-cu').boundingClientRect(data => { |
|
|
|
|
undefined |
|
|
|
|
|
|
|
|
|
// console.log(data,'1111111111111111111') |
|
|
|
|
if (data) { |
|
|
|
|
this.mHeight = this.mHeight + data.height * 2 |
|
|
|
|
} |
|
|
|
|
}).exec(); |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
speedMarkColor(val,data){ |
|
|
|
|
if(val == 0){ |
|
|
|
|
if(data == '0'){ |
|
|
|
|
speedMarkColor(val, data) { |
|
|
|
|
if (val == 0) { |
|
|
|
|
if (data == '0') { |
|
|
|
|
return '#666666' |
|
|
|
|
} |
|
|
|
|
if(data == '1'){ |
|
|
|
|
if (data == '1') { |
|
|
|
|
return '#F9AA64' |
|
|
|
|
} |
|
|
|
|
if(data == '2'){ |
|
|
|
|
if (data == '2') { |
|
|
|
|
return '#D61750' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
if(val == 1){ |
|
|
|
|
if (val == 1) { |
|
|
|
|
return '#11A265' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
speedMark(val,data){ |
|
|
|
|
speedMark(val, data) { |
|
|
|
|
// console.log(val,data,'qqqqqqqqqqqqqqqqqqqqqq') |
|
|
|
|
if(val == 0){ |
|
|
|
|
if(data == '0'){ |
|
|
|
|
if (val == 0) { |
|
|
|
|
if (data == '0') { |
|
|
|
|
return '普通' |
|
|
|
|
} |
|
|
|
|
if(data == '1'){ |
|
|
|
|
if (data == '1') { |
|
|
|
|
return '省道' |
|
|
|
|
} |
|
|
|
|
if(data == '2'){ |
|
|
|
|
if (data == '2') { |
|
|
|
|
return '国道' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
if(val == 1){ |
|
|
|
|
if (val == 1) { |
|
|
|
|
return '高速' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
@ -128,7 +139,7 @@ |
|
|
|
|
filters: { |
|
|
|
|
channelCodeFamt(value) { |
|
|
|
|
// console.log(value) |
|
|
|
|
if (value == null || value == '' ) { |
|
|
|
|
if (value == null || value == '') { |
|
|
|
|
return '未知' |
|
|
|
|
// 渠道编码 ( XOIL:星油 WJY:万金油 LV:老吕(找油网) TY:团油 YDJY:一点加油(壳牌)) |
|
|
|
|
// switch (value) { |
|
|
|
@ -159,7 +170,9 @@ |
|
|
|
|
// console.log('old:',value) |
|
|
|
|
// console.log('new:',realAmount) |
|
|
|
|
// return realAmount |
|
|
|
|
return String(value).split('.')[1]&&String(value).split('.')[1].length>2?Number(`${String(value).split('.')[0]}.${String(value).split('.')[1].substring(0,2)}${Number(String(value).split('.')[1].substr(2))==0?'':9}`).toFixed(2) :Number(value).toFixed(2); |
|
|
|
|
return String(value).split('.')[1] && String(value).split('.')[1].length > 2 ? Number( |
|
|
|
|
`${String(value).split('.')[0]}.${String(value).split('.')[1].substring(0,2)}${Number(String(value).split('.')[1].substr(2))==0?'':9}` |
|
|
|
|
).toFixed(2) : Number(value).toFixed(2); |
|
|
|
|
} else { |
|
|
|
|
return '0.00' |
|
|
|
|
} |
|
|
|
@ -169,10 +182,10 @@ |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style scoped> |
|
|
|
|
.siteName_tag{ |
|
|
|
|
.siteName_tag { |
|
|
|
|
background-color: #FF6700; |
|
|
|
|
border-radius: 50rpx; |
|
|
|
|
width: 20px ; |
|
|
|
|
width: 20px; |
|
|
|
|
height: 20px; |
|
|
|
|
color: #FFFFFF; |
|
|
|
|
display: flex; |
|
|
|
@ -182,49 +195,58 @@ |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
flex-shrink: 0; |
|
|
|
|
} |
|
|
|
|
.site-item { |
|
|
|
|
margin-bottom: 1.8rem; |
|
|
|
|
align-items: flex-start !important; |
|
|
|
|
height: 147rpx!important; |
|
|
|
|
|
|
|
|
|
.site-item { |
|
|
|
|
margin-bottom: 1.8rem; |
|
|
|
|
align-items: flex-start !important; |
|
|
|
|
height: 147rpx !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.yellow-oil{ |
|
|
|
|
|
|
|
|
|
.yellow-oil { |
|
|
|
|
color: #e8775a; |
|
|
|
|
} |
|
|
|
|
.cu-avatar{ |
|
|
|
|
|
|
|
|
|
.cu-avatar { |
|
|
|
|
background-color: transparent !important; |
|
|
|
|
} |
|
|
|
|
.tag-red{ |
|
|
|
|
|
|
|
|
|
.tag-red { |
|
|
|
|
background-color: red; |
|
|
|
|
} |
|
|
|
|
.levelBox{ |
|
|
|
|
font-size: 24rpx; |
|
|
|
|
color: red; |
|
|
|
|
font-weight:bold; |
|
|
|
|
margin-left: 16rpx; |
|
|
|
|
|
|
|
|
|
.levelBox { |
|
|
|
|
font-size: 24rpx; |
|
|
|
|
color: red; |
|
|
|
|
font-weight: bold; |
|
|
|
|
margin-left: 16rpx; |
|
|
|
|
} |
|
|
|
|
.bg-self--dark-blue{ |
|
|
|
|
|
|
|
|
|
.bg-self--dark-blue { |
|
|
|
|
background: #2098ff; |
|
|
|
|
color: #FFFFFF; |
|
|
|
|
} |
|
|
|
|
.activity-cu{ |
|
|
|
|
|
|
|
|
|
.activity-cu { |
|
|
|
|
border: 1px solid #FF9000; |
|
|
|
|
border-radius: 5px; |
|
|
|
|
width: fit-content; |
|
|
|
|
display: flex; |
|
|
|
|
} |
|
|
|
|
.activity-cu text{ |
|
|
|
|
|
|
|
|
|
.activity-cu text { |
|
|
|
|
font-size: 12px; |
|
|
|
|
padding: 0 18rpx; |
|
|
|
|
line-height: 20px; |
|
|
|
|
} |
|
|
|
|
.activity-cu text:last-child{ |
|
|
|
|
color:#ff9818; |
|
|
|
|
|
|
|
|
|
.activity-cu text:last-child { |
|
|
|
|
color: #ff9818; |
|
|
|
|
} |
|
|
|
|
.activity-cu text:first-child{ |
|
|
|
|
color:#ff6f0e; |
|
|
|
|
|
|
|
|
|
.activity-cu text:first-child { |
|
|
|
|
color: #ff6f0e; |
|
|
|
|
background: #FFEBDE; |
|
|
|
|
border-top-left-radius: 5px; |
|
|
|
|
border-bottom-left-radius: 5px; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
</style> |