RentWeAppFront/pages-assets/discharge/leaseCancelList.vue

<template>
	<view class="reserve-records">

		<!-- 顶部导航栏 -->
		<customNavbar title="退租申请" :is-transparent="navbarStyle.isTransparent" :bg-color="navbarStyle.bgColor"
			:text-color="navbarStyle.textColor" :opacity="navbarStyle.opacity" :show-home="true" />
		<!-- 内容部分 -->
		<scroll-view scroll-y class="scroll-content" @scrolltolower="loadMore" @refresherrefresh="refresh"
			:refresher-enabled="true" :refresher-triggered="isRefreshing">
			<view v-if="flowList.length > 0" class="record-list">
				<view v-for="item in flowList" :key="item.id" class="record-card" @click="goDetail(item)">
					<!-- 合同名称和状态 -->
					<view class="card-header">
						<text class="contract-name">{{ item.contractName }}</text>
						<text :class="['record-status', statusText(item.status)]">
							{{ item.status||'未知' }}
						</text>
					</view>

					<!-- 内容部分 -->
					<view class="card-content">
						<!-- 预约时间 -->
						<view class="info-item">
							<text class="info-label">申请时间：</text>
							<text class="info-value"> {{item.applyDate || ''}} </text>
						</view>
						<view class="info-item">
							<text class="info-label">退租资产：</text>
							<text class="info-value"> {{item.dischargeItem || ''}} </text>
						</view>
                        <view class="info-item">
							<text class="info-label">审批意见：</text>
							<text class="info-value"> {{item.remark || ''}} </text>
						</view>
					</view>
				</view>

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

			<view v-else class="empty">
				<u-empty mode="list" text="暂无退租申请记录" />
			</view>
		</scroll-view>
		<!-- 底部新增留言按钮 -->
		<!-- <view class="add-btn-container">
			<button class="add-btn" @click="toApply()">新增退租申请</button>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageNo: 1,
				pageSize: 10,
				flowList: [],
				loadStatus: 'loadmore',
				isRefreshing: false
			};
		},
		methods: {
			statusText(status) {
				switch (status) {
					case '申请中':
					case '已批准':
						return 'pending';
					case '退租完成':
						return 'done';
					case '已驳回':
							return 'reject';
					default:
						return 'unknown';
				}
			},
			formatDate(dateStr) {
				// 格式化日期，例如：2025-11-10 周五 09:00
				const date = new Date(dateStr);
				const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const weekday = weekdays[date.getDay()];
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');

				return `${year}-${month}-${day} ${weekday} ${hours}:${minutes}`;
			},
			fetchApplys() {
				if (this.loadStatus !== 'loadmore') return;
				this.loadStatus = 'loading';
				let url = '/discharge/queryPage'
				this.$u.post(url, {
					pageNo: this.pageNo,
					pageSize: this.pageSize
				}, {
					WT: this.$getToken()
				}).then(res => {
					const rows = res.data.result || [];
					if (this.pageNo === 1) this.flowList = [];
					this.flowList = this.flowList.concat(rows);
					if (rows.length < this.pageSize) {
						this.loadStatus = 'nomore';
					} else {
						this.pageNo++;
						this.loadStatus = 'loadmore';
					}
				}).catch(err => {
					console.log("获取退租申请信息失败：", err)
					this.loadStatus = 'loadmore';
				})
			},
			toApply() {
				this.$u.route({
					url: '/pages-assets/discharge/leaseCancel'
				})
			},
			viewLocation(item) {
				uni.openLocation({
					latitude: item.lat,
					longitude: item.lng,
					name: item.assetName,
					address: item.assetAddress
				});
			},
			callManager(phone) {
				if (!phone) return;
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			loadMore() {
				this.fetchApplys();
			},
			refresh() {
				this.isRefreshing = true;
				setTimeout(() => {
					this.isRefreshing = false;
				}, 1000);
			}
		},
		onShow() {
			this.$checkToken(this.$getToken())
			this.refresh()
		},
		onLoad() {
			this.fetchApplys()
		}
	};
</script>

<style lang="scss" scoped>
	.reserve-records {
		background: #f5f5f5;
		min-height: 100vh;
		padding-top: 175rpx;
		/* 给导航栏留空间 */
	}

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

	.record-list {
		padding: 30rpx 40rpx;
	}

	.record-card {
		background: #fff;
		border-radius: 12rpx;
		padding: 32rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.contract-name {
		font-size: 32rpx;
		font-weight: 500;
		color: #2D2B2C;
	}

	.record-status {
		font-size: 26rpx;
		padding: 10rpx 15rpx;
		border-radius: 4rpx;

		&.done {
			 background: #FCE5E0; /* 保持原有浅橙色背景 */
			 color: #ED7748;       /* 保持原有橙色文字 */
		}

		&.pending {
			background: #F2F3F7;
			color: #86868C;
		}
		&.reject {
			  background: #FFE4E1; /* 浅红色背景 */
			  color: #DC143C;       /* 深红色文字 */
		}
	}

	.card-content {
		margin-bottom: 32rpx;
	}

	.info-item {
		display: flex;
		align-items: flex-start;
	}

	.info-item:last-child {
		margin-bottom: 0;
	}

	.info-label {
		font-size: 24rpx;
		color: #666;
		width: 120rpx;
		flex-shrink: 0;
		line-height: 44rpx;
	}

	.info-value {
		font-size: 24rpx;
		color: #333;
		flex: 1;
		line-height: 44rpx;
	}

	.add-btn-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 30rpx 40rpx;
		background-color: #f5f5f5;
		box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.add-btn {
		width: 100%;
		height: 80rpx;
		background: linear-gradient(90deg, #FF6F63 0%, #FB392A 100%);
		border-radius: 10rpx;
		color: #ffffff;
		font-size: 32rpx;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.empty {
		margin-top: 200rpx;
	}
</style>