LSM_OIL_SITE/pages/stationDetail/OrderStatus.vue

<template>
	<view class="" style="background-color: #efefef;">
		<cu-custom class="main-topbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
			<block slot="backText">返回</block>
			<block slot="content">{{'支付状态'}}</block>
		</cu-custom>
		<view class="text-center margin-top icon-container boxsings_main_top">
			<view class="cu-avatar xl round text-sl headImg showIcons">
				<image src="../../static/img/new_logo.png" class='showimgs' mode=""></image>
			</view>
		</view>
		<view class="radius margin  bg-white padding-top padding " style="padding-top: 125rpx;">
			<view class="">
				<view class="payStatue_text">
					<text>{{PayTitle}}</text>
				</view>
				<view class="number text-xl text-center oil-main-color">￥{{displayMoney|numberFormat}}</view>
			</view>
			<view class="payStatue">
				<view class="payStatue_p" v-if="payState == 0">
					<text>请勿离开当前页面,等待支付完成</text>
				</view>
				<view class="payStatue_p" v-if="payState == 2">
					<button style="width: 500upx;margin-bottom: 40upx;" v-if="payState == 2"
						class="round large cu-btn bg-main-oil" @tap="singleCheck(orderId)">手动刷新</button>
				</view>
			</view>
			<view class="margin-bottom-sm" @tap="copyId(orderInfos.customerId,'司机编号')">
				司机编号
				<text class="fr">{{orderInfos.customerId}}<text :class="orderInfos.customerId?'cuIcon-copy':''"
						class="flex-sub padding-left-sm text-right  text-lg text-red">
					</text></text>
			</view>
			<view class="margin-bottom-sm">
				加油司机
				<view class="fr">
					<text>{{ orderInfos.customerName ? orderInfos.customerName : '丰油用户' }}</text> <text
						class="padding-left-sm">{{orderInfos.plateNumber|plateFilter}}
					</text>
				</view>

			</view>

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

			<view class="margin-bottom-sm">
				油枪油号
				<text class="fr">{{orderInfos.oilsBar}}号枪{{orderInfos.oilName||orderInfos.oilsCode}}</text>
			</view>
			<view class="margin-bottom-sm">
				油机单价
				<text class="fr">￥{{orderInfos.sitePrice||orderInfos.price |UnitPriceFormat}} / 升</text>
			</view>
			<view class="margin-bottom-sm">
				加油升数
				<text class="fr">{{orderInfos.volume|numberFormat}} 升</text>
			</view>
			<view class="margin-bottom-sm" v-if="orderSource=='mpxoil'">
				油机总价
				<text class="fr">￥{{displayMoney|numberFormat}}</text>
			</view>

			<!-- <view class="margin-bottom-sm" v-if="orderItem.xoilDiscountAmount">
						星卡优惠
						<text class="fr">¥ {{(orderItem.xoilDiscountAmount)|numberFormat}}</text>
					</view>
					<view class="margin-bottom-sm" v-else>
						星卡优惠
						<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.siteName}}</view>
			</view>
			<view class="flex padding-bottom-sm">
				<view class="basis-xs">
					地址
				</view>
				<view class="basis-xl text-right text-cut">{{orderItem.siteAddress}}</view>
			</view>
		</view>
		<view class="radius   bg-white margin margin-bottom-0 padding">
			<view class="margin-bottom-sm" @tap="copyId(orderInfos.orderSerialNumber,'订单号')">
				订单号
				<text class=" fr">{{orderInfos.orderSerialNumber}}<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">{{orderInfos.createTime}}</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="radius   bg-white margin margin-bottom-0 padding" v-if='orderItem.plateNumberImages'>
			<view class="flex padding-bottom-sm">
				<view class="basis-sm">
					车辆照片
				</view>
				<view class="basis-lg text-right text-cut" @tap="showImg('car')">点击查看</view>
			</view>
			<view class="flex padding-bottom-sm">
				<view class="basis-xs">
					油站照片
				</view>
				<view class="basis-xl text-right text-cut" @tap="showImg('oli')">点击查看</view>
			</view>
		</view>
		<view class="padding-lg padding-top-40 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 v-if="payState == 1" class="round large cu-btn bg-main-oil btn-oils"
				@tap="toDetails(orderId)">前往订单</button>
			<button v-if="payState == 2" class="round large cu-btn bg-main-oil  btn-oils"
				@tap="getScanning()">重新扫码下单</button>
			<button v-if="payState != 0" class="round large cu-btn bg-main-oil  btn-oils"
				@tap="gotoHome()">返回首页</button>
			<!-- 	<button class="bg-red light margin-bottom" @tap="backHome">
						<text class="cuIcon-home padding-right-xs"></text>
						返回首页</button> -->

		</view>
		<u-popup v-model="show" mode="center" @close="close">
			<view style="width: 100%;height: 100%;">
				<image :src="showUrl" style=" max-width: 80%;max-height: 80%;" mode=""></image>
			</view>
		</u-popup>
		<!-- <view class="margin-sm bg-white padding-lg">
			<view class="padding-top margin-bottom"></view>
			<view class="text-xsl text-center">
				<text class="cuIcon-rechargefill oil-main-color"></text>
			</view>
			<view class="text-center text-bold" style='font-size:40upx;margin-bottom: 40upx;'>
				{{PayTitle}}
			</view> 
			<view class="text-center">
				<button style="width: 500upx;margin-bottom: 40upx;" v-if="payState == 1" class="round large cu-btn bg-main-oil" @tap="toDetails(orderId)">前往订单</button>
				<button style="width: 500upx;margin-bottom: 40upx;" v-if="payState == 2" class="round large cu-btn bg-main-oil" @tap="getScanning()">重新扫码下单</button>
				<button style="width: 500upx; margin-bottom: 40upx;" v-if="payState != 0" class="round large cu-btn bg-main-oil" @tap="gotoHome()">返回首页</button>
			</view>
		</view>
		<view class="margin-sm bg-white padding">
			<view class="margin-bottom-sm"  >
				加油司机
				<text class="fr">
					{{driverMsg.customerName}} 
				</text>
			</view> 
			<view class="margin-bottom-sm"  >
				司机车牌
				<text class="fr">
					{{driverMsg.plateNumbers[0]}} 
				</text>
			</view>
			<view class="margin-bottom-sm">
				油号
				<text class="fr"> {{insertResult.oilsCode}}</text>
			</view>
			<view class="margin-bottom-sm">
				加油总金额
				<text class="fr">¥ {{insertResult.totalPrice }}</text>
			</view>
			<view class="margin-bottom-sm">
				加油升数
				<text class="fr">{{insertResult.volume }} 升</text>
			</view>
			<view class="margin-bottom-sm">
				星游优惠
				<text class="fr">¥ {{insertResult.xoilDiscountAmount }}</text>
			</view>
		
			<view class="margin-bottom-sm">
				实扣款
				<text class="fr oil-main-color">¥ {{insertResult.payRealAmount }}</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	import oilFinanceApi from '@/api/oil-finance.js'
	export default {
		data() {
			return {
				orderItem: uni.getStorageSync('SiteInfo'),
				insertResult: {},
				orderId: '',
				timerF: '',
				checkTime: 40,
				payState: 0,
				PayTitle: '正在支付中',
				orderInfos: {}
			}
		},
		filters: {
			numberFormat(value) {
				if (value != 'xxx.x') {
					console.log('old:', value)
					let realAmount = value.toFixed(2)
					console.log('new:', realAmount)
					return realAmount
				} else {
					return value
				}
			},
			UnitPriceFormat(value) {
				console.log('++++++++++++++++++++', value)
				if (value) {
					return value
				} else {
					return '--'
				}
			},
		},
		onLoad(option) {
			console.log(option)
			let insertResult = JSON.parse(option.item)
			this.insertResult = insertResult
			console.log(this.insertResult)
			this.orderId = insertResult.orderId
			let orderId = insertResult.orderId
			console.log(this.orderId)
			this.checkSf(orderId) //进入获取订单信息
			this.timerF = setInterval((res) => {
				this.checkSf(orderId)
			}, 5000)
		},

		methods: {
			getScanning() { //支付取消 或失败 前往重新下单
				uni.redirectTo({
					url: '/pages/stationDetail/stationDetail',
					fail: (err) => {}
				})
			},
			gotoHome() { // 返回首页
				uni.reLaunch({
					url: '/pages/index/index',
					fail: (err) => {}
				})
			},
			singleCheck(ids) { //单独调用check 订单状态
				let _that = this
				oilFinanceApi.checkOrderState(ids).then((res) => {
					console.log(res)
					if (res.code == 20000) {
						_that.displayMoney = res.data.sitePriceAmount
						_that.orderInfos = res.data
						console.log(_that.orderInfos)
						_that.payState = res.data.orderStatus
						if (res.data.orderStatus == 0) {
							_that.PayTitle = '正在支付中....'
						}
						if (res.data.orderStatus == 1) {
							_that.PayTitle = '支付成功'
							if (_that.payState != 0 || res.data.orderStatus == 1) {
								console.log('测试手动刷新是否进入清除计时器')
								clearInterval(_that.timerF)
							}
						}
						if (res.data.orderStatus == 2) {
							if (!res.data.cancelRemak) {
								_that.PayTitle = '支付已取消'
							} else {
								_that.PayTitle = res.data.cancelRemak
							}
							if (_that.payState != 0 || res.data.orderStatus == 2) {
								console.log('测试手动刷新是否进入清除计时器')
								clearInterval(_that.timerF)
							}
						}
					}
				})
			},
			toDetails(id) {
				uni.setStorageSync('orderId', id)
				console.log('id', id)
				uni.redirectTo({
					url: '/packageOrders/pages/orderList/OrderDetail/OrderDetail'
				})

			},
			checkSf(id) { // 轮询 check 顺丰订单状态
				let _that = this,
					time = _that.checkTime,
					ids = id
				if (time <= 0) {
					uni.showToast({
						title: '支付已取消'
					})
					_that.payState = 0
					_that.PayTitle = '三分钟自动取消....'
					clearInterval(_that.timerF)
					// uni.navigateBack({}) 
				} else {
					time--
					_that.singleCheck(ids)
					// oilFinanceApi.checkOrderState(ids).then( (res)=>{
					// 	console.log(res)
					// 	if(res.code == 20000){  
					// 			_that.payState =  res.data.orderStatus
					// 			 if(res.data.orderStatus == 0){
					// 				 _that.PayTitle = '正在支付中....'
					// 			 }
					// 			 if(res.data.orderStatus == 1){
					// 			 	_that.PayTitle = '支付成功'
					// 				clearInterval(_that.timerF)
					// 			 }
					// 			 if(res.data.orderStatus == 2){
					// 			 	_that.PayTitle = '支付已取消'
					// 				clearInterval(_that.timerF)
					// 			 }
					// 			console.log('this.payState+++',this.payState)
					// 			console.log('res.data.orderStatuse+++',res.data.orderStatus)
					// 	}

					// 	// if(res.data.orderStatus == 1){
					// 	// 	clearInterval(this.timerF ) 
					// 	// 	this.payState = 1
					// 	// 	if (!_that.isG7) {
					// 	// 		setTimeout(() => {
					// 	// 			// this.gotoOrderStatus()
					// 	// 			// _that.toDetails(ids)
					// 	// 		}, 400)
					// 	// 	} else {
					// 	// 		_that.beforePay = false
					// 	// 		setTimeout(() => {
					// 	// 			_that_that.orderId = res.data.orderId
					// 	// 			_that.queryTimer()
					// 	// 			_that.getPayStatus(_that.orderId)
					// 	// 		}, 400)
					// 	// 	}
					// 	// }else if(res.data.orderStatus == 2){
					// 	// 	this.payState = 2
					// 	// 	uni.showToast({
					// 	// 		title:'支付已取消'
					// 	// 	})
					// 	// 	uni.navigateBack({ })
					// 	// }
					// } ) 
					_that.checkTime = time
				}
			},
		},
	}
