LSM_OIL_SITE/packageOrders/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, 10)}}

							</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" @tap="toDetails(item.orderID)">
				<view class="text-gray text-df">
					{{item.createDatetime.substring(0,19)}}</view>
				<view>
					<text class="color-000 text-lg total-money">￥{{item.realamount|numberFilter}}</text>
					<view class="round pay-state  light bg-olive bg-transparent text-center state-0" v-if="item.istate==0">
						<text class="inner-istate  round">{{item.istate|formatStr}}</text>
						<view class="inner-border">

						</view>
					</view>
					<view class="round pay-state  light bg-orange bg-transparent text-center state-1" v-if="item.istate==1">
						<text class="inner-istate  round">{{item.istate|formatStr}}</text>
						<view class="inner-border">

						</view>
					</view>
					<view class="round pay-state  light bg-oilve bg-transparent text-center state--1" v-if="item.istate==-1">
						<text class="inner-istate  round">{{item.istate|formatStr}}</text>
						<view class="inner-border">

						</view>
					</view>
					<view class="round pay-state  light bg-gray bg-transparent text-center state--2" v-if="item.istate==-2">
						<text class="inner-istate  round">{{item.istate|formatStr}}</text>
						<view class="inner-border">

						</view>
					</view>
					<!-- <text v-show="item.orderType!='9'&&item.orderType!='0'" class="text-sm text-orange">(分单)</text> -->
				</view>
			</view>
		</view>
	</view>
	<!-- <xkempty v-else></xkempty> -->
	<!-- <Empty /> -->
	<!-- 评价的弹出层 -->

</template>

<script>

	export default {
		name: 'oilOrders',
	
		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: '/packageOrders/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)
			},
			formatStr(value) {
				switch (parseInt(value)) {
					case 1:
						return '已支付'
					case -1:
						return '支付失败'
					case -2:
						return '退款'
					case 0:
						return '待支付'
					default:
						return '待支付'
				}
			}
		}
	}
</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;
	}

	.pay-state {
		position: absolute;
		right: 2rem;
		bottom: 1rem;
		width: 172upx;
		height: 172upx;
		line-height: 172upx;
		transform: rotate(-30deg);

	}

	.inner-border {
		position: absolute;
		width: 142upx;
		height: 142upx;
		left: 14upx;
		border-radius: 800upx;
		top: 14upx;
	}

	.state-0 {
		border: 1px solid #8dc63f;
	}

	.state-1 {
		border: 1px solid #f37b1d;
	}

	.state--1 {
		border: 1px solid #f37b1d;
	}

	.state--2 {
		border: 1px solid #666;
	}

	.state-0 .inner-border {
		border: 1px dashed #8dc63f;
	}

	.state-1 .inner-border {
		border: 1px dashed #f37b1d;
	}

	.state--1 .inner-border {
		border: 1px dashed #f37b1d;
	}

	.state--2 .inner-border {
		border: 1px dashed #666;
	}
</style>