LSM_OIL_SITE/components/order-item.vue

// 可供选择的订单
// 开票列表
<template>
	<view class="cu-item  radius shadow margin-bottom">
		<!-- <image class="pay-status" :src="baseURL+'static/img/oil-unfinished.png'" alt /> -->
		<view class="cu-avatar text-sl" v-if="item.sourceType==='3'" :style="'background-image:url('+baseURL+'static/img/order-wjy.png)'"></view>
		<view class="cu-avatar text-sl" v-if="item.sourceType==='4'||item.sourceType==='6'" :style="'background-image:url('+baseURL+'static/img/order-xy.png)'"></view>
		<view class="cu-avatar text-sl" v-if="item.sourceType==='5'" :style="'background-image:url('+baseURL+'static/img/order-lv.png)'"></view>
		<view class="content">
			<view class=" solid-bottom padding-bottom-sm">
				<view class="flex-treble" @tap="copyId(item.orderID)">
					{{item.orderID}}<text class="flex-sub padding-left-sm text-right cuIcon-copy text-lg text-red">
					</text>
				</view>
				<view class="flex-sub text-right cuIcon-right" @tap="toDetails(item.orderID)">
				</view>
			</view>
			<view class=" text-content text-df">
				{{item.oilSiteName}}
			</view>
			<view class="text-sm padding-top-sm" @tap="toDetails(item.orderID)">
				<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 padding-right-xs" v-if="item.vol"> {{item.vol|numberFilter}}升</text>
							<text>
								{{item.oilName}}
							</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.createDatetime.substring(0,19)}}
							</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">{{item.createDatetime.substring(0, 10)}}</view>
				<view>
					<text class="color-000 text-lg 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: {
			copyId(id) {
				uni.setClipboardData({
					data: id,
					success: () => {
						uni.showToast({
							title: '订单号已复制',
							icon: 'none'
						})
					}
				})
			},
			toDetails(id) {
				uni.setStorageSync('orderId', id)
				console.log('id', id)
				uni.navigateTo({
					url: '/pages/orderList/OrderDetail/OrderDetail'
				})

			}
		},
		filters: {
			toT(value) {
				if (value) {
					return value / 1000
				}
			},
			dateFormat(value) {
				if (value) {
					return value.substring(5, 16)
				}
			},
			numberFilter(value) {
				value = value - 1 + 1
				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>