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.
260 lines
7.3 KiB
260 lines
7.3 KiB
<template> |
|
<view class="page-content my-bg"> |
|
<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="padding margin"> |
|
|
|
</view> |
|
<view class="text-center margin-top icon-container"> |
|
<view class="cu-avatar xl round text-sl" v-if="orderItem.sourceType===3" :style="'background-image:url('+baseURL+'static/img/order-wjy.png)'"></view> |
|
<view class="cu-avatar xl round text-sl" v-if="orderItem.sourceType===4||orderItem.sourceType===6" :style="'background-image:url('+baseURL+'static/img/order-xy.png)'"></view> |
|
<view class="cu-avatar xl round text-sl" v-if="orderItem.sourceType===5" :style="'background-image:url('+baseURL+'static/img/order-lv.png)'"></view> |
|
</view> |
|
<view class="radius margin margin-top bg-white padding-top padding"> |
|
<!-- sourceType 万金油3 老吕5 星油4/6 --> |
|
<!-- <image size="20" v-if="orderItem.sourceType===4||orderItem.sourceType===6" :src="baseURL+'static/img/order-xy.png'"></image> |
|
<image size="20" v-else-if="orderItem.sourceType===3" :src="baseURL+'static/img/order-wjy.png'"></image> |
|
<image size="20" v-else-if="orderItem.sourceType===5" :src="baseURL+'static/img/order-lv.png'"></image> --> |
|
<view class="margin padding"> |
|
<view class="text-lg text-center">{{orderItem.istate|formatStr}}</view> |
|
<view class="number text-xl text-center oil-main-color">￥{{orderItem.realamount|numberFormat}}</view> |
|
</view> |
|
<view class="margin-bottom-sm" @tap="copyId(orderItem.userName,'加油司机')"> |
|
加油司机 |
|
<text class="fr">{{orderItem.userName}}<text class="flex-sub padding-left-sm text-right cuIcon-copy text-lg text-red"> |
|
</text></text> |
|
</view> |
|
|
|
<view class="margin-bottom-sm" @tap="copyId(orderItem.carNo,'司机车牌')"> |
|
司机车牌 |
|
<text class="fr">{{orderItem.carNo}}<text class="flex-sub padding-left-sm text-right cuIcon-copy text-lg text-red"> |
|
</text></text> |
|
</view> |
|
|
|
<view class="margin-bottom-sm"> |
|
油枪油号 |
|
<text class="fr">{{orderItem.bar}}号枪{{orderItem.oilName}}</text> |
|
</view> |
|
<view class="margin-bottom-sm"> |
|
加油总金额 |
|
<text class="fr">¥ {{orderItem.amount|numberFormat}}</text> |
|
</view> |
|
<view class="margin-bottom-sm"> |
|
加油升数 |
|
<text class="fr">{{orderItem.vol|numberFormat}} 升</text> |
|
</view> |
|
<view class="margin-bottom-sm"> |
|
星卡优惠 |
|
<text class="fr">¥ {{orderItem.amount-orderItem.realamount|numberFormat}}</text> |
|
</view> |
|
<view class="margin-bottom-sm"> |
|
优惠券 |
|
<text class="fr">{{orderItem.coupon|couponFormat}}</text> |
|
</view> |
|
<view class="margin-bottom-sm"> |
|
实扣款 |
|
<text class="fr oil-main-color">¥ {{orderItem.realamount|numberFormat}}</text> |
|
</view> |
|
</view> |
|
<view class="radius bg-white margin padding "> |
|
|
|
<view class="flex padding-bottom-sm"> |
|
|
|
<view class="basis-sm"> |
|
加油站名称 |
|
</view> |
|
<view class="basis-lg text-right text-cut">{{orderItem.oilSiteName}}</view> |
|
</view> |
|
<view class="flex padding-bottom-sm"> |
|
|
|
<view class="basis-xs"> |
|
地址 |
|
</view> |
|
<view class="basis-xl text-right text-cut">{{orderItem.address}}</view> |
|
</view> |
|
</view> |
|
<view class="radius bg-white margin margin-bottom-0 padding"> |
|
<view class="margin-bottom-sm" @tap="copyId(orderItem.orderID,'订单号')"> |
|
订单号 |
|
<text class=" fr">{{orderItem.orderID}}<text class="flex-sub padding-left-sm text-right cuIcon-copy text-lg text-red"> |
|
</text></text> |
|
|
|
</view> |
|
<view class="margin-bottom-sm"> |
|
下单时间 |
|
<text class="fr">{{orderItem.createDatetime}}</text> |
|
</view> |
|
<!-- <view class="margin-bottom-sm"> |
|
扣款时间 |
|
<text class="fr">{{orderItem.paydatetime}}</text> |
|
</view> --> |
|
<view class="padding-bottom-sm"> |
|
开票状态 |
|
<text class="fr" v-if="formQr">未开票</text> |
|
<text class="fr" v-else>{{orderItem.invoiceState|invoiceStateFormat}}</text> |
|
</view> |
|
<!-- <view class="margin-bottom-sm" v-if="orderItem.paydatetime"> |
|
支付时间 |
|
<text class="fr">{{orderItem.paydatetime}}</text> |
|
</view>--> |
|
</view> |
|
<view class="padding"> |
|
|
|
</view> |
|
<view class="padding-lg padding-top-0 padding-bottom-xl"> |
|
<button v-show="formQr" @tap="scanQr" class="bg-main-oil margin-bottom"> |
|
<text class="cuIcon-scan padding-right-xs"></text> |
|
继续加油</button> |
|
<button class="bg-red light margin-bottom" @tap="backHome"> |
|
<text class="cuIcon-home padding-right-xs"></text> |
|
返回首页</button> |
|
|
|
</view> |
|
</view> |
|
</template> |
|
<script> |
|
import cloudSiteApi from '@/api/cloud-site.js' |
|
export default { |
|
data() { |
|
return { |
|
// orderId:'', |
|
orderId: uni.getStorageSync('orderId'), |
|
formQr: uni.getStorageSync('formQr') ? true : false, |
|
tempOrderInfo: uni.getStorageSync('tempOrderInfo'), |
|
orderItem: {}, |
|
baseURL: this.global.baseURL |
|
} |
|
}, |
|
created() { |
|
if (this.formQr && !this.tempOrderInfo.payOrderId) { |
|
this.orderItem = { |
|
...this.tempOrderInfo, |
|
orderID: this.tempOrderInfo.payOrderId, |
|
amount: this.tempOrderInfo.standardAmount, |
|
realamount: this.tempOrderInfo.oilAmount, |
|
userName: this.tempOrderInfo.driverId, |
|
carNo: this.tempOrderInfo.plateNumber, |
|
createDatetime: this.tempOrderInfo.createTime, |
|
paydatetime: this.tempOrderInfo.payTime, |
|
bar: this.tempOrderInfo.oilGun, |
|
vol: this.tempOrderInfo.volume, |
|
} |
|
} else { |
|
this.getOrderDetail() |
|
} |
|
}, |
|
onHide() { |
|
this.clearStatus() |
|
}, |
|
onUnload() { |
|
this.clearStatus() |
|
}, |
|
methods: { |
|
clearStatus() { |
|
uni.removeStorageSync('formQr') |
|
}, |
|
scanQr() { |
|
var scanUrl = '/pages/station-info/scan-camera/scan-camera' |
|
uni.navigateTo({ |
|
url: scanUrl, |
|
fail: (err) => { |
|
console.log(err) |
|
}, |
|
success: (res) => { |
|
console.log('chengg', res) |
|
} |
|
}) |
|
}, |
|
backHome() { |
|
uni.navigateBack({ |
|
delta: 2 |
|
}) |
|
}, |
|
copyId(id, name) { |
|
uni.setClipboardData({ |
|
data: id, |
|
success: () => { |
|
uni.showToast({ |
|
title: name + '已复制', |
|
icon: 'none' |
|
}) |
|
} |
|
}) |
|
}, |
|
getOrderDetail() { |
|
cloudSiteApi.getSiteOrderById(this.orderId).then(res => { |
|
if (res.code === 20000) { |
|
this.orderItem = res.data |
|
} |
|
}) |
|
} |
|
}, |
|
filters: { |
|
formatStr(value) { |
|
switch (parseInt(value)) { |
|
case 1: |
|
return '订单已支付' |
|
case -1: |
|
return '订单支付失败' |
|
case 3: |
|
return '订单已支付' |
|
case 4: |
|
return '订单支付失败' |
|
case 0: |
|
return '订单待支付' |
|
default: |
|
return '订单待支付' |
|
} |
|
}, |
|
couponFormat(value) { |
|
if (value) { |
|
return value |
|
} else { |
|
return '未使用' |
|
} |
|
}, |
|
numberFormat(value) { |
|
if (value) { |
|
return value.toFixed(2) |
|
} |
|
}, |
|
invoiceStateFormat(value) { |
|
switch (parseInt(value)) { |
|
case 1: |
|
return '已申请' |
|
case 2: |
|
return '已开票' |
|
case -1: |
|
return '开票失败' |
|
case 0: |
|
return '未开票' |
|
default: |
|
return '' |
|
} |
|
} |
|
} |
|
} |
|
</script> |
|
<style scoped> |
|
/* 去付款弹窗 */ |
|
.popup-container p.title { |
|
padding: 16px 10px; |
|
} |
|
|
|
text.fr { |
|
float: right; |
|
} |
|
|
|
.icon-container { |
|
position: relative; |
|
} |
|
|
|
.icon-container .text-sl { |
|
position: absolute; |
|
margin-left: -64rpx; |
|
margin-top: -64rpx; |
|
z-index: 2; |
|
} |
|
</style>
|
|
|