caoliancun/zhongPin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

第一次提交

Browse Source
This commit is contained in:
caolc
2023-02-15 09:25:11 +08:00
commit ea8e9f9eb7
202 changed files with 38601 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

275
BagStation/pages/makeOrder/makeOrder.vue Normal file
View File

@@ -0,0 +1,275 @@
<template>
<view class="content bg-white position-re">
<!-- <cu-custom class="bg-main-oil" isBack bgColor="bg-main-oil">
<block slot="content">中石化紫云路</block>
<block slot="backText">返回</block>
</cu-custom> -->
<view class="bg-img fixed-top flex align-end margin-bottom-lg " :style="'background-image: url('+otherImgURL+'bg.png '+');width: 750upx;height: 326rpx;background-size:cover'">
<image @tap="goBack" :src="imgURL+'site-back.png'" width="20upx" mode="widthFix" class="position-ab site-back">
</image>
<view class="flex-sub">
<view class="cu-list menu margin padding-sm radius my-shadow bg-white yu-card-xuan">
<view class="cu-item ">
<view class="content">
<view class="strong padding-bottom-xs">
{{siteInfo.siteName?siteInfo.siteName:'油站名称'}}
</view>
<view class="font-12 color-999 site-label text-cut">
{{siteInfo.address?siteInfo.siteName:'油站地址'}}
</view>
</view>
<view class="action " @tap="openMap">
<view class="oil-main-color">
<my-icon iconName="sy-der-icon.png" class="padding-right-xs text-sm"></my-icon>
{{siteInfo.juli|distanceFilter}}
</view>
</view>
</view>
</view>
</view>
</view>
<view class="bg-img placeholder-hidden flex align-end margin-bottom-lg " :style="'background-image: url('+imgURL+'site-bg.png '+');width: 750upx;height: 326rpx;background-size:cover'">
<image @tap="goBack" :src="imgURL+'site-back.png'" width="20upx" mode="widthFix" class="position-ab site-back">
</image>
<view class="flex-sub">
<view class="cu-list menu margin padding-sm radius my-shadow bg-white yu-card-xuan">
<view class="cu-item ">
<view class="content">
<view class="strong padding-bottom-xs">
{{siteInfo.siteName?siteInfo.siteName:'油站名称'}}
</view>
<view class="font-12 color-999 site-label text-cut">
{{siteInfo.address?siteInfo.siteName:'油站地址'}}
</view>
</view>
<view class="action " @tap="openMap">
<view class="oil-main-color">
<my-icon iconName="sy-der-icon.png" class="padding-right-xs text-sm"></my-icon>
{{siteInfo.juli|distanceFilter}}
</view>
</view>
</view>
</view>
</view>
</view>
<view class="placeholder margin-bottom">
</view>
<!-- 价格 -->
<price-select-tab @onChangePayQr="onChangePayQr" @onChangePay="onChangePay" :active-cur="activeCur" :site-name="siteInfo.siteName"
:channel-list="siteInfo.oilSiteChannelDetailsVos" :channelJuli="siteInfo.juli"></price-select-tab>
</view>
</template>
<script>
import oilSiteApi from '@/api/oil-site.js'
import priceSelectTab from '../components/price-select-tab'
export default {
components: {
priceSelectTab
},
data() {
return {
otherImgURL:this.global.otherImgURL,
radio: 'B',
mainURL: this.global.mainURL,
imgURL: this.global.imgURL,
active: 0,
ColorList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
siteInfo: {
},
activeCur:0,
activePay: null,
qrcodePay: null,
tempScanSite: uni.getStorageSync('tempScanSite')
}
},
onUnload() {
if (this.tempScanSite) {
uni.setStorageSync('tempScanSite', null)
}
},
onLoad(option) {
// console.log(option.siteId)
if (this.tempScanSite) {
this.siteInfo = this.tempScanSite
} else {
this.getSiteInfo(option.siteId)
this.activeCur = option.activeCur
}
},
methods: {
siteQrPay() {
uni.navigateTo({
url: '/BagStation/pages/stationDetail/stieQr'
})
},
getSiteInfo(id) {
let data2 = {
...uni.getStorageSync('location'),
siteId: id
}
oilSiteApi.getSiteDetails(data2).then(res => {
if (res.code == 20000) {
this.siteInfo = res.data
}
})
},
onChangePayQr(val) {
this.activePay = val
},
onChangePay(val) {
this.qrcodePay = val
},
openPlugin() {
const key = this.qqKey; //使用在腾讯位置服务申请的key
const referer = '星油云'; //调用插件的app的名称
const endPoint = JSON.stringify({
name: '油站',
latitude: 39.89631551,
longitude: 116.323459711
});
wx.navigateTo({
url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
})
},
goBack() {
uni.navigateBack({
})
},
selectRadio() {
this.radio === 'A' ? this.radio = '' : this.radio = 'A'
},
openMap() {
let that = this
uni.openLocation({
latitude: this.siteInfo.latitude,
longitude: this.siteInfo.longitude,
name: this.siteInfo.siteName,
address: this.siteInfo.address,
scale: 12,
success: function() {
// console.log('success')
},
fail: (error) => {
// console.log('error')
// console.log(error)
},
complete: () => {
// console.log('made')
},
})
var map = uni.createMapContext('map')
map.moveToLocation()
}
},
filters: {
distanceFilter(value) {
if (value) {
return value > 1000 ? ((value / 1000).toFixed(2) + 'km') : (value + 'm')
}
}
}
,
onHide() {
console.log('这里是hiden')
this.innerAudioContext.stop()
},
onUnload() {
console.log('这里是卸载页面')
this.innerAudioContext.stop()
},
}
</script>
<style scoped>
.content {
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;
}
.yu-card-xuan {
position: relative;
top: 60rpx
}
.site-label {
max-width: 500upx;
}
.cu-btn.sm {
width: 80%;
}
.site-back {
width: 2rem;
top: 2.8rem;
left: 1rem;
z-index: 1;
}
.site-icon {
width: 1.5rem;
vertical-align: middle;
}
.my-tag {
padding: 0 12rpx;
}
.fixed-bottom {
width: 690upx !important;
}
</style>

