639 lines
15 KiB
Vue
639 lines
15 KiB
Vue
<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(() => {
|
||
that.getList(id)
|
||
}, 1000)
|
||
}
|
||
})
|
||
} else {
|
||
orderList.refund({
|
||
id
|
||
}).then(res => {
|
||
if (res.code == 20000) {
|
||
uni.showToast({
|
||
title: '退款成功',
|
||
duration: 2000
|
||
});
|
||
setTimeout(() => {
|
||
that.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>
|