xiangqinxiangmu/LiangZhiYUMao/pages/part-time-matchmaker/index.vue

<template>
	<view class="matchmaker-page">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="back-btn" @click="goBack">
				<text class="back-icon">←</text>
			</view>
			<text class="header-title">兼职红娘</text>
			<view class="placeholder"></view>
		</view>

		<scroll-view scroll-y class="content">
			<!-- 顶部Banner -->
			<view class="top-banner">
				<text class="banner-title">加入我们的红娘团队</text>
				<text class="banner-subtitle">成为传递幸福的使者，利用闲暇时间帮助更多人</text>
				<text class="banner-subtitle">找到生命中的另一半，还能获得丰厚报酬</text>
			</view>

			<!-- 申请成为红娘按钮 -->
			<view class="action-button" @click="scrollToForm">
				<text class="button-text">立即申请</text>
			</view>

			<!-- 特点列表 -->
			<view class="features-section">
				<view class="feature-card">
					<text class="feature-icon">⏰</text>
					<view class="feature-content">
						<text class="feature-title">时间灵活</text>
						<text class="feature-desc">利用碎片时间工作，不影响主业，轻松实现副业增收</text>
					</view>
				</view>

				<view class="feature-card">
					<text class="feature-icon">💰</text>
					<view class="feature-content">
						<text class="feature-title">丰厚报酬</text>
						<text class="feature-desc">每成功匹配一对，可获得高额佣金，多劳多得</text>
					</view>
				</view>

				<view class="feature-card">
					<text class="feature-icon">📚</text>
					<view class="feature-content">
						<text class="feature-title">免费培训</text>
						<text class="feature-desc">提供专业婚恋知识和匹配技巧培训，快速上手</text>
					</view>
				</view>
			</view>

			<!-- 申请表单 -->
			<view class="form-section" id="application-form">
				<view class="form-title">申请加入</view>

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

				<view class="form-group">
					<text class="form-label">手机号：</text>
					<input class="form-input" v-model="formData.phone" type="number" placeholder="请输入您的手机号" />
				</view>

				<view class="form-group">
					<text class="form-label">电子邮箱：</text>
					<input class="form-input" v-model="formData.email" placeholder="请输入您的电子邮箱" />
				</view>

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

				<view class="form-group">
					<text class="form-label">性别：</text>
					<view class="radio-group">
						<label class="radio-item" @click="formData.gender = 2">
							<view class="radio" :class="{ 'radio-checked': formData.gender === 2 }"></view>
							<text class="radio-label">女</text>
						</label>
						<label class="radio-item" @click="formData.gender = 1">
							<view class="radio" :class="{ 'radio-checked': formData.gender === 1 }"></view>
							<text class="radio-label">男</text>
						</label>
					</view>
				</view>

				<view class="form-group">
					<text class="form-label">所在城市：</text>
					<input class="form-input" v-model="formData.city" placeholder="请输入您的所在城市" />
				</view>

				<view class="form-group">
					<text class="form-label">婚姻介绍经验：</text>
					<input class="form-input" v-model="formData.experience" placeholder="请输入您的婚姻介绍经验" />
				</view>

				<view class="form-group">
					<text class="form-label">可服务时间：</text>
					<input class="form-input" v-model="formData.availableTime" placeholder="请输入您的工作时间" />
				</view>

				<view class="form-group">
					<text class="form-label">个人简介：</text>
					<textarea 
						class="form-textarea" 
						v-model="formData.introduction" 
						placeholder="请简要介绍自己，包括您的性格特点、沟通能力、对红娘工作的理解等"
						maxlength="500"
					></textarea>
				</view>

				<button class="submit-btn" @click="handleSubmit">提交申请</button>
			</view>

			<!-- 更多特点 -->
			<view class="more-features">
				<view class="feature-card">
					<text class="feature-icon">⏰</text>
					<view class="feature-content">
						<text class="feature-title">上传身边人信息</text>
						<text class="feature-desc">若您身边有单身朋友，可上传其信息至平台，成功匹配后也可获得奖励</text>
					</view>
				</view>

				<view class="feature-card">
					<text class="feature-icon">⏰</text>
					<view class="feature-content">
						<text class="feature-title">佣金提现</text>
						<text class="feature-desc">您的匹配佣金可随时申请提现，到账迅速，让您的努力及时获得回报</text>
					</view>
				</view>
			</view>

		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					name: '',
					phone: '',
					email: '',
					age: '',
					gender: 2, // 默认女
					city: '',
					experience: '',
					availableTime: '',
					introduction: ''
				}
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack()
			},
			
			// 滚动到表单
			scrollToForm() {
				uni.pageScrollTo({
					selector: '#application-form',
					duration: 300
				})
			},
			
			// 提交申请
			handleSubmit() {
				// 表单验证
				if (!this.formData.name) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
					return
				}
				
				if (!this.formData.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				
				// 验证手机号格式
				const phoneReg = /^1[3-9]\d{9}$/
				if (!phoneReg.test(this.formData.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				
				if (!this.formData.email) {
					uni.showToast({
						title: '请输入电子邮箱',
						icon: 'none'
					})
					return
				}
				
				// 验证邮箱格式
				const emailReg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
				if (!emailReg.test(this.formData.email)) {
					uni.showToast({
						title: '请输入正确的邮箱',
						icon: 'none'
					})
					return
				}
				
				if (!this.formData.age) {
					uni.showToast({
						title: '请输入年龄',
						icon: 'none'
					})
					return
				}
				
				if (!this.formData.city) {
					uni.showToast({
						title: '请输入所在城市',
						icon: 'none'
					})
					return
				}
				
				uni.showModal({
					title: '提交申请',
					content: '确认提交兼职红娘申请吗？',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '提交中...'
							})
							
							// TODO: 调用后端接口提交申请
							setTimeout(() => {
								uni.hideLoading()
								uni.showModal({
									title: '申请成功',
									content: '您的申请已提交，我们会在1-3个工作日内完成审核，请耐心等待。审核结果将通过短信或邮件通知您。',
									showCancel: false,
									success: () => {
										// 清空表单
										this.formData = {
											name: '',
											phone: '',
											email: '',
											age: '',
											gender: 2,
											city: '',
											experience: '',
											availableTime: '',
											introduction: ''
										}
									}
								})
							}, 1500)
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}
	
	.matchmaker-page {
		min-height: 100vh;
		background: #F5F5F5;
		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%);
		
		.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;
		}
		
		.placeholder {
			width: 70rpx;
		}
	}

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

	/* 顶部Banner */
	.top-banner {
		background: linear-gradient(135deg, #E688A1 0%, #D97890 100%);
		padding: 50rpx 40rpx;
		text-align: center;
		
		.banner-title {
			display: block;
			font-size: 40rpx;
			font-weight: bold;
			color: #FFFFFF;
			margin-bottom: 25rpx;
		}
		
		.banner-subtitle {
			display: block;
			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 1.6;
			opacity: 0.95;
		}
	}

	/* 兼职红娘按钮 */
	.action-button {
		margin: 35rpx 40rpx;
		padding: 25rpx;
		background: #FFFFFF;
		border: 3rpx solid #FF6B8A;
		border-radius: 15rpx;
		text-align: center;
		
		.button-text {
			font-size: 30rpx;
			color: #FF6B8A;
			font-weight: bold;
		}
	}

	/* 特点列表 */
	.features-section {
		padding: 0 40rpx 25rpx;
	}
	
	.more-features {
		padding: 0 40rpx 40rpx;
	}
	
	.features-section,
	.more-features {
		.feature-card {
			background: #F0F0F0;
			border-radius: 15rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: flex-start;
			
			.feature-icon {
				font-size: 42rpx;
				margin-right: 20rpx;
				flex-shrink: 0;
			}
			
			.feature-content {
				flex: 1;
			}
			
			.feature-title {
				display: block;
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 12rpx;
			}
			
			.feature-desc {
				display: block;
				font-size: 24rpx;
				color: #666666;
				line-height: 1.5;
			}
		}
	}

	/* 申请表单 */
	.form-section {
		background: #FFFFFF;
		margin: 25rpx 40rpx;
		padding: 35rpx;
		border-radius: 15rpx;
		box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.05);
		box-sizing: border-box;
		
		.form-title {
			font-size: 34rpx;
			font-weight: bold;
			color: #333333;
			margin-bottom: 35rpx;
			text-align: center;
		}
		
		.form-group {
			margin-bottom: 30rpx;
			box-sizing: border-box;
			
			.form-label {
				display: block;
				font-size: 26rpx;
				color: #333333;
				margin-bottom: 12rpx;
				font-weight: 500;
			}
			
			.form-input {
				width: 100%;
				height: 70rpx;
				padding: 0 20rpx;
				border: 1rpx solid #E0E0E0;
				border-radius: 10rpx;
				font-size: 26rpx;
				background: #FAFAFA;
				box-sizing: border-box;
				
				&:focus {
					border-color: #FF8A9B;
					background: #FFFFFF;
				}
			}
			
			.form-textarea {
				width: 100%;
				min-height: 160rpx;
				padding: 15rpx 20rpx;
				border: 1rpx solid #E0E0E0;
				border-radius: 10rpx;
				font-size: 26rpx;
				line-height: 1.5;
				background: #FAFAFA;
				box-sizing: border-box;
				
				&:focus {
					border-color: #FF8A9B;
					background: #FFFFFF;
				}
			}
			
			.radio-group {
				display: flex;
				align-items: center;
				gap: 50rpx;
				
				.radio-item {
					display: flex;
					align-items: center;
					
					.radio {
						width: 36rpx;
						height: 36rpx;
						border: 3rpx solid #CCCCCC;
						border-radius: 50%;
						margin-right: 15rpx;
						position: relative;
						transition: all 0.3s;
						
						&.radio-checked {
							border-color: #FF6B8A;
							background: #FF6B8A;
							
							&::after {
								content: '';
								position: absolute;
								width: 16rpx;
								height: 16rpx;
								background: #FFFFFF;
								border-radius: 50%;
								top: 50%;
								left: 50%;
								transform: translate(-50%, -50%);
							}
						}
					}
					
					.radio-label {
						font-size: 28rpx;
						color: #333333;
					}
				}
			}
		}
		
		.submit-btn {
			width: 100%;
			height: 80rpx;
			background: linear-gradient(135deg, #FF8A9B 0%, #FF6B8A 100%);
			color: #FFFFFF;
			font-size: 30rpx;
			font-weight: bold;
			border: none;
			border-radius: 40rpx;
			margin-top: 30rpx;
		}
	}
</style>