huarun/traceCodePackages/traceabilityReport/pages/ganmaoling/index.vue

<template>
	<view class="detail-page">
		<view class="tip">数据更新时间：{{ formatDate(new Date().setDate(new Date().getDate() - 1), 'YYYY-MM-DD') || '--' }}</view>
		
		<scroll-view 
			class="list-scroll" 
			scroll-y="true" 
			refresher-enabled 
			:refresher-triggered="isRefreshing"
			@refresherrefresh="onRefresh"
			@scrolltolower="onLoadMore"
		>
			<view class="list-container">
				<view 
					class="card-item" 
					v-for="(item, index) in rows" 
					:key="index"
					@click="toDetail(item)"
				>
					<view class="left-info">
						<view class="row1-name">{{ item.receiverName }}</view>
						<view class="row2-info">
							<text class="province">{{ item.receiverProvince }}</text>
							<view class="level-tag" :class="getLevelClass(item.customerLevel)">
								{{ item.customerLevel }}
							</view>
						</view>
						<view class="row3-nature">{{ item.customerNature }}</view>
						<view class="row4-manager">{{ item.manager }}</view>
					</view>
					
					<view class="right-info">
						<text class="alert-count">{{ item.alertCount }}次预警</text>
					</view>
				</view>
				
				<view class="loading-more" v-if="loading">
					<image class="loading-icon" src="../../../static/images/loading.png" />
				</view>
				
				<view v-if="!loading && rows.length === 0" class="empty-data">
					<EmptyView text="无相关数据" />
				</view>
                
                <view v-if="!hasMore && rows.length > 0" class="no-more">
                    <text>没有更多数据了</text>
                </view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import EmptyView from "../../../wigets/empty.vue";
import request from '../../../request/index.js'
import { formatDate } from '../../../utils/utils.js'

export default {
	components: {
		EmptyView,
	},
	data() {
		return {
			isRefreshing: false,
			loading: false,
			rows: [],
			totalCount: 60, // Simulated total count
			hasMore: true,
			pageNum: 1,
			pageSize: 20,
		};
	},
	created() {
		this.resetFetch();
	},
	methods: {
		formatDate,
		
		getLevelClass(level) {
			if (level === 'VIP') return 'tag-vip';
			if (level === '二级') return 'tag-l2';
			if (level === '三级') return 'tag-l3';
			return 'tag-default';
		},

		generateFakeData() {
			const newRows = [];
			const levels = ['VIP', '二级', '三级'];
			const provinces = ['北京市', '上海市', '广东省', '浙江省', '江苏省'];
			const natures = ['协议客户', '非协议客户'];
			const managers = ['张明华', '李建华', '王丽萍', '陈大文'];

			const startIdx = (this.pageNum - 1) * this.pageSize;
			const endIdx = Math.min(startIdx + this.pageSize, this.totalCount);

			if (startIdx >= this.totalCount) {
				this.hasMore = false;
				return [];
			}

			for (let i = startIdx; i < endIdx; i++) {
				newRows.push({
					id: i,
					receiverName: `测试收货企业${i + 1}有限公司`,
					receiverProvince: provinces[i % provinces.length],
					customerLevel: levels[i % levels.length],
					customerNature: natures[i % natures.length],
					manager: managers[i % managers.length],
					alertCount: Math.floor(Math.random() * 10) + 1,
				});
			}
			return newRows;
		},

		async onRefresh() {
			this.isRefreshing = true;
			this.pageNum = 1;
			this.hasMore = true;
			// Simulate network request
			setTimeout(() => {
				this.rows = this.generateFakeData();
				this.isRefreshing = false;
			}, 1000);
		},

		onLoadMore() {
			if (this.loading || !this.hasMore) return;
			this.loading = true;
			this.pageNum++;
			
			// Simulate network request
			setTimeout(() => {
				const more = this.generateFakeData();
				if (more.length > 0) {
					this.rows = [...this.rows, ...more];
				} else {
					this.hasMore = false;
				}
				this.loading = false;
			}, 800);
		},

		resetFetch() {
			this.loading = true;
			this.pageNum = 1;
			this.hasMore = true;
			// Simulate initial load
			setTimeout(() => {
				this.rows = this.generateFakeData();
				this.loading = false;
			}, 500);
		},

		toDetail(item) {
			uni.navigateTo({
				url: `/traceCodePackages/traceabilityReport/pages/ganmaoling/detail/index?id=${item.id}&name=${encodeURIComponent(item.receiverName)}`
			});
		}
	},
};
</script>

<style scoped>
.detail-page {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 116rpx - env(safe-area-inset-bottom));
	box-sizing: border-box;
	background: #f3f6f9;
}

.tip {
	font-size: 24rpx;
	color: #999;
	padding: 24rpx;
	background: #f3f6f9;
}

.list-scroll {
	flex: 1;
	height: 0; /* Important for flex expansion */
	padding: 0 24rpx;
    box-sizing: border-box;
}

.list-container {
	padding-bottom: calc(50rpx + env(safe-area-inset-bottom));
    padding-left: 24rpx;
    padding-right: 24rpx;
}

.card-item {
	display: flex;
	justify-content: space-between;
	align-items: flex-start; /* Align top */
	background: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.left-info {
	flex: 1;
	margin-right: 20rpx;
}

.row1-name {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 16rpx;
}

.row2-info {
	display: flex;
	align-items: center;
	margin-bottom: 12rpx;
}

.province {
	font-size: 26rpx;
	color: #666;
	margin-right: 20rpx;
}

.level-tag {
	font-size: 22rpx;
	padding: 4rpx 12rpx;
	border-radius: 6rpx;
	background: #f0f0f0;
	color: #666;
}

.tag-vip {
	background: #e6f7ff;
	color: #1890ff;
}

.tag-l2 {
	background: #f6ffed;
	color: #52c41a;
}

.tag-l3 {
	background: #fff7e6;
	color: #fa8c16;
}

.row3-nature {
	font-size: 26rpx;
	color: #666;
	margin-bottom: 12rpx;
}

.row4-manager {
	font-size: 26rpx;
	color: #666;
}

.right-info {
	display: flex;
	align-items: center;
    align-self: center; /* Center vertically relative to card */
}

.alert-count {
	background: #fff2f0;
	color: #ff4d4f;
	font-size: 24rpx;
	padding: 8rpx 20rpx;
	border-radius: 30rpx;
	font-weight: bold;
}

.loading-more {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20rpx 0;
}

.loading-icon {
	width: 32rpx;
	height: 32rpx;
	margin-right: 10rpx;
	animation: spin 1s linear infinite;
}

.empty-data {
    display: flex;
    justify-content: center;
    padding-top: 100rpx;
}

.no-more {
    text-align: center;
    color: #999;
    font-size: 24rpx;
    padding: 20rpx 0;
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
</style>