RentWeAppFront/pages/center/contract.vue

<template>

	<view class="contract-page">
		<!-- 顶部导航栏 -->
		<customNavbar title="我的合同" />

		<!-- Tabs -->
		<view class="tab-wrapper">
			<u-tabs :list="tabList" :current="currentTab" @change="onTabChange" lineColor="#EA4D3E" activeColor="#EA4D3E"
				itemStyle="padding: 0 30rpx;"></u-tabs>
		</view>

		<DateFilter :start="startDate" :end="endDate" @update:start="startDate = $event" @update:end="endDate = $event"
			@change="onDateFilterChange" />

		<!-- 合同列表 -->
		<scroll-view scroll-y class="scroll-content" @scrolltolower="loadMore" :refresher-enabled="true"
			:refresher-triggered="isRefreshing" @refresherrefresh="refresh">
			<view v-if="contracts.length > 0" class="contract-list">
				<view class="contract-card" v-for="item in contracts" :key="item.id" @click="goDetail(item)">
					<image class="contract-cover" :src="item.coverUrl || defaultCover" mode="aspectFill" />

					<view class="contract-info">
						<view class="top-row">
							<text class="asset-name">{{ item.assetName }}</text>
							<u-icon name="arrow-right" size="28" color="#ccc" />
						</view>
						<view class="asset-room">{{ item.assetRoom || "—" }}</view>
						<view class="date-range">{{ item.startDate }} ~ {{ item.endDate }}</view>

						<view :class="['status-tag', item.status]">
							{{ getStatusText(item.status) }}
						</view>
					</view>
				</view>

				<u-loadmore :status="loadStatus" />
			</view>

			<view v-else class="empty">
				<u-empty mode="list" text="暂无合同记录" />
			</view>
		</scroll-view>


	</view>

</template>


<script>
import DateFilter from '../../components/DatePicker/DateFilter.vue';
export default {
	components: { DateFilter },
	data() {
		return {
			tabList: [{
				name: "全部",
				value: "all"
			},
			{
				name: "待签署",
				value: "pending"
			},
			{
				name: "已签署",
				value: "signed"
			},
			{
				name: "已过期",
				value: "expired"
			},
			],

			currentTab: 0,
			statusFilter: "all",

			// --- 时间筛选 ---
			startDate: "",
			endDate: "",
			// 可选：限制日期范围
			minDate: "2000-01-01",
			maxDate: "2099-12-31",
			contracts: [],
			pageNo: 1,
			pageSize: 10,
			total: 0,
			loadStatus: "loadmore",
			isRefreshing: false,
			defaultCover: "/static/img/index/swiper/swiper3.jpg",
		};
	},

	onLoad() {
		this.loadContracts(true);
	},

	methods: {
		onTabChange(index) {
			this.currentTab = index;
			this.statusFilter = this.tabList[index].value;
			this.resetAndLoad();
		},
		onDateFilterChange({ start, end }) {
			this.resetAndLoad();
		},

		formatDate(time) {
			const d = new Date(time);
			const m = String(d.getMonth() + 1).padStart(2, "0");
			const day = String(d.getDate()).padStart(2, "0");
			return `${d.getFullYear()}-${m}-${day}`;
		},

		resetAndLoad() {
			this.pageNo = 1;
			this.contracts = [];
			this.loadStatus = "loading";
			this.loadContracts(true);
		},

		/** 你的 loadContracts() 保持不变，只需加：按时间筛选 */
		loadContracts(isInit = false) {
			this.loadStatus = "loading";

			setTimeout(() => {
				let mockAll = [{
					id: 1,
					assetName: '金辉大厦',
					assetRoom: '502',
					coverUrl: '',
					status: 'pending',
					startDate: '2025-01-01',
					endDate: '2025-12-31'
				},
				{
					id: 2,
					assetName: '东方广场',
					assetRoom: '',
					status: 'signed',
					startDate: '2024-03-01',
					endDate: '2025-03-01'
				},
				{
					id: 3,
					assetName: '海景公寓',
					assetRoom: 'A-1201',
					status: 'expired',
					startDate: '2023-01-01',
					endDate: '2024-01-01'
				},
				{
					id: 4,
					assetName: '富力中心',
					assetRoom: '1699',
					status: 'pending',
					startDate: '2024-10-01',
					endDate: '2025-10-01'
				},
				{
					id: 5,
					assetName: '财富大厦',
					assetRoom: '2308',
					status: 'signed',
					startDate: '2023-06-01',
					endDate: '2024-06-01'
				}
				];

				// 状态过滤
				if (this.statusFilter !== "all") {
					mockAll = mockAll.filter(i => i.status === this.statusFilter);
				}

				// 时间过滤
				if (this.startDate) mockAll = mockAll.filter(i => i.startDate >= this.startDate);
				if (this.endDate) mockAll = mockAll.filter(i => i.endDate <= this.endDate);

				// 分页
				this.total = mockAll.length;
				const start = (this.pageNo - 1) * this.pageSize;
				const pageList = mockAll.slice(start, start + this.pageSize);

				if (this.pageNo === 1) {
					this.contracts = pageList;
				} else {
					this.contracts = [...this.contracts, ...pageList];
				}

				this.loadStatus = this.contracts.length >= this.total ? "nomore" : "loadmore";
				this.isRefreshing = false;
			}, 400);
		},

		refresh() {
			this.isRefreshing = true;
			this.resetAndLoad();
		},

		loadMore() {
			if (this.loadStatus !== "loadmore") return;
			this.pageNo++;
			this.loadContracts();
		},

		goDetail(item) {
			uni.navigateTo({
				url: `/pages/detail/contractDetail?id=${item.id}`,
			});
		},

		getStatusText(status) {
			switch (status) {
				case "pending":
					return "待签署";
				case "signed":
					return "已签署";
				case "expired":
					return "已过期";
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.contract-page {
	background-color: #f8f8f8;
	padding-top: 120rpx;
	/* 给导航栏留空间 */
	min-height: 100vh;
}

.scroll-content {
	height: calc(100vh - 100rpx);
}

.contract-list {
	padding: 20rpx;
}

.contract-card {
	display: flex;
	background: #fff;
	border-radius: 16rpx;
	margin-bottom: 24rpx;
	padding: 20rpx;
	box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
	position: relative;
}

.contract-cover {
	width: 193rpx;
	height: 145rpx;
	border-radius: 10rpx;
	background-color: #FCE5E0;
	flex-shrink: 0;
}

.contract-info {
	flex: 1;
	margin-left: 20rpx;
	display: flex;
	flex-direction: column;
	position: relative;
}

.top-row {
	display: flex;
	justify-content: space-between;
	align-items: center;

	.asset-name {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		flex: 1;
	}
}

.asset-room {
	font-size: 26rpx;
	color: #555;
	margin-top: 18rpx;
}

.date-range {
	font-size: 24rpx;
	color: #888;
	margin-top: 20rpx;
}

.status-tag {
	position: absolute;
	bottom: 20rpx;
	right: 0rpx;
	padding: 12rpx 15rpx;
	border-radius: 6rpx;
	font-size: 26rpx;

	&.pending {
		background: #FEEDDD;
		color: #EFA049;
	}

	&.signed {
		background: #FCE5E0;
		color: #ED7748;
	}

	&.expired {
		background: #CDCDCD;
		color: #969696;
	}
}

.empty {
	margin-top: 200rpx;
}

.tab-wrapper {
	background-color: #ffffff;
	padding: 10rpx 0;
	box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.06);
	position: sticky;
	top: 0;
	z-index: 10;
}
</style>