You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
393 lines
13 KiB
393 lines
13 KiB
<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-blue' :''" > |
|
<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> |
|
<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> |
|
进行订单核销 |
|
</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"> |
|
加油金额：<text class="fr">{{order.xoilAmountGun |moneyFormat}}</text> |
|
<!-- <text class="fr">{{order.oilDiscountAmount>0?order.realAmount+order.oilDiscountAmount:order.realAmount|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 oilSiteApi from '@/api/oil-site.js' |
|
import tkiQrcode from "../components/tki-qrcode/tki-qrcode.vue" //二维码生成器 |
|
|
|
import ThirdPartyVoucher from '../components/third-party-voucher/third-party-voucher.vue' |
|
export default { |
|
components: { |
|
ThirdPartyVoucher, |
|
tkiQrcode |
|
}, |
|
data() { |
|
const now = new Date() |
|
return { |
|
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)=>{ |
|
console.log(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('+++++++++') |
|
console.log(res) |
|
console.log('+++++++++') |
|
if (res.code == 20000) { |
|
console.log('进入') |
|
this.tySqRes = res.data |
|
this.tyIntervalCount++ |
|
if(res.data.otherOrderStatus == 0){ |
|
this.textstatus = '支付中' |
|
}else if(res.data.otherOrderStatus == 1){ |
|
let _that = this |
|
_that.textstatus = '支付成功' |
|
_that.status ='success' |
|
console.log(_that.oilItem) |
|
let oilItems = _that.oilItem |
|
|
|
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 if(res.data.otherOrderStatus == -1){ |
|
this.textstatus = '三方支付失败，已退款' |
|
} |
|
// otherOrderStatus //三方支付状态 0：待通知 1：通知成功 -1：通知失败 |
|
// console.log('联名卡支付结果', res.data) |
|
this.getThirdStatus() |
|
} |
|
}) |
|
}, |
|
|
|
// 三方支付结果弹窗结束 |
|
backToIndex() { |
|
this.innerAudioContext.stop() |
|
uni.switchTab({ |
|
url: '/pages/tabbar/home/home' |
|
}) |
|
}, |
|
onCopy(id) { |
|
uni.setClipboardData({ |
|
data: id, |
|
success: () => { |
|
uni.showToast({ |
|
icon: 'none', |
|
title: '订单号复制成功' |
|
}) |
|
} |
|
}) |
|
} |
|
}, |
|
onLoad(option) { |
|
console.log(option) |
|
console.log('支付进入onload') |
|
let oilItem = uni.getStorageSync('oilItem') |
|
this.showtitles = oilItem.listTag |
|
if(oilItem.listTag == '万金油'){ |
|
this.audioUrl = 'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/wanjinyou.mp3' |
|
}else if(oilItem.listTag == '星油'){ |
|
this.audioUrl = 'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/xingyouyunzhan.mp3' |
|
}else if(oilItem.listTag == '壳牌'){ |
|
this.audioUrl = 'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/qiaopainew.mp3' |
|
}else if(oilItem.listTag == '上汽联名卡'){ |
|
this.audioUrl = 'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/shangqi.mp3' |
|
} |
|
this.ContextAudio(this.audioUrl) |
|
if (this.timer) { |
|
clearInterval(this.timer) |
|
} |
|
setInterval(() => { |
|
this.getTime() |
|
},1000) //设置定时器，时时间每隔一秒钟走一次（即每秒） |
|
this.timeinterval = setInterval(() => { |
|
console.log('1') |
|
this.newQrString() |
|
}, 1000 * 60 * 3); |
|
if(option.payMethod == '1' && option.status == 'success'){ |
|
if(option.status == 'success') { |
|
console.log('这里是支付成功') |
|
this.textstatus = '支付成功' |
|
this.status = option.status |
|
this.getOrderQrCode() |
|
}else{ |
|
console.log('这里是支付失败') |
|
this.textstatus = '支付失败' |
|
this.status = option.status |
|
} |
|
return |
|
} |
|
if(option.status == 'fail'){ |
|
console.log('fail') |
|
this.textstatus = '支付失败' |
|
this.errMsg = option.errMsg |
|
this.status = option.status |
|
return |
|
} |
|
if (this.order.payMethod && this.order.payMethod == 2) { |
|
console.log('这里是则一') |
|
this.tyPayMethod = 2 |
|
this.queryOrderStatusSq() |
|
return |
|
} |
|
}, |
|
filters: { |
|
moneyFormath(value) { |
|
console.log(value) |
|
if (value != 'xxx.x') { |
|
let number = value.toFixed(2) |
|
return number |
|
} else { |
|
return value |
|
} |
|
}, |
|
moneyFormat(value) { |
|
if (value != 'xxx.x') { |
|
return "￥" + (parseInt(value * 100) / 100).toFixed(2) |
|
} 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-blue{ |
|
background-color: red; |
|
} |
|
.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>
|
|
|