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.
638 lines
15 KiB
638 lines
15 KiB
<template> |
|
<view class="details_body"> |
|
<view class="details_body_car"> |
|
<view class="details_body_car_lable"> |
|
<view class="sign"> |
|
<image style="width: 65%;height: 65%;" :src="details.siteImages"></image> |
|
</view> |
|
<view class="payLi felx justifyContent alignItems">{{details.payAccountType==0?'个人':'企业'}}</view> |
|
<view |
|
:style="{background:paymentStatus(details.orderStatus).bg,color:paymentStatus(details.orderStatus).color}" |
|
class="payment felx justifyContent alignItems">{{paymentStatus(details.orderStatus).text}}</view> |
|
</view> |
|
<view class="paymentInformation"> |
|
<view class=" flex"> |
|
<view></view> |
|
<view> |
|
<view class="Text"> |
|
{{details.siteName}} |
|
<uni-icons @click="copy(details.siteName)" style="margin-left: 10rpx;" color="#bbbbbb" |
|
custom-prefix="iconfont" type="iconfuzhi" size="20"></uni-icons> |
|
</view> |
|
<view class="smallText">{{details.siteId}}</view> |
|
</view> |
|
</view> |
|
<view style="margin:33rpx 0;" class="flex"> |
|
<view></view> |
|
<view> |
|
<view class="Text"> <text>{{details.customerName}}</text> <text |
|
style="margin-left:35rpx;">{{details.customerPhone}}</text> |
|
<uni-icons @click="copy(details.customerPhone)" style="margin-left: 10rpx;" color="#bbbbbb" |
|
custom-prefix="iconfont" type="iconfuzhi" size="20"></uni-icons> |
|
</view> |
|
<view class="smallText">{{details.customerId}}</view> |
|
</view> |
|
</view> |
|
<view class="flex"> |
|
<view></view> |
|
<view> |
|
<view class="Text">{{details.accountCardCode?details.accountCardCode:'暂无'}}</view> |
|
<view v-if="details.companyName" class="smallText">{{details.companyName}}</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="splitLine"> |
|
<view style="margin-left: -20rpx;" class="splitLineyuan"></view> |
|
<view class="Line"> |
|
<image src="@/static/line.png" style="width: 100%; height: 1px"></image> |
|
</view> |
|
<view style="margin-right: -20rpx;" class="splitLineyuan"></view> |
|
</view> |
|
<view style="padding: 0 43rpx;"> |
|
<view class="price felx"> |
|
<view> |
|
<view class="smallText">价格</view> |
|
<view class="bgtext">{{ details.realAmount}}<text style="position: relative;left: 20rpx;" |
|
class="Text">元</text> |
|
</view> |
|
</view> |
|
<view style="margin-left: 143rpx;"> |
|
<view class="smallText">升数</view> |
|
<view class="bgtext">{{details.volume}} <text style="position: relative;left: 20rpx;" |
|
class="Text">L</text> |
|
</view> |
|
</view> |
|
</view> |
|
<view style="margin-top: 45rpx;" class="felx"> |
|
<view class="olitype felx justifyContent alignItems Text">{{details.oilsCode}}</view> |
|
<view class="actualUnitPrice felx justifyContent alignItems"> |
|
<view> |
|
<view class="bgtext">{{details.realPrice}}</view> |
|
<view class="smallText">实际单价</view> |
|
</view> |
|
</view> |
|
<view class="actualUnitPrice felx justifyContent alignItems"> |
|
<view> |
|
<view class="bgtext">{{details.marketPrice}}</view> |
|
<view class="smallText">国际单价</view> |
|
</view> |
|
</view> |
|
<view class="actualUnitPrice felx justifyContent alignItems"> |
|
<view> |
|
<view class="bgtext">{{details.sitePrice}}</view> |
|
<view class="smallText">油站单价</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view v-if="details.orderWfStatus==0" @tap='codeFn' |
|
:style="{marginBottom:!moreOpen?'':'0',background:'#228B22'}" |
|
class="writeOff felx justifyContent alignItems ">待核销</view> |
|
<view v-else :style="{marginBottom:!moreOpen?'':'0',background:'#BBBBBB'}" |
|
class="writeOff felx justifyContent alignItems ">已核销</view> |
|
<view v-if="!moreOpen" @click="moreOpen=!moreOpen" |
|
class="moreButten felx justifyContent alignItems smallText "> |
|
更多信息&退款信息 |
|
<uni-icons :style="{transform:moreOpen?'rotate(180deg)':'rotate(0deg)',transition:'transform .3s' }" |
|
size="15" class="content-clear-icon" type="bottom" color="#c0c4cc"></uni-icons> |
|
</view> |
|
<view class="dxx" :style="{height:moreOpen?'265rpx':'0rpx'}"> |
|
<view class="splitLine"> |
|
<view style="margin-left: -20rpx;" class="splitLineyuan"></view> |
|
<view class="Line"> |
|
<image src="@/static/line.png" style="width: 100%; height: 1px"></image> |
|
</view> |
|
<view style="margin-right: -20rpx;" class="splitLineyuan"></view> |
|
</view> |
|
<view class="more"> |
|
<view @tap='moreOpen=false' style="display: flex; justify-content: space-between;" class="Text"> |
|
{{details.orderSerialNumber}} |
|
<uni-icons |
|
:style="{transform:moreOpen?'rotate(0deg)':'rotate(180deg)',transition:'transform .3s' }" |
|
size="15" class="content-clear-icon" type="top" color="#c0c4cc"></uni-icons> |
|
|
|
</view> |
|
<view style="margin-bottom:33rpx;" class="smallText">{{details.createTime}}</view> |
|
<view @tap="refund" v-if="!customerList.includes(details.createSource)" |
|
:style="{background:details.orderStatus==1?'':'#bbbbbb'}" |
|
class="refund felx justifyContent alignItems">退款</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="footerButten felx"> |
|
<view @click="copy(details.orderSerialNumber)" class="copyButten felx justifyContent alignItems">复制订单号 |
|
</view> |
|
<!-- <button class="forwardButten felx justifyContent alignItems" open-type="share">分享</button> --> |
|
</view> |
|
<popup :show='show' @confirmFn='confirmFn' @closeFn='closeFn' :butten='butten' |
|
:styles="{height:'350rpx',width:'350rpx'}" v-model="iShow.seting"> |
|
<view slot="coment"> |
|
<view |
|
style="height: 350rpx;display: flex;align-items: center; width: 100%;justify-content: center;flex-wrap: wrap;flex-direction: column;"> |
|
<view v-if="!details.secondChannelCode" |
|
style="width: 100%; font-size: 34rpx;text-align: center; margin-bottom: 15rpx;" |
|
class="smallText">核销二维码</view> |
|
<qrcode v-if="iShow.seting&&details.secondChannelCode" ref="qrcode" cid="2" loadMake iconSize="10" |
|
:val="details.secondChannelCode" unit="upx" background="#fff" foreground="#000" pdground="#000" |
|
onval @result="qrR" /> |
|
<view v-if="!details.secondChannelCode"> |
|
二维码生成错误 |
|
</view> |
|
</view> |
|
</view> |
|
</popup> |
|
|
|
</view> |
|
</template> |
|
|
|
<script> |
|
import orderList from '@/api/orderList' |
|
import qrcode from '@/components/tki-qrcode/tki-qrcode' |
|
import tool from '@/utils/tool.js' |
|
|
|
import serve from '@/api/orderList/orderDetails.js' |
|
export default { |
|
onShareAppMessage(res) { |
|
return { |
|
title: '订单详情', |
|
path: '/orderList/orderDetails/orderDetails' |
|
} |
|
}, |
|
components: { |
|
qrcode |
|
}, |
|
data() { |
|
return { |
|
customerList: ['HLL', 'FENGTU'], |
|
details: {}, |
|
show: { |
|
img: false, |
|
footer: false |
|
}, |
|
iShow: { |
|
seting: false |
|
}, |
|
moreOpen: false, |
|
val: '898989898', |
|
id: null, |
|
butten: { |
|
colse: '取消', |
|
confirm: '确定', |
|
coloseBg: '', |
|
coloseColor: '', |
|
confirmBg: '', |
|
confirmColor: '' |
|
}, |
|
refundMap: new Map([ |
|
[ |
|
['FUYOU'], { |
|
serveTarget: serve.fuyouRefund, |
|
type: 'post' |
|
} |
|
], |
|
[ |
|
['ZHIZHU', 'NEWHOPE', 'MUYUAN', 'G7CLUSTER-CAHNGJIU'], { |
|
serveTarget: serve.orderRefund, |
|
type: 'post' |
|
} |
|
], |
|
[ |
|
['SHUNFENG'], { |
|
serveTarget: serve.sfRefund, |
|
type: 'post' |
|
} |
|
], |
|
[ |
|
['ANNENG'], { |
|
serveTarget: serve.refund, |
|
type: 'get' |
|
} |
|
], |
|
[ |
|
['YIGUANYOU', 'ANTU'], { |
|
serveTarget: serve.unifiedRefund, |
|
type: 'post' |
|
} |
|
], |
|
]) |
|
} |
|
}, |
|
|
|
onLoad(e) { |
|
if (e.jsData) { |
|
console.log(JSON.parse(e.jsData)); |
|
this.id = JSON.parse(e.jsData).id |
|
this.getList(this.id) |
|
} |
|
// console.log('refundMap', this.refundMap) |
|
}, |
|
methods: { |
|
refundNew() { |
|
let { |
|
createSource, |
|
id |
|
} = this.details |
|
if (!createSource) { |
|
uni.showToast({ |
|
title: "未查询到该订单创建来源", |
|
icon: "none" |
|
}) |
|
return |
|
} |
|
let keys = this.refundMap.keys() |
|
let result = null |
|
for (let key of keys) { |
|
if (key.includes(createSource)) { |
|
result = this.refundMap.get(key) |
|
break |
|
} |
|
} |
|
if (result) { |
|
let { |
|
type, |
|
serveTarget |
|
} = result |
|
let params = type === 'post' ? { |
|
id, |
|
orderId: id |
|
} : id |
|
serveTarget(params).then(res => { |
|
if (res.code === 20000) { |
|
uni.showToast({ |
|
title: '退款成功', |
|
duration: 2000 |
|
}); |
|
setTimeout(() => { |
|
this.getList(id) |
|
}, 1000) |
|
} |
|
}) |
|
} else { |
|
orderList.refund({ |
|
id |
|
}).then(res => { |
|
if (res.code == 20000) { |
|
uni.showToast({ |
|
title: '退款成功', |
|
duration: 2000 |
|
}); |
|
setTimeout(() => { |
|
this.getList(id) |
|
}, 1000) |
|
} |
|
}) |
|
} |
|
}, |
|
codeFn() { |
|
if (this.details.orderWfStatus == 0) { |
|
orderList.getOrderQrCodeOms(this.details.orderSerialNumber).then(res => { |
|
if (res.code == 20000) { |
|
console.log(res) |
|
this.val = res.data.codeStr |
|
this.iShow.seting = true |
|
} else { |
|
uni.showToast({ |
|
title: res.msg, |
|
icon: 'none' |
|
}) |
|
} |
|
}) |
|
|
|
} else { |
|
this.iShow.seting = false |
|
} |
|
}, |
|
refund() { |
|
if (this.details.orderStatus !== 1) return; |
|
// let that = this |
|
uni.showModal({ |
|
title: '提示', |
|
content: '是否确认退款', |
|
success: (res) => { |
|
if (res.confirm) { |
|
this.refundNew() |
|
// orderList.refund({ |
|
// id: that.id |
|
// }).then(res => { |
|
// if (res.code == 20000) { |
|
// uni.showToast({ |
|
// title: '退款成功', |
|
// duration: 2000 |
|
// }); |
|
// setTimeout(() => { |
|
// that.getList(that.id) |
|
// }, 1000) |
|
// } |
|
// }) |
|
// console.log('用户点击确定'); |
|
} else if (res.cancel) { |
|
// console.log('用户点击取消'); |
|
} |
|
} |
|
}); |
|
}, |
|
paymentStatus(e) { |
|
switch (e) { |
|
case 0: |
|
return { |
|
text: '待支付', |
|
color: '#EBC153', |
|
bg: '#FFF6DD' |
|
} |
|
break; |
|
case 1: |
|
return { |
|
text: '已支付', |
|
color: '#17A00E', |
|
bg: '#D1FFDA' |
|
} |
|
break; |
|
case -1: |
|
return { |
|
text: '支付失败', |
|
color: '#EC4645', |
|
bg: '#FFC8C8' |
|
} |
|
break; |
|
case 2: |
|
return { |
|
text: '已取消', |
|
color: '#999999', |
|
bg: '#E9E9E9' |
|
} |
|
break; |
|
case 3: |
|
return { |
|
text: '已退款', |
|
color: '#999999', |
|
bg: '' |
|
} |
|
break; |
|
case 4: |
|
return { |
|
text: '退款中', |
|
color: '#EBC153', |
|
bg: '' |
|
} |
|
// return '退款中' |
|
break; |
|
case 5: |
|
return { |
|
text: '退款失败', |
|
color: '#EC4645', |
|
bg: '' |
|
} |
|
break; |
|
} |
|
}, |
|
getList(e) { |
|
orderList.findOrderDetails({ |
|
orderId: e |
|
}).then(res => { |
|
if (res.code !== 20000) return |
|
this.details = res.data; |
|
tool.numberSetting(this.details, ['realAmount', 'volume', 'realPrice', 'marketPrice', |
|
'sitePrice' |
|
], 2); |
|
}) |
|
}, |
|
qrR() { |
|
console.log('1') |
|
}, |
|
closeFn() { |
|
console.log('点击取消') |
|
}, |
|
confirmFn() { |
|
console.log('点击确定') |
|
}, |
|
share() { |
|
uni.share({ |
|
provider: "weixin", |
|
scene: "WXSceneTimeline", |
|
type: 1, |
|
summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！", |
|
success: function(res) { |
|
console.log("success:" + JSON.stringify(res)); |
|
}, |
|
fail: function(err) { |
|
console.log("fail:" + JSON.stringify(err)); |
|
} |
|
}); |
|
}, |
|
copy(text) { |
|
uni.setClipboardData({ |
|
data: `${text}`, |
|
// data: `订单ID:${this.details.id}\n订单流水号:${this.details.orderSerialNumber}\n订单金额:${this.details.realAmount}元\n订单升数:${this.details.volume}升\n订单类型:${this.details.payAccountType==0?'个人':'企业'}\n司机姓名:${this.details.customerName}\n司机id:${this.details.customerId} ${this.details.companyName?'\n订单所属公司:' + this.details.companyName :''}\n手机号码:${this.details.customerPhone}`, //要被复制的内容 |
|
// ${(this.details.payAccountType==0?'司机姓名':'订单所属公司') + ':' + (this.details.payAccountType==0? this.details.customerName:this.details.companyName)} |
|
success: () => { //复制成功的回调函数 |
|
uni.showToast({ //提示 |
|
title: '复制成功' |
|
}) |
|
} |
|
}); |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style> |
|
.copyButten { |
|
flex: 1; |
|
height: 76rpx; |
|
background: #2866FF; |
|
border-radius: 10rpx; |
|
margin-right: 19rpx; |
|
} |
|
|
|
.forwardButten { |
|
flex: 1; |
|
height: 76rpx; |
|
background: #28C445; |
|
border-radius: 10rpx; |
|
color: #FFFFFF; |
|
font-size: 32rpx; |
|
} |
|
|
|
.footerButten { |
|
padding: 0 43rpx; |
|
font-size: 32rpx; |
|
color: #FFFFFF; |
|
margin: 43rpx 0; |
|
} |
|
|
|
.dxx { |
|
transition: all .3s; |
|
overflow: hidden; |
|
} |
|
|
|
.refund { |
|
height: 76rpx; |
|
width: 308rpx; |
|
background: #EC4645; |
|
border-radius: 10rpx; |
|
color: #FFFFFF; |
|
font-size: 32rpx; |
|
margin: 0 auto; |
|
} |
|
|
|
.more { |
|
padding: 0 43rpx; |
|
} |
|
|
|
.moreButten { |
|
height: 67rpx; |
|
background: #F0F0F0; |
|
margin: 0 43rpx; |
|
border-radius: 10rpx; |
|
} |
|
|
|
.writeOff { |
|
height: 92rpx; |
|
background: #2866FF; |
|
border-radius: 10rpx; |
|
font-size: 32rpx; |
|
margin: 37rpx 43rpx; |
|
color: #FFFFFF; |
|
font-weight: 500; |
|
} |
|
|
|
.bgtext { |
|
font-size: 38rpx; |
|
font-family: PingFang SC; |
|
font-weight: bold; |
|
color: #EC4645; |
|
} |
|
|
|
.actualUnitPrice { |
|
width: 160rpx; |
|
height: 108rpx; |
|
background: #F4F4F4; |
|
margin-left: 19rpx; |
|
text-align: center; |
|
} |
|
|
|
.olitype { |
|
width: 67rpx; |
|
height: 108rpx; |
|
background: #F4F4F4; |
|
} |
|
|
|
.price { |
|
padding-left: 80rpx; |
|
} |
|
|
|
.Line { |
|
position: relative; |
|
width: calc(100% - 100rpx); |
|
height: 100%; |
|
display: flex; |
|
align-items: center; |
|
} |
|
|
|
.splitLineyuan { |
|
width: 45rpx; |
|
height: 45rpx; |
|
border-radius: 50%; |
|
background-color: #F0F2FF; |
|
} |
|
|
|
.splitLine { |
|
height: 45rpx; |
|
display: flex; |
|
justify-content: space-between; |
|
position: relative; |
|
margin: 20rpx 0; |
|
} |
|
|
|
.Text { |
|
font-size: 28rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #333333; |
|
} |
|
|
|
.smallText { |
|
font-size: 24rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #BBBBBB; |
|
} |
|
|
|
.paymentInformation { |
|
padding-top: 140rpx; |
|
padding-left: 35rpx; |
|
padding-right: 35rpx; |
|
} |
|
|
|
.details_body_car_lable .payment { |
|
width: 160rpx; |
|
height: 48rpx; |
|
background: #D1FFDA; |
|
color: #17A00E; |
|
font-size: 30rpx; |
|
position: absolute; |
|
right: 46rpx; |
|
} |
|
|
|
.justifyContent { |
|
justify-content: center; |
|
} |
|
|
|
.alignItems { |
|
align-items: center; |
|
} |
|
|
|
.felx { |
|
display: flex; |
|
} |
|
|
|
.details_body_car_lable .payLi { |
|
width: 100rpx; |
|
height: 44rpx; |
|
background: #2866FF; |
|
border-radius: 0px 0px 12rpx 12rpx; |
|
color: #FFFFFF; |
|
margin-left: 51rpx; |
|
|
|
} |
|
|
|
.details_body_car_lable .sign { |
|
width: 140rpx; |
|
height: 140rpx; |
|
background: #FFFFFF; |
|
box-shadow: 0px 5px 5px 0px rgba(88, 88, 88, 0.18); |
|
border-radius: 50%; |
|
top: -50rpx; |
|
position: relative; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
|
|
.details_body_car_lable { |
|
width: 100%; |
|
position: absolute; |
|
top: 0; |
|
display: flex; |
|
padding: 0 46rpx; |
|
} |
|
|
|
.details_body_car { |
|
width: 100%; |
|
/* height: 1003rpx; */ |
|
background-color: #FFFFFF; |
|
border-radius: 20rpx; |
|
position: relative; |
|
/* box-shadow: 0px 5px 5px 0px rgba(88, 88, 88, 0.18); */ |
|
padding-bottom: 63rpx; |
|
|
|
} |
|
|
|
.details_body { |
|
padding: 0 31rpx; |
|
padding-top: 65rpx; |
|
width: 100vw; |
|
height: 100vh; |
|
overflow: auto; |
|
} |
|
</style>
|
|
|