LSM_OIL_SITE/pages/orderList/OrderDetail/OrderDetail.vue

<template>
	<view class="page-content my-bg">
		<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
			<block slot="backText">返回</block>
			<block slot="content">订单详情</block>
		</cu-custom>
		<view class="padding margin">

		</view>
		<view class="text-center margin-top icon-container">
			<view class="cu-avatar xl round text-sl" v-if="orderItem.sourceType===3" :style="'background-image:url('+baseURL+'static/img/order-wjy.png)'"></view>
			<view class="cu-avatar xl round text-sl" v-if="orderItem.sourceType===4||orderItem.sourceType===6" :style="'background-image:url('+baseURL+'static/img/order-xy.png)'"></view>
			<view class="cu-avatar xl round text-sl" v-if="orderItem.sourceType===5" :style="'background-image:url('+baseURL+'static/img/order-lv.png)'"></view>
		</view>
		<view class="radius margin margin-top  bg-white padding-top padding">
			<!-- sourceType 万金油3 老吕5 星油4/6 -->
			<!-- 				<image size="20" v-if="orderItem.sourceType===4||orderItem.sourceType===6" :src="baseURL+'static/img/order-xy.png'"></image>
				<image size="20" v-else-if="orderItem.sourceType===3" :src="baseURL+'static/img/order-wjy.png'"></image>
				<image size="20" v-else-if="orderItem.sourceType===5" :src="baseURL+'static/img/order-lv.png'"></image> -->
			<view class="margin padding">
				<view class="text-lg text-center">{{orderItem.istate|formatStr}}</view>
				<view class="number text-xl text-center oil-main-color">￥{{orderItem.realamount|numberFormat}}</view>
			</view>
			<view class="margin-bottom-sm" @tap="copyId(orderItem.userName,'加油司机')">
				加油司机
				<text class="fr">{{orderItem.userName}}<text class="flex-sub padding-left-sm text-right cuIcon-copy text-lg text-red">
					</text></text>
			</view>

			<view class="margin-bottom-sm" @tap="copyId(orderItem.carNo,'司机车牌')">
				司机车牌
				<text class="fr">{{orderItem.carNo}}<text class="flex-sub padding-left-sm text-right cuIcon-copy text-lg text-red">
					</text></text>
			</view>

			<view class="margin-bottom-sm">
				油枪油号
				<text class="fr">{{orderItem.bar}}号枪{{orderItem.oilName}}</text>
			</view>
			<view class="margin-bottom-sm">
				加油总金额
				<text class="fr">¥ {{orderItem.amount|numberFormat}}</text>
			</view>
			<view class="margin-bottom-sm">
				加油升数
				<text class="fr">{{orderItem.vol|numberFormat}} 升</text>
			</view>
			<view class="margin-bottom-sm">
				星卡优惠
				<text class="fr">¥ {{orderItem.amount-orderItem.realamount|numberFormat}}</text>
			</view>
			<view class="margin-bottom-sm">
				优惠券
				<text class="fr">{{orderItem.coupon|couponFormat}}</text>
			</view>
			<view class="margin-bottom-sm">
				实扣款
				<text class="fr oil-main-color">¥ {{orderItem.realamount|numberFormat}}</text>
			</view>
		</view>
		<view class="radius   bg-white margin padding ">

			<view class="flex padding-bottom-sm">

				<view class="basis-sm">
					加油站名称
				</view>
				<view class="basis-lg text-right text-cut">{{orderItem.oilSiteName}}</view>
			</view>
			<view class="flex padding-bottom-sm">

				<view class="basis-xs">
					地址
				</view>
				<view class="basis-xl text-right text-cut">{{orderItem.address}}</view>
			</view>
		</view>
		<view class="radius   bg-white margin margin-bottom-0 padding">
			<view class="margin-bottom-sm" @tap="copyId(orderItem.orderID,'订单号')">
				订单号
				<text class=" fr">{{orderItem.orderID}}<text class="flex-sub padding-left-sm text-right cuIcon-copy text-lg text-red">
					</text></text>

			</view>
			<view class="margin-bottom-sm">
				下单时间
				<text class="fr">{{orderItem.createDatetime}}</text>
			</view>
			<!-- <view class="margin-bottom-sm">
				扣款时间
				<text class="fr">{{orderItem.paydatetime}}</text>
			</view> -->
			<view class="padding-bottom-sm">
				开票状态
				<text class="fr" v-if="formQr">未开票</text>
				<text class="fr" v-else>{{orderItem.invoiceState|invoiceStateFormat}}</text>
			</view>
			<!-- <view class="margin-bottom-sm" v-if="orderItem.paydatetime">
        支付时间
        <text class="fr">{{orderItem.paydatetime}}</text>
      </view>-->
		</view>
		<view class="padding">

		</view>
		<view class="padding-lg padding-top-0 padding-bottom-xl">
			<button v-show="formQr" @tap="scanQr" class="bg-main-oil margin-bottom">
				<text class="cuIcon-scan padding-right-xs"></text>
				继续加油</button>
			<button class="bg-red light margin-bottom" @tap="backHome">
				<text class="cuIcon-home padding-right-xs"></text>
				返回首页</button>

		</view>
	</view>
