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.
153 lines
4.4 KiB
153 lines
4.4 KiB
<template> |
|
<view class="cu-item cur padding no-mr-border site-item" :style="{height:siteItem.oilProductCodeAndPrices.length>3?'220rpx !important':listHeight?listHeight + 'rpx !important':''}"> |
|
<view class="cu-avatar radius lg " |
|
:style="'background-image:url('+(siteItem.siteImages?siteItem.siteImages:defaultLogo)+');'"> |
|
</view> |
|
<view class="content"> |
|
<view> |
|
<view class="text-cut text-black text-lg padding-right-sm ">{{siteItem.siteName}}</view> |
|
</view> |
|
<view class="listTages"> |
|
<!-- <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--dark-yellow yu-tag text-xs" v-show="first">距离最近</view> |
|
</view> |
|
<view class=""> |
|
<view class="text-cut color-666 text-sm "> |
|
{{siteItem.address}} |
|
</view> |
|
</view> |
|
<view class="text-gray flex" style="width: calc(100% + 30%);display: flex;flex-wrap: wrap;"> |
|
<view v-if="listHeight" class="youpin" style="" v-for="(item,index) in siteItem.oilProductCodeAndPrices"> |
|
<view class="text-bold oil-main-color text-xl padding-right-xs"> |
|
{{item.oilProductCode}} |
|
</view> |
|
<view class="oil-main-color text-xl text-bold padding-right-xs" style="padding-right: 0;"> |
|
￥{{item.personalPriceZp|moneyFormat}} |
|
</view> |
|
</view> |
|
<view v-if="!listHeight" class="text-bold yellow-oil text-xl padding-right-xs"> |
|
{{siteItem.oilProductCode}} |
|
</view> |
|
<view v-if="!listHeight" class="oil-main-color text-xl text-bold padding-right-xs"> |
|
￥{{siteItem.sitePrice|moneyFormat}} |
|
</view> |
|
<view v-if="!listHeight" 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 v-if="!listHeight" 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 class="action"> |
|
<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> |
|
|
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
props: { |
|
siteItem: { |
|
type: Object, |
|
default () {} |
|
}, |
|
first: { |
|
type: Boolean, |
|
default: false |
|
}, |
|
listHeight:{ |
|
type:Number, |
|
default:0 |
|
} |
|
}, |
|
data() { |
|
return { |
|
starUrl: this.global.starUrl, |
|
defaultLogo:'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/logo_default.png', |
|
audioUrl:'' |
|
} |
|
}, |
|
created() { |
|
console.log(this.siteItem,'-----------------') |
|
}, |
|
methods: { |
|
|
|
}, |
|
filters: { |
|
channelCodeFamt(value) { |
|
console.log(value) |
|
if (!value) { |
|
return '未知' |
|
// 渠道编码 ( XOIL：星油 WJY：万金油 LV：老吕（找油网） TY：团油 YDJY：一点加油（壳牌）) |
|
// switch (value) { |
|
// case 'XOIL': |
|
// return '星油' |
|
// case 'WJY': |
|
// return '万金油' |
|
// case 'LV': |
|
// return '老吕（找油网）' |
|
// case 'TY': |
|
// return '团油' |
|
// case 'YDJY': |
|
// return '一点加油（壳牌）' |
|
// } |
|
} else { |
|
return value |
|
} |
|
}, |
|
distanceFilter(value) { |
|
if (value) { |
|
return value > 1000 ? ((value / 1000).toFixed(2) + 'km') : (value + 'm') |
|
} |
|
}, |
|
moneyFormat(value) { |
|
if (value) { |
|
return value.toFixed(2) |
|
} else { |
|
return '0.00' |
|
} |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style scoped> |
|
.site-item { |
|
margin-bottom: 1.8rem; |
|
align-items: flex-start !important; |
|
height: 150rpx!important; |
|
} |
|
|
|
.yellow-oil{ |
|
color: #e8775a; |
|
} |
|
.cu-avatar{ |
|
background-color: transparent !important; |
|
} |
|
.youpin{ |
|
border: 1px solid #e4e4e4; |
|
display: flex; |
|
border-radius: 5px; |
|
padding: 0 5px; |
|
margin-right: 5px; |
|
margin-bottom: 5px; |
|
} |
|
.text-xl{ |
|
font-size: 30rpx; |
|
} |
|
</style>
|
|
|