MP_XOIL_company_new/components/site-item/urea-site-item.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>