LSM_OIL_SITE/components/oil-menu-item.vue

<template>
	<view class="radius padding-xs  padding-top    solid-top solid-bottom" >
		<view class="item-title ">
			<text class="margin color-000 text-xl  text-bold">{{oilItem.oilName}}</text>
			<text class="fr padding-right text-sm text-grey">市场价：￥{{ oilItem.standardPrice|numberFliter}}</text>
			<PriceList :price="price" />
		</view>
	</view>
</template>

<script>
	import PriceList from '@/components/PriceList/PriceList.vue'
	export default {
		components: {
			PriceList
		},
		props: {
			oilItem: {
				type: Object,
				default () {}
			}
		},
		data() {
			return {
				price: []
			}
		},
		created() {
			this.calcPrice()
		},
		filters: {
			numberFliter(value) {
				value = value-1+1
				if(value){
					return value.toFixed(2)
				}else{
					return '0.00'
				}
			}
		},
		methods: {
			calcPrice() {
				if (this.oilItem.xkPrice) {
					this.price.push({
						price: this.oilItem.xkPrice,
						color: 'red',
						name: '星油油价',
						className1: 'red',
						className2: 'btn-red',
					})
				}
				if (this.oilItem.xkCompanyPrice) {
					this.price.push({
						price: this.oilItem.xkCompanyPrice,
						color: 'red',
						name: '企业油价',
						className1: 'red',
						className2: 'btn-red',
					})
				}
				
				if (this.oilItem.wjyPrice) {
					this.price.push({
						price: this.oilItem.wjyPrice,
						color: '#f7b400',
						name: '万金油价',
						className1: 'yellow',
						className2: 'btn-yellow',
					})
				}
				if (this.oilItem.lvPrice) {
					this.price.push({
						price: this.oilItem.lvPrice,
						color: '#ff5200',
						name: '老吕油价',
						className1: 'laolv',
						className2: 'btn-laolv',
					})
				}
				if (this.oilItem.standardPrice) {
					this.price.push({
						price: this.oilItem.standardPrice,
						color: 'black',
						name: '市场价',
						className1: 'laolv',
						className2: 'btn-laolv',
					})
				}
			}

		}
	}
</script>

<style scoped>

</style>