RentWeAppFront/pages-biz/contract/contract.vue

<template>

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

		<!-- 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.contractNo" @click="goDetail(item)">
					<image class="contract-cover" :src="staticHost + (item.coverImgUrl || defaultCover)" mode="aspectFill" />

					<view class="contract-info">
						<view class="top-row">
							<text class="asset-name">{{ $ellipsis(item.assetName,12) }}</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.signStatus]">
							{{ getStatusText(item.signStatus) }}
						</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: "/public/static/assets.jpg",
		};
	},

	onLoad(options) {
		this.loadContracts();
	},
    onShow() {
        this.$checkToken(this.$getToken())
    },
	computed: {
	staticHost() {
		return this.$config.staticUrl
	}	
	},
	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 = "loadmore";
			this.loadContracts();
		},

		/** 你的 loadContracts() 保持不变，只需加：按时间筛选 */
		loadContracts() {
			  if (this.loadStatus !== 'loadmore') return;
			
			  this.loadStatus = 'loading';
			
			  this.$u.post('/contract/queryPage', {
			    pageNo: this.pageNo,
			    pageSize: this.pageSize,
			    startDate: this.startDate,
			    endDate: this.endDate,
			    signStatus: this.statusFilter
			  }, {
			    WT: this.$getToken()
			  }).then(result => {
			
			    const rows = result.data.result || [];
			
			    // 第一页 & 无数据
			    if (this.pageNo === 1 && rows.length === 0) {
			      this.contracts = [];
			      this.loadStatus = 'nomore';
			      return;
			    }
			
			    // 追加数据
			    this.contracts = this.contracts.concat(rows);
			
			    // 是否还有下一页（核心判断）
			    if (rows.length < this.pageSize) {
			      this.loadStatus = 'nomore';
			    } else {
			      this.pageNo++;              // ✅ 只有这里才能 +1
			      this.loadStatus = 'loadmore';
			    }
			
			  }).catch(err => {
			    console.log("获取合同信息失败：", err);
			    this.loadStatus = 'loadmore';
			  }).finally(() => {
			    this.isRefreshing = false;
			  });
		},

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

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

		goDetail(item) {
			uni.navigateTo({
				url: `/pages-biz/contract/contractDetail?contractNo=${item.contractNo}`,
			});
		},

		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: 170rpx;
	/* 给导航栏留空间 */
	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>