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.
472 lines
13 KiB
472 lines
13 KiB
<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">¥{{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': |
|
return '其他' |
|
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>
|
|
|