271 lines
7.4 KiB
Vue
271 lines
7.4 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/withdrawDeposit')">
|
||
<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">
|
||
<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">
|
||
<!-- {{current?item.remark:item.type_desc}} -->
|
||
<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">{{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;
|
||
console.log(this.company);
|
||
this.initLoad();
|
||
})
|
||
},
|
||
methods:{
|
||
navTo(url) {
|
||
url ?
|
||
uni.navigateTo({
|
||
url: url,
|
||
}) : Toast('暂未开放')
|
||
},
|
||
initLoad(){
|
||
this.loadConfig.page = 1;
|
||
this.loadConfig.status = "loadmore";
|
||
this.list = [];
|
||
this.initList();
|
||
},
|
||
async initList(){
|
||
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: #3175F9;
|
||
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: #3175F9;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
display: flex;
|
||
|
||
.btn {
|
||
margin-left: 28rpx;
|
||
}
|
||
|
||
.active {
|
||
color: #3175F9;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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: #3274F9;
|
||
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: #999999;
|
||
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: #F02828;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |