uniapp-app/pages_app/myFlower/myFlower.vue

<template>

	<view class="flower-page">
		<!-- 顶部统计栏（与截图一致：两项） -->
		<view class="stats-bar">
			<view class="stat">
				<up-image  :src="flowerImg" width="36rpx" height="36rpx" ></up-image>
				<text class="num">{{ stat.totalCount }}</text>
			</view>
			<view class="stat">
				<up-image  :src="moneyImg" width="36rpx" height="36rpx" ></up-image>
				<text class="num">{{ stat.totalAmount.toFixed(2) }}</text>
			</view>
		</view>

		<!-- 表头条（红底白字） -->
		<view class="table-header">
			<text class="col name">姓名</text>
			<text class="col time">时间</text>
			<text class="col qty">数量</text>
		</view>

		<!-- 表体/列表或空状态 -->
		<scroll-view 
			class="table-body" 
			scroll-y 
			:show-scrollbar="false"
			refresher-enabled
			:refresher-triggered="refreshing"
			@refresherrefresh="onRefresh"
			@scrolltolower="onLoadMore"
			lower-threshold="80"
		>
			<view v-if="records.length === 0" class="empty-wrap">
				<up-image  :src="emptyImg" width="176rpx" height="204rpx" ></up-image>
				<text class="empty-text">您暂未收到鲜花</text>
			</view>

			<view v-else class="row" v-for="(item, idx) in records" :key="idx">
				<text class="cell name">{{ item.name }}</text>
				<text class="cell time">{{ item.time }}</text>
				<text class="cell qty" :class="{ plus: item.amount > 0, minus: item.amount < 0 }">{{ item.amount }}</text>
			</view>

			<view v-if="loading" class="loading">加载中...</view>
			<view v-if="noMore" class="no-more">没有更多了</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import flowerImg from "@/static/flowers.png"
import moneyImg from "@/static/mind_totle_money.png"
import emptyImg from "@/static/icon_empty.png"
// 与截图一致的顶部两项统计：总鲜花数与累计金额
const stat = ref({ totalCount: 0, totalAmount: 0.0 });

// 与表格结构匹配：姓名/时间/数量
const records = ref([]);

// 列表状态
const refreshing = ref(false);
const loading = ref(false);
const noMore = ref(false);
const page = ref(1);
const pageSize = ref(10);

const mockMore = Array.from({ length: 24 }).map((_, i) => ({
	name: i % 2 ? '王医生' : '李医生',
	time: `2025-06-${20 + (i % 10)} 17:1${i % 6}:2${i % 9}`,
	amount: i % 2 ? +1 : +2
}));

const goBack = () => {
	uni.navigateBack({
		fail() {
			uni.redirectTo({ url: '/pages/index/index' });
		}
	});
};

const onRefresh = async () => {
	if (refreshing.value) return;
	refreshing.value = true;
	try {
		await new Promise(r => setTimeout(r, 600));
		page.value = 1;
		noMore.value = false;
		records.value = []; // 清空为模拟无数据或重新拉取
		uni.showToast({ title: '刷新成功', icon: 'success' });
	} finally {
		refreshing.value = false;
	}
};

const onLoadMore = async () => {
	if (loading.value || noMore.value) return;
	loading.value = true;
	try {
		await new Promise(r => setTimeout(r, 600));
		const start = (page.value - 1) * pageSize.value;
		const chunk = mockMore.slice(start, start + pageSize.value);
		if (!chunk.length) {
			noMore.value = true;
		} else {
			records.value.push(...chunk);
			page.value += 1;
		}
	} finally {
		loading.value = false;
	}
};
</script>

<style lang="scss" scoped>
$theme: #8B2316;
$bg: #ffffff;
$text: #333;
$muted: #999;
$card: #ffffff;

.flower-page { height: calc(100vh - 140rpx); background: $bg; }

.stats-bar {
	display: flex;
	
	align-items: center;
	padding: 24rpx 30rpx;
	background: #fff;
	border-bottom: 2rpx solid #eee;

	.stat { display: flex; align-items: center; gap: 16rpx; }
	.stat:last-child{
		margin-left: 120px;
	}
	.icon { font-size: 34rpx; }
	.num { font-size: 30rpx; color: #333; }
}

.table-header {
	background: #9e3a2e;
	color: #fff;
	display: flex;
	justify-content: space-between;
	padding: 22rpx 30rpx;
	font-size: 30rpx;
	position: sticky;
	top: 140rpx; /* nav 高度 */
	z-index: 5;

	.col { width: 33%; }
	.name { text-align: left; }
	.time { text-align: center; }
	.qty { text-align: right; }
}

.table-body {
	height: calc(100vh - 140rpx - 88rpx - 70rpx);
	/* 充满剩余高度，避免滚动穿透 */
}

.row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 26rpx 30rpx;
	border-bottom: 2rpx solid #f2f2f2;
	font-size: 28rpx;
	color: #333;

	.cell { width: 33%; }
	.name { text-align: left; }
	.time { text-align: center; color: #666; }
	.qty { text-align: right; }
	.qty.plus { color: #2dbd85; }
	.qty.minus { color: #e34d4d; }
}

.empty-wrap { padding-top: 200rpx; display: flex; flex-direction: column; align-items: center; color: #bdbdbd; }
.empty-icon { width: 220rpx; height: 220rpx; opacity: .4; }
.empty-text { margin-top: 20rpx; font-size: 30rpx; }

.loading, .no-more { text-align: center; color: #9aa0a6; padding: 20rpx 0; font-size: 26rpx; }
</style>