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.

473 lines
13 KiB

2 years ago
<template>
<view>
<cu-custom class="main-totextbar bg-main-oil" :isPay='true' :isBack="true" bgColor="bg-main-oil">
<block slot="backText">返回</block>
<block slot="content">订单支付结果</block>
</cu-custom>
<!-- <view class="bg-main-oil padding-bottom">
<view class="text-center text-bold text-xl padding-xl">
{{order.orderState|statusConduct}}
</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>壳牌 {{test}} {{tsets}}</text>
</view>
<view class="text-center padding-top text-sm margin-bottom">
提示该二维码每隔3分钟自动刷新一次
</view>
</view>
<view class="move-top bg-white radius my-shadow solid-top margin margin-top-0">
<!-- <view class=" text-center padding-sm margin-bottom-sm" v-if="status=='success'">
请提醒加油员使用
<text class="oil-main-color">星油云站</text>
进行订单核实
</view> -->
<view class="padding">
<view class="text-center text-xl padding-xl">
{{order.orderState|statusConduct}}
</view>
<view class="text-center text-xl padding-xl text-red" style="padding-top: 10rpx;">
{{order.realAmount?order.realAmount:order.oldRealAmount?order.oldRealAmount:'0'}}
</view>
<view class="text-center text-xl padding-xl dashed-bottom" style="display: flex;align-items: center;justify-content: space-around;padding-bottom: 45rpx;" v-if="order.haveRefund == '1'">
<view class="text-center-balance">
<text>原金额</text>
</br>
<text>{{order.oldRealAmount}}</text>
</view>
<view class="">
-
</view>
<view class="text-center-balance">
<text>退款金额</text>
</br>
<text>{{order.refundAmount}}</text>
</view>
</view>
<view class="padding-tb-xs text-left padding-top" style="margin-top: 10px;">
站点/商家
<text class="fr nowrap">
{{order.siteName}} </text>
</view>
<view class="padding-tb-xs text-left">
站点类型
<text class="fr">{{order.formats == '1'?'加注机':'桶装'}}</text>
</view>
<view class="" v-if="dataList.formats == '1'">
<view class="padding-tb-xs text-left">
加注量
<text class="fr">{{order.oldRealLiter}}</text>
</view>
<view class="padding-tb-xs text-left">
实际加注量
<text class="fr">{{order.realLiter?order.realLiter:'0'}}</text>
</view>
<view class="padding-tb-xs text-left">
单价
<text class="fr">{{order.realPrice?order.realPrice:'0'}}/L</text>
</view>
</view>
<view class="" v-if="order.xoilUreaOrderRelations != ''">
<view class="padding-tb-xs text-left">
加注明细
</view>
<view class="formats_box">
<view class="formats_box_list" v-for="(list,index) in order.xoilUreaOrderRelations" :key='index'>
<view class="formats_box_list_left w30">
{{list.brandName}}
</view>
<view class="formats_box_list_main w30">{{list.options}}/<text style="color: red;">X{{list.goodsQuantity}}</text> </view>
<view class="formats_box_list_right w30">&#165;{{list.totalPrice}}</view>
</view>
</view>
</view>
<view class="padding-tb-xs text-left">
支付金额
<text
class=" fr">{{order.oldRealAmount?order.oldRealAmount:'0'}}</text>
</view>
<view class="padding-tb-xs text-left">
实际金额支付
<text class="text-red fr">{{order.realAmount?order.realAmount:'0'}}</text>
</view>
<view class="padding-tb-xs text-left">
支付方式
<text
class="text-red fr">{{order.payStyle|payStyleList}}</text>
</view>
<view class="padding-tb-xs text-left">
司机信息
<text class=" fr">{{order.driverName}}-{{order.driverPhone}}</text>
</view>
<view class="padding-tb-xs text-left" v-if='order.formats != "2"'>
加油车牌
<text class=" fr">{{order.vehicleNo}}</text>
</view>
<view class="padding-tb-xs text-left">
油卡类型
<text class=" fr">{{order.oilCardNature |oilCardNatureName }}</text>
</view>
</view>
</view>
<view class="move-top bg-white radius my-shadow solid-top margin margin-top-0">
<view class="padding">
<view class="">
<view class="padding-tb-xs text-left">
交易订单
<text class=" fr">{{order.orderId}}</text>
</view>
</view>
<view class="padding-tb-xs text-left">
交易时间
<text class=" fr">{{order.createTime}}</text>
</view>
</view>
</view>
<view class="padding bg-white ">
<!-- <view class="flex margin-bottom" v-if="order.orderStatus==0">
<button class="cu-btn block flex-sub lg bg-main-oil "
@tap="makePay">立即支付</button>
<button class="cu-btn block flex-sub lg margin-left"
@tap="cancelOrder">取消订单</button>
</view> -->
<view class="cu-btn bg-white oil-main-color block flex-sub lg" @click="makeCall">
<text class="cuIcon-service padding-right-sm">联系客服</text>
</view>
<view class="padding ">
<view class=" margin-bottom" v-if="order.orderState == '0'">
<button class="cu-btn block flex-sub margin-bottom-sm lg bg-main-oil "
@tap="makePay">立即支付</button>
<button class="cu-btn block flex-sub lg "
@tap="cancelOrder">取消订单</button>
</view>
</view>
<!-- <button class=" cu-btn bg-white oil-main-color block flex-sub lg " open-type="contact"><text class="cuIcon-service padding-right-sm"></text> 在线客服</button> -->
<!-- <button class="cu-btn block lg margin-top " @tap="delOrder">删除订单</button> -->
</view>
</view>
</template>
<script>
import orderApi from '@/api/oil-order.js'
import tkiQrcode from "../pages/components/tki-qrcode/tki-qrcode.vue" //二维码生成器
import oilSiteApi from '@/api/oil-site.js'
import ureaFinanceApi from '../../api/urea_finance.js'
export default {
data() {
return {
showQr:false,
val:'',
id: '',
test:null,
tsets:'',
order:{} ,
dataList:{}
}
},
onShareAppMessage(res) {
return {
title: '订单' + this.order.orderSerialNumber,
path: `/BagStation/orderDetail/orderDetail?id=${this.order.orderSerialNumber}`,
imageUrl: 'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/login-bg.png',
desc: '加油超便宜',
content: 'this.share.content',
success(res) {
uni.showToast({
title: '分享成功'
})
},
fail(res) {
uni.showToast({
title: '分享失败',
icon: 'none'
})
}
}
},
components:{
tkiQrcode
},
methods: {
// 拨打电话
makeCall() {
uni.makePhoneCall({
phoneNumber: '4008-56-5355' //仅为示例
})
},
// newQrString() {
// this.getOrderQrCode()
// },
// getOrderQrCode(){
// oilSiteApi.getOrderQrCode(this.order.orderSerialNumber).then( (res)=>{
// console.log(res)
// this.val = res.data
// if(res.code == 40000){
// this.showQr = false
// }else if(res.code == 20000){
// this.showQr = true
// this.val =res.data.codeStr
// }
// } )
// },
onCopy(id) {
uni.setClipboardData({
data: id,
success: () => {
uni.showToast({
icon: 'none',
title: '订单号复制成功'
})
}
})
},
getOrderInfo(info) {
console.log(info)
if(info =='1'){
orderApi.findOneByOrderId(this.orderId).then(res => {
console.log(res)
if (res.code == 20000) {
// uni.setStorageSync('oilItem', res.data)
this.dataList = res.data
this.order = res.data
}
})
}else if(info == '2'){
console.log(this.dataList.orderId,'this.dataList.orderId')
orderApi.queryBarrelOrderDetails(this.orderId).then(res => {
if (res.code == 20000) {
// uni.setStorageSync('oilItem', res.data)
this.order = res.data
console.log(res.data)
}
})
}
},
cancelOrder() {
ureaFinanceApi.cancelTheOrder(this.dataList.orderId).then(res => {
console.log(res)
if (res.code == 20000) {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 1000
})
setTimeout(() => {
uni.navigateBack()
}, 1000)
}
})
},
makePay() {
uni.setStorageSync('ureaOrderMade',this.order)
uni.navigateTo({
url: '/BagStation/pages/makeOrder/orderPaying?type=urea'
})
},
delOrder() {
orderApi.delOrder(this.id).then(res => {
if (res.code == 20000) {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 1000
})
setTimeout(() => {
uni.switchTab({
url: '/pages/tabbar/home/home'
})
}, 1000)
}
})
}
},
onLoad(option) {
// console.log(JSON.parse(option.data))
let options =option
console.log(options)
if(options){
if(options.type == 'orderList'){
this.dataList= JSON.parse(option.data)
let options = JSON.parse(option.data)
this.test = options.id
this.orderId = options.orderId
this.tsets = options.name
this.typeFor = options.formats
this.getOrderInfo( options.formats)
} else if(options.type == 'orderPay'){
let info = uni.getStorageSync('ureaOrderMade')
this.test = info.id
this.orderId = info.orderId
this.tsets = info.name
this.getOrderInfo(info.formats)
} else{
this.dataList= JSON.parse(option.data)
let options = JSON.parse(option.data)
console.log('++++++++++++++++++',options.data,this.dataList)
this.test = options.id
this.orderId = options.orderId
this.tsets = options.name
this.typeFor = options.formats
this.getOrderInfo( options.formats)
}
}
},
filters: {
payStyleList(value){
if(value){
switch (value) {
case '0':
return '个人微信支付'
case '1':
return '个人支付宝支付'
case '2':
return '个人余额支付'
case '3':
return '企业余额支付'
}
}
},
statusConduct(value) {
// 备注:订单状态 0:待支付, 1:已支付 ,-1:支付失败 ,2:已取消,3:已退款
// switch value
// case "0"
// return '待支付'
console.log(value,'打印value')
switch (value) {
case '0':
return '订单待支付'
case '1':
return '订单已支付'
case '-1':
return '订单支付失败'
case '2':
return '订单已取消'
case '3':
return '订单已退款'
case '4':
return '退款中'
case '5':
return '已退款'
case '9':
return '支付成功'
}
},
oilCardNatureF(value) {
// 备注 油卡性质 1:个人 2:企业 3:外请
// switch value
// case "0"
// return '待支付'
switch (value + '') {
case '1':
return '个人'
case '2':
return '企业'
case '3':
return '外请'
}
},
oilCardNatureName(value){
if(value == '0' ){
return '外请'
}else if(value == '1' ){
return '自营'
}
},
channelCodeFamt(value) {
if (value) {
// 渠道编码 ( XOIL:星油 WJY:万金油 LV:老吕(找油网) TY:团油 YDJY:一点加油(壳牌))
switch (value) {
case 'XOIL':
return '星油'
case 'WJY':
return '万金油'
case 'LV':
2 years ago
return '其他'
2 years ago
case 'TY':
return '团油'
case 'YDJY':
return '一点加油(壳牌)'
}
}
},
}
}
</script>
<style scoped>.move-tops{
transform: translateY(-17px);
}
.w30{
width: 30%;
flex: 0 0 auto;
text-align: center;
font-weight: 700;
font-size: 28rpx;
}
.formats_box{
display: flex;
justify-content: space-between;
align-items: center;
padding: 2%;
box-sizing: border-box;
flex-direction: column;
}
.formats_box_list{
display: flex;
justify-content: space-around;
align-items: center;
margin-bottom: 3%;
font-size: 30rpx;
color: #333;
align-items: center;
width: 100%;
}
.bg-red{
background-color: #FF6700;
}
.text-centers {
text-align: center;
width: 90%;
margin: 0 auto;
border-radius: 7px;
overflow: hidden;
}
.move-top {
margin-top: 1rem;
}
.padding-xl{
padding: 20rpx 0 0;
}
.text-center-balance{
width: 150rpx;
}
.text-center-balance text:last-child{
color: #000000;
margin-top: 10px;
display: block;
}
.formats2{
display: flex;
justify-content: space-between;
margin: 10px 0;
padding-left: 50px;
}
</style>