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.
725 lines
16 KiB
725 lines
16 KiB
<template> |
|
<view class="details_body"> |
|
<view class="details_body_car"> |
|
<view class="paymentInformation"> |
|
<view class="paymentInformation_top"> |
|
<view class="felx jw"> |
|
<text style="font-size: 24rpx;" |
|
class="paymentInformation_item_label">{{details.id||'--'}}</text> |
|
<view :style="{background:typeBackground(details.auditMark),color:typeColor(details.auditMark)}" |
|
class="listCard_header_Type"> |
|
<view :style="{background:typeColor(details.auditMark)}" class="garden"></view> |
|
<text>{{details.auditMark|typeText}}</text> |
|
</view> |
|
</view> |
|
<view |
|
:style="{color: transactionType(details.transactionType).color,background:transactionType(details.transactionType).bg}" |
|
class="genres">{{ transactionType(details.transactionType).text}}</view> |
|
<!-- <view class="felx ac"> |
|
<text class="companyTag_label">充值</text> |
|
<view v-if="details.createSource=='WECHAT_COMPANY'" class="companyTag">企业微信</view> |
|
<view v-if="details.operationCode!==null" style="background-color: #ff4949;" class="companyTag"> |
|
紧急充值</view> |
|
</view> --> |
|
</view> |
|
<view class="paymentInformation_footer felx an jw"> |
|
<view class="oilInformation "> |
|
<view class="paymentInformation_item_value">{{details.siteChannelAccountName||'--'}}</view> |
|
<view class="companyTag_label">{{details.siteChannelAccountId||'--'}}</view> |
|
</view> |
|
<view class="price">{{details.transactionAmount||'---'}}</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 class="paymentInformation"> |
|
<view class="paymentInformation_selector felx jc"> |
|
<view class="selector_item">油站公司信息</view> |
|
</view> |
|
<view class="paymentInformation_container"> |
|
<view class="paymentInformation_item"> |
|
<view class="paymentInformation_item_value">{{details.sepCompanyName||'--'}}</view> |
|
<view class="paymentInformation_item_label">{{details.sepCompanyId||'--'}}</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view @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="{maxHeight:moreOpen?'999rpx':'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" style="flex: 1; display: flex;flex-direction: column;overflow: hidden;"> |
|
<view style="flex: 1;overflow: auto;" class="paymentInformation_container"> |
|
<view class="paymentInformation_item"> |
|
<view class="paymentInformation_item_value"> |
|
{{details.createUserName||'--'}}({{details.createUser||'--'}}) |
|
</view> |
|
<view class="paymentInformation_item_label">创建用户</view> |
|
</view> |
|
<view class="paymentInformation_item"> |
|
<view class="paymentInformation_item_value"> |
|
{{details.createTime||'--'}} |
|
</view> |
|
<view class="paymentInformation_item_label">创建时间</view> |
|
</view> |
|
<view class="paymentInformation_item"> |
|
<view class="paymentInformation_item_value"> |
|
{{details.updateUserName||'--'}}({{details.updateUser||'--'}}) |
|
</view> |
|
<view class="paymentInformation_item_label">更新用户</view> |
|
</view> |
|
<view class="paymentInformation_item"> |
|
<view class="paymentInformation_item_value"> |
|
{{details.updateTime||'--'}} |
|
</view> |
|
<view class="paymentInformation_item_label">更新时间</view> |
|
</view> |
|
<view class="paymentInformation_item"> |
|
<view class="paymentInformation_item_value"> |
|
{{details.createSource||'--'}}/{{details.updateSource||'--'}} |
|
</view> |
|
<view class="paymentInformation_item_label">创建数据来源 / 更新数据来源</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="footerButten felx"> |
|
<view @click="goBack" class="backButten felx justifyContent alignItems">返回</view> |
|
<button v-if="details.auditMark==0" @click="iShow.examine = true" |
|
class="forwardButten felx justifyContent alignItems">审核</button> |
|
</view> |
|
<popup :butten='butten' @confirmFn='confirmFn' @closeFn='closeFn' :show="show" v-model="iShow.examine"> |
|
<view slot="coment"> |
|
<view class="popup_coment"> |
|
立即进行审核 |
|
</view> |
|
</view> |
|
</popup> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import oilAccount from '@/api/oilAccount' |
|
|
|
import tool from '@/utils/tool.js' |
|
export default { |
|
onShareAppMessage(res) { |
|
return { |
|
title: '订单详情', |
|
path: '/orderList/orderDetails/orderDetails' |
|
} |
|
}, |
|
components: {}, |
|
data() { |
|
return { |
|
user: uni.getStorageSync('user'), |
|
selector: 0, |
|
details: {}, |
|
show: { |
|
img: false, |
|
footer: true |
|
}, |
|
iShow: { |
|
examine: false, |
|
seting: false |
|
}, |
|
moreOpen: false, |
|
val: '898989898', |
|
modifyShow: { |
|
|
|
}, |
|
butten: { |
|
colse: '审核失败', |
|
confirm: '审核成功', |
|
coloseBg: '#EC4645', |
|
coloseColor: '#FFFFFF', |
|
confirmBg: '#17A00E', |
|
confirmColor: '#FFFFFF', |
|
borderRadius: '30rpx' |
|
}, |
|
} |
|
}, |
|
onLoad(e) { |
|
if (e.data) { |
|
this.details = JSON.parse(e.data); |
|
tool.numberSetting(this.details, ['transactionAmount'], 2) |
|
} |
|
}, |
|
filters: { |
|
typeText: function(e) { |
|
switch (Number(e)) { |
|
case 0: |
|
return '等待审核' |
|
case 1: |
|
return '审核通过' |
|
case -1: |
|
return '审核失败' |
|
case 2: |
|
return '等待付款' |
|
case 3: |
|
return '付款完成' |
|
case 4: |
|
return '取消充值' |
|
default: |
|
return '---' |
|
} |
|
}, |
|
|
|
}, |
|
methods: { |
|
transactionType(e) { |
|
switch (e) { |
|
case 'RECHARGE': |
|
return { |
|
text: '充值', |
|
color: '#666666', |
|
bg: 'rgba(102, 102, 102, 0.1)' |
|
} |
|
case 'RECHARGE_REBETE': |
|
return { |
|
text: '折返', |
|
color: '#9F43CC', |
|
bg: 'rgba(159, 67, 204, 0.1)' |
|
} |
|
case 'CONSUME_REBATE': |
|
return { |
|
text: '折返', |
|
color: '#9F43CC', |
|
bg: 'rgba(159, 67, 204, 0.1)' |
|
} |
|
case 'DISPATCH': |
|
return { |
|
text: '调拨', |
|
color: '#2866FF', |
|
bg: 'rgba(40, 102, 255, 0.1)' |
|
} |
|
case 'CALLBACK': |
|
return { |
|
text: '回拨', |
|
color: '#FF6700', |
|
bg: 'rgba(255, 103, 0, 0.1)' |
|
} |
|
case 'TURN': |
|
return { |
|
text: '圈回', |
|
color: '#EC4545', |
|
bg: 'rgba(236, 69, 69, 0.1)' |
|
} |
|
default: |
|
return { |
|
text: '---', |
|
color: '#666666', |
|
bg: 'rgba(102, 102, 102, 0.1)' |
|
} |
|
} |
|
}, |
|
goBack() { |
|
uni.navigateBack() |
|
}, |
|
examine(auditMark, auditRemark = '') { |
|
let data = { |
|
auditMark: auditMark, |
|
auditRemark: auditRemark, |
|
id: this.details.id, |
|
updateSource: "OMS-MINIAPP" |
|
} |
|
oilAccount.auditAccount(data).then(res => { |
|
if (res.code == 20000) { |
|
uni.showToast({ |
|
title: '操作成功', |
|
icon: 'success' |
|
}); |
|
this.iShow.examine = false; |
|
this.getDetails() |
|
} |
|
}) |
|
}, |
|
carSegmentation(e, w) { |
|
if (!e) return '数据错误'; |
|
let splitString = e.split('/') |
|
switch (w) { |
|
case 'companyName': |
|
return splitString[0] |
|
case 'bankName': |
|
return splitString[1].split('(')[0] |
|
case 'bankNumber': |
|
return splitString[1].split('(')[1].replace(')', ' ') |
|
} |
|
|
|
}, |
|
typeColor: function(e) { |
|
switch (Number(e)) { |
|
case 0: |
|
return '#E8CD30' |
|
case 1: |
|
return '#17A00E' |
|
case -1: |
|
return '#EC4545' |
|
case 2: |
|
return '#ffffff' |
|
case 3: |
|
return '#ffffff' |
|
case 4: |
|
return '#ffffff' |
|
default: |
|
return '' |
|
} |
|
}, |
|
typeBackground: function(e) { |
|
switch (Number(e)) { |
|
case 0: |
|
return '#E8CD3026' |
|
case 1: |
|
return '#17A00E26' |
|
case -1: |
|
return '#EC454526' |
|
case 2: |
|
return '#ffba00' |
|
case 3: |
|
return '#13ce66' |
|
case 4: |
|
return '#ff4949' |
|
default: |
|
return '' |
|
} |
|
}, |
|
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() { |
|
console.log('-----------------') |
|
}, |
|
getDetails(e) { |
|
oilAccount.detailsTheQuery(this.details.id).then(res => { |
|
if (res.code !== 20000) return |
|
this.details = res.data |
|
tool.numberSetting(this.details, ['transactionAmount'], 2) |
|
}) |
|
}, |
|
qrR() { |
|
console.log('1') |
|
}, |
|
closeFn() { |
|
this.examine(-1) |
|
console.log('点击取消') |
|
}, |
|
confirmFn() { |
|
this.examine(1) |
|
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> |
|
.garden { |
|
background-color: #E8CD30; |
|
border-radius: 50%; |
|
width: 20rpx; |
|
height: 20rpx; |
|
margin-right: 16rpx; |
|
} |
|
|
|
.showProof { |
|
margin-top: 20rpx; |
|
color: #2866FF; |
|
font-size: 28rpx; |
|
} |
|
|
|
.garden { |
|
background-color: #E8CD30; |
|
border-radius: 50%; |
|
width: 20rpx; |
|
height: 20rpx; |
|
margin-right: 16rpx; |
|
} |
|
|
|
.listCard_header_Type { |
|
background: rgba(232, 205, 48, 0.15); |
|
border-radius: 40rpx; |
|
color: #E8CD30; |
|
/* padding: 10rpx 20rpx; */ |
|
font-size: 24rpx; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
Width: |
|
180rpx; |
|
Height: |
|
54rpx; |
|
} |
|
|
|
.paymentInformation_item_value { |
|
color: #666666; |
|
font-size: 28rpx; |
|
} |
|
|
|
.companyTag_label { |
|
color: #BBBBBB; |
|
font-size: 28rpx; |
|
} |
|
|
|
.companyTag { |
|
font-size: 20rpx; |
|
padding: 5rpx 20rpx; |
|
background-color: #18BC37; |
|
color: #FFFFFF; |
|
border-radius: 20rpx; |
|
margin-left: 15rpx; |
|
} |
|
|
|
.ac { |
|
align-items: center; |
|
} |
|
|
|
.paymentInformation_item_label { |
|
color: #BBBBBB; |
|
font-size: 20rpx; |
|
} |
|
|
|
.popup_coment { |
|
padding: 80rpx; |
|
text-align: center; |
|
font-size: 35rpx; |
|
color: #666666; |
|
} |
|
|
|
.backButten { |
|
background: #ADCEFF; |
|
border-radius: 22rpx; |
|
width: 364rpx; |
|
color: #FFFFFF; |
|
font-size: 30rpx; |
|
} |
|
|
|
.paymentInformation_item:last-child { |
|
margin-bottom: 0; |
|
} |
|
|
|
.paymentInformation_item { |
|
margin-bottom: 20rpx; |
|
} |
|
|
|
.paymentInformation_container { |
|
padding-top: 40rpx; |
|
} |
|
|
|
.on_selector_item { |
|
font-size: 28rpx; |
|
color: #fFFFFF; |
|
width: 180rpx; |
|
height: 60rpx; |
|
background: #ADCEFF; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
border-radius: 20rpx; |
|
} |
|
|
|
.selector_item { |
|
font-size: 28rpx; |
|
color: #BBBBBB; |
|
width: 180rpx; |
|
height: 60rpx; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
border-radius: 20rpx; |
|
} |
|
|
|
.paymentInformation_footer { |
|
margin-top: 40rpx; |
|
} |
|
|
|
.an { |
|
align-items: flex-end; |
|
} |
|
|
|
.jw { |
|
justify-content: space-between; |
|
} |
|
|
|
.jc { |
|
justify-content: center; |
|
} |
|
|
|
.copyButten { |
|
flex: 1; |
|
height: 76rpx; |
|
background: #2866FF; |
|
border-radius: 10rpx; |
|
margin-right: 19rpx; |
|
} |
|
|
|
.forwardButten { |
|
width: 260rpx; |
|
height: 80rpx; |
|
background: #FF4A4A; |
|
border-radius: 22rpx; |
|
color: #FFFFFF; |
|
font-size: 30rpx; |
|
margin: 0; |
|
} |
|
|
|
.footerButten { |
|
/* padding: 0 43rpx; |
|
font-size: 32rpx; |
|
color: #FFFFFF; |
|
margin: 43rpx 0; */ |
|
width: 100vw; |
|
position: fixed; |
|
height: 80rpx; |
|
left: 0; |
|
bottom: env(safe-area-inset-bottom); |
|
justify-content: space-around; |
|
} |
|
|
|
.dxx { |
|
transition: all 1s; |
|
overflow: hidden; |
|
display: flex; |
|
flex-direction: column; |
|
} |
|
|
|
.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; |
|
margin-top: 40rpx; |
|
} |
|
|
|
.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; |
|
} |
|
|
|
.genres { |
|
width: 88rpx; |
|
height: 40rpx; |
|
font-size: 24rpx; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
margin-bottom: 10rpx; |
|
} |
|
|
|
.price { |
|
/* padding-left: 80rpx; */ |
|
font-size: 48rpx; |
|
font-weight: 600; |
|
color: #666666; |
|
} |
|
|
|
.Line { |
|
position: relative; |
|
width: calc(100% - 100rpx); |
|
height: 100%; |
|
display: flex; |
|
align-items: center; |
|
} |
|
|
|
.splitLineyuan { |
|
width: 45rpx; |
|
height: 45rpx; |
|
border-radius: 50%; |
|
background-color: #2866FF; |
|
} |
|
|
|
.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: 0 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; */ |
|
padding: 35rpx 0; |
|
margin-bottom: calc(env(safe-area-inset-bottom) + 90rpx); |
|
|
|
} |
|
|
|
.details_body { |
|
padding: 0 31rpx; |
|
/* padding-bottom: 90rpx; */ |
|
width: 100vw; |
|
height: 100vh; |
|
overflow: auto; |
|
background-color: #2866FF; |
|
} |
|
</style>
|
|
|