houserent-front/pages_subpack/house/select.vue

<template>
	<view class="container">
		<view class="header">
			<view class="title">选择发布类型</view>
			<view class="subtitle">请选择您要发布的房源类型</view>
		</view>
		
		<view class="options-container">
			<view 
				class="option-item" 
				v-for="(item, index) in optionList" 
				:key="index"
				@click="onSelectOption(item)"
			>
				<view class="option-icon">
					<image :src="item.image" v-if="item.image" mode="aspectFill"></image>
					<text class="icon-emoji" v-if="item.icon">{{item.icon}}</text>
				</view>
				<view class="option-content">
					<view class="option-title">{{item.title}}</view>
					<view class="option-desc">{{item.shortTitle}}</view>
				</view>
				<view class="option-arrow">
					<uv-icon name="arrow-right" color="#999" size="20"></uv-icon>
				</view>
			</view>
		</view>
		
		<view class="tips">
			<view class="tips-title">温馨提示</view>
			<!-- <view class="tips-content">
				• 请根据您的实际情况选择对应的发布类型<br/>
				• 不同类型的房源信息录入内容会有所差异<br/>
				• 提交后将进入相应的信息录入页面
			</view> -->
			<view class="tips-content"
			v-html="info">
			</view>
		</view>
	</view>
</template>

<script>
	import { commonIndexIndexIcon } from "@/common/api.js"
	export default {
		data() {
			return {
				optionList: [
					// {
					// 	code: 'idle_farmhouse',
					// 	title: '闲置农房/宅基地',
					// 	shortTitle: '农村闲置房屋、宅基地等资源',
					// 	icon: '🏡',
					// 	type: 1
					// },
					// {
					// 	code: 'commercial_land',
					// 	title: '经营性建设用地',
					// 	shortTitle: '可用于商业经营的建设用地',
					// 	icon: '🏢',
					// 	type: 2
					// },
					// {
					// 	code: 'other_resources',
					// 	title: '其他农村资源',
					// 	shortTitle: '其他类型的农村可利用资源',
					// 	icon: '🌾',
					// 	type: 3
					// },
				],
				info : '',
			}
		},
		onLoad() {
			this.getRlease_home_info()
			this.onCommonIndexIndexIcon()
		},
		methods: {
			onCommonIndexIndexIcon(){
				let that = this
				commonIndexIndexIcon({}).then(response=>{
					console.info('onCommonIndexIndexIcon',response)
					that.optionList = response.result
				})
			},
			getRlease_home_info(){
				console.log(this.$utils.getkeyContent('release_home_info'));
				let a = this.$utils.getkeyContent('release_home_info') || {}
				this.info = (a.keyContent || '').replaceAll('\n', '<br>')
			},
			onSelectOption(item) {
				console.log('选择了:', item);
				// 根据不同类型跳转到不同的录入页面
				let targetUrl = '';
				
				if (item.code === 'idle_farmhouse') {
					// 闲置农房跳转到专门的录入页面
					targetUrl = `/pages_subpack/house/farmhouse?commonClass=${item.id}`;
				} else if (item.code === 'commercial_land') {
					// 经营性建设用地跳转到专门的录入页面
					targetUrl = `/pages_subpack/house/commercial?commonClass=${item.id}`;
				} else if (item.code === 'other_resources') {
					// 其他农村资源跳转到专门的录入页面
					targetUrl = `/pages_subpack/house/other?commonClass=${item.id}`;
				} else {
					// 其他类型跳转到通用录入页面
					targetUrl = `/pages_subpack/house/index?id=${item.id}&title=${item.title}`;
				}
				
				uni.navigateTo({
					url: targetUrl
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		min-height: 100vh;
		background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
		padding: 40rpx;
	}
	
	.header {
		text-align: center;
		margin-bottom: 80rpx;
		padding-top: 60rpx;
	}
	
	.title {
		font-size: 48rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}
	
	.subtitle {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
	}
	
	.options-container {
		margin-bottom: 60rpx;
	}
	
	.option-item {
		background: #fff;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 8rpx 25rpx rgba(0,0,0,0.08);
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
	}
	
	.option-item::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 6rpx;
		background: linear-gradient(90deg, #1EC77A 0%, #4CAF50 100%);
		transform: scaleX(0);
		transition: transform 0.3s ease;
	}
	
	.option-item:active {
		transform: translateY(2rpx);
		box-shadow: 0 4rpx 15rpx rgba(0,0,0,0.12);
	}
	
	.option-item:active::before {
		transform: scaleX(1);
	}
	
	.option-icon {
		width: 120rpx;
		height: 120rpx;
		margin-right: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #f8f9fa;
		border-radius: 50%;
		image{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
	}
	
	.icon-emoji {
		font-size: 60rpx;
		line-height: 1;
	}
	
	.option-content {
		flex: 1;
	}
	
	.option-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.option-desc {
		font-size: 26rpx;
		color: #666;
		line-height: 1.5;
	}
	
	.option-arrow {
		margin-left: 20rpx;
	}
	
	.tips {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 15rpx rgba(0,0,0,0.06);
	}
	
	.tips-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #1EC77A;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
	}
	
	.tips-title::before {
		content: '';
		width: 8rpx;
		height: 32rpx;
		background: #1EC77A;
		border-radius: 4rpx;
		margin-right: 15rpx;
	}
	
	.tips-content {
		font-size: 24rpx;
		color: #666;
		line-height: 1.8;
	}
</style>