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

更新

Browse Source
This commit is contained in:
xiaozhiyong
2023-04-07 10:39:14 +08:00
parent ee6ebb71f1
commit 68152e6b42
5 changed files with 350 additions and 325 deletions
Download Patch File Download Diff File Expand all files Collapse all files

467
src/views/cashier/cashierIndex.vue
View File

@@ -1,297 +1,306 @@
<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 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();
components: {
detailsCard
},
methods:{
cardListFn(){
let a = this.orderData.companyAccounts?this.orderData.companyAccounts.map(item=>{item['cardType'] = 0;return item}):[];
let b = this.orderData.otherAccounts?this.orderData.otherAccounts.map(item=>{item['cardType'] = 1;return item}):[];
this.cardList = [...a,...b];
},
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)
}
})
})
}
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)
console.log('this.orderData', this.orderData)
this.time = this.getCountDownTime(this.orderData.createTime)
this.updateDetails()
this.cardListFn()
},
methods: {
cardListFn() {
let a = this.orderData.companyAccounts
? this.orderData.companyAccounts.map(item => {
item['cardType'] = 0
return item
})
: []
let b = this.orderData.otherAccounts
? this.orderData.otherAccounts.map(item => {
item['cardType'] = 1
return item
})
: []
this.cardList = [...a, ...b]
},
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;
.debgcolor {
background-color: #999999 !important;
}
.payment-time {
margin-top: 50px;
margin-top: 50px;
}
.payment-details-item-row-lable {
color: #999999;
color: #999999;
}
.payment-details-item-row {
margin-top: 10px;
margin-top: 10px;
}
.payment-details-item:first-child {
margin-top: 0q;
margin-top: 0Q;
}
.payment-details-item:last-child {
border-bottom: dashed 0px #B9B9B9;
border-bottom: dashed 0px #b9b9b9;
}
.payment-details-item {
box-sizing: border-box;
border-bottom: dashed 1px #B9B9B9;
padding-bottom: 20px;
margin-top: 20px;
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;
width: 100%;
margin-top: 30px;
padding: 0 20px;
box-sizing: border-box;
}
.payment-details-title span {
color: #FF6700;
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;
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;
border-bottom: 0px #f1f2f7;
padding-bottom: 0px;
}
.payment-method-item:first-child {
margin-top: 0px;
margin-top: 0px;
}
.payment-method-item {
text-align: left;
border-bottom: solid 2px #f1f2f7;
padding-bottom: 20px;
margin-top: 30px;
text-align: left;
border-bottom: solid 2px #f1f2f7;
padding-bottom: 20px;
margin-top: 30px;
color: #333333;
font-size: 28px;
color: #333333;
font-size: 28px;
}
.time {
font-size: 24px;
font-family: PingFang SC-中等, PingFang SC;
font-weight: normal;
color: #999999;
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;
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;
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;
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;
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;
position: relative;
/* padding-bottom: 80px; */
font-size: 28px;
height: 100%;
overflow: auto;
}
</style>
</style>