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.
315 lines
8.6 KiB
315 lines
8.6 KiB
<template> |
|
<view class="re_body"> |
|
<view :style="{height:showDetails?'':'184rpx'}" class="header"> |
|
<view class="header_item"> |
|
<view class="dd"> |
|
<view class="page-1"> |
|
<text style="font-size: 48rpx;color: #FFFFFF;">{{dedata.gasStationBalance|price}}</text> |
|
<text style="color: #BBBBBB;font-size:26rpx ;">￥</text> |
|
<view @click="xxFn" |
|
style=" font-size: 24rpx;color: #FFFFFF; margin-top: 14rpx; text-align: center;width: 100%;display: flex;justify-content:center;"> |
|
{{dedata.routerIndex?'站点':'企业'}}账户余额 |
|
<view v-if="!dedata.routerIndex" :style="{transform:`rotate(${showDetails?'180':''}deg)`}" |
|
style="transition: all .3s;margin-left: 10rpx;"> |
|
<uni-icons type="bottom" size="13" color="#bbbbbb" style=""></uni-icons> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view v-if="!dedata.routerIndex" class="header_item-details-container"> |
|
<view class="header_item-details"> |
|
<view style="width: 155rpx;text-align: right;"> |
|
<text class="header_item-details-label">外请</text> |
|
</view> |
|
<view style="flex: 1;text-align: left;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"> |
|
{{dedata.outCountBalance|price}} |
|
<text class="smalltext">￥</text> |
|
</view> |
|
</view> |
|
<view class="header_item-details"> |
|
<view style="width: 155rpx;text-align: right;"> |
|
<text class="header_item-details-label">自营</text> |
|
</view> |
|
<view style="flex: 1;text-align: left;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"> |
|
{{dedata.inCountBalance|price}} |
|
<text class="smalltext">￥</text> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="header_item"> |
|
<view class="dd"> |
|
<view class="page-1"> |
|
<text style="font-size: 48rpx;color: #FFFFFF;">{{dedata.amountYesterday|price}}</text> |
|
<text style="color: #BBBBBB;font-size:26rpx ;">￥</text> |
|
<view |
|
style="font-size: 24rpx;color: #FFFFFF; margin-top: 14rpx; text-align: center;width: 100%;"> |
|
昨日充值金额 |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<!-- <view class="header_item"> |
|
<view class="dd"> |
|
<view class="page-1"> |
|
<text style="font-size: 48rpx;color: #FFFFFF;">{{dedata.amountYesterday|price}}</text> |
|
<text style="color: #BBBBBB;font-size:26rpx ;">￥</text> |
|
<view style="font-size: 24rpx;color: #FFFFFF; margin-top: 14rpx; text-align: center;width: 100%;">昨日充值金额 |
|
</view> |
|
</view> |
|
|
|
</view> |
|
</view> --> |
|
</view> |
|
<view style="margin-top:56rpx; padding: 0 46rpx;"> |
|
<view style=" font-size: 48rpx;color: #666666;margin-bottom: 42rpx;">最近记录</view> |
|
<view class="sele_body"> |
|
<view @click=" seleFn(0) " :class=" seleIndex==0?'sele_item': 'item' ">当天</view> |
|
<view @click=" seleFn(1) " :class=" seleIndex==1?'sele_item': 'item' ">昨日</view> |
|
<view @click=" seleFn(2) " :class=" seleIndex==2?'sele_item': 'item' ">近5天</view> |
|
</view> |
|
</view> |
|
<view style="flex: 1; overflow:hidden; margin-top: 40rpx; "> |
|
<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower='scrolltolower'> |
|
<view v-for="(item,index) in list" class="list_item"> |
|
<view class="text">{{item.createTime}}</view> |
|
<view class="text"><text>{{item.money.toFixed(2)}}</text> <text class="smalltext">￥</text> </view> |
|
</view> |
|
</scroll-view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import convertW from '../../components/convertW.js' |
|
import sy from '@/api/sy' |
|
export default { |
|
data() { |
|
return { |
|
list: [], |
|
showDetails: false, |
|
dedata: null, |
|
seleIndex: 0, |
|
getData: { |
|
pageSize: 10, |
|
currentPage: 1, |
|
params: { |
|
siteId: '', |
|
endTime: '', |
|
startTime: '' |
|
} |
|
}, |
|
} |
|
}, |
|
created() { |
|
// this.getlist() |
|
}, |
|
onLoad(e) { |
|
if (e.jsData) { |
|
console.log(JSON.parse(e.jsData),'detailsDatadetailsDatadetailsDatadetailsData') |
|
this.dedata = JSON.parse(e.jsData) |
|
this.getData.params.siteId = this.dedata.id |
|
// this.getData.params.endTime = this.dedata.endTime.split(' ')[0] |
|
// this.getData.params.startTime = this.dedata.startTime.split(' ')[0] |
|
this.seleFn(0) |
|
this.getlist() |
|
} |
|
}, |
|
filters: { |
|
price(e) { |
|
return convertW.convertW(e) |
|
} |
|
}, |
|
methods: { |
|
xxFn() { |
|
this.showDetails = !this.showDetails |
|
}, |
|
seleFn(e) { |
|
let date = new Date |
|
this.seleIndex = e |
|
switch (e) { |
|
case 0: |
|
let day = [ |
|
`${date.getFullYear()}-${date.getMonth()+1<10?'0'+(date.getMonth()+1):date.getMonth()+1}-${date.getDate()<10?'0'+date.getDate():date.getDate()}`, |
|
`${date.getFullYear()}-${date.getMonth()+1<10?'0'+(date.getMonth()+1):date.getMonth()+1}-${date.getDate()<10?'0'+date.getDate():date.getDate()}` |
|
] |
|
this.getData.params.endTime = day[0] |
|
this.getData.params.startTime = day[1] |
|
break; |
|
case 1: |
|
let yesterday = new Date((date.getTime() - (86400000))) |
|
let yd = [ |
|
`${yesterday.getFullYear()}-${yesterday.getMonth()+1<10?'0'+(yesterday.getMonth()+1):yesterday.getMonth()+1}-${yesterday.getDate()<10?'0'+yesterday.getDate():yesterday.getDate()} `, |
|
`${yesterday.getFullYear()}-${yesterday.getMonth()+1<10?'0'+(yesterday.getMonth()+1):yesterday.getMonth()+1}-${yesterday.getDate()<10?'0'+yesterday.getDate():yesterday.getDate()} ` |
|
] |
|
this.getData.params.endTime = yd[0] |
|
this.getData.params.startTime = yd[1] |
|
break; |
|
case 2: |
|
let fsday = new Date((date.getTime() - (86400000 * 5))) |
|
let fd = [ |
|
`${fsday.getFullYear()}-${fsday.getMonth()+1<10?'0'+(fsday.getMonth()+1):fsday.getMonth()+1}-${fsday.getDate()<10?'0'+fsday.getDate():fsday.getDate()}`, |
|
`${date.getFullYear()}-${date.getMonth()+1<10?'0'+(date.getMonth()+1):date.getMonth()+1}-${date.getDate()<10?'0'+date.getDate():date.getDate()}` |
|
] |
|
this.getData.params.endTime = fd[1] |
|
this.getData.params.startTime = fd[0] |
|
break; |
|
} |
|
this.getData.currentPage = 1 |
|
this.getlist() |
|
}, |
|
getlist() { |
|
sy[(this.dedata.routerIndex ? 'queryGasStationRechargeRecords' : 'findEnterpriseRechargeRecord')]({ |
|
pageSize: this.getData.pageSize, |
|
currentPage: this.getData.currentPage, |
|
params: { |
|
[(this.dedata.routerIndex ? 'siteId' : 'companyId')]: this.getData.params.siteId, |
|
endTime: this.getData.params.endTime, |
|
startTime: this.getData.params.startTime |
|
} |
|
}).then(res => { |
|
if (res.code !== 20000) return |
|
if (res.data.list.length == 0) { |
|
uni.showToast({ |
|
title: '没有数据了哦', |
|
icon: 'none' |
|
}) |
|
} |
|
if (this.getData.currentPage !== 1) { |
|
this.list = this.list.concat(res.data.list); |
|
console.log(this.list, '***') |
|
return |
|
} |
|
this.list = res.data.list |
|
}) |
|
}, |
|
scrolltolower() { |
|
this.getData.currentPage += 1; |
|
this.getlist(); |
|
// uni.showToast({ |
|
// title:'到底了', |
|
// icon:'none' |
|
// }) |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style scoped> |
|
.header_item-details-label { |
|
background-color: #BBBBBB; |
|
color: #FFFFFF; |
|
padding: 5rpx; |
|
margin-right: 10rpx; |
|
} |
|
|
|
.header_item-details-container { |
|
height: 100rpx; |
|
width: 100%; |
|
text-align: center; |
|
overflow: hidden; |
|
} |
|
|
|
.header_item-details { |
|
color: #FFFFFF; |
|
font-size: 24rpx; |
|
box-sizing: border-box; |
|
margin-bottom: 15rpx; |
|
display: flex; |
|
justify-content: center; |
|
} |
|
|
|
.page-1 { |
|
width: 100%; |
|
text-align: center; |
|
} |
|
|
|
.dd { |
|
width: 100%; |
|
height: 184rpx; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
flex-wrap: wrap; |
|
} |
|
|
|
.smalltext { |
|
font-size: 24rpx; |
|
color: #BBBBBB; |
|
} |
|
|
|
.text { |
|
font-size: 28rpx; |
|
color: #666666; |
|
} |
|
|
|
.list_item { |
|
width: 660rpx; |
|
height: 120rpx; |
|
background: #FFFFFF; |
|
border-radius: 10px; |
|
margin: 0 auto; |
|
margin-bottom: 10rpx; |
|
padding: 0 40rpx; |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
} |
|
|
|
.re_body { |
|
width: 100%; |
|
height: 100vh; |
|
display: flex; |
|
flex-direction: column; |
|
flex-wrap: wrap; |
|
} |
|
|
|
.sele_item { |
|
width: 140rpx; |
|
height: 60rpx; |
|
background: #ADCEFF; |
|
border-radius: 10px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
color: white; |
|
} |
|
|
|
.item { |
|
width: 140rpx; |
|
height: 60rpx; |
|
background: #FFFFFF; |
|
border-radius: 10px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
color: #BBBBBB; |
|
} |
|
|
|
.sele_body { |
|
display: flex; |
|
gap: 31rpx; |
|
margin-top: 42rpx; |
|
} |
|
|
|
.header_item { |
|
height: 100%; |
|
flex: 1; |
|
display: flex; |
|
justify-content: center; |
|
/* align-items: center; */ |
|
color: #FFFFFF; |
|
flex-wrap: wrap; |
|
overflow: hidden; |
|
} |
|
|
|
.header { |
|
width: 100%; |
|
height: 284rpx; |
|
background: #2866FF; |
|
display: flex; |
|
overflow: hidden; |
|
box-sizing: border-box; |
|
transition: all .3s; |
|
} |
|
</style>
|
|
|