xiangqinxiangmu/LiangZhiYUMao/pages/matchmaker-workbench/add-resource.vue

<template>
	<view class="add-resource">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="back-btn" @click="goBack">
				<text class="back-icon">‹</text>
			</view>
			<text class="header-title">信息录入</text>
			<view class="header-right">
				<text class="more-icon">⋯</text>
				<text class="info-icon">ⓘ</text>
			</view>
		</view>

		<scroll-view scroll-y class="content">
			<!-- 社会属性 -->
			<view class="section">
				<view class="section-title">
					<text class="section-label">社会属性</text>
				</view>

				<!-- 婚况 -->
				<view class="form-group">
					<text class="label">婚况</text>
					<view class="select-wrapper">
						<picker @change="onMarriageChange" :value="formData.marriageIndex" :range="marriageOptions">
							<view class="select-input">
								<text>{{ formData.marriage || '请选择婚况' }}</text>
								<text class="arrow">▼</text>
							</view>
						</picker>
					</view>
				</view>

				<!-- 学历 -->
				<view class="form-group">
					<text class="label">学历</text>
					<view class="select-wrapper">
						<picker @change="onEducationChange" :value="formData.educationIndex" :range="educationOptions">
							<view class="select-input">
								<text>{{ formData.education || '请选择学历' }}</text>
								<text class="arrow">▼</text>
							</view>
						</picker>
					</view>
				</view>

				<!-- 年收入 -->
				<view class="form-group">
					<text class="label">年收入（万元）</text>
					<input type="text" class="text-input" placeholder="请输入年收入" v-model="formData.income" />
				</view>

				<!-- 住址 -->
				<view class="form-group">
					<text class="label">住址</text>
					<input type="text" class="text-input" placeholder="请输入住址" v-model="formData.address" />
				</view>

				<!-- 户籍地 -->
				<view class="form-group">
					<text class="label">户籍地</text>
					<input type="text" class="text-input" placeholder="请输入户籍地" v-model="formData.hometown" />
				</view>

				<!-- 职业 -->
				<view class="form-group">
					<text class="label">职业</text>
					<input type="text" class="text-input" placeholder="请输入职业" v-model="formData.occupation" />
				</view>

				<!-- 购房 -->
				<view class="form-group">
					<text class="label">购房</text>
					<view class="checkbox-group">
						<view class="checkbox-item" @click="toggleCheckbox('hasHouse')">
							<view class="checkbox" :class="{ checked: formData.hasHouse }"></view>
							<text>有房</text>
						</view>
					</view>
				</view>

				<!-- 购车 -->
				<view class="form-group">
					<text class="label">购车</text>
					<view class="checkbox-group">
						<view class="checkbox-item" @click="toggleCheckbox('hasCar')">
							<view class="checkbox" :class="{ checked: formData.hasCar }"></view>
							<text>有车</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 基本信息 -->
			<view class="section">
				<view class="section-title">
					<text class="section-label">基本信息</text>
				</view>

				<!-- 姓名 -->
				<view class="form-group">
					<text class="label required">姓名</text>
					<input type="text" class="text-input" placeholder="请输入姓名" v-model="formData.name" />
				</view>

				<!-- 年龄 -->
				<view class="form-group">
					<text class="label">年龄</text>
					<input type="number" class="text-input" placeholder="请输入年龄" v-model="formData.age" />
				</view>

				<!-- 性别 -->
				<view class="form-group">
					<text class="label">性别</text>
					<view class="select-wrapper">
						<picker @change="onGenderChange" :value="formData.genderIndex" :range="genderOptions">
							<view class="select-input">
								<text>{{ formData.gender || '请选择性别' }}</text>
								<text class="arrow">▼</text>
							</view>
						</picker>
					</view>
				</view>

				<!-- 星座 -->
				<view class="form-group">
					<text class="label">星座</text>
					<view class="select-wrapper">
						<picker @change="onZodiacChange" :value="formData.zodiacIndex" :range="zodiacOptions">
							<view class="select-input">
								<text>{{ formData.zodiac || '请选择星座' }}</text>
								<text class="arrow">▼</text>
							</view>
						</picker>
					</view>
				</view>

				<!-- 身高 -->
				<view class="form-group">
					<text class="label">身高 (cm)</text>
					<input type="number" class="text-input" placeholder="请输入身高" v-model="formData.height" />
				</view>

				<!-- 体重 -->
				<view class="form-group">
					<text class="label">体重 (kg)</text>
					<input type="number" class="text-input" placeholder="请输入体重" v-model="formData.weight" />
				</view>
			</view>

			<!-- 底部按钮 -->
			<view class="button-group">
				<view class="reset-btn" @click="resetForm">重置</view>
				<view class="submit-btn" @click="submitForm">提交</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			formData: {
				// 社会属性
				marriage: '',
				marriageIndex: 0,
				education: '',
				educationIndex: 0,
				income: '',
				address: '',
				hometown: '',
				occupation: '',
				hasHouse: false,
				hasCar: false,
				// 基本信息
				name: '',
				age: '',
				gender: '',
				genderIndex: 0,
				zodiac: '',
				zodiacIndex: 0,
				height: '',
				weight: ''
			},
			marriageOptions: ['未婚', '已婚', '离异', '丧偶'],
			educationOptions: ['初中', '高中', '大专', '本科', '硕士', '博士'],
			genderOptions: ['男', '女'],
			zodiacOptions: ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
		}
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		onMarriageChange(e) {
			this.formData.marriageIndex = e.detail.value
			this.formData.marriage = this.marriageOptions[e.detail.value]
		},
		onEducationChange(e) {
			this.formData.educationIndex = e.detail.value
			this.formData.education = this.educationOptions[e.detail.value]
		},
		onGenderChange(e) {
			this.formData.genderIndex = e.detail.value
			this.formData.gender = this.genderOptions[e.detail.value]
		},
		onZodiacChange(e) {
			this.formData.zodiacIndex = e.detail.value
			this.formData.zodiac = this.zodiacOptions[e.detail.value]
		},
		toggleCheckbox(field) {
			this.formData[field] = !this.formData[field]
		},
		resetForm() {
			this.formData = {
				marriage: '',
				marriageIndex: 0,
				education: '',
				educationIndex: 0,
				income: '',
				address: '',
				hometown: '',
				occupation: '',
				hasHouse: false,
				hasCar: false,
				name: '',
				age: '',
				gender: '',
				genderIndex: 0,
				zodiac: '',
				zodiacIndex: 0,
				height: '',
				weight: ''
			}
		},
		submitForm() {
			if (!this.formData.name) {
				uni.showToast({
					title: '请输入姓名',
					icon: 'none'
				})
				return
			}
			console.log('提交表单:', this.formData)
			uni.showToast({
				title: '提交成功',
				icon: 'success'
			})
			setTimeout(() => {
				uni.navigateBack()
			}, 1500)
		}
	}
}
</script>

