111
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.

459 lines
14 KiB

2 years ago
<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.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 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>
</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">
油站
2 years ago
<view class="fr">{{order.siteName?order.siteName:''}}
<!-- <text v-if="order.siteLevel" class="cu-tag text-xs tag-red" style="margin-left: 20px;">{{order.siteLevel}}</text> -->
</view>
2 years ago
</view>
<view class="padding-tb-xs text-left">
油品油枪
<text
class="fr nowrap">{{order.oilsCode?order.oilsCode+' ':''}}&{{order.oilsBar != null ?order.oilsBar+'号枪':'未选择油枪'}}</text>
</view>
<view class="padding-tb-xs text-left">
加油升数
<text class="fr">{{order.volume?order.volume :'xxx.x' | moneyFormath}} L</text>
</view>
<view class="dashed-top margin-top-xs padding-top-sm">
<view class="padding-tb-xs text-left">
加油金额
<!-- <text
class="fr">{{order.oilDiscountAmount>0?order.realAmount+order.oilDiscountAmount:order.realAmount|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>
</view>
<view class="padding placeholder-hidden">
<button class="cu-btn block lg bg-main-oil" :disabled = 'isdisabled' @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" :disabled = 'isdisabled' @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'
export default {
components: {
timeDown
},
data() {
return {
isdisabled:false,
showtitles:"",
imgURL: this.global.imgURL,
order: uni.getStorageSync('orderMade'),
activePay: 0,
isCompany: uni.getStorageSync('accountStatus'),
accountCardCode: '',
card: {},
datatime: "",
checked: '',
cooling: false,
payMethod:0
}
},
onLoad(option) {
let oilItem = uni.getStorageSync('oilItem')
this.showtitles = oilItem.listTag
if(option.payMethod == null){
this.payMethod = oilItem.payMethod
console.log(this.payMethod )
}else {
this.payMethod =option.payMethod
}
},
computed: {
companyList() {
if (this.isCompany) {
return this.order.companyAccounts
}
},
companyOtherList() {
if (this.isCompany) {
return this.order.otherAccounts
}
}
},
onShow() {
this.datatime = this.timF(this.order.createTime)
},
onReady() {
if (this.isCompany) {
this.card = this.order.companyAccounts[0]
this.checked = this.card.accountCardCode
this.accountCardCode = this.card.accountCardCode
} else {
this.card = this.order.personalAccount
this.checked = 'person'
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() {
this.isdisabled = true
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'
})
this.isdisabled = false
}
},
selfWxPay() {
let payData = {
payChannel: 'WECHAT_MINIAPPS_PAYMENT', //微信小程序支付 WECHAT_APP_PAYMENT微信APP支付
openId: uni.getStorageSync('openid'),
unionId: uni.getStorageSync('unionid'),
appId: 'wx7a939c19b270cc3d',
payCode: 'WECHAT_ORDER_PAY_WECHAT', //APP填WECHAT_ORDER_PAY_APP,小程序填
orderId: this.order.orderSerialNumber,
payClient: 'XOIL_DRIVER_COMPANY_WECHAT_APPLET' //"支付端。安卓XOIL_DRIVER_ANDROID,小程序
}
oilFinanceApi.aggregatePay(payData).then(res => {
if (res.code == 20000) {
uni.requestPayment({
provider: 'wxpay',
...res.data.baseWxOrderVo,
success: (res) => {
this.isdisabled=false
// 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)
}
})
},
fail: function(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'
})
this.isdisabled = false
return false
}
if (this.card.balance < this.order.realAmount&& this.card.shareCompanyQuota!=1) {
uni.showToast({
title: '该油卡余额不足',
icon: 'none'
})
this.isdisabled = false
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_COMPANY_WECHAT_APPLET"
}
oilOrderApi.payOrder(payData).then(res => {
this.isdisabled = false
if (res.code == 20000) {
this.isdisabled = false
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 {
this.isdisabled = false
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') {
let realAmount = Math.round(value * 100) / 100;
return realAmount
} 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>