MP_XOIL_company_new/BagStation/pages/SeparateProcess/payResult.vue

<template>
	<view>
		<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="showQr ? 'bg-red' :''" >
			<view class="text-center text-bold text-xl padding-xl" >
				{{ textstatus }}
				<!-- 支付{{status=='success'?'成功':'失败'}} -->
			</view>
			<view class="text-center " v-if="showtext">
				<image :src="imgURL+'pay-'+ status+'.png'" mode="widthFix"></image>
			</view>
			<!-- <view class="" v-if="textstatus == '支付中'">
				<view class="cu-btn" @tap="queryOrderStatusSq">查询</view>
			</view> -->
		</view>
		<view class="qr-container margin move-tops padding-bottom-xs text-centers my-shadow" v-if="showQr">
			<view class="qr-container  ">
				<view class="qrimg">
					<view class="qrimg" @tap="newQrString">
						<tki-qrcode ref="qrcode" cid="2" loadMake :val="val" :size="250" unit="upx"
							background="#fff" foreground="#000" pdground="#000" :icon="iconUrl" iconSize="40" onval
							:usingComponents="usingComponents" showLoading  />
					</view>
				</view>
			</view>
			<view class="text-center  text-sm  justify-center align-center flex">
				<image src="../../static/img/YDJY.png" mode="" style="width: 60upx;height:60upx;" class="margin-right-sm"></image>
				<text>壳牌</text>
			</view>
			<div class="times">
					<span>{{ hour }} : {{ minutes }}</span>
					<span style="font-size: 38upx;margin-left: 10upx;;">{{ seconds }}s</span>
			</div>
			<view class="text-center padding-top text-sm margin-bottom">
				提示：该二维码每隔3分钟自动刷新一次
			</view>
		</view>
		<view class=" radius my-shadow solid-top margin margin-top-0">
			<view class="bg-gray text-center padding-sm margin-bottom-sm" v-if="status=='success'">
				请提醒加油员使用
				<text class="oil-main-color" >“{{showtitles}}”</text>
				<!-- <text class="oil-main-color" v-else>“星油云站” 或 {{order.channelCode|channelCodeFamt}}</text> -->
				进行订单核销
			</view>
			<view class="bg-gray text-center padding-sm margin-bottom-sm" v-if="status!='success'">
				{{errMsg}}
			</view>
			<view class="padding">
				<view class="padding-bottom-xs margin-bottom-xs dashed-bottom">
					<view class="padding-tb-xs text-left" @tap="onCopy(order.orderSerialNumber)">
						订单编号：
						<text class="fr">{{order.orderSerialNumber?order.orderSerialNumber:''}} <text class="cuIcon-copy padding-left-xs"></text></text>

					</view>
				</view>
				<view class="padding-tb-xs text-left">
					油站：
					<text class="fr">{{order.siteName?order.siteName:''}}</text>
				</view>
				<view class="padding-tb-xs text-left">
					油品油枪：
					<text class="fr nowrap">
						{{order.oilsCode?order.oilsCode+' ':''}}&{{order.oilsBar?order.oilsBar+'号枪':'未选择油枪'}} </text>
				</view>
				<view class="padding-tb-xs  text-left">
					加油升数：
					<text class="fr">{{order.volume?order.volume :'未输入' | moneyFormath}} L</text>
				</view>
				<view class="padding-tb-xs  text-left">
					加油员：
					<text class="fr">{{order.siteUserName}}</text>
				</view>
				<!-- <view class="padding-tb-xs flex  text-left">
					<view class="flex-sub">
						加油渠道： <text class="fr">{{order.channelCode|channelCodeFamt}}</text>
					</view>
					<view class="flex-sub" v-if="tyPayMethod==2">
						<third-party-voucher :pay-data="tySqRes" :show-third-result="showThirdResult" @hideModal="hideModal"
						 @onShowThirdResult="onShowThirdResult"></third-party-voucher>
					</view>
				</view> -->
				<view class="dashed-top margin-top-xs padding-top-sm">
					<view class="padding-tb-xs text-left">
						加油金额：
						<!-- {{order.oilDiscountAmount>0?order.realAmount+order.oilDiscountAmount:order.realAmount|moneyFormat}} -->
						<!-- <text class="fr">{{order.realPriceAmount |moneyFormat}}</text> -->
						<text class="fr">{{order.xoilAmountGun |moneyFormat}}</text>
					</view>
				</view>
				<view class="padding-tb-xs text-left">
					星油优惠：
					<text class="text-red fr">{{order.oilDiscountAmount>0?order.oilDiscountAmount:'xxx.x'|moneyFormat}}</text>
				</view>
				<view class="padding-tb-xs text-left">
					优惠券：
					<text class="text-red fr">{{order.couponDiscountAmount>0?order.couponDiscountAmount:'xxx.x'|moneyFormat}}</text>
				</view>

				<view class="padding-tb-xs text-left">
					合计：
					<text class="text-red text-bold text-lg fr">{{order.realAmount>0?'￥'+order.realAmount:'xxx.x'}}</text>
				</view>
				<view class="dashed-top margin-top-xs padding-top-sm">
					<view class="padding-tb-xs text-left">
						加油车牌：
						<text class=" fr">{{order.plateNumber}}</text>
					</view>
				</view>
				<view class="padding-tb-xs text-left">
					加油司机：
					<text class=" fr">{{user.customerCode}}</text>
				</view>
				<view class="padding-tb-xs text-left">
					油卡性质：
					<!-- <text class=" fr">{{order.couponDiscountAmount>0?order.couponDiscountAmount:'xxx.x'|moneyFormat}}</text> -->
					<text class="fr">企业</text>
				</view>
			</view>
		</view>
		<view class=" fixed-bottom bg-white padding">
			<button class="cu-btn block lg bg-main-oil" open-type="contact">联系客服</button>
			<button class="cu-btn block lg margin-top" @tap="backToIndex">关闭</button>
		</view>
		<view class="margin-top padding placeholder-hidden bg-white">
			<button class="cu-btn block lg bg-main-oil" open-type="contact">联系客服</button>
			<button class="cu-btn block lg margin-top" @tap="backToIndex">关闭</button>
		</view>
	</view>
