473 lines
13 KiB
Vue
473 lines
13 KiB
Vue
<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>
|