pnkx-admin-mongo/pnkx-uniapp/pages_life/bookkeeping/account/index.vue

<template>
	<view class="account">
		<view class="account-total">
			<view class="total-text">
				总资产：
			</view>
			<view class="total-number">
				{{ totalAssets | moneyFilter }}
			</view>
		</view>
		<view class="account-list">
			<view class="account-part" v-for="item in accountInfoList" :key="item.dictValue">
				<view class="account-title">
					<view class="left-line"></view>
					<view class="account-label">{{ item.dictLabel }}</view>
					<view class="account-balance">资产：{{ $arraySum(item.accountList, 'balance') | moneyFilter }}</view>
				</view>
				<uni-card
					v-for="account in item.accountList"
					:key="account.id"
					:title="account.accountName"
					:extra="account.balance | moneyFilter"
					 class="account-card"
					@click="$tab.navigateTo('/pages_life/bookkeeping/account/details?accountId='+account.id)"
				>
					<text class="uni-body">
						<view class="account-remark">
							{{ account.remark }}
						</view>
						<uni-icons type="right" size="16"></uni-icons>
					</text>
				</uni-card>
			</view>
		</view>
	</view>
</template>

<script>
	import { listAccount } from "@/api/px/life/bookkeeping/account";
	import { getDicts } from "@/api/system/dict/data";
	import { moneyFilter } from "@/utils/filters";

	export default {
		data() {
			return {
				// 账户合计
				totalAssets: [],
				// 账户信息列表
				accountInfoList: []
			}
		},
		onLoad() {
			this.getAccountList();
		},
		onNavigationBarButtonTap(val) {
			this.$tab.navigateTo('/pages_life/bookkeeping/account/maintenance')
		},
		methods: {
			/**
			 * 获取账户列表信息
			 */
			getAccountList() {
				let accountList = [];
				this.totalAssets = 0;
				listAccount().then(res => {
					accountList = res.rows;
					getDicts('px_bookkeeping_account_type').then(response => {
						const accountInfo = response.data.map(r => {
							return {
								...r,
								accountList: [],
							}
						});
						accountList.forEach(item => {
							this.totalAssets += parseInt(item.balance);
							accountInfo.find(a => {
								return a.dictValue === item.accountType
							}).accountList.push(item)
						});
						this.accountInfoList = accountInfo;
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.account {
		padding: 1rem;
		.account-total {
			padding: 1rem;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			height: 10rem;
			background-image: url("https://pnkx.cloud:8866/ftp/2022/04/02/71537678-0fd7-4521-a96f-5354b3f126b1.jpg");
			background-size: 100% 100%;
			color: $uni-text-color-inverse;
			font-size: 16px;
			font-weight: bold;
			border-radius: 0.5rem;
			.total-number {
				margin-top: 0.5rem;
			}
		}
		.account-list {
			::v-deep .account-part {
				&:first-child {
					.account-title {
						margin-top: 1rem;
					}
				}
				.account-title {
					display: flex;
					align-items: center;
					height: 2rem;
					color: #008080;
					.left-line {
						margin-right: 0.5rem;
						width: 0.2rem;
						height: 1rem;
						background-color: #00CED1;
						border-radius: 0.5rem;
					}
					.account-balance {
						margin-left: 1rem;
					}
				}
				.account-card {
					margin: 1rem 0 !important;
					.uni-card__header {
						.uni-card__header-extra-text {
							font-weight: bold;
						}
					}
					.uni-card__content {
						.uni-body span {
							display: flex;
							.account-remark {
								width: calc(100% - 1.5rem);
							}
							.uni-icons {
								display: flex;
								justify-content: flex-end;
								align-items: center;
								width: 1.5rem;
							}
						}
					}
				}
			}
		}
	}
</style>