</template>
<script>
	import cloudSiteApi from '@/api/cloud-site.js'
	export default {
		data() {
			return {
				// orderId:'',
				orderId: uni.getStorageSync('orderId'),
				formQr: uni.getStorageSync('formQr') ? true : false,
				tempOrderInfo: uni.getStorageSync('tempOrderInfo'),
				orderItem: {},
				baseURL: this.global.baseURL
			}
		},
		created() {
			if (this.formQr && !this.tempOrderInfo.payOrderId) {
				this.orderItem = {
					...this.tempOrderInfo,
					orderID: this.tempOrderInfo.payOrderId,
					amount: this.tempOrderInfo.standardAmount,
					realamount: this.tempOrderInfo.oilAmount,
					userName: this.tempOrderInfo.driverId,
					carNo: this.tempOrderInfo.plateNumber,
					createDatetime: this.tempOrderInfo.createTime,
					paydatetime: this.tempOrderInfo.payTime,
					bar: this.tempOrderInfo.oilGun,
					vol: this.tempOrderInfo.volume,
				}
			} else {
				this.getOrderDetail()
			}
		},
		onHide() {
			this.clearStatus()
		},
		onUnload() {
			this.clearStatus()
		},
		methods: {
			clearStatus() {
				uni.removeStorageSync('formQr')
			},
			scanQr() {
				var scanUrl = '/pages/station-info/scan-camera/scan-camera'
				uni.navigateTo({
					url: scanUrl,
					fail: (err) => {
						console.log(err)
					},
					success: (res) => {
						console.log('chengg', res)
					}
				})
			},
			backHome() {
				uni.navigateBack({
					delta: 2
				})
			},
			copyId(id, name) {
				uni.setClipboardData({
					data: id,
					success: () => {
						uni.showToast({
							title: name + '已复制',
							icon: 'none'
						})
					}
				})
			},
			getOrderDetail() {
				cloudSiteApi.getSiteOrderById(this.orderId).then(res => {
					if (res.code === 20000) {
						this.orderItem = res.data
					}
				})
			}
		},
		filters: {
			formatStr(value) {
				switch (parseInt(value)) {
					case 1:
						return '订单已支付'
					case -1:
						return '订单支付失败'
					case 3:
						return '订单已支付'
					case 4:
						return '订单支付失败'
					case 0:
						return '订单待支付'
					default:
						return '订单待支付'
				}
			},
			couponFormat(value) {
				if (value) {
					return value
				} else {
					return '未使用'
				}
			},
			numberFormat(value) {
				if (value) {
					return value.toFixed(2)
				}
			},
			invoiceStateFormat(value) {
				switch (parseInt(value)) {
					case 1:
						return '已申请'
					case 2:
						return '已开票'
					case -1:
						return '开票失败'
					case 0:
						return '未开票'
					default:
						return ''
				}
			}
		}
	}
</script>
<style scoped>
	/* 去付款弹窗 */
	.popup-container p.title {
		padding: 16px 10px;
	}

	text.fr {
		float: right;
	}

	.icon-container {
		position: relative;
	}

	.icon-container .text-sl {
		position: absolute;
		margin-left: -64rpx;
		margin-top: -64rpx;
		z-index: 2;
	}
</style>