pull/8/head
xiaozhiyong
10 months ago
parent
c872e87349
commit
69f63076c8
4 changed files with 299 additions and 1 deletions
@ -0,0 +1,11 @@ |
||||
import request from '@/utils/request' |
||||
|
||||
export default { |
||||
getInvoicePoolPage(data = {}) { |
||||
return request({ |
||||
url: '/oil-finance/internalCompany/getInvoicePoolPage', |
||||
method: 'post', |
||||
data: data |
||||
}) |
||||
}, |
||||
} |
||||
@ -0,0 +1,271 @@ |
||||
<template> |
||||
<view style="height: 100vh;display: flex;flex-direction: column; "> |
||||
<view class="header"> |
||||
<view :style="{height:styles.top+'px'}" class="top"></view> |
||||
<uni-nav-bar @clickLeft='back' color='white' backgroundColor="rgba(0,0,0,0)" left-icon="back" |
||||
title="结算单管理" /> |
||||
|
||||
</view> |
||||
<view class="content" style="flex: 1;overflow: hidden;"> |
||||
<view class="buttons"> |
||||
<view>{{obtainMonth()}}月票池</view> |
||||
<view> |
||||
<view @click="screen('0')">进项</view> |
||||
<view @click="screen('1')">销项</view> |
||||
</view> |
||||
</view> |
||||
<view class="list"> |
||||
<scroll-view style="height: 100%;" scroll-y="true" :refresher-enabled="true" :refresher-triggered="isRefresherTriggered" @refresherrefresh="refresherrefresh"> |
||||
<view class="item" v-for="item,index in handleList" :key="index"> |
||||
<view class="title"> |
||||
<view>{{item.companyName}}</view> |
||||
<view v-if="item.outputLimit">{{item.outputLimit}}</view> |
||||
</view> |
||||
<view class="percentage"> |
||||
<view :style="{ |
||||
width:item.proportion +'%', |
||||
background:item.color, |
||||
color:item.proportion > 10 ? '#fff' :'#333'}"> |
||||
{{item.text}}{{item.money}} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</scroll-view> |
||||
</view> |
||||
|
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import serve from '@/api/financialCenter/invoice.js' |
||||
export default { |
||||
|
||||
data() { |
||||
return { |
||||
isRefresherTriggered:false, |
||||
styles: {}, |
||||
currentType: '0', |
||||
listData: [], |
||||
handleList: [], |
||||
userInfo: uni.getStorageSync('user'), |
||||
|
||||
} |
||||
}, |
||||
|
||||
onLoad() { |
||||
this.styles = uni.getMenuButtonBoundingClientRect() |
||||
this.getInvoicePoolPage() |
||||
}, |
||||
|
||||
methods: { |
||||
obtainMonth() { |
||||
return new Date().getMonth() + 1 |
||||
}, |
||||
refresherrefresh() { |
||||
this.isRefresherTriggered = true |
||||
this.getInvoicePoolPage() |
||||
}, |
||||
screen(type) { |
||||
let handle = { |
||||
0: (item) => { |
||||
return { |
||||
companyName: item.companyName, |
||||
money: item.sumZMoney || 0, |
||||
proportion: 100, |
||||
text: '进项金额：', |
||||
color: '#409eff', |
||||
} |
||||
|
||||
}, |
||||
1: (item) => { |
||||
let { |
||||
sumXMoney, |
||||
outputLimit |
||||
} = item |
||||
|
||||
let money = 0 |
||||
if (sumXMoney) { |
||||
let result = ((outputLimit * 10000 - sumXMoney * 10000) / 10000).toFixed(2) |
||||
money = result < 0 ? 0 : result |
||||
} else money = outputLimit || 0 |
||||
|
||||
let proportion = 0 |
||||
if (sumXMoney) { |
||||
let numerator = ((outputLimit * 10000 - sumXMoney * 10000) / 10000).toFixed(2) |
||||
let result = (numerator / outputLimit).toFixed(2) * 100 |
||||
proportion = result < 0 ? 0 : result > 100 ? 100 : result |
||||
} else proportion = 100 |
||||
|
||||
return { |
||||
companyName: item.companyName, |
||||
money, |
||||
proportion, |
||||
text: '可用：', |
||||
color: '#f56c6c', |
||||
outputLimit, |
||||
} |
||||
} |
||||
} |
||||
|
||||
this.handleList = this.listData.map(item => { |
||||
let result = handle[type](item) |
||||
return result |
||||
}) |
||||
console.log('this.handleList', this.handleList) |
||||
}, |
||||
getInvoicePoolPage() { |
||||
serve.getInvoicePoolPage().then(res => { |
||||
this.isRefresherTriggered = false |
||||
if (res.code === 20000) { |
||||
this.listData = res.data |
||||
this.screen('0') |
||||
} |
||||
}) |
||||
}, |
||||
back() { |
||||
uni.navigateBack() |
||||
}, |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
page { |
||||
background-color: #F0F2FF; |
||||
} |
||||
|
||||
.uni-navbar--border { |
||||
border: 0px !important; |
||||
} |
||||
|
||||
.header { |
||||
position: relative; |
||||
color: white; |
||||
height: 300rpx; |
||||
background: url('https://xoi-support.oss-cn-hangzhou.aliyuncs.com/星油admin小程序/sjbj.png') 100%/100%; |
||||
} |
||||
|
||||
.uni-navbar__header-btns-right { |
||||
padding-right: 0 !important; |
||||
width: 120rpx !important; |
||||
} |
||||
|
||||
.top { |
||||
height: var(--status-bar-height); |
||||
} |
||||
|
||||
.content { |
||||
position: relative; |
||||
top: -80rpx; |
||||
left: 1%; |
||||
z-index: 100; |
||||
width: 98%; |
||||
background: #F0F2FF; |
||||
border-radius: 20rpx; |
||||
|
||||
.buttons { |
||||
padding: 20rpx; |
||||
|
||||
>view { |
||||
&:nth-of-type(1) { |
||||
text-align: center; |
||||
font-size: 35rpx; |
||||
font-weight: 550; |
||||
} |
||||
|
||||
&:nth-of-type(2) { |
||||
margin-top: 20rpx; |
||||
display: flex; |
||||
justify-content: space-around; |
||||
|
||||
>view { |
||||
width: 270rpx; |
||||
height: 70rpx; |
||||
line-height: 70rpx; |
||||
text-align: center; |
||||
color: #fff; |
||||
border-radius: 10rpx; |
||||
|
||||
&:nth-of-type(1) { |
||||
background: #409eff; |
||||
} |
||||
|
||||
&:nth-of-type(2) { |
||||
background: #f56c6c; |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.list { |
||||
margin: 20rpx auto 0; |
||||
width: 98%; |
||||
height: 80%; |
||||
border: 1rpx solid #ddd; |
||||
border-radius: 10rpx; |
||||
|
||||
.item { |
||||
margin-top: 30rpx; |
||||
padding-left: 3%; |
||||
&:nth-last-child(1) { |
||||
padding-bottom: 30rpx; |
||||
} |
||||
.title { |
||||
display: flex; |
||||
padding-right: 20rpx; |
||||
margin: 0; |
||||
height: 50rpx; |
||||
|
||||
>view { |
||||
&:nth-of-type(1) { |
||||
flex: 1; |
||||
padding-left: 5rpx; |
||||
font-size: 28rpx; |
||||
font-weight: 550; |
||||
} |
||||
|
||||
&:nth-of-type(2) { |
||||
width: 180rpx; |
||||
height: 50rpx; |
||||
line-height: 50rpx; |
||||
text-align: center; |
||||
background: #ddd; |
||||
color: #999; |
||||
border-radius: 5rpx; |
||||
|
||||
} |
||||
} |
||||
} |
||||
|
||||
.percentage { |
||||
overflow: hidden; |
||||
position: relative; |
||||
margin-top: 20rpx; |
||||
height: 50rpx; |
||||
width: 94%; |
||||
background: rgb(244, 244, 245); |
||||
border: 1px solid rgb(211, 212, 214); |
||||
border-radius: 20px; |
||||
|
||||
>view { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
padding-left: 10rpx; |
||||
height: 50rpx; |
||||
line-height: 50rpx; |
||||
color: #fff; |
||||
font-size: 24rpx; |
||||
background: #409eff; |
||||
border-radius: 20rpx; |
||||
white-space: nowrap; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue