Files
wx_oms/oilAccount/page/companyRecharge/details.vue
2023-03-14 15:39:40 +08:00

763 lines
19 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<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 class="felx ac">
<text class="companyTag_label">充值</text>
<view v-if="details.createSource=='WECHAT_COMPANY'" class="companyTag">企业微信</view>
<view v-if="details.operationCode!==null&&details.operationCode!==undefined" 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.companyName||'--'}}</view>
<view class="companyTag_label">{{details.companyGscode||'--'}}</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 @click="selector=0" :class=" selector==0?'on_selector_item':'selector_item'">付款信息</view>
<view @click="selector=1" :class=" selector==1?'on_selector_item':'selector_item'">收款信息</view>
</view>
<view class="paymentInformation_container">
<view v-if="selector==0" class="paymentInformation_item">
<view class="paymentInformation_item_value">{{details.companyNamePayment||'--'}}</view>
<view class="paymentInformation_item_label">付款公司名称</view>
</view>
<view v-if="selector==0" class="paymentInformation_item">
<view class="paymentInformation_item_value">{{details.paymentBankCardNo||'--'}}</view>
<view class="paymentInformation_item_label">{{details.paymentBankCardName||'--'}}</view>
<view @click="showImg(details.transactionProof)" :style="{color:details.transactionProof?'':'#bbbbbb'}" class="showProof"> {{details.transactionProof?'查看凭证':'暂无凭证'}} </view>
</view>
<view v-if="selector==1" class="paymentInformation_item">
<view class="paymentInformation_item_value">{{details.companyName||'--'}}</view>
<view class="paymentInformation_item_label">收款公司名称</view>
</view>
<view v-if="selector==1" class="paymentInformation_item">
<view class="paymentInformation_item_value">{{details.bankCardName||'--'}}</view>
<view class="paymentInformation_item_label">收款账户名称</view>
</view>
<view v-if="selector==1" class="paymentInformation_item">
<view class="paymentInformation_item_value">{{details.bankName||'--'}}</view>
<view class="paymentInformation_item_label">开户行名称</view>
</view>
<view v-if="selector==1" class="paymentInformation_item">
<view class="paymentInformation_item_value">{{details.interBankCode||'--'}}</view>
<view class="paymentInformation_item_label">联行号</view>
</view>
<view v-if="selector==1" class="paymentInformation_item">
<view class="paymentInformation_item_value">{{details.bankCardNo||'--'}}</view>
<view class="paymentInformation_item_label">银行卡号</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 @tap='moreOpen=false' style="display: flex; justify-content: space-between;" class="Text">
<view style="margin: 0 auto;" class="felx jc">其他信息</view>
<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="flex: 1;overflow: auto;" class="paymentInformation_container">
<view class="paymentInformation_item">
<view class="paymentInformation_item_value">
{{details.transactionTimeStart||'--'}}/{{details.transactionTimeEnd||'--'}}</view>
<view class="paymentInformation_item_label">交易发起时间 / 交易完成时间</view>
</view>
<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&&user.authList.includes('sys:company:rechargeAudit')" @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>
<uni-popup ref="popup" type="center">
<view style=" padding: 0 20rpx;display: flex;justify-content: center;">
<image style="height: 70vh;" :src="details.transactionProof" mode="heightFix"></image>
<!-- <u-image mode="widthFix" :src="details.transactionProof">
<view slot="error" style="font-size: 24rpx; color: #FFFFFF;">加载失败</view>
</u-image> -->
</view>
</uni-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'
}
},
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(decodeURIComponent(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: {
showImg(e){
if(e){
this.$refs.popup.open('center')
}
// uni.previewImage({
// urls: e,
// longPressActions: {
// itemList: ['发送给朋友', '保存图片', '收藏'],
// success: function(data) {
// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
// },
// fail: function(err) {
// console.log(err.errMsg);
// }
// }
// });
},
goBack(){
uni.navigateBack()
},
examine(auditMark,auditRemark='') {
let data = {
auditMark:auditMark,
auditRemark: auditRemark,
id: this.details.id,
updateSource: "OMS-MINIAPP"
}
oilAccount.auditRechargeRecords(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('-----------------')
},
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;
}
},
getDetails(e){
oilAccount.getCompanyDetails(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>
.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;
}
.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>