306 lines
7.1 KiB
Vue
306 lines
7.1 KiB
Vue
<template>
|
||
<view class="c_card">
|
||
<view class="f_card">
|
||
<view class="item" @click="navTo('/subpkg/topUp/topUp')">
|
||
<view>押金(元)</view>
|
||
<view class="price" v-if="company.deposit">{{cCount(+company.deposit)}}</view>
|
||
<view class="price" v-else>0.00</view>
|
||
</view>
|
||
<view class="item" @click="navTo('/subpkg/withdrawDeposit/company')">
|
||
<view>公司收益总金额(元)</view>
|
||
<view class="price" v-if="company.company_money">{{cCount(+company.company_money)}}</view>
|
||
<view class="price" v-else>0.00</view>
|
||
</view>
|
||
</view>
|
||
<view class="f_nav">
|
||
<view class="title">账单流水</view>
|
||
<view class="right">
|
||
<!-- <u-tabs :list="[{
|
||
name: '日账单',
|
||
}, {
|
||
name: '月账单'
|
||
}]" @click="changeCurrent" lineColor='#0122C7' :scrollable="false" lineWidth='40' inactiveStyle='color:black'
|
||
activeStyle="color:#0122C7"></u-tabs> -->
|
||
<view class="btn" :class="current==0?'active':''" @click="current=0;initLoad()">全部账单</view>
|
||
|
||
<!-- <view class="btn" :class="current==1?'active':''" @click="current=1;initLoad()">月账单</view> -->
|
||
<view class="btn" @click="navTo('/subpkg/companyFinance/companyFinance')">更多</view>
|
||
</view>
|
||
</view>
|
||
<view class="f_list">
|
||
|
||
<view class="item" v-for="(item, index) in list" :key="index">
|
||
|
||
<view class="top">
|
||
账单日期: {{current?item.month:item.create_time}}
|
||
</view>
|
||
<view class="bottom">
|
||
<view class="text">
|
||
<view class="t_item" v-if="current==0">
|
||
<view class="t_title">任务名称：</view>
|
||
<view class="tips">{{item.remark}}</view>
|
||
</view>
|
||
<view class="t_item">
|
||
<view class="t_title">金额归属：</view>
|
||
<view class="tips"><text v-if="item.userInfo">{{item.userInfo.nickname}}</text></view>
|
||
</view>
|
||
<view class="t_item">
|
||
<view class="t_title">收益来源：</view>
|
||
<view class="tips">
|
||
<text v-if="item.change_type==202" style="color: #46be61;">{{item.type_desc}}</text>
|
||
<text v-else-if="item.change_type==203" style="color: #ff7c32;">{{item.type_desc}}</text>
|
||
<text v-else="item.change_type==203">{{item.type_desc}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="price">
|
||
<text v-if="current" style="color: #FF7C32;">
|
||
{{item.expenditure==0?'+'+item.income:'-'+item.income}}</text>
|
||
<text>{{item.change_amount_desc}}</text>
|
||
<!-- {{current?(item.expenditure==0?'+'+item.income:'-'+item.income):item.change_amount_desc}} -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
|
||
<u-loadmore :status="loadConfig.status" :loading-text="loadConfig.loadingText"
|
||
:loadmore-text="loadConfig.loadmoreText" :nomore-text="loadConfig.nomoreText" />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
accountMonthList,
|
||
accountDateList
|
||
} from "@/api/company.js"
|
||
import {
|
||
Toast
|
||
} from "../../libs/uniApi";
|
||
export default {
|
||
name: "companyFinance",
|
||
data() {
|
||
return {
|
||
current: 0,
|
||
list: [],
|
||
company: {
|
||
company_money: "0",
|
||
deposit: "0"
|
||
},
|
||
loadConfig: {
|
||
page: 1,
|
||
limit: 15,
|
||
lastpage: '',
|
||
loadingText: '努力加载中',
|
||
loadmoreText: '轻轻上拉',
|
||
nomoreText: '没有更多账单了~~',
|
||
status: 'loadmore'
|
||
},
|
||
};
|
||
},
|
||
mounted() {
|
||
uni.$on('companyInfo', (e) => {
|
||
this.company = e;
|
||
this.initLoad();
|
||
})
|
||
},
|
||
methods: {
|
||
navTo(url) {
|
||
if(url){
|
||
uni.showLoading({
|
||
title: '加载中',
|
||
mask: true
|
||
});
|
||
uni.navigateTo({
|
||
url: url,
|
||
success:(res)=> {
|
||
uni.hideLoading();
|
||
res.eventChannel.emit('company_money', { company_money: this.company.company_money })
|
||
}
|
||
})
|
||
}else Toast('暂未开放')
|
||
},
|
||
initLoad() {
|
||
this.loadConfig.page = 1;
|
||
this.loadConfig.status = "loadmore";
|
||
this.list = [];
|
||
this.loadList();
|
||
},
|
||
async loadList() {
|
||
if (this.loadConfig.status == "nomore") return;
|
||
this.loadConfig.status = "loading";
|
||
let res;
|
||
if (this.current == 0) res = await accountDateList({
|
||
page: this.loadConfig.page,
|
||
limit: this.loadConfig.limit,
|
||
company_id: this.$store.state.app.userInfo.company_id
|
||
})
|
||
else res = await accountMonthList({
|
||
page: this.loadConfig.page,
|
||
limit: this.loadConfig.limit,
|
||
company_id: this.$store.state.app.userInfo.company_id
|
||
})
|
||
this.loadConfig.status = "loadmore"
|
||
if (res.data.length < this.loadConfig.limit) {
|
||
this.loadConfig.status = "nomore"
|
||
} else {
|
||
this.loadConfig.page++;
|
||
}
|
||
this.list = [...this.list, ...res.data]
|
||
},
|
||
// 格式化数据
|
||
cCount(value = 0) {
|
||
try {
|
||
return value.toFixed(2);
|
||
} catch (e) {
|
||
return "0.00";
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.c_card {
|
||
padding-top: 28rpx;
|
||
|
||
.f_card {
|
||
margin: 0 auto;
|
||
width: 694rpx;
|
||
height: 158rpx;
|
||
background: $theme-oa-color;
|
||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||
opacity: 1;
|
||
padding: 28rpx;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
color: #fff;
|
||
text-align: center;
|
||
|
||
.item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
font-size: 28rpx;
|
||
flex: 1;
|
||
|
||
&:nth-child(1) {
|
||
border-right: 1px solid #fff;
|
||
}
|
||
|
||
.price {
|
||
font-size: 49rpx;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
|
||
.f_nav {
|
||
margin: 28rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-end;
|
||
|
||
.title {
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
&:before {
|
||
content: "";
|
||
width: 6rpx;
|
||
height: 26rpx;
|
||
border-radius: 10rpx;
|
||
margin-right: 10rpx;
|
||
display: inline-block;
|
||
background-color: #0122c7;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
display: flex;
|
||
|
||
.btn {
|
||
margin-left: 28rpx;
|
||
}
|
||
|
||
.active {
|
||
color: #0122c7;
|
||
}
|
||
}
|
||
}
|
||
|
||
.f_list {
|
||
.item {
|
||
margin: 0 auto;
|
||
margin-bottom: 28rpx;
|
||
width: 694rpx;
|
||
// height: 238rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||
opacity: 1;
|
||
padding: 28rpx;
|
||
|
||
.top {
|
||
margin-bottom: 28rpx;
|
||
font-size: 25rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
|
||
&:before {
|
||
display: inline-block;
|
||
content: '账户收益';
|
||
width: 137rpx;
|
||
height: 49rpx;
|
||
line-height: 49rpx;
|
||
text-align: center;
|
||
background: #FF7C32;
|
||
border-radius: 26rpx 26rpx 26rpx 26rpx;
|
||
color: #fff;
|
||
margin-right: 28rpx;
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.text {
|
||
font-size: 25rpx;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
line-height: 39rpx;
|
||
|
||
.t_item {
|
||
display: flex;
|
||
|
||
.t_title {
|
||
margin-bottom: 16rpx;
|
||
flex-shrink: 0 !important;
|
||
}
|
||
|
||
.tips {
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.price {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: #488F00;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |