houserent-front/pages_subpack/my-published-houses/index.vue

<template>
	<view>
		
		<!-- 房源列表 -->
		<view class="se-pb-200">
			<view v-if="list.length > 0">
				<view @click="onDetail(item)" class="se-my-10 se-mx-20 se-px-20 se-py-20 se-br-20 se-bgc-white se-flex se-pos" v-for="(item, index) in list" :key="index">
					<view class="se-pos se-w-260 se-h-180">
						<image v-if="item.iconImage" class="se-a-80 se-pos-lt" :src="item.iconImage" mode=""></image>
						<image class="se-w-260 se-h-180 se-br-10" :src="item.images && item.images[0] ? item.images[0] : '/static/image/header.png'" mode="aspectFill"></image>
					</view>
					<view class="se-pl-10 se-w-p-100">
						<view class="se-c-black se-fs-28">
							{{ item.title }}
						</view>
						<view class="se-flex se-flex-h-sb se-flex-ai-c se-fs-24 se-mt-10 se-c-66">
							<text>{{ item.homeType }}</text>
							<text v-if="item.timeGo">{{ item.timeGo }}年</text>
						</view>
						<view class="se-flex se-flex-h-sb se-flex-ai-c se-mt-10">
							<template v-if="item.iconTitles && item.iconTitles.length > 0">
								<view class="se-flex">
									<view class="se-display-ib se-c-white se-bgc-orange se-fs-22 se-br-8 se-px-10 se-py-5 se-mr-10" v-for="(tag, tagIndex) in item.iconTitles" :key="tagIndex">
										{{ tag }}
									</view>
								</view>
							</template>
							<template v-else><view></view></template>
							<view class="se-c-66 se-flex se-flex-ai-c">
								<uv-icon name="eye"></uv-icon>
								<text class="se-ml-5 se-fs-18">{{ item.num || 0 }}</text>
							</view>
						</view>
						<view class="se-flex se-flex-h-sb se-flex-ai-c se-mt-10">
							<text class="se-c-red se-fs-24 se-fw-6 se-toe-1">￥{{ item.price }}元/{{ item.unit }}</text>
							<text class="se-c-66 se-fs-22 se-toe-1">{{ item.address }}</text>
						</view>
					</view>
					<!-- 操作按钮 -->
					<view class="action-buttons">
						<view class="action-btn edit-btn" @click.stop="onEdit(item)">
							<uv-icon name="edit-pen" size="16"></uv-icon>
							<text>编辑</text>
						</view>
						<view class="action-btn delete-btn" @click.stop="onDelete(item)">
							<uv-icon name="trash" size="16"></uv-icon>
							<text>删除</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 空状态 -->
			<view v-else class="empty-container">
				<uv-empty mode="list" text="暂无发布的房源"></uv-empty>
				<view class="empty-tip">快去发布您的第一套房源吧！</view>
				<view class="publish-btn" @click="goToPublish">
					<uv-button type="primary" text="立即发布" customStyle="background-color: #1EC77A; border-radius: 30px;"></uv-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { MyHousePageList, deleteHouse } from "@/common/api.js"
	
	export default {
		data() {
			return {
				list: [],
				pageNo: 1,
				pageSize: 10,
				loading: false
			}
		},
		onLoad() {
			// 设置页面标题
			uni.setNavigationBarTitle({
				title: '我发布的房源'
			})
			this.loadMyHouses()
		},
		onShow() {
			// 页面显示时刷新数据
			this.refreshData()
		},
		onPullDownRefresh() {
			this.refreshData()
		},
		onReachBottom() {
			this.loadMore()
		},
		methods: {
			// 加载我发布的房源
			loadMyHouses() {
				if (this.loading) return
				this.loading = true
				const params = {
					pageNo: this.pageNo,
					pageSize: this.pageSize
				}
				
				MyHousePageList(params).then(response => {
					uni.stopPullDownRefresh()
					this.loading = false
					
					if (response && response.result && response.result.records) {
						// 处理图片和标签数据
						response.result.records.forEach(item => {
							if (item.image) {
								item.images = item.image.split(',')
							} else {
								item.images = []
							}
							
							if (item.homeImage) {
								item.homeImages = item.homeImage.split(',')
							} else {
								item.homeImages = []
							}
							
							if (item.iconTitle) {
								item.iconTitles = item.iconTitle.split(',')
							} else {
								item.iconTitles = []
							}
						})
						
						if (this.pageNo === 1) {
							this.list = response.result.records
						} else {
							this.list = this.list.concat(response.result.records)
						}
					}
				}).catch(error => {
					uni.stopPullDownRefresh()
					this.loading = false
					console.error('获取房源列表失败：', error)
					uni.showToast({
						title: '获取数据失败',
						icon: 'none'
					})
				})
			},
			
			// 刷新数据
			refreshData() {
				this.pageNo = 1
				this.list = []
				this.loadMyHouses()
			},
			
			// 加载更多
			loadMore() {
				this.pageNo += 1
				this.loadMyHouses()
			},
			
			// 查看房源详情
			onDetail(item) {
				uni.navigateTo({
					url: `/pages_subpack/detail/index?id=${item.id}`
				})
			},
			
			// 编辑房源
			onEdit(item) {
				// 根据房源类型跳转到对应的编辑页面
				let editUrl = '/pages_subpack/house/index'
				
				// 根据房源分类判断跳转页面
				if (item.category === 'farmhouse') {
					editUrl = '/pages_subpack/house/farmhouse'
				} else if (item.category === 'commercial') {
					editUrl = '/pages_subpack/house/commercial'
				} else if (item.category === 'other') {
					editUrl = '/pages_subpack/house/other'
				}
				
				uni.navigateTo({
					url: `${editUrl}?id=${item.id}&mode=edit`
				})
			},
			
			// 删除房源
			onDelete(item) {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除这个房源吗？删除后无法恢复。',
					cancelText: '取消',
					confirmText: '删除',
					confirmColor: '#ff4757',
					success: (res) => {
						if (res.confirm) {
							this.deleteHouse(item.id)
						}
					}
				})
			},
			
			// 执行删除
			deleteHouse(houseId) {
				uni.showLoading({
					title: '删除中...'
				})
				
				deleteHouse({ id: houseId }).then(response => {
					uni.hideLoading()
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					})
					// 刷新列表
					this.refreshData()
				}).catch(error => {
					uni.hideLoading()
					console.error('删除房源失败：', error)
					uni.showToast({
						title: '删除失败',
						icon: 'none'
					})
				})
			},
			
			// 去发布房源
			goToPublish() {
				uni.navigateTo({
					url: '/pages_subpack/house/select'
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
	
	/* 操作按钮样式 */
	.action-buttons {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		display: flex;
		gap: 10rpx;
	}
	
	.action-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 8rpx 12rpx;
		border-radius: 10rpx;
		background: rgba(255, 255, 255, 0.95);
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
		font-size: 20rpx;
		min-width: 60rpx;
	}
	
	.edit-btn {
		color: #1EC77A;
	}
	
	.delete-btn {
		color: #ff4757;
	}
	
	/* 空状态样式 */
	.empty-container {
		padding: 100rpx 40rpx;
		text-align: center;
	}
	
	.empty-tip {
		margin: 30rpx 0;
		font-size: 28rpx;
		color: #666;
	}
	
	.publish-btn {
		margin-top: 40rpx;
	}
</style>