LSM_OIL_SITE/components/order-item.vue

// 可供选择的订单
// 开票列表
<template>
	<view class="cu-item  radius shadow">
		<image class="pay-status" :src="baseURL+'static/img/oil-unfinished.png'" alt />
		<view class="cu-avatar text-sl" :style="'background-image:url('+baseURL+'static/img/order-wjy.png)'"></view>
		<view class="content">
			<view class=" solid-bottom padding-bottom">
				<view class="flex-treble">
					{{item.orderID}}
				</view>
				<view class="flex-sub text-right cuIcon-right">
				</view>
			</view>
			<view class=" text-content text-df">
				{{item.oilSiteName}}
			</view>
			<view class="text-sm padding-top-sm">
				<view class="flex">
					<view class="details">
						<view class="top1 text-left">
							<image class="icon icon-desc " :src="baseURL+'static/img/oil-lf.png'" alt />
							<text class="padding-left-xs" v-if="item.vol"> {{item.vol}}升</text>
							<text >
								{{item.oilName}} （{{item.oilCode}}）
							</text>

						</view>
						<view class="bottom text-left">
							<image class="icon icon-desc  " :src="baseURL+'static/img/oil-time.png'" alt />

							<text class="padding-left-xs">
								{{item.credateDatetime}}
							</text>
						</view>
						<view class="bottom text-left">
							<image class="icon icon-desc  " :src="baseURL+'static/img/mini-car.png'" alt />

							<text class="padding-left-xs">
								加油车牌： {{item.carNo}}
							</text>
						</view>
					</view>
				</view>
			</view>
			<view class="margin-top-sm flex justify-between">
				<view class="text-gray text-df">2018年12月4日</view>
				<view>
					<text class="color-000 total-money">￥{{item.realamount|numberFilter}}</text>
				</view>
			</view>
		</view>
	</view>
	<!-- <xkempty v-else></xkempty> -->
	<!-- 评价的弹出层 -->

</template>

<script>
	import Empty from '@/components/Empty'

	export default {
		name: 'oilOrders',
		components: {
			xkempty: Empty
		},
		props: {
			item: {
				type: Object,
				default () {}
			}
		},
		data() {
			return {
				baseURL: this.global.baseURL
			}
		},
		methods: {
			toDetails(item) {
				this.$store.commit('SET_ORDERDE', item)
				console.log('item', item)
				this.$router.push('/OrderDetail')
			},
			onSelect(item) {
				console.log('触发', '')
				this.$emit('onSelectItem')
			}

		},
		filters: {
			toT(value) {
				if (value) {
					return value / 1000
				}
			},
			dateFormat(value) {
				if (value) {
					return value.substring(5, 16)
				}
			},
			numberFilter(value) {
				return value.toFixed(2)
			}
		}
	}
</script>

<style scoped>
	.cu-avatar {
		background-color: rgba(255, 255, 255, 0);
	}

	.icon-car {
		height: 41px;
		background-size: contain;
		float: left;
		margin-top: -8px;
		margin-left: -6px;
	}

	.car-position {
		text-align: left;
	}

	.bottom {
		color: #333;
	}

	.icon-desc {
		display: inline-block;
		width: 12px;
		height: 12px;
		position: relative;
		top: 1px;
		line-height: 25px;
	}


	.details {
		position: relative;
	}


	.cu-item {
		position: relative;
	}

	.pay-status {
		position: absolute;
		z-index: 1;
		right: 100upx;
		top: 50rpx;
		width: 120rpx;
		height: 120rpx;
	}
</style>