394 lines
13 KiB
Vue
394 lines
13 KiB
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-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>
|