134 lines
3.4 KiB
Vue
134 lines
3.4 KiB
Vue
<template>
|
||
<view class="cu-item cur padding no-mr-border site-item">
|
||
<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 siteName ">{{siteItem.siteName}}</view>
|
||
</view>
|
||
<view class="text-gray flex pd_sm">
|
||
<view class="oil-main-color text-xl text-bold padding-right-xs money_title" v-if='siteItem.price'>
|
||
￥{{siteItem.price|moneyFormat}} /KG
|
||
</view>
|
||
<view class="listTages">
|
||
<view class="cu-tag round bg-self-yellow yu-tag text-xs" :class="siteItem.formats=='1'?'tag-red':''">{{siteItem.formats|channelCodeFamt}}
|
||
</view>
|
||
<view class="cu-tag round bg-self--dark-yellow yu-tag text-xs" v-show="first">距离最近</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> -->
|
||
<!-- <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 class="">
|
||
<view class="text-cut color-666 text-sm ">
|
||
{{siteItem.address}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="action" style="width: 88px;">
|
||
<view class="text-grey text-sm " style="padding-top: 6rpx;width: 160rpx;" >
|
||
{{siteItem.juli |distanceFilter}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
siteItem: {
|
||
type: Object,
|
||
default () {}
|
||
},
|
||
first: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
starUrl: this.global.starUrl,
|
||
defaultLogo:'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/logo_default.png'
|
||
}
|
||
},
|
||
methods: {
|
||
|
||
},
|
||
filters: {
|
||
channelCodeFamt(value) {
|
||
if (value != null || value != '' ) {
|
||
// return '未知'
|
||
// 渠道编码 ( XOIL：星油 WJY：万金油 LV：老吕（找油网） TY：团油 YDJY：一点加油（壳牌）)
|
||
switch (value) {
|
||
case '1':
|
||
return '加注机'
|
||
case '2':
|
||
return '桶装'
|
||
}
|
||
}
|
||
},
|
||
distanceFilter(value) {
|
||
let nb = Number(value)
|
||
if (nb) {
|
||
return nb > 1000?((nb / 1000).toFixed(1) + 'km') : (nb + 'm')
|
||
}
|
||
},
|
||
moneyFormat(value) {
|
||
if (value) {
|
||
let realAmount =(Math.floor(value * 100) / 100 ).toFixed(2)
|
||
return realAmount
|
||
} else {
|
||
return '0.00'
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.pd_sm{
|
||
padding: 2% 0;
|
||
}
|
||
.siteName{
|
||
font-weight: 700;
|
||
}
|
||
.money_title{
|
||
margin-right: 4%;
|
||
font-size: 38rpx;
|
||
border-right: 1px solid #efefef;
|
||
padding-right: 4%;
|
||
}
|
||
.site-item {
|
||
margin-bottom: 1.8rem;
|
||
align-items: flex-start !important;
|
||
height: 147rpx!important;
|
||
}
|
||
|
||
.yellow-oil{
|
||
color: #e8775a;
|
||
}
|
||
.cu-avatar{
|
||
background-color: transparent !important;
|
||
}
|
||
.tag-red{
|
||
background-color: red;
|
||
}
|
||
.levelBox{
|
||
font-size: 24rpx;
|
||
color: red;
|
||
font-weight:bold;
|
||
margin-left: 16rpx;
|
||
}
|
||
</style>
|