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

<template>
	<view class="account-details">
		<view class="details-top">
			<view class="details-total">
				总额：{{ accountInfo.balance | moneyFilter }}
			</view>
			<view class="details-change">
				<view class="income">
					流入：{{ accountInfo.inflow | moneyFilter }}
				</view>
				<view class="divide-line"></view>
				<view class="out">
					流出：{{ accountInfo.flowOut | moneyFilter }}
				</view>
			</view>
		</view>
		<view class="details-list">
			<view class="details-item" v-for="(record, index) in recordList" :key="index">
				<uni-card padding="0" spacing="0" class="detail-card">
					<template v-slot:title>
						<view class="record-title">
							<view class="title-left">
								<span class="title-day">{{ new Date(record.payTime).getDate() }}</span>
								<span class="title-week">日 / 周{{ $parseTime(new Date(record.payTime), '{a}') }}</span>
							</view>
							<view class="title-right">
								<span v-if="$arraySum(record.recordList.filter(item => { return item.typeObject.typeDifference === '0' }), 'money')">
									<svg-icon class="money-change" icon-class="加号"/>
								    <span>
										{{ $arraySum(record.recordList.filter(item => { return item.typeObject.typeDifference === '0' }), 'money') | moneyFilter }}
									</span>
								</span>
								<span v-if="$arraySum(record.recordList.filter(item => { return item.typeObject.typeDifference === '1' }), 'money')">
								    <svg-icon class="money-change" icon-class="减少"/>
									<span>
										{{ $arraySum(record.recordList.filter(item => { return item.typeObject.typeDifference === '1' }), 'money') | moneyFilter }}
									</span>
								</span>
							</view>
						</view>
					</template>
					<uni-list>
						<uni-list-item
							v-for="note in record.recordList"
							:key="note.id"
							class="record-list"
							showArrow>
							<template v-slot:header>
								<view class="note-item">
									<svg-icon :icon-class="note.typeObject.typeIcon || ''"/>
									<view class="note-record">
										<view v-if="note.typeObject.typeDifference === '2'">
											<span>{{ note.accountObject.accountName }}</span>
											<svg-icon icon-class="右箭头"/>
											<span>{{ note.otherAccountObject.accountName }}</span>
										</view>
										<view v-else>{{ note.typeObject.typeName }}</view>
										<view class="note-remark">
											{{ note.remark }}
										</view>
									</view>
								</view>
							</template>
							<view class="chat-custom-right">
											<text class="chat-custom-text">刚刚</text>
											<!-- 需要使用 uni-icons 请自行引入 -->
											<uni-icons type="star-filled" color="#999" size="18"></uni-icons>
										</view>
						</uni-list-item>
					</uni-list>
				</uni-card>
			</view>
		</view>
	</view>
</template>

<script>
	import { getAccount } from "@/api/px/life/bookkeeping/account";
	import { listRecord } from "@/api/px/life/bookkeeping/record";
	
	export default {
		data() {
			return {
				// 当前账户信息
				accountInfo: {},
				// 当前账户记录列表
				recordList: []
			}
		},
		onLoad(router) {
			this.getAccount(router);
			this.getRecordList(router);
		},
		onNavigationBarButtonTap(val) {
			this.$tab.navigateTo('/pages_life/bookkeeping/account/maintenance?accountId='+ this.accountInfo.id)
		},
		methods: {
			/**
			 * 获取账户信息
			 */
			getAccount(router) {
				getAccount(this.$route.query.accountId).then(res => {
				    this.accountInfo = res.data;
					uni.setNavigationBarTitle({
						title: this.accountInfo.accountName
					});
				})
			},
			/**
			 * 获取记录列表
			 */
			getRecordList(router) {
				listRecord({ account: router.accountId }).then(res => {
					res.rows.forEach(item => {
						if (this.recordList.find(i => i.payTime === this.$parseTime(new Date(item.payTime), '{y}-{m}-{d}'))) {
							this.recordList.find(i => i.payTime === this.$parseTime(new Date(item.payTime), '{y}-{m}-{d}')).recordList.push(item)
						} else {
							this.recordList.push({
								payTime: this.$parseTime(new Date(item.payTime), '{y}-{m}-{d}'),
								recordList: [item]
							})
						}
					});
					this.$sortDesByKey(this.recordList, 'payTime');
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.account-details {
		padding: 1rem;
		.details-top {
			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-weight: bold;
			border-radius: 0.5rem;
			.details-total {
				margin-bottom: 1rem;
				font-size: 16px;
			}
			.details-change {
				display: flex;
				align-items: center;
				height: 1rem;
				.divide-line {
					margin: 0 1rem;
					width: 2px;
					height: 100%;
					background-color: $uni-bg-color;
				}
			}
		}
		.details-list {
			.details-item {
				.detail-card {
					margin: 1rem 0 !important;
					.record-title {
						padding: 1rem 0.5rem;
						display: flex;
						justify-content: space-between;
						font-size: 16px;
						.title-left {
							.title-day {
								font-weight: bold;
							}
							.title-week {
								color: $uni-text-color-dark-grey;
								font-size: 14px;
							}
						}
						.title-right {
							.money-change {
								margin: 0 0.3rem;
							}
						}
					}
					.record-list {
						.note-item {
							display: flex;
							align-items: center;
							color: $uni-text-color;
							.note-record {
								margin-left: 1rem;
								.note-remark {
									font-size: 14px;
									color: $uni-text-color-grey;
								}
							}
						}
					}	
				}
			}
		}
	}
</style>