zhongPin/components/site-item/site-item.vue

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