</script>

<style scoped>
	page {
		background-color: #efefef;
	}

	.page-content {
		background-color: #f1f2f7;
		min-height: 100%;
		position: relative;
	}

	.navigation {
		position: absolute;
		right: 16px;
		top: 10px;
	}

	.icon-self {
		width: 1rem;
		height: 1rem;
	}

	.oil-price {
		position: relative;
	}

	.oil-price radio {
		position: absolute;
		left: 0rem;
		top: 10px;
	}

	.qr-icon {
		font-size: 2rem;
	}

	.pay-desc {
		line-height: 2rem;
	}

	.bottom-pay {
		min-height: 100rpx;
		width: 750upx;
	}

	.pay-bar {
		width: 750upx;
		position: absolute;
		bottom: 0;
	}

	.money-container {
		position: relative;
	}

	.money-position {
		position: absolute;
		top: 0;
		right: 0;
		display: block;
		border-radius: 0 0 0 100upx;
	}

	.payStatue_text {
		font-size: 36rpx;
		color: #737373;
		font-weight: bold;
		margin-bottom: 10rpx;
		text-align: center;
		margin-top: 6rpx;
	}

	.payStatue_p {
		font-size: 26rpx;
		color: #888888;
		font-weight: bold;
		text-align: center;
		margin-bottom: 30rpx;
		margin-top: 20rpx;
	}

	.btn-oils {
		width: 100%;
		border-radius: 14rpx;
		margin-top: 30rpx;
		font-size: 32rpx;
		/* padding: 14rpx; */
		height: 80rpx;
	}

	.showimgs {
		width: 130rpx;
		height: 130rpx;
	}

	.boxsings_main_top {
		position: relative;
		margin-top: 90rpx;
	}

	.showIcons {
		background-color: #fff;
		background-size: cover;
		position: absolute;
		top: -30rpx;
		left: 40%;
	}
</style>