xiangqinxiangmu/LiangZhiYUMao/pages/partner-requirement/index.vue

<template>
	<view class="requirement-page">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="back-btn" @click="goBack">
				<text class="back-icon">←</text>
			</view>
			<text class="header-title">对象要求</text>
			<view class="edit-btn" @click="toggleEdit">
				<text class="edit-text">{{ isEditing ? '保存' : '编辑' }}</text>
			</view>
		</view>

		<scroll-view scroll-y class="content">
			<!-- 提示说明 -->
			<view class="tips-section">
				<text class="tips-icon">💡</text>
				<text class="tips-text">设置您的理想对象条件，系统会为您推荐更匹配的用户</text>
			</view>

			<!-- 基本条件 -->
			<view class="section">
				<view class="section-title">基本条件</view>

				<view class="item-row">
					<text class="label">性别</text>
					<picker v-if="isEditing" :range="genderOptions" range-key="label" :value="getGenderIndex()" @change="onGenderChange">
						<view class="picker-value">{{ getGenderText() }}</view>
					</picker>
					<text v-else class="value">{{ getGenderText() }}</text>
				</view>

				<view class="item-row">
					<text class="label">年龄范围</text>
					<view class="range-input" v-if="isEditing">
						<input class="range-value" type="number" v-model="requirement.minAge" placeholder="最小" />
						<text class="range-divider">-</text>
						<input class="range-value" type="number" v-model="requirement.maxAge" placeholder="最大" />
						<text class="range-unit">岁</text>
					</view>
					<text v-else class="value">{{ getAgeRangeText() }}</text>
				</view>

				<view class="item-row">
					<text class="label">身高范围</text>
					<view class="range-input" v-if="isEditing">
						<input class="range-value" type="number" v-model="requirement.minHeight" placeholder="最小" />
						<text class="range-divider">-</text>
						<input class="range-value" type="number" v-model="requirement.maxHeight" placeholder="最大" />
						<text class="range-unit">cm</text>
					</view>
					<text v-else class="value">{{ getHeightRangeText() }}</text>
				</view>

				<view class="item-row">
					<text class="label">学历要求</text>
					<picker v-if="isEditing" :range="educationOptions" :value="getEducationIndex()" @change="onEducationChange">
						<view class="picker-value">{{ getEducationText() }}</view>
					</picker>
					<text v-else class="value">{{ getEducationText() }}</text>
				</view>
			</view>

			<!-- 经济条件 -->
			<view class="section">
				<view class="section-title">经济条件</view>

				<view class="item-row">
					<text class="label">薪资要求</text>
					<picker v-if="isEditing" :range="salaryOptions" :value="getSalaryIndex()" @change="onSalaryChange">
						<view class="picker-value">{{ getSalaryText() }}</view>
					</picker>
					<text v-else class="value">{{ getSalaryText() }}</text>
				</view>

				<view class="item-row">
					<text class="label">房产要求</text>
					<picker v-if="isEditing" :range="houseOptions" range-key="label" :value="getHouseIndex()" @change="onHouseChange">
						<view class="picker-value">{{ getHouseText() }}</view>
					</picker>
					<text v-else class="value">{{ getHouseText() }}</text>
				</view>

				<view class="item-row">
					<text class="label">车辆要求</text>
					<picker v-if="isEditing" :range="carOptions" range-key="label" :value="getCarIndex()" @change="onCarChange">
						<view class="picker-value">{{ getCarText() }}</view>
					</picker>
					<text v-else class="value">{{ getCarText() }}</text>
				</view>
			</view>

			<!-- 婚姻状况 -->
			<view class="section">
				<view class="section-title">婚姻状况</view>

				<view class="item-row">
					<text class="label">婚姻要求</text>
					<picker v-if="isEditing" :range="maritalOptions" :value="getMaritalIndex()" @change="onMaritalChange">
						<view class="picker-value">{{ getMaritalText() }}</view>
					</picker>
					<text v-else class="value">{{ getMaritalText() }}</text>
				</view>
			</view>

			<!-- 地区要求 -->
			<view class="section">
				<view class="section-title">地区要求</view>

				<view class="item-row">
					<text class="label">期望城市</text>
					<input v-if="isEditing" class="input" v-model="requirement.preferredCity" placeholder="如：北京、上海" />
					<text v-else class="value">{{ requirement.preferredCity || '不限' }}</text>
				</view>
			</view>

			<!-- 其他要求 -->
			<view class="section">
				<view class="section-title">其他要求</view>

				<view class="item-column">
					<text class="label">其他说明</text>
					<textarea 
						v-if="isEditing" 
						class="textarea" 
						v-model="requirement.otherRequirements" 
						placeholder="请描述您对理想对象的其他要求"
						maxlength="500"
					></textarea>
					<text v-else class="value multi-line">{{ requirement.otherRequirements || '暂无其他要求' }}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gatewayURL: 'http://localhost:8083',
				currentUserId: null,
				isEditing: false,
				
				requirement: {
					gender: null,
					minAge: null,
					maxAge: null,
					minHeight: null,
					maxHeight: null,
					educationLevel: null,
					salaryRange: null,
					house: null,
					car: null,
					maritalStatus: null,
					preferredCity: '',
					otherRequirements: ''
				},
				
				genderOptions: [
					{ value: 0, label: '不限' },
					{ value: 1, label: '男' },
					{ value: 2, label: '女' }
				],
				educationOptions: ['不限', '高中及以上', '专科及以上', '本科及以上', '硕士及以上', '博士及以上'],
				salaryOptions: ['不限', '5k+', '10k+', '20k+', '50k+'],
				houseOptions: [
					{ value: 0, label: '不限' },
					{ value: 1, label: '有房' }
				],
				carOptions: [
					{ value: 0, label: '不限' },
					{ value: 1, label: '有车' }
				],
				maritalOptions: ['不限', '未婚', '离异', '丧偶']
			}
		},
		onLoad() {
			this.currentUserId = uni.getStorageSync('userId') || 1
			this.loadRequirement()
		},
		methods: {
			goBack() {
				if (this.isEditing) {
					uni.showModal({
						title: '提示',
						content: '您正在编辑，是否保存后返回？',
						cancelText: '直接返回',
						confirmText: '保存',
						success: (res) => {
							if (res.confirm) {
								this.saveRequirement(true)
							} else {
								uni.navigateBack()
							}
						}
					})
				} else {
					uni.navigateBack()
				}
			},
			
			toggleEdit() {
				if (this.isEditing) {
					this.saveRequirement()
				} else {
					this.isEditing = true
				}
			},
			
			loadRequirement() {
				uni.showLoading({ title: '加载中...' })
				
				// TODO: 调用后端接口
				setTimeout(() => {
					uni.hideLoading()
				}, 500)
			},
			
			saveRequirement(needGoBack = false) {
				uni.showLoading({ title: '保存中...' })
				
				// TODO: 调用后端接口
				setTimeout(() => {
					uni.hideLoading()
					uni.showToast({
						title: '保存成功',
						icon: 'success'
					})
					this.isEditing = false
					
					if (needGoBack) {
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}
				}, 500)
			},
			
			// 获取文本方法
			getGenderText() {
				const option = this.genderOptions.find(item => item.value === this.requirement.gender)
				return option ? option.label : '不限'
			},
			
			getAgeRangeText() {
				if (!this.requirement.minAge && !this.requirement.maxAge) return '不限'
				if (this.requirement.minAge && !this.requirement.maxAge) return this.requirement.minAge + '岁以上'
				if (!this.requirement.minAge && this.requirement.maxAge) return this.requirement.maxAge + '岁以下'
				return this.requirement.minAge + '-' + this.requirement.maxAge + '岁'
			},
			
			getHeightRangeText() {
				if (!this.requirement.minHeight && !this.requirement.maxHeight) return '不限'
				if (this.requirement.minHeight && !this.requirement.maxHeight) return this.requirement.minHeight + 'cm以上'
				if (!this.requirement.minHeight && this.requirement.maxHeight) return this.requirement.maxHeight + 'cm以下'
				return this.requirement.minHeight + '-' + this.requirement.maxHeight + 'cm'
			},
			
			getEducationText() {
				if (this.requirement.educationLevel === null || this.requirement.educationLevel === undefined) return '不限'
				return this.educationOptions[this.requirement.educationLevel] || '不限'
			},
			
			getSalaryText() {
				if (this.requirement.salaryRange === null || this.requirement.salaryRange === undefined) return '不限'
				return this.salaryOptions[this.requirement.salaryRange] || '不限'
			},
			
			getHouseText() {
				const option = this.houseOptions.find(item => item.value === this.requirement.house)
				return option ? option.label : '不限'
			},
			
			getCarText() {
				const option = this.carOptions.find(item => item.value === this.requirement.car)
				return option ? option.label : '不限'
			},
			
			getMaritalText() {
				if (this.requirement.maritalStatus === null || this.requirement.maritalStatus === undefined) return '不限'
				return this.maritalOptions[this.requirement.maritalStatus] || '不限'
			},
			
			// 获取索引方法
			getGenderIndex() {
				const index = this.genderOptions.findIndex(item => item.value === this.requirement.gender)
				return Math.max(0, index)
			},
			
			getEducationIndex() {
				return this.requirement.educationLevel || 0
			},
			
			getSalaryIndex() {
				return this.requirement.salaryRange || 0
			},
			
			getHouseIndex() {
				const index = this.houseOptions.findIndex(item => item.value === this.requirement.house)
				return Math.max(0, index)
			},
			
			getCarIndex() {
				const index = this.carOptions.findIndex(item => item.value === this.requirement.car)
				return Math.max(0, index)
			},
			
			getMaritalIndex() {
				return this.requirement.maritalStatus || 0
			},
			
			// 选择器变更方法
			onGenderChange(e) {
				this.requirement.gender = this.genderOptions[parseInt(e.detail.value)].value
			},
			
			onEducationChange(e) {
				this.requirement.educationLevel = parseInt(e.detail.value)
			},
			
			onSalaryChange(e) {
				this.requirement.salaryRange = parseInt(e.detail.value)
			},
			
			onHouseChange(e) {
				this.requirement.house = this.houseOptions[parseInt(e.detail.value)].value
			},
			
			onCarChange(e) {
				this.requirement.car = this.carOptions[parseInt(e.detail.value)].value
			},
			
			onMaritalChange(e) {
				this.requirement.maritalStatus = parseInt(e.detail.value)
			}
		}
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}
	
	.requirement-page {
		min-height: 100vh;
		background: linear-gradient(180deg, #FF8A9B 0%, #FFB4C0 25%, #FFF0F2 50%, #F8F8F8 100%);
		display: flex;
		flex-direction: column;
	}

	/* 顶部导航栏 */
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 25rpx 30rpx;
		padding-top: calc(25rpx + env(safe-area-inset-top));
		background: linear-gradient(135deg, #FF8A9B 0%, #FFB4C0 100%);
		box-shadow: 0 4rpx 20rpx rgba(255, 138, 155, 0.2);
		
		.back-btn {
			width: 70rpx;
			height: 70rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(255, 255, 255, 0.2);
			border-radius: 50%;
			
			.back-icon {
				font-size: 44rpx;
				color: #FFFFFF;
				font-weight: bold;
			}
		}
		
		.header-title {
			font-size: 38rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
		
		.edit-btn {
			padding: 12rpx 30rpx;
			background: rgba(255, 255, 255, 0.3);
			border-radius: 35rpx;
			
			.edit-text {
				font-size: 28rpx;
				color: #FFFFFF;
				font-weight: 500;
			}
		}
	}

	.content {
		flex: 1;
		padding: 20rpx 0rpx;
		padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
	}

	/* 提示区域 */
	.tips-section {
		background: linear-gradient(135deg, #E8F5E8 0%, #D4EDDA 100%);
		border-radius: 15rpx;
		padding: 20rpx 25rpx;
		margin-bottom: 25rpx;
		display: flex;
		align-items: center;
		border-left: 6rpx solid #28A745;
		
		.tips-icon {
			font-size: 32rpx;
			margin-right: 15rpx;
			flex-shrink: 0;
		}
		
		.tips-text {
			font-size: 26rpx;
			color: #28A745;
			line-height: 1.5;
		}
	}

	/* 区块样式 */
	.section {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx 0;
		margin-bottom: 25rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
		
		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			margin-bottom: 25rpx;
			padding: 0 30rpx;
		}
		
		.item-row {
			display: flex;
			align-items: center;
			padding: 25rpx 30rpx 25rpx 30rpx;
			border-bottom: 1rpx solid #F5F5F5;
			
			&:last-child {
				border-bottom: none;
			}
			
			.label {
				font-size: 28rpx;
				color: #333333;
				font-weight: 500;
				flex: 1;
			}
			
			.value,
			.picker-value {
				text-align: right;
				font-size: 28rpx;
				color: #666666;
				min-width: 120rpx;
				flex-shrink: 0;
			}
			
			.input {
				text-align: right;
				font-size: 28rpx;
				color: #333333;
				min-width: 200rpx;
				flex-shrink: 0;
			}
			
			.range-input {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				
				.range-value {
					width: 100rpx;
					height: 60rpx;
					text-align: center;
					border: 1rpx solid #E0E0E0;
					border-radius: 8rpx;
					font-size: 26rpx;
					background: #FAFAFA;
					box-sizing: border-box;
				}
				
				.range-divider {
					margin: 0 10rpx;
					color: #999999;
					font-size: 24rpx;
				}
				
				.range-unit {
					margin-left: 10rpx;
					font-size: 24rpx;
					color: #999999;
					width: 40rpx;
				}
			}
		}
		
		.item-column {
			padding: 25rpx 30rpx 25rpx 30rpx;
			
			.label {
				display: block;
				font-size: 28rpx;
				color: #333333;
				font-weight: 500;
				margin-bottom: 20rpx;
			}
			
			.textarea {
				width: 100%;
				min-height: 160rpx;
				padding: 20rpx;
				border: 1rpx solid #E0E0E0;
				border-radius: 10rpx;
				font-size: 26rpx;
				line-height: 1.6;
				background: #FAFAFA;
				box-sizing: border-box;
			}
			
			.value {
				font-size: 26rpx;
				color: #666666;
				
				&.multi-line {
					display: block;
					line-height: 1.8;
				}
			}
		}
	}
</style>