中品加油
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

<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>