OfficeApp/components/companyFinance/companyFinance.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>