</template>

<script>
	import toilApi from '@/api/toil.js'
	import ThirdPartyVoucher from '../components/third-party-voucher/third-party-voucher.vue'
	import oilSiteApi from '@/api/oil-site.js'
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue" //二维码生成器
	export default {
		components: {
			ThirdPartyVoucher,
				tkiQrcode
		},
		data() {
			const now = new Date()
			return {
				oilItem:{},
				status:"",
				showtitles:"",
				hour: now.getHours() < 10 ? '0' + now.getHours() : now.getHours(), //当小时为个为数时在在前加0（例：01），以下同理
				minutes: now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes(),
				seconds: now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds(),
				timer: null,
				showtext:true,
				showQr:false,
				val:'',
				textstatus:'正在支付中',
				showThirdResult: false,
				imgURL: this.global.imgURL,
				status: 'fail',
				order: uni.getStorageSync('orderMade'),
				user: uni.getStorageSync('user'),
				errMsg: '',
				tyIntervalCount: 0,
				tySqRes: {},
				tyPayMethod: null
			}
		},
		methods: {
			// 创建音频
			ContextAudio(url){
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.autoplay = true;
				this.innerAudioContext.src = url;
				this.innerAudioContext.onPlay(() => {
				  console.log('开始播放');
				});
				this.innerAudioContext.onError((res) => {
				  console.log(res.errMsg);
				  console.log(res.errCode);
				});
			},
			getTime () {
					var date = new Date()
					this.hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
					this.minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
					this.seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
			},
			newQrString() {
				this.getOrderQrCode()
			},
			getOrderQrCode(){

				oilSiteApi.getOrderQrCode(this.order.orderSerialNumber).then( (res)=>{
	
					if(res.code == 40000){

						this.showQr = false  
						this.showtext=true
					}else if(res.code == 20000){

						this.showQr = true
						this.showtext =false
						this.val =res.data.codeStr
					}
				} )
			},
			// 三方支付结果弹窗开始
			hideModal() {
				this.showThirdResult = false
			},
			getThirdStatus() {
				if (this.tyIntervalCount > 5 || this.tySqRes.otherOrderStatus != 0) {
					this.onShowThirdResult()
				} else {
					setTimeout(() => {
						this.queryOrderStatusSq()
					}, 500)
				}
			},
			onShowThirdResult() {
				this.showThirdResult = true
			},
			// 上汽联名卡支付状态
			queryOrderStatusSq() {
				toilApi.queryOrderStatusSq(this.order.orderSerialNumber).then(res => {
					console.log(res)
					if (res.code == 20000) {
						this.tySqRes = res.data
						this.tyIntervalCount++
						if (res.code == 20000) {

							this.tySqRes = res.data
							this.tyIntervalCount++
							if(res.data.otherOrderStatus == 0){
								this.textstatus = '支付中'
							}else if(res.data.otherOrderStatus == 1){
								this.textstatus = '支付成功'
								this.status = "success"
								if(this.oilItem.listTag == '万金油'){
									this.audioUrl = 'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/wanjinyou.mp3'
								}else if(this.oilItem.listTag == '星油'){
									this.audioUrl = 'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/xingyouyunzhan.mp3'
								}else if(this.oilItem.listTag == '壳牌'){
									this.audioUrl = 'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/qiaopainew.mp3'
								}else if(this.oilItem.listTag == '上汽联名卡'){
									this.audioUrl = 'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/shangqi.mp3'
								}
								this.ContextAudio(this.audioUrl)
							}else if(res.data.otherOrderStatus == -1){
								this.textstatus = '三方支付失败，已退款'
							}
							// otherOrderStatus //三方支付状态 0：待通知 1：通知成功 -1：通知失败
							// console.log('联名卡支付结果', res.data)
							this.getThirdStatus()
						}
						// otherOrderStatus //三方支付状态 0：待通知 1：通知成功 -1：通知失败
						// console.log('联名卡支付结果', res.data)
						this.getThirdStatus()
					}
				})
			},

			// 三方支付结果弹窗结束
			backToIndex() {
				uni.switchTab({
					url: '/pages/tabbar/home/home'
				})
				this.innerAudioContext.stop()
			},
			onCopy(id) {
				uni.setClipboardData({
					data: id,
					success: () => {
						uni.showToast({
							icon: 'none',
							title: '订单号复制成功'
						})
					}
				})
			}
		},
		onLoad(option) {
			let  _that = this
			let oilItem = uni.getStorageSync('oilItem')
			this.oilItem = oilItem
			this.showtitles = oilItem.listTag 
			if (this.timer) {
				clearInterval(this.timer)
			}
			setInterval(() => {
				this.getTime()
			},1000)  //设置定时器，时时间每隔一秒钟走一次（即每秒）
			this.timeinterval = setInterval(() => {
				console.log('1')
				_that.getOrderQrCode()
			}, 1000 * 60 * 3);
			// this.status = option.status
			console.log('这里是op')
			console.log(option)
			this.getOrderQrCode()
			if(option.payMethod == '1' && option.status == 'success'){
				if(option.status == 'success') {

					this.textstatus = '支付成功'
					this.status = option.status
					console.log(this.oilItem)
					let oilItems = this.oilItem
					let _that = this
					if(oilItems.listTag == '万金油'){
						_that.audioUrl = 'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/wanjinyou.mp3'
						
					}else if(oilItems.listTag == '星油'){
						_that.audioUrl = 'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/xingyouyunzhan.mp3'
					}else if(oilItems.listTag == '壳牌'){
						_that.audioUrl = 'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/qiaopainew.mp3'
					}else if(oilItems.listTag == '上汽联名卡'){
						_that.audioUrl = 'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/shangqi.mp3'
					}
					
					this.ContextAudio(this.audioUrl)
				}else{

					this.textstatus = '支付失败'
					this.status = option.status
				}
				return
			}
			if(option.status == 'fail'){

				this.textstatus = '支付失败'
				this.status = option.status
				this.errMsg = option.errMsg
				return
			} 
			if (this.order.payMethod && this.order.payMethod == 2) {

				this.tyPayMethod = 2
				this.queryOrderStatusSq()
				return
			}
		},
		filters: {
			moneyFormath(value) {

				if (value != 'xxx.x') { 
					let number = value.toFixed(2)
					return number
				} else {
					return value
				}
			},
			moneyFormat(value) {
				if (value != 'xxx.x') {
					// console.log('old:',value)
						let realAmount =(parseInt(value * 100) / 100).toFixed(2) 
						// console.log('new:',realAmount)
					return realAmount
				} else { 
					return value
				}
			},
			channelCodeFamt(value) {
				if (value) {
					// 渠道编码 ( XOIL：星油 WJY：万金油 LV：老吕（找油网） TY：团油 YDJY：一点加油（壳牌）)
					switch (value) {
						case 'XOIL':
							return '星油'
						case 'WJY':
							return '万金油'
						case 'LV':
							 return '其他'
						case 'TY':
							return '团油'
						case 'YDJY':
							return '一点加油（壳牌）'
					}
				}
			},
		}
		,
		onHide() {
			console.log('这里是hiden')
			this.innerAudioContext.stop()
		},
		onUnload() {
			console.log('这里是卸载页面')
				this.innerAudioContext.stop()
		},
	}
</script>

<style>
.move-tops{
	transform: translateY(-17px);
}
.bg-red{
	background-color: #FF6700;
}
.text-centers {
      text-align: center;
      width: 90%;
      margin: 0 auto;
      border-radius: 7px;
      overflow: hidden;
}
.times {
		margin-left: 250upx ;
		font-size: 60upx;
		padding-top: 60upx;
		font-weight: bold;
	}
</style>