school-peisong/pages/shop/shopSettlementDetail.vue

<template>
	<!-- 商家订单详情 -->
	<view class="page1">
		<view class="title">
			<view class="title-sreach">
				<view class="back-btn" @tap="back">
					<uni-icons type="left" size="28"></uni-icons>
				</view>
				<view class="title-name">
					账单详情
				</view>
			</view>
		</view>
		<view class="content">
			<view class="box1">
				<view style="font-size: 14px;font-weight: 700;margin-bottom: 10px;">
					2026-04-09
				</view>
				<view style="display: flex;font-weight: 700;">
					<view style="flex: 1;">
						结算金额：￥100.00
					</view>
					<view style="flex: 1;">
						实际打款金额：￥100.00
					</view>
				</view>
			</view>
			<view class="box1">
				<uni-table border stripe emptyText="暂无更多数据" >
					<!-- 表头行 -->
					<uni-tr>
						<uni-th width="100" align="center">订单编号</uni-th>
						<uni-th width="100" align="center">商品金额</uni-th>
						<uni-th width="100" align="center">餐盒费</uni-th>
						<uni-th width="100" align="center">平台抽佣</uni-th>
						<uni-th width="100" align="center">结算金额</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr>
						<uni-td align="center">5154564164654</uni-td>
						<uni-td align="center">24</uni-td>
						<uni-td align="center">1</uni-td>
						<uni-td align="center">1</uni-td>
						<uni-td align="center">22</uni-td>
					</uni-tr>
					<uni-tr>
						<uni-td align="center">5154564164654</uni-td>
						<uni-td align="center">24</uni-td>
						<uni-td align="center">1</uni-td>
						<uni-td align="center">1</uni-td>
						<uni-td align="center">22</uni-td>
					</uni-tr>
					<uni-tr>
						<uni-td align="center">5154564164654</uni-td>
						<uni-td align="center">24</uni-td>
						<uni-td align="center">1</uni-td>
						<uni-td align="center">1</uni-td>
						<uni-td align="center">22</uni-td>
					</uni-tr>
					<uni-tr>
						<uni-td align="center">5154564164654</uni-td>
						<uni-td align="center">24</uni-td>
						<uni-td align="center">1</uni-td>
						<uni-td align="center">1</uni-td>
						<uni-td align="center">22</uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		filters:{
			formatISOTime(isoString) {
			  const date = new Date(isoString);
			  const year = date.getFullYear();
			  const month = (date.getMonth() + 1).toString().padStart(2, '0');
			  const day = date.getDate().toString().padStart(2, '0');
			  const hours = date.getHours().toString().padStart(2, '0');
			  const minutes = date.getMinutes().toString().padStart(2, '0');
			  const seconds = date.getSeconds().toString().padStart(2, '0');
			  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			}
		},
		onShow() {
			
		},
		onLoad() {
		},
		methods: {
			back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		background: #F5F8F5;
		color: #00231C;
	}

	.page1 {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		position: relative;
	}

	.title {
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
		width: 100%;
		height: 20%;
	}

	.title-sreach {
		width: 100%;
		display: flex;
		height: 200rpx;
		position: relative;
	}

	.back-btn {
		padding-top: 110rpx;
	}

	.title-name {
		padding-top: 110rpx;
		font-size: 36rpx;
		font-weight: 700;
		flex: 1;
		text-align: center;
	}
	.content{
		margin: -140rpx auto;
	}
	.box1 {
		width: 95%;
		margin: 20rpx auto;
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
	}
</style>