完成大体功能和样式

pages-assets/discharge/leaseCancel.vue

@@ -0,0 +1,268 @@
+<template>
+	<view class="lease-cancel-page">
+		<!-- 顶部自定义导航栏 -->
+		<customNavbar title="退租申请" />
+
+		<!-- 表单内容 -->
+		<view class="form-section">
+			<!-- 关联合同 -->
+			<view class="form-item">
+				<text class="label">关联合同</text>
+				<picker :range="contracts" range-key="name" @change="onContractChange">
+					<view class="picker-value">
+						{{ selectedContract ? selectedContract.name : '请选择合同' }}
+					</view>
+				</picker>
+			</view>
+
+			<!-- 关联资产 -->
+			<view class="form-item">
+				<text class="label">关联资产</text>
+				<view class="picker-value" @click="openAssetsPopup">
+					{{ selectedAssetsList.length
+            ? selectedAssetsList.map(a => a.name).join('，')
+            : '请选择资产' }}
+					<text v-if="selectedAssetsList.length">（{{ selectedAssetsList.length }}）</text>
+				</view>
+			</view>
+
+			<!-- 退租日期 -->
+			<view class="form-item">
+				<text class="label">退租日期</text>
+				<picker mode="date" @change="onDateChange">
+					<view class="picker-value">
+						{{ cancelDate || '请选择退租日期' }}
+					</view>
+				</picker>
+			</view>
+
+			<!-- 退租原因 -->
+			<view class="form-item">
+				<text class="label">退租原因</text>
+				<textarea v-model="reason" placeholder="请输入退租原因" class="textarea" />
+			</view>
+		</view>
+
+		<!-- 提交按钮 -->
+		<view class="bottom-bar">
+			<button class="submit-btn" @click="submitForm">提交申请</button>
+		</view>
+
+		<!-- 弹窗多选资产 -->
+		<u-popup v-model="showAssetsPopup" mode="bottom">
+			<view class="popup-header">
+				<input v-model="assetSearch" placeholder="搜索资产" class="search-input" />
+			</view>
+			<scroll-view scroll-y style="height:500rpx;">
+				<checkbox-group v-model="selectedAssetsKeys">
+					<label v-for="asset in filteredAssets" :key="asset.assetsNo"
+						style="display:block;padding:12rpx 20rpx;border-bottom:1rpx solid #f0f0f0;">
+						<checkbox :value="asset.assetsNo" /> {{ asset.name }}
+					</label>
+				</checkbox-group>
+			</scroll-view>
+			<button class="popup-btn" @click="confirmAssets">确定</button>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				contracts: [],
+				selectedContract: null,
+				assetsList: [],
+				assetSearch: '',
+				showAssetsPopup: false,
+				selectedAssetsKeys: [], // 存储选中的资产编号
+				selectedAssetsList: [], // 存储选中的资产对象
+				cancelDate: '',
+				reason: '',
+			};
+		},
+		onLoad() {
+			this.fetchContractList();
+		},
+		onShow() {
+			this.$checkToken(this.$getToken());
+		},
+		computed: {
+			filteredAssets() {
+				if (!this.assetSearch) return this.assetsList;
+				return this.assetsList.filter(a =>
+					a.name.toLowerCase().includes(this.assetSearch.toLowerCase())
+				);
+			},
+		},
+		methods: {
+			onContractChange(e) {
+				const index = e.detail.value;
+				this.selectedContract = this.contracts[index];
+				this.assetsList = this.contracts[index].assets || [];
+				// 清空之前选择
+				this.selectedAssetsKeys = [];
+				this.selectedAssetsList = [];
+			},
+			openAssetsPopup() {
+				if (!this.selectedContract) {
+					uni.showToast({
+						title: '请先选择合同',
+						icon: 'none'
+					});
+					return;
+				}
+				this.showAssetsPopup = true;
+			},
+			confirmAssets() {
+				this.selectedAssetsList = this.assetsList.filter(a =>
+					this.selectedAssetsKeys.includes(a.assetsNo)
+				);
+				this.showAssetsPopup = false;
+			},
+			onDateChange(e) {
+				this.cancelDate = e.detail.value;
+			},
+			fetchContractList() {
+				const url = '/contract/queryAll';
+				this.$u.get(
+						url, {
+						}, {
+							WT: this.$getToken()
+						}
+					)
+					.then(res => {
+						this.contracts = res.data;
+					})
+					.catch(err => {
+						console.error('获取合同信息失败：', err);
+					});
+			},
+			submitForm() {
+				if (
+					!this.selectedContract ||
+					!this.cancelDate ||
+					!this.reason ||
+					!this.selectedAssetsList.length
+				) {
+					uni.showToast({
+						title: '请填写完整信息',
+						icon: 'none'
+					});
+					return;
+				}
+
+				const data = {
+					contractNo: this.selectedContract.contractNo,
+					cancelDate: this.cancelDate,
+					reason: this.reason,
+					assetsNoList: this.selectedAssetsList.map(a => a.assetsNo),
+				};
+
+				this.$u.post('/discharge/apply', data, {
+						WT: this.$getToken()
+					})
+					.then((res) => {
+						if (res.flag) {
+							this.$mytip.toast('提交退租申请成功')
+							const pages = getCurrentPages();
+							if (pages.length > 1) {
+							  uni.navigateBack();
+							} else {
+							  uni.switchTab({
+							  		url:'/pages/index/index'
+							  	})
+							}
+						} else {
+							this.$mytip.toast('提交退租申请失败')
+						}
+					})
+					.catch(err => {
+						this.$mytip.toast('提交退租申请失败')
+						console.error('提交退租申请失败：', err);
+					});
+			},
+		},
+	};
+</script>
+
+<style lang="scss" scoped>
+	.lease-cancel-page {
+		background-color: #f6f8fa;
+		height: 100vh;
+		display: flex;
+		padding-top: 160rpx;
+		padding-bottom: 120rpx;
+		flex-direction: column;
+	}
+
+	.form-section {
+		padding: 20rpx;
+	}
+
+	.form-item {
+		margin-bottom: 24rpx;
+	}
+
+	.label {
+		font-size: 28rpx;
+		margin-bottom: 10rpx;
+		display: block;
+	}
+
+	.picker-value {
+		padding: 14rpx 20rpx;
+		background: #fff;
+		border-radius: 8rpx;
+		color: #333;
+	}
+
+	.textarea {
+		width: 100%;
+		min-height: 120rpx;
+		padding: 14rpx 20rpx;
+		border-radius: 8rpx;
+		background: #fff;
+		color: #333;
+	}
+
+	.bottom-bar {
+		padding: 20rpx;
+		background: #fff;
+	}
+
+	.submit-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;
+	}
+
+	/* 弹窗样式 */
+	.popup-header {
+		padding: 20rpx;
+		border-bottom: 1rpx solid #eee;
+	}
+
+	.search-input {
+		width: 100%;
+		padding: 10rpx;
+		border: 1rpx solid #ccc;
+		border-radius: 8rpx;
+	}
+
+	.popup-btn {
+		margin: 20rpx;
+		height: 60rpx;
+		background: #007aff;
+		color: #fff;
+		border-radius: 8rpx;
+		font-size: 28rpx;
+	}
+</style>

pages-assets/discharge/leaseCancelList.vue

@@ -0,0 +1,255 @@
+<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', item.status]">
+							{{ statusText(item.status) }}
+						</text>
+					</view>
+
+					<!-- 内容部分 -->
+					<view class="card-content">
+						<!-- 预约时间 -->
+						<view class="info-item">
+							<text class="info-label">申请时间：</text>
+							<text class="info-value"> {{item.applyTime}} </text>
+						</view>
+						<view class="info-item">
+							<text class="info-label">退租资产：</text>
+							<text class="info-value"> {{item.dischargeItem}} </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 'pending':
+						return '待确认';
+					case 'done':
+						return '已完成';
+					default:
+						return '未知';
+				}
+			},
+			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 || [];
+					console.log(rows)
+					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;
+		}
+	}
+
+	.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>