LocalLivingServicesUniapp/pages/finance/SeverDetails.vue

<template>
	<view class="settle">
		<view class="fix">
			<view class="top"></view>
			<view class="head">
				<span class="cuIcon-back" @click="back"></span>
				<view class="case"> 结算详情 </view>
			</view>
		</view>

		<view class="settle-card">
			<view class="settle-header">
				<view class="amount">¥{{ settlementInfo.amountPayable }}</view>
			</view>
			<view class="settle-info">
				<view class="info">
					<view class="label">结算单号</view>
					<view class="value">{{ settlementInfo.statementNumber }}</view>
				</view>

				<view class="info">
					<view class="label">结算时间</view>
					<view class="value">{{ settlementInfo.settlementTime }}</view>
				</view>

				<view class="info">
					<view class="label">结算金额</view>
					<view class="value">¥{{ settlementInfo.amountPayable }}</view>
				</view>

				<view class="info">
					<view class="label">结算明细范围</view>
					<view class="value">{{ settlementInfo.settlementScopeStartTime }} -
						{{ settlementInfo.settlementScopeEndTime }}</view>
				</view>

				<view class="info">
					<view class="label">操作人</view>
					<view class="value">{{ settlementInfo.operator }}</view>
				</view>

				<view class="info">
					<view class="label">结算状态</view>
					<view class="value">{{ settlementInfo.settleStatusName }}</view>
				</view>

				<view class="info">
					<view class="label">结算单据</view>
					<view class="value">{{ settlementInfo.settlementDocument }}</view>
				</view>
			</view>
		</view>

		<!-- 订单列表 -->
		<view class="list-card">
			<OrderList :list="orderList" :jumpType="jumpType" :orderType="orderType"></OrderList>
		</view>
	</view>
</template>

<script>
	import api from '@/api/account';
	import OrderList from './components/order-list.vue';

	export default {
		name: 'SettlementDetails',
		components: {
			OrderList,
		},
		data() {
			return {
				bizId: '',
				jumpType: '',
				// 结算信息
				settlementInfo: {},
				// 订单列表
				orderList: [],
				orderType: ''
			};
		},
		onLoad(options) {
			if (options.id) {
				this.bizId = options.id;
				this.jumpType = options.jumpType;
				this.orderType = options.orderType
			}
		},
		onShow() {
			this.getDetails(this.bizId, this.jumpType);
		},
		methods: {
			getDetails(id, jumpType) {
				api
					.settlementDetail({
						settlementId: id,
						jumpType
					})
					.then((res) => {
						if (res.data.code === 200) {
							this.settlementInfo = res.data.result;
							this.orderList = res.data.result.orderList || [];
						} else {
							uni.showToast({
								title: res.data.msg || '获取结算详情失败',
								icon: 'none',
							});
						}
					})
					.catch(() => {
						uni.showToast({
							title: '获取结算详情失败',
							icon: 'none',
						});
					});
			},
			back() {
				uni.navigateBack({
					delta: 1,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.settle {
		background: #f7f8fc;
		min-height: 100vh;
		font-family: Source Han Sans SC;
		padding-bottom: 100rpx;

		.fix {
			position: sticky;
			top: 0;

			/*#ifdef APP-PLUS*/
			.top {
				width: 100%;
				height: var(--status-bar-height);
				background: #fff;
			}

			/*#endif*/

			.head {
				width: 100%;
				height: 112rpx;
				padding: 20rpx;
				display: flex;
				align-items: center;
				background: #fff;
				position: relative;
				border-bottom: 1rpx solid #eeeeee;

				.cuIcon-back {
					font-size: 40rpx;
					margin-right: 40rpx;
				}

				.case {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					font-weight: 500;
					font-size: 38rpx;
					color: #333333;
				}
			}
		}

		.settle-card {
			background-color: #fff;
			padding: 30rpx 31rpx 10rpx;
		}
	}

	.settle-header {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-weight: 500;

		.amount {
			font-weight: 500;
			font-size: 63rpx;
			color: #1f1f1f;
			margin-bottom: 41rpx;
		}
	}

	.settle-info {
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 21rpx;

		&:last-child {
			border-bottom: none;
		}

		.label {
			font-weight: 400;
			font-size: 31rpx;
			color: #666666;
		}

		.value {
			font-weight: 500;
			font-size: 31rpx;
			color: #333333;
		}
	}

	.list-card {
		height: 100%;
		flex: 1;
		overflow: hidden;
		margin: 21rpx 31rpx;
		background-color: #fff;
	}
</style>