<style lang="scss" scoped>
.add-resource {
	min-height: 100vh;
	background: #FFF9F9;
	display: flex;
	flex-direction: column;
}

/* 顶部导航栏 */
.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;
	padding-top: calc(20rpx + env(safe-area-inset-top));
	background: #FFF9F9;
	border-bottom: 1rpx solid #F0F0F0;

	.back-btn {
		width: 50rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.back-icon {
			font-size: 40rpx;
			color: #9C27B0;
		}
	}

	.header-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		flex: 1;
		text-align: center;
	}

	.header-right {
		display: flex;
		align-items: center;
		gap: 15rpx;

		.more-icon,
		.info-icon {
			font-size: 28rpx;
			color: #999;
		}
	}
}

.content {
	flex: 1;
	overflow-y: auto;
	padding: 20rpx;
}

/* 表单区域 */
.section {
	background: #FFFFFF;
	border-radius: 16rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

	.section-title {
		margin-bottom: 20rpx;

		.section-label {
			display: inline-block;
			background: #FFEBEE;
			color: #E91E63;
			font-size: 24rpx;
			font-weight: bold;
			padding: 6rpx 14rpx;
			border-radius: 8rpx;
			border: 2rpx solid #E91E63;
		}
	}
}

/* 表单组 */
.form-group {
	margin-bottom: 20rpx;

	&:last-child {
		margin-bottom: 0;
	}

	.label {
		display: block;
		font-size: 26rpx;
		color: #666;
		margin-bottom: 10rpx;

		&.required::after {
			content: ' *';
			color: #E91E63;
		}
	}

	.text-input {
		width: 100%;
		padding: 12rpx 16rpx;
		border: 1rpx solid #E0E0E0;
		border-radius: 8rpx;
		font-size: 26rpx;
		color: #333;
		background: #F8F8F8;

		&::placeholder {
			color: #999;
		}
	}

	.select-wrapper {
		.select-input {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 12rpx 16rpx;
			border: 1rpx solid #E0E0E0;
			border-radius: 8rpx;
			font-size: 26rpx;
			color: #333;
			background: #F8F8F8;

			.arrow {
				font-size: 20rpx;
				color: #999;
			}
		}
	}

	.checkbox-group {
		display: flex;
		flex-wrap: wrap;
		gap: 15rpx;

		.checkbox-item {
			display: flex;
			align-items: center;
			gap: 8rpx;

			.checkbox {
				width: 24rpx;
				height: 24rpx;
				border: 2rpx solid #E0E0E0;
				border-radius: 4rpx;
				background: #FFFFFF;

				&.checked {
					background: #E91E63;
					border-color: #E91E63;
				}
			}

			text {
				font-size: 26rpx;
				color: #333;
			}
		}
	}
}

/* 按钮组 */
.button-group {
	display: flex;
	gap: 15rpx;
	margin: 30rpx 0;

	.reset-btn,
	.submit-btn {
		flex: 1;
		padding: 16rpx;
		border-radius: 12rpx;
		font-size: 28rpx;
		font-weight: bold;
		text-align: center;
	}

	.reset-btn {
		background: #F5F5F5;
		color: #666;
		border: 1rpx solid #E0E0E0;
	}

	.submit-btn {
		background: linear-gradient(135deg, #E91E63 0%, #C2185B 100%);
		color: #FFFFFF;
	}
}
</style>