480
BagStation/pages/makeOrder/orderPaying.vue Normal file
View File

@@ -0,0 +1,480 @@
<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="">
<view class="padding-xl text-center">
<text class="text-xxl text-bold oil-main-color">
{{order.realAmount>0?order.realAmount:'xxx.x'|moneyFormat}}
</text>
<view class="text-gray">
支付剩余时间 <time-down :is-day="false" :is-hour="false" :tip-text="' '" :day-text="' '" :hour-text="':'"
:minute-text="':'" :second-text="' '" :datatime="datatime"></time-down>
</view>
</view>
<view class=" radius my-shadow solid-top margin margin-top-0">
<view class="cu-list menu" v-if="!isCompany">
<view class="cu-item" v-show="order.wxPayStatus" @tap="selWX">
<view class="content">
<view class="text-left">
<view class="site-icon-sm">
<image :src="imgURL+'pay-wx.png'" mode="widthFix" width="100upx"></image>
</view>
<text class="padding-left-sm">微信支付</text>
</view>
</view>
<view class="action">
<view class="site-icon-sm check-icon">
<image :src="imgURL+(checked == 'weixin'?'pay-xz.png':'pay-qx.png') " mode="widthFix"
width="100upx"></image>
<!-- <image :src="imgURL+'pay-qx.png'" mode="widthFix" width="100upx"></image> -->
</view>
</view>
</view>
<!-- <view class="cu-item" v-show="order.personalStatus" @tap="selectPersonCard(order.personalAccount)">
<view class="content">
<view class="text-left">
<view class="site-icon-sm">
<image :src="imgURL+'pay-gr.png'" mode="widthFix" width="100upx"></image>
</view>
<text
class="padding-left-sm">星油豆支付（余额：{{order.personalAccount.balance|moneyFormat}}个）</text>
</view>
</view>
<view class="action">
<view class="site-icon-sm">
<image :src="imgURL+ (checked == 'person'?'pay-xz.png':'pay-qx.png')" mode="widthFix"
width="100upx"></image>
<image :src="imgURL+'pay-qx.png'" mode="widthFix" width="100upx"></image>
</view>
</view>
</view> -->
</view>
<view class="cu-list menu" v-if="isCompany">
<view class="cu-item" v-show="order.companyStatus" @tap="selectCompanyCard(item)"
v-for="item in companyList" :key="item.id">
<view class="content padding-tb-sm">
<view class="text-left">
<view class="site-icon-sm">
<image :src="imgURL+'pay-qy.png'" mode="widthFix" width="100upx"></image>
</view>
<text class="padding-left-sm">自营企业油卡支付 <text
v-if="item.shareCompanyQuota==0">（余额：{{item.balance|moneyFormat}}）</text></text>
<!-- <text class="padding-left-sm">企业油卡支付</text> -->
</view>
<view class="text-sm padding-left-xl margin-left-xs">
{{item.companyName}} {{item.shareCompanyQuota==1?'共享额度':'非共享'}}
</view>
<view class="text-sm padding-left-xl margin-left-xs">
<text class="">
(单次金额上限{{item.orderAmountToplimit}}元;单笔加油升数上限{{item.orderVolumeToplimit}}L)</text>
</view>
</view>
<view class="action">
<view class="site-icon-sm">
<image :src="imgURL+(checked == item.accountCardCode?'pay-xz.png':'pay-qx.png')"
mode="widthFix" width="100upx"></image>
<!-- <image :src="imgURL+'pay-qx.png'" mode="widthFix" width="100upx"></image> -->
</view>
</view>
</view>
<view class="cu-item" v-show="order.companyStatus" @tap="selectCompanyCard(itemx)"
v-for="itemx in companyOtherList" :key="itemx.id">
<view class="content padding-tb-sm">
<view class="text-left">
<view class="site-icon-sm">
<image :src="imgURL+'pay-qy.png'" mode="widthFix" width="100upx"></image>
</view>
<text class="padding-left-sm">外请油卡支付（余额：{{itemx.balance|moneyFormat}}）</text>
<!-- <text class="padding-left-sm">企业油卡支付</text> -->
</view>
<view class="text-sm padding-left-xl margin-left-xs">
{{itemx.companyName}}
</view>
</view>
<view class="action">
<view class="site-icon-sm">
<image
:src="imgURL+(card.accountCardCode == itemx.accountCardCode?'pay-xz.png':'pay-qx.png')"
mode="widthFix" width="100upx"></image>
<!-- <image :src="imgURL+'pay-qx.png'" mode="widthFix" width="100upx"></image> -->
</view>
</view>
</view>
</view>
</view>
<view class=" radius my-shadow solid-top margin margin-top-0">
<view class="bg-gray text-center padding-sm margin-bottom-sm">
请提醒加油员使用
<text class="oil-main-color">“{{showtitles}}”</text>
进行订单核销
</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="dashed-top margin-top-xs padding-top-sm">
<view class="padding-tb-xs text-left">
加油金额：<text class="fr">{{moneyIntercept(order.xoilAmountGun) }}</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? moneyIntercept(order.realAmount) :'xxx.x' }}</text>
</view>
</view>
</view>
<view class="padding placeholder-hidden">
<button class="cu-btn block lg bg-main-oil" @tap="payOrder">立即支付</button>
<button class="cu-btn margin-top block lg " @tap="cancelOrder(order.orderSerialNumber)">取消订单</button>
</view>
<view class="padding fixed-bar-bottom">
<button class="cu-btn block lg bg-main-oil" @tap="payOrder">立即支付</button>
<button class="cu-btn margin-top block lg " @tap="cancelOrder(order.orderSerialNumber)">取消订单</button>
</view>
</view>
</view>
</template>
<script>
import timeDown from '@/components/xw-CountDown'
import oilOrderApi from '@/api/oil-order.js'
import oilFinanceApi from '@/api/oil-finance.js'
import oilPayApi from '@/api/pay.js'
export default {
components: {
timeDown
},
data() {
return {
userIp:null,
showtitles: "",
imgURL: this.global.imgURL,
order: uni.getStorageSync('orderMade'),
activePay: 0,
isCompany: uni.getStorageSync('accountStatus'),
accountCardCode: '',
card: {},
datatime: "",
checked: '',
cooling: false
}
},
computed: {
companyList() {
if (this.isCompany) {
return this.order.companyAccounts
}
},
companyOtherList() {
if (this.isCompany) {
return this.order.otherAccounts
}
}
},
onLoad(option) {
let oilItem = uni.getStorageSync('oilItem')
this.showtitles = oilItem.listTag
console.log(option.payMethod)
if (option.payMethod) {
this.payMethod = option.payMethod
} else {
this.payMethod = oilItem.payMethod
}
},
onShow() {
this.datatime = this.timF(this.order.createTime);
const that = this
wx.request({
url: 'http://ip-api.com/json',
success:function(e){
console.log(e.data.query);
that.userIp = e.data.query
}
})
},
onReady() {
if (this.isCompany) {
this.card = this.order.companyAccounts[0]
this.checked = this.card.accountCardCode
this.accountCardCode = this.card.accountCardCode
} else {
this.selWX()
// this.card = this.order.personalAccount
// this.checked = 'weixin'
// this.accountCardCode = this.card.accountCardCode
}
},
methods: {
timF(date) {
date = date.substring(0, 19)
date = date.replace(/-/g, '/')
var timestampDeadline = (new Date(date).getTime()) / 1000 + 60 * 10
return timestampDeadline
},
cancelOrder(id) {
oilOrderApi.cancelOrder(id).then(res => {
if (res.code == 20000) {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 1000
})
setTimeout(() => {
uni.navigateBack(2)
}, 1000)
}
})
},
selWX() {
this.activePay = 2
this.checked = 'weixin'
},
selectPersonCard(card) {
this.activePay = 0
this.card = card
this.checked = 'person'
},
selectCompanyCard(card) {
// console.log(card)
this.card = card
this.checked = card.accountCardCode
this.accountCardCode = card.accountCardCode
},
payOrder() {
if (!this.cooling) {
this.cooling = true
setTimeout(() => {
this.cooling = false
}, 5000)
if (this.activePay == 0) {
this.selfCardPay()
} else if (this.activePay == 2) {
this.selfWxPay()
}
} else {
uni.showToast({
title: '操作频繁',
icon: 'none'
})
}
},
selfWxPay() {
let payData = {
// payChannel: 'WECHAT_MINIAPPS_PAYMENT', //微信小程序支付 WECHAT_APP_PAYMENT微信APP支付
// openId: uni.getStorageSync('openid'),
// unionId: uni.getStorageSync('unionid'),
// appId: 'wx2f203fde39b883bc',
// payCode: 'WECHAT_ORDER_PAY_WECHAT', //APP填WECHAT_ORDER_PAY_APP，小程序填
// orderId: this.order.orderSerialNumber,
// payClient: 'XOIL_DRIVER_WECHAT_APPLET' //"支付端。安卓XOIL_DRIVER_ANDROID，小程序
payChannel: 'WECHAT_MINIAPPS_PAYMENT', //微信小程序支付 WECHAT_APP_PAYMENT微信APP支付
openId: uni.getStorageSync('openid'),
unionId: uni.getStorageSync('unionid'),
appId: 'wx2f203fde39b883bc',
payCode: 'WECHAT_ORDER_PAY_WECHAT', //APP填WECHAT_ORDER_PAY_APP，小程序填
orderId: this.order.orderSerialNumber,
payClient: 'XOIL_DRIVER_WECHAT_APPLET', //"支付端。安卓XOIL_DRIVER_ANDROID，小程序
userIp: (this.userIp?this.userIp:"36.57.160.59") ,
merchantNo:'10088997357'
}
oilPayApi.aggregatePay(payData).then(res => {
if (res.code == 20000) {
uni.requestPayment({
provider: 'wxpay',
...res.data.baseWxOrderVo,
success: (res1) => {
console.log(res)
if (res.code == 20000) {
// this.getPayStatus(this.outTradeNo)
// this.getLastMoney()
// this.getCards()
// console.log('success:' + JSON.stringify(res));
uni.showToast({
title: res.msg
})
uni.redirectTo({
url: '/BagStation/pages/makeOrder/payResult?status=success&&payMethod=' +
this.payMethod,
fail: (err) => {
// console.log(err)
}
})
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
},
fail: function(err) {
console.log(res, err, '************')
// console.log('fail:' + JSON.stringify(err));
}
})
// uni.showToast({
// title: res.msg
// })
// uni.redirectTo({
// url: '/BagStation/pages/makeOrder/payResult?status=success',
// fail: (err) => {
// console.log(err)
// }
// })
} else {
// uni.redirectTo({
// url: '/BagStation/pages/makeOrder/payResult?status=fail'
// })
}
})
},
selfCardPay() {
if (!this.card.accountCardCode) {
uni.showToast({
title: '请选择支付油卡',
icon: 'none'
})
return false
}
if (this.card.balance < this.order.realAmount) {
uni.showToast({
title: '该油卡余额不足',
icon: 'none'
})
return false
}
let payData = {
...this.card,
"orderSerialNumber": this.order.orderSerialNumber, //类型：String 必有字段 备注：订单编号
"payChannel": "BALANCE_PAYMENT", //类型：String 必有字段 备注：支付渠道（BALANCE_PAYMENT：余额支付）
"orderMethod": "CUSTOMER_ACTIVE", //类型：String 必有字段 备注：订单产生方式（CUSTOMER_ACTIVE：客户扫码支付：客户扫描油站二维码完成支付）
"createSource": "XOIL_DRIVER_WECHAT_APPLET"
}
oilOrderApi.payOrder(payData).then(res => {
if (res.code == 20000) {
uni.showToast({
title: res.msg
})
setTimeout(() => {
uni.redirectTo({
url: '/BagStation/pages/makeOrder/payResult?status=success&&payMethod=' +
this.payMethod,
fail: (err) => {
// console.log(err)
}
})
}, 1000)
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
setTimeout(() => {
let msg = res.msg
uni.redirectTo({
url: `/BagStation/pages/makeOrder/payResult?status=fail&&errMsg=${msg}&&payMethod=` +
this.payMethod
})
}, 1000)
}
})
},
onCopy(id) {
uni.setClipboardData({
data: id,
success: () => {
uni.showToast({
icon: 'none',
title: '订单号复制成功'
})
}
})
}
},
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
}
}
}
}
</script>
<style scoped>
.site-icon-sm {
width: 40upx;
vertical-align: middle;
display: inline-block;
margin-top: 5px;
height: 40upx;
}
.action .site-icon-sm {
width: 30upx;
/* display: inline-block; */
}
.fixed-bar-bottom {
width: 750upx;
position: fixed;
bottom: 0;
}
</style>

393
BagStation/pages/makeOrder/payResult.vue Normal file
View File

@@ -0,0 +1,393 @@
<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>