316 lines
8.1 KiB
Vue
316 lines
8.1 KiB
Vue
<template>
|
||
<div class="cashier">
|
||
<div class="payment-time">
|
||
<div class="payment-number">￥{{ Number(orderData.realAmount).toFixed(2) }}</div>
|
||
<div v-if="time !== 0" class="time flex jc ac">
|
||
支付时间剩余：
|
||
<van-count-down style="color: #999999" format="mm:ss" :time="time" />
|
||
</div>
|
||
<div style="color: #fe0505" class="time" v-else>支付已过期</div>
|
||
</div>
|
||
<div class="payment-method">
|
||
<div @click="cardIndex = index" v-for="(item, index) in cardList" :key="index" class="payment-method-item flex bw ac">
|
||
<span>企业{{ item.cardType ? '外请' : '自营' }}油卡支付（余额：{{ item.balance ? item.balance : 0 }}）</span>
|
||
<van-icon :color="cardIndex == index ? '#ff6700' : '#C9C7C7'" name="success" />
|
||
</div>
|
||
</div>
|
||
<detailsCard :title="'请提醒加油员使用 <span>“星油云站”</span> 进行订单核实'" :detailsList="detailsList"> </detailsCard>
|
||
<div @click="goplay" :class="time == 0 ? 'debgcolor' : ''" class="payment-footer flex ac jc">立即支付</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import detailsCard from './components/detailsCard.vue'
|
||
import oilOrderApi from '@/api/oil-order.js'
|
||
|
||
export default {
|
||
components: {
|
||
detailsCard
|
||
},
|
||
data() {
|
||
return {
|
||
cardIndex: 0,
|
||
cardList: [],
|
||
time: 600000,
|
||
orderData: null,
|
||
detailsCardTitle: {},
|
||
detailsList: [
|
||
[
|
||
{
|
||
lable: '订单编号：',
|
||
value: '0101001001',
|
||
valueStyle: {
|
||
color: ''
|
||
}
|
||
}
|
||
],
|
||
[
|
||
{
|
||
lable: '油站：',
|
||
value: '壳牌加油站'
|
||
},
|
||
{
|
||
lable: '油品油枪：',
|
||
value: '0# 1号枪'
|
||
},
|
||
{
|
||
lable: '加油升数：',
|
||
value: '100L'
|
||
}
|
||
],
|
||
|
||
[
|
||
{
|
||
lable: '加油金额：',
|
||
value: '￥581.00'
|
||
},
|
||
{
|
||
lable: '星油优惠：',
|
||
value: '-￥0.00',
|
||
valueStyle: {
|
||
color: '#FF0000'
|
||
}
|
||
},
|
||
{
|
||
lable: '优惠券：',
|
||
value: '-￥1.00',
|
||
valueStyle: {
|
||
color: '#FF0000'
|
||
}
|
||
}
|
||
],
|
||
[
|
||
{
|
||
lable: '合计：',
|
||
value: '-￥1.00',
|
||
valueStyle: {
|
||
color: '#FF0000'
|
||
}
|
||
}
|
||
]
|
||
]
|
||
}
|
||
},
|
||
created() {
|
||
this.orderData = JSON.parse(this.$route.query.order)
|
||
this.time = this.getCountDownTime(this.orderData.createTime)
|
||
this.updateDetails()
|
||
|
||
this.cardListFn()
|
||
},
|
||
methods: {
|
||
cardListFn() {
|
||
let networkId = this.$pinia.state.value.user.user?.networkId
|
||
let company = this.orderData.companyAccounts
|
||
? this.orderData.companyAccounts
|
||
.filter(item => {
|
||
return item.companyId == networkId
|
||
})
|
||
.map(item => {
|
||
item['cardType'] = 0
|
||
return item
|
||
})
|
||
: []
|
||
let other = this.orderData.otherAccounts
|
||
? this.orderData.otherAccounts
|
||
.filter(item => {
|
||
return item.companyId == networkId
|
||
})
|
||
.map(item => {
|
||
item['cardType'] = 1
|
||
return item
|
||
})
|
||
: []
|
||
this.cardList = [...company, ...other]
|
||
},
|
||
updateDetails() {
|
||
this.detailsList[0][0].value = this.orderData.orderSerialNumber || '暂无数据'
|
||
this.detailsList[1][0].value = this.orderData.siteName || '暂无数据'
|
||
this.detailsList[1][1].value = this.orderData.oilsCode + ' ' + this.orderData.oilsBar + '号枪' || '暂无数据'
|
||
this.detailsList[1][2].value = Number(this.orderData.volume).toFixed(2) + 'L' || '暂无数据'
|
||
this.detailsList[2][0].value =
|
||
'￥' + Number(this.orderData.xoilAmountGun).toFixed(2) || '￥' + Number(this.orderData.baseRealPriceAmount).toFixed(2) || '暂无数据'
|
||
this.detailsList[2][1].value =
|
||
'-￥' + Number(this.orderData.oilDiscountAmount).toFixed(2) || '-￥' + Number(this.orderData.discountAmount).toFixed(2) || '暂无数据'
|
||
this.detailsList[2][2].value = '-￥' + Number(this.orderData.couponDiscountAmount).toFixed(2) || '暂无数据'
|
||
this.detailsList[3][0].value = '￥' + Number(this.orderData.realAmount).toFixed(2) || '暂无数据'
|
||
},
|
||
getCountDownTime(e) {
|
||
let createTime = new Date(e)
|
||
let nowTime = new Date()
|
||
let difference = Date.parse(nowTime) - Date.parse(createTime)
|
||
let a = 600000
|
||
return difference > a ? 0 : a - difference
|
||
},
|
||
async goplay() {
|
||
if (!this.time) {
|
||
this.$notify('支付已过期')
|
||
return
|
||
}
|
||
let payData = {
|
||
...this.cardList[this.cardIndex],
|
||
orderSerialNumber: this.orderData.orderSerialNumber, //类型：String 必有字段 备注：订单编号
|
||
payChannel: 'BALANCE_PAYMENT', //类型：String 必有字段 备注：支付渠道（BALANCE_PAYMENT：余额支付）
|
||
orderMethod: 'CUSTOMER_ACTIVE', //类型：String 必有字段 备注：订单产生方式（CUSTOMER_ACTIVE：客户扫码支付：客户扫描油站二维码完成支付）
|
||
createSource: 'XOIL_DRIVER_COMPANY_WECHAT_APPLET',
|
||
oilCardType: -1
|
||
}
|
||
let orderType = false
|
||
oilOrderApi
|
||
.payOrder(payData)
|
||
.then(res => {
|
||
if (res.code == 20000) {
|
||
orderType = true
|
||
}
|
||
})
|
||
.finally(e => {
|
||
this.$router.push({
|
||
name: 'paymentl',
|
||
query: {
|
||
orderData: JSON.stringify(this.orderData),
|
||
type: JSON.stringify(orderType)
|
||
}
|
||
})
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.debgcolor {
|
||
background-color: #999999 !important;
|
||
}
|
||
.payment-time {
|
||
margin-top: 50px;
|
||
}
|
||
|
||
.payment-details-item-row-lable {
|
||
color: #999999;
|
||
}
|
||
|
||
.payment-details-item-row {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.payment-details-item:first-child {
|
||
margin-top: 0Q;
|
||
}
|
||
|
||
.payment-details-item:last-child {
|
||
border-bottom: dashed 0px #b9b9b9;
|
||
}
|
||
|
||
.payment-details-item {
|
||
box-sizing: border-box;
|
||
border-bottom: dashed 1px #b9b9b9;
|
||
padding-bottom: 20px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.payment-details-container {
|
||
width: 100%;
|
||
margin-top: 30px;
|
||
padding: 0 20px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.payment-details-title span {
|
||
color: #ff6700;
|
||
}
|
||
|
||
.payment-details-title {
|
||
width: 690px;
|
||
height: 82px;
|
||
background: #f6f6f6;
|
||
box-shadow: 5px 5px 0px 1px rgba(0, 0, 0, 0.0118);
|
||
border-radius: 10px 10px 0px 0px;
|
||
opacity: 1;
|
||
font-size: 28px;
|
||
font-family: PingFang SC-中等, PingFang SC;
|
||
font-weight: normal;
|
||
color: #333333;
|
||
}
|
||
|
||
.payment-method-item:last-child {
|
||
border-bottom: 0px #f1f2f7;
|
||
padding-bottom: 0px;
|
||
}
|
||
|
||
.payment-method-item:first-child {
|
||
margin-top: 0px;
|
||
}
|
||
|
||
.payment-method-item {
|
||
text-align: left;
|
||
border-bottom: solid 2px #f1f2f7;
|
||
padding-bottom: 20px;
|
||
margin-top: 30px;
|
||
|
||
color: #333333;
|
||
font-size: 28px;
|
||
}
|
||
|
||
.time {
|
||
font-size: 24px;
|
||
font-family: PingFang SC-中等, PingFang SC;
|
||
font-weight: normal;
|
||
color: #999999;
|
||
}
|
||
|
||
.payment-number {
|
||
font-size: 48px;
|
||
font-family: PingFang SC-粗体, PingFang SC;
|
||
font-weight: normal;
|
||
color: #fe0505;
|
||
}
|
||
|
||
.payment-footer {
|
||
width: 690px;
|
||
height: 100px;
|
||
background: #ff6700;
|
||
border-radius: 5px 5px 5px 5px;
|
||
opacity: 1;
|
||
position: fixed;
|
||
bottom: 20px;
|
||
left: 0;
|
||
right: 0;
|
||
margin: 0 auto;
|
||
color: #ffffff;
|
||
font-size: 38px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.payment-method {
|
||
width: 690px;
|
||
/* min-height: 346px; */
|
||
background: #ffffff;
|
||
box-shadow: 0px 3px 10px 1px rgba(221, 221, 221, 0.502);
|
||
border-radius: 10px 10px 10px 10px;
|
||
opacity: 1;
|
||
margin: 0 auto;
|
||
margin-top: 45px;
|
||
padding: 45px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.payment-details {
|
||
width: 690px;
|
||
background: #ffffff;
|
||
box-shadow: 0px 3px 10px 1px rgba(221, 221, 221, 0.502);
|
||
border-radius: 10px 10px 10px 10px;
|
||
opacity: 1;
|
||
margin: 0 auto;
|
||
margin-top: 39px;
|
||
margin-bottom: 150px;
|
||
}
|
||
|
||
.cashier {
|
||
position: relative;
|
||
/* padding-bottom: 80px; */
|
||
font-size: 28px;
|
||
height: 100%;
|
||
overflow: auto;
|
||
}
|
||
</style>
|