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.
744 lines
19 KiB
744 lines
19 KiB
<template> |
|
<view> |
|
<topBar height="431rpx" title="账户明细"> |
|
<view slot="coment"> |
|
<view class="acc_title"> |
|
<view style="display: flex; align-items: flex-end;"> |
|
<image style="height: 40rpx; width: 37rpx; margin-right: 5rpx;" src="../../static/gs.png"> |
|
</image> |
|
<text style="margin-right: 21rpx;">{{jsData.companyName||gr.userName}}</text> |
|
<u-switch v-if="jsData.companyNature == 0" :openText='openText' asyncChange |
|
activeColor='#17A00E' inactive-color="#BBBBBB" size='35' v-model="wqswitchOpen" |
|
@change="wqchange"></u-switch> |
|
</view> |
|
<view v-if="jsData" style="display: flex;gap: 32rpx;"> |
|
<view v-if="jsData.companyNature == 1" style="display: flex;align-items: center;" @click="openPopup"> |
|
<image class="icontop" src="../../static/jb.png"></image> |
|
解绑 |
|
</view> |
|
<view @tap="setUpFn" style="display: flex;align-items: center;"> |
|
<image class="icontop" src="../../static/sz.png"></image> |
|
设置 |
|
</view> |
|
</view> |
|
</view> |
|
<view class="balance"> |
|
<view style="font-size: 32rpx;">{{jsData.balance || gr.balance}}</view> |
|
<view style="position: relative;display: flex;justify-content: center;"> |
|
<view>总余额</view> |
|
<view v-if="jsData.companyNature==1" style="position: absolute; right: 0;"> |
|
<text style="margin-right: 9rpx;">共享额度</text> |
|
<u-switch :openText='openText' asyncChange activeColor='#17A00E' inactive-color="#BBBBBB" |
|
size='35' v-model="switchOpen" @change="change"></u-switch> |
|
</view> |
|
</view> |
|
</view> |
|
<view style="padding: 0 40rpx;"> |
|
<view class="balanceDetails"> |
|
<view class="balanceDetails_row"> |
|
<view class="balanceDetails_row_flex border"> |
|
<view style="text-align: center;"> |
|
<text class="balanceDetails_row_flex_title"> 充值余额 </text> <br /> |
|
<text class="balanceDetails_row_flex_text">{{jsData.rechargeBalance || gr.rechargeBalance}}</text> |
|
</view> |
|
</view> |
|
|
|
<view class="balanceDetails_row_flex"> |
|
<view style="text-align: center;"> |
|
<text class="balanceDetails_row_flex_title">赊销余额</text> <br /> |
|
<text class="balanceDetails_row_flex_text">{{jsData.chargeRechargeBalance||'--'}}</text> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="balanceDetails_row"> |
|
<view class="balanceDetails_row_flex border"> |
|
<view style="text-align: center;"> |
|
<text class="balanceDetails_row_flex_title">充返余额</text> <br /> |
|
<text class="balanceDetails_row_flex_text">{{jsData.rebateBalance || gr.rechargeRebateBalance}}</text> |
|
</view> |
|
</view> |
|
<view class="balanceDetails_row_flex"> |
|
<view style="text-align: center;"> |
|
<text class="balanceDetails_row_flex_title">消返余额</text> <br /> |
|
<text class="balanceDetails_row_flex_text">{{jsData.consumeRebateBalance||'--'}}</text> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</topBar> |
|
<view class="list_body"> |
|
|
|
<view class="list_body_bg"> |
|
<u-collapse accordion> |
|
<u-collapse-item v-for=" (item,index) in listData " :key="index"> |
|
<view class="collapse_header" slot="title"> |
|
<view style="display: flex;align-items: center;"> |
|
<image class="collapse_img" |
|
:src=" item.occurAmount < 0? '../../static/olitype.png': '../../static/olitypef.png' "> |
|
</image> |
|
<view> |
|
<text class="collapse_title">{{classification(item.billType)}}</text><br /> |
|
<text class="collapse_text">{{item.businessOrderId}}</text><br /> |
|
<text class="collapse_text">{{item.createTime}}</text> |
|
</view> |
|
</view> |
|
<view class="collapse_price">{{item.occurAmount}}</view> |
|
</view> |
|
<view class="collapse_yc"> |
|
<view style="display: flex;gap:56rpx"> |
|
<view class="collapse_yc_row"> |
|
<view>账户余额</view> |
|
<view class="small_text_color">{{item.currentBalance}}</view> |
|
</view> |
|
<view class="collapse_yc_row"> |
|
<view>充值余额</view> |
|
<view>{{item.currentRechargeBalance}}</view> |
|
</view> |
|
<view class="collapse_yc_row"> |
|
<view>赊销余额 </view> |
|
<view class="small_text_color">{{item.currentChargeRechargeBalance}}</view> |
|
</view> |
|
</view> |
|
<view style="display: flex;gap:56rpx"> |
|
<view class="collapse_yc_row"> |
|
<view>消费返利 </view> |
|
<view class="small_text_color">{{item.currentConsumeRebateAmount}}</view> |
|
</view> |
|
<view class="collapse_yc_row"> |
|
<view>充值返利</view> |
|
<view class="small_text_color">{{item.currentTotalRebateBalance}}</view> |
|
</view> |
|
<view class="collapse_yc_row"> |
|
<view>冻结余额</view> |
|
<view class="small_text_color">{{item.currentFrozenBalance}}</view> |
|
</view> |
|
</view> |
|
</view> |
|
</u-collapse-item> |
|
</u-collapse> |
|
</view> |
|
<uni-popup ref="popup" type="center"> |
|
<view class="popup_jb"> |
|
<image class="popup_jb_headerImg" :src="baseUrl+'popu.png'"></image> |
|
<view> |
|
<view class="popup_jb_title">是否解绑该企业油卡</view> |
|
<view class="popup_jb_text">解绑后自营企业油卡账户将变成外请油卡账户</view> |
|
</view> |
|
<view class="popup_jb_footer"> |
|
<view @click="closesFn" class="popup_jb_close">取消</view> |
|
<view @tap="jbFn" class="popup_jb_ok">确定</view> |
|
</view> |
|
</view> |
|
</uni-popup> |
|
<popup @confirmFn='confirmFn' @closeFn='closeFn' :butten='butten' :styles="{height:'733rpx'}" v-model="iShow.seting"> |
|
<view slot="coment"> |
|
<view class="from_body"> |
|
<view class="from_header">按金额</view> |
|
<view class="from_row"> |
|
<view class="from_row_name">单次金额上限</view> |
|
<view class="from_row_value"> |
|
<input @input="inputChange" v-model="oliCarSeting.orderAmountToplimit" style="font-size: 28rpx !important; text-align: center;" /> |
|
元 |
|
</view> |
|
</view> |
|
<view class="from_row"> |
|
<view class="from_row_name">单日金额上限</view> |
|
<view class="from_row_value"> |
|
<input @input="inputChange" v-model="oliCarSeting.dayAmountToplimit" style="font-size: 28rpx !important; text-align: center;" /> |
|
元 |
|
</view> |
|
</view> |
|
<view class="from_header">按升数</view> |
|
<view class="from_row"> |
|
<view class="from_row_name">单日加油升数上限</view> |
|
<view class="from_row_value"> |
|
<input @input="inputChange" v-model="oliCarSeting.dayVolumeToplimit" style="font-size: 28rpx !important; text-align: center;" /> |
|
升 |
|
</view> |
|
</view> |
|
<view class="from_row"> |
|
<view class="from_row_name">单笔加油升数上限</view> |
|
<view class="from_row_value"> |
|
<input @input="inputChange" v-model="oliCarSeting.orderVolumeToplimit" style="font-size: 28rpx !important; text-align: center;" /> |
|
升 |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</popup> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import topBar from '@/components/topbar' |
|
import accountDetails from '@/api/accountDetails' |
|
import popup from '@/components/customPopup' |
|
import tool from '@/utils/tool.js' |
|
export default { |
|
components: { |
|
topBar, |
|
popup |
|
}, |
|
data() { |
|
return { |
|
butten:{ |
|
colse:'取消', |
|
confirm:'确定', |
|
coloseBg:'', |
|
coloseColor:'', |
|
confirmBg:'', |
|
confirmColor:'' |
|
}, |
|
oliCarSeting:{ |
|
orderAmountToplimit:'', |
|
dayAmountToplimit:'', |
|
dayVolumeToplimit:'', |
|
orderVolumeToplimit:'', |
|
id:'' |
|
}, |
|
baseUrl: this.networkResource.baseUrl, |
|
iShow: { |
|
seting: false |
|
}, |
|
openText: { |
|
one: '启用', |
|
off: '禁用' |
|
}, |
|
switchOpen: "", |
|
wqswitchOpen:'', |
|
styles: {}, |
|
jsData: null, |
|
listData: [], |
|
gr:null, |
|
getData: { |
|
pageSize: 10, |
|
currentPage: 1, |
|
params: { |
|
// companyId: "", |
|
// customerId: "", |
|
accountId:'' |
|
}, |
|
sorted: {} |
|
} |
|
} |
|
}, |
|
onReachBottom() { |
|
this.getData.currentPage += 1 |
|
this.jsData?this.getList():this.grlist() |
|
console.log('触底了') |
|
}, |
|
onShow() { |
|
console.log(accountDetails, this.networkResource.baseUrl) |
|
if(this.jsData!==null){ |
|
this.getList() |
|
} |
|
if(this.gr!==null){ |
|
this.grlist() |
|
} |
|
}, |
|
onLoad(e) { |
|
let that = this |
|
if (e.jsData) { |
|
this.jsData = JSON.parse(e.jsData); |
|
({ |
|
// companyId: that.getData.params.companyId, |
|
// customerId: that.getData.params.customerId, |
|
id:that.getData.params.accountId |
|
} = that.jsData) |
|
this.switchOpen = this.jsData.shareCompanyQuota == 0 ? false : true; |
|
this.wqswitchOpen = this.jsData.accountState == 0 ? false : true; |
|
({ |
|
orderAmountToplimit:that.oliCarSeting.orderAmountToplimit, |
|
dayAmountToplimit:that.oliCarSeting.dayAmountToplimit, |
|
dayVolumeToplimit:that.oliCarSeting.dayVolumeToplimit, |
|
orderVolumeToplimit:that.oliCarSeting.orderVolumeToplimit, |
|
id:that.oliCarSeting.id, |
|
} = this.jsData) |
|
console.log(this.jsData, this.switchOpen, JSON.parse(e.jsData), '*-*-') |
|
}else if(e.gr){ |
|
this.gr = JSON.parse(e.gr) |
|
} |
|
}, |
|
methods: { |
|
grlist(){ |
|
let data = { |
|
pageSize: this.getData.pageSize, |
|
currentPage: this.getData.currentPage, |
|
params: { |
|
customerId: this.gr.customerId, |
|
receiptResult: "1" |
|
} |
|
} |
|
accountDetails.oilCustomerAccountRecord(data).then(res=>{ |
|
res.data.list.forEach(item=>{ |
|
tool.numberSetting(item,[ 'currentRechargeBalance', 'currentBalance','currentChargeRechargeBalance','currentConsumeRebateAmount','currentTotalRebateBalance','currentFrozenBalance'],2) |
|
}) |
|
if (this.getData.currentPage !== 1) { |
|
this.listData = this.listData.concat(res.data.list); |
|
return |
|
} |
|
this.listData = res.data.list |
|
console.log(this.listData) |
|
}) |
|
}, |
|
wqchange(e){ |
|
let that = this |
|
uni.showModal({ |
|
title: '提示', |
|
content: e ? '确定要启用吗' : '确定要禁用吗', |
|
success: function (res) { |
|
if (res.confirm) { |
|
accountDetails.disableEnable({id:that.jsData.id}).then(res=>{ |
|
console.log(res) |
|
if(res.code!=20000){ |
|
that.wqswitchOpen = that.jsData.accountState == 0 ? false : true |
|
return |
|
} |
|
uni.showToast({ |
|
title:'修改成功', |
|
icon:'none' |
|
}) |
|
setTimeout(()=>{ |
|
uni.$emit('updateDriver') |
|
},500) |
|
}) |
|
console.log('用户点击确定'); |
|
} else if (res.cancel) { |
|
that.wqswitchOpen = !e |
|
console.log('用户点击取消'); |
|
} |
|
} |
|
}); |
|
}, |
|
recoveryFn(){ |
|
let that = this; |
|
({ |
|
orderAmountToplimit:that.oliCarSeting.orderAmountToplimit, |
|
dayAmountToplimit:that.oliCarSeting.dayAmountToplimit, |
|
dayVolumeToplimit:that.oliCarSeting.dayVolumeToplimit, |
|
orderVolumeToplimit:that.oliCarSeting.orderVolumeToplimit, |
|
id:that.oliCarSeting.id, |
|
} = this.jsData) |
|
}, |
|
inputChange(){ |
|
this.butten.colse = '恢复' |
|
this.butten.coloseBg = '#78797F', |
|
this.butten.coloseColor = '#FFFFFF' |
|
}, |
|
setUpFn() { |
|
this.iShow.seting = true |
|
}, |
|
confirmFn() { |
|
accountDetails.upOilCard(this.oliCarSeting).then(res=>{ |
|
if(res.code!==20000){ |
|
this.recoveryFn() |
|
}else{ |
|
uni.showToast({ |
|
title:'修改成功', |
|
icon:'none' |
|
}) |
|
this.butten.colse ='取消' |
|
this.butten.coloseBg = '', |
|
this.butten.coloseColor = '' |
|
this.iShow.seting = false |
|
} |
|
}) |
|
console.log('确定回调',this.jsData,this.oliCarSeting) |
|
}, |
|
closesFn() { |
|
this.$refs.popup.close() |
|
}, |
|
closeFn() { |
|
if(this.butten.colse!='恢复'){ |
|
this.iShow.seting = false |
|
}else{ |
|
this.recoveryFn() |
|
this.butten.colse ='取消' |
|
this.butten.coloseBg = '', |
|
this.butten.coloseColor = '' |
|
} |
|
}, |
|
jbFn() { |
|
let data = { |
|
// companyId: this.getData.params.companyId, |
|
// customerId: this.getData.params.customerId, |
|
accountId:this.getData.params.accountId |
|
} |
|
accountDetails.unbindOilCard(data).then(res => { |
|
if (res.code !== 20000) return |
|
this.$refs.popup.close() |
|
// uni.$emit('updateDriver', this.getData.params.customerId) |
|
setTimeout(()=>{ |
|
uni.showToast({ |
|
title:'操作成功', |
|
icon:'none' |
|
}) |
|
},500) |
|
setTimeout(()=>{ |
|
uni.navigateBack() |
|
},1000) |
|
}) |
|
}, |
|
lower() { |
|
console.log('lower') |
|
}, |
|
change(e) { |
|
let that = this |
|
uni.showModal({ |
|
title: '提示', |
|
content: e ? '确定要启用吗' : '确定要禁用吗', |
|
success: function (res) { |
|
if (res.confirm) { |
|
console.log('用户点击确定'); |
|
let data = { |
|
// customerId: that.getData.params.customerId, |
|
// companyId: that.getData.params.companyId, |
|
accountId:that.getData.params.accountId, |
|
shareCompanyQuota: '', |
|
updateSource: 'OMS-MINIAPP' |
|
} |
|
data.shareCompanyQuota = that.switchOpen ? 1 : 0 |
|
accountDetails.updateCompanyQuota(data).then(res => { |
|
if (res.code !== 20000) { |
|
that.switchOpen = !e |
|
return |
|
} |
|
uni.showToast({ |
|
title: res.msg, |
|
icon: 'none' |
|
}) |
|
setTimeout(()=>{ |
|
that.getList() |
|
},500) |
|
|
|
// uni.$emit('updateDriver', that.getData.params.customerId) |
|
|
|
}) |
|
} else if (res.cancel) { |
|
that.switchOpen = !e |
|
console.log('用户点击取消'); |
|
} |
|
} |
|
}); |
|
|
|
console.log(this.switchOpen, '--') |
|
}, |
|
classification(e) { |
|
switch (e) { |
|
case 'SEPARATION_OIL': |
|
return '分油' |
|
break; |
|
case 'TURN': |
|
return '圈回' |
|
break; |
|
case 'REFUELLING': |
|
return '加油' |
|
break; |
|
case 'REFUND': |
|
return '退款' |
|
break; |
|
case 'RECHARGE': |
|
return '充值' |
|
break; |
|
case 'RECHARGE_REFUND': |
|
return '充值退款' |
|
break; |
|
case 'REFUELLING_REFUND': |
|
return '加油退款' |
|
break; |
|
case 'RECHARGE_REBETE': |
|
return '充值返利' |
|
break; |
|
case 'RECHARGE_REBETE__REFUND': |
|
return '充值返利退款' |
|
break; |
|
} |
|
}, |
|
openPopup() { |
|
this.$refs.popup.open('center') |
|
}, |
|
open() {}, |
|
close() { |
|
this.iShow = false |
|
}, |
|
getList() { |
|
accountDetails.getByPage(this.getData).then(res => { |
|
res.data.list.forEach(item=>{ |
|
tool.numberSetting(item,[ 'currentRechargeBalance', 'currentBalance','currentChargeRechargeBalance','currentConsumeRebateAmount','currentTotalRebateBalance','currentFrozenBalance'],2) |
|
}) |
|
if (this.getData.currentPage !== 1) { |
|
this.listData = this.listData.concat(res.data.list); |
|
return |
|
} |
|
this.listData = res.data.list |
|
console.log(this.listData) |
|
}) |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style> |
|
.uni-input-input { |
|
font-size: 28rpx !important; |
|
} |
|
|
|
.from_row_name { |
|
min-width: 230rpx; |
|
} |
|
|
|
.from_row_value { |
|
margin-left: 20rpx; |
|
height: 64rpx; |
|
background-color: #F1F1F1; |
|
width: 224rpx; |
|
display: flex; |
|
align-items: center; |
|
padding: 0 20rpx; |
|
/* box-sizing: border-box; */ |
|
|
|
} |
|
|
|
.from_row:nth-child(3) { |
|
/* background-color: #007AFF; */ |
|
margin-bottom: 40rpx; |
|
} |
|
|
|
.from_row:last-child { |
|
/* background-color: #007AFF; */ |
|
} |
|
|
|
.from_header { |
|
color: #999999; |
|
margin-bottom: 14rpx; |
|
/* text-align: left; */ |
|
} |
|
|
|
.from_body { |
|
font-size: 28rpx; |
|
color: #333333; |
|
padding: 35rpx; |
|
padding-bottom: 0; |
|
} |
|
|
|
.from_row { |
|
display: flex; |
|
padding-left: 33rpx; |
|
align-items: center; |
|
margin-bottom: 16rpx; |
|
|
|
} |
|
|
|
.icontop { |
|
width: 29rpx; |
|
height: 29rpx; |
|
margin-right: 5rpx; |
|
} |
|
|
|
.popup_jb_ok { |
|
background: #2866FF; |
|
border-radius: 10rpx; |
|
color: #FFFFFF; |
|
flex: 1; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
|
|
.popup_jb_close { |
|
border: 1rpx solid #BBBBBB; |
|
border-radius: 10rpx; |
|
color: #333333; |
|
flex: 1; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
margin-right: 29rpx; |
|
} |
|
|
|
.popup_jb_footer { |
|
display: flex; |
|
font-size: 32rpx !important; |
|
height: 74rpx; |
|
padding: 29rpx 70rpx 0 70rpx; |
|
box-sizing: content-box; |
|
/* gap:29rpx; */ |
|
/* -webkit-gap:29rpx; */ |
|
|
|
} |
|
|
|
.popup_jb_title { |
|
font-size: 32rpx; |
|
font-family: PingFang SC; |
|
font-weight: bold; |
|
color: #1583FF; |
|
margin-top: 47rpx; |
|
} |
|
|
|
.popup_jb_text { |
|
font-size: 24rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #999999; |
|
margin-top: 17rpx; |
|
} |
|
|
|
.popup_jb_headerImg { |
|
width: 100%; |
|
height: 134rpx; |
|
} |
|
|
|
/* .setUpPopup_jb { |
|
width: 610rpx; |
|
height: 733rpx; |
|
background: #FFFFFF; |
|
border-radius: 25rpx; |
|
overflow: hidden; |
|
} */ |
|
|
|
.popup_jb { |
|
width: 610rpx; |
|
height: 400rpx; |
|
background: #FFFFFF; |
|
border-radius: 25rpx; |
|
overflow: hidden; |
|
text-align: center; |
|
} |
|
|
|
.u-arrow-down-icon { |
|
margin-right: 0px !important; |
|
} |
|
|
|
.u-collapse-item { |
|
border-bottom: solid 1px #F1F1F1; |
|
} |
|
|
|
.collapse_price { |
|
font-size: 32rpx; |
|
font-family: PingFang SC; |
|
font-weight: bold; |
|
color: #333333; |
|
} |
|
|
|
.collapse_yc_row { |
|
flex: 1; |
|
display: flex; |
|
gap: 10rpx |
|
} |
|
|
|
.collapse_yc { |
|
font-size: 20rpx; |
|
/* padding-right: 20rpx; */ |
|
padding-bottom: 24rpx; |
|
} |
|
|
|
.collapse_img { |
|
width: 60rpx; |
|
height: 60rpx; |
|
margin-right: 15rpx; |
|
} |
|
|
|
.collapse_header { |
|
flex: 1; |
|
display: flex; |
|
justify-content: space-between; |
|
} |
|
|
|
.list_body_bg { |
|
background-color: #FFFFFF; |
|
border-radius: 14rpx; |
|
padding: 0 40rpx; |
|
} |
|
|
|
.small_text_color { |
|
color: #000000; |
|
} |
|
|
|
.collapse_text { |
|
font-size: 22rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #999999; |
|
} |
|
|
|
.collapse_title { |
|
font-size: 28rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #333333; |
|
} |
|
|
|
.list_body { |
|
/* padding: 0 40rpx; */ |
|
margin-top: 20rpx; |
|
margin-bottom: 60rpx; |
|
} |
|
|
|
.balanceDetails_row_flex_text { |
|
font-size: 28rpx; |
|
font-weight: 500; |
|
color: #000000; |
|
} |
|
|
|
.balanceDetails_row_flex_title { |
|
font-size: 24rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #999999; |
|
} |
|
|
|
.border { |
|
border-right: 1px solid #F1F1F1; |
|
} |
|
|
|
.balanceDetails_row_flex { |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
flex: 1; |
|
} |
|
|
|
.balanceDetails :last-child { |
|
border-bottom: 0px; |
|
} |
|
|
|
.balanceDetails_row { |
|
display: flex; |
|
width: 100%; |
|
flex: 1; |
|
padding: 10rpx 0; |
|
border-bottom: 1px solid #F1F1F1; |
|
box-sizing: border-box; |
|
color: #000000; |
|
} |
|
|
|
.balanceDetails { |
|
/* width: 670rpx; */ |
|
height: 200rpx; |
|
background: #FFFFFF; |
|
border-radius: 14rpx; |
|
margin: 0 auto; |
|
margin-top: 29rpx; |
|
display: flex; |
|
flex-direction: column; |
|
} |
|
|
|
.balance { |
|
text-align: center; |
|
margin-top: 38rpx; |
|
padding: 0 40rpx; |
|
} |
|
|
|
.acc_title { |
|
display: flex; |
|
margin-top: 25rpx; |
|
padding: 0 40rpx; |
|
justify-content: space-between; |
|
color: #FFFFFF; |
|
font-size: 24rpx; |
|
|
|
} |
|
</style>
|
|
|