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>
					<picker mode="multiSelector" :range="multiAreaData" range-key="name" :value="multiAreaIndex" @change="onAreaChange" @columnchange="onAreaColumnChange">
						<view class="form-input picker-input">
							<text :class="{ 'placeholder-text': !areaDisplayText }">{{ areaDisplayText || '请选择省市区' }}</text>
							<text class="picker-arrow">></text>
						</view>
					</picker>
				</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>
					<picker mode="multiSelector" :range="timeSlotData" :value="timeSlotIndex" @change="onTimeSlotChange">
						<view class="form-input picker-input">
							<text :class="{ 'placeholder-text': !timeSlotDisplayText }">{{ timeSlotDisplayText || '请选择服务时间段' }}</text>
							<text class="picker-arrow">></text>
						</view>
					</picker>
				</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>
	import api from '@/utils/api.js'
	
	export default {
		data() {
			return {
				formData: {
					name: '',
					phone: '',
					email: '',
					age: '',
					gender: 2, // 默认女
					provinceId: null,
					cityId: null,
					areaId: null,
					experience: '',
					startTime: '',
					endTime: '',
					introduction: ''
				},
				// 省市区数据
				provinceList: [],
				cityList: [],
				areaList: [],
				multiAreaData: [[], [], []], // 三级联动数据
				multiAreaIndex: [0, 0, 0], // 三级联动索引
				areaDisplayText: '',
				// 时间段数据
				hourOptions: Array.from({ length: 24 }, (_, i) => {
					const hour = String(i).padStart(2, '0')
					return `${hour}:00`
				}),
				timeSlotData: [[], []], // [开始时间, 结束时间]
				timeSlotIndex: [0, 0],
				timeSlotDisplayText: ''
			}
		},
		onLoad() {
			// 初始化时间段数据
			this.timeSlotData = [this.hourOptions, this.hourOptions]
			// 加载省市区数据
			this.loadAreaData()
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack()
			},
			
			// 滚动到表单
			scrollToForm() {
				uni.pageScrollTo({
					selector: '#application-form',
					duration: 300
				})
			},
			
			// 省市区相关方法
			// 加载省市区数据
			async loadAreaData() {
				try {
					// 加载省份列表
					const provinceRes = await api.area.getProvinces()
					
					if (Array.isArray(provinceRes)) {
						this.provinceList = provinceRes
					} else if (provinceRes && provinceRes.data) {
						this.provinceList = provinceRes.data
					} else if (provinceRes && provinceRes.code === 200 && provinceRes.data) {
						this.provinceList = provinceRes.data
					} else {
						this.provinceList = []
					}
					
					this.multiAreaData[0] = this.provinceList
					
					// 如果有省份，加载第一个省份的城市
					if (this.provinceList.length > 0) {
						await this.loadCitiesForProvince(this.provinceList[0].id)
					}
				} catch (e) {
					console.error('加载省份失败:', e)
					uni.showToast({
						title: '加载省份数据失败',
						icon: 'none'
					})
				}
			},
			
			// 根据省份ID加载城市
			async loadCitiesForProvince(provinceId) {
				if (!provinceId) return
				
				try {
					const cityRes = await api.area.getCities(provinceId)
					
					if (Array.isArray(cityRes)) {
						this.cityList = cityRes
					} else if (cityRes && cityRes.data) {
						this.cityList = cityRes.data
					} else if (cityRes && cityRes.code === 200 && cityRes.data) {
						this.cityList = cityRes.data
					} else {
						this.cityList = []
					}
					
					this.multiAreaData[1] = this.cityList
					
					// 如果有城市，加载第一个城市的区域
					if (this.cityList.length > 0) {
						await this.loadAreasForCity(this.cityList[0].id)
					}
				} catch (e) {
					console.error('加载城市失败:', e)
					this.cityList = []
					this.multiAreaData[1] = []
				}
			},
			
			// 根据城市ID加载区域
			async loadAreasForCity(cityId) {
				if (!cityId) return
				
				try {
					const areaRes = await api.area.getAreas(cityId)
					
					if (Array.isArray(areaRes)) {
						this.areaList = areaRes
					} else if (areaRes && areaRes.data) {
						this.areaList = areaRes.data
					} else if (areaRes && areaRes.code === 200 && areaRes.data) {
						this.areaList = areaRes.data
					} else {
						this.areaList = []
					}
					
					this.multiAreaData[2] = this.areaList
				} catch (e) {
					console.error('加载区域失败:', e)
					this.areaList = []
					this.multiAreaData[2] = []
				}
			},
			
			// 省市区选择器列变化事件
			async onAreaColumnChange(e) {
				const column = e.detail.column // 列索引：0-省，1-市，2-区
				const row = e.detail.value // 选中的行索引
				
				if (column === 0) {
					// 选择了省份
					const province = this.provinceList[row]
					if (province && province.id) {
						this.multiAreaIndex[0] = row
						this.multiAreaIndex[1] = 0
						this.multiAreaIndex[2] = 0
						// 加载该省份的城市
						await this.loadCitiesForProvince(province.id)
					}
				} else if (column === 1) {
					// 选择了城市
					const city = this.cityList[row]
					if (city && city.id) {
						this.multiAreaIndex[1] = row
						this.multiAreaIndex[2] = 0
						// 加载该城市的区域
						await this.loadAreasForCity(city.id)
					}
				} else if (column === 2) {
					// 选择了区域
					this.multiAreaIndex[2] = row
				}
			},
			
			// 省市区选择器确认事件
			onAreaChange(e) {
				const values = e.detail.value
				this.multiAreaIndex = values
				
				// 设置选中的省市区ID
				if (this.provinceList[values[0]]) {
					this.formData.provinceId = this.provinceList[values[0]].id
				}
				if (this.cityList[values[1]]) {
					this.formData.cityId = this.cityList[values[1]].id
				}
				if (this.areaList[values[2]]) {
					this.formData.areaId = this.areaList[values[2]].id
				}
				
				// 更新显示文本
				this.updateAreaDisplayText()
			},
			
			// 更新地区显示文本
			updateAreaDisplayText() {
				let text = ''
				if (this.provinceList[this.multiAreaIndex[0]]) {
					text += this.provinceList[this.multiAreaIndex[0]].name
				}
				if (this.cityList[this.multiAreaIndex[1]]) {
					text += ' ' + this.cityList[this.multiAreaIndex[1]].name
				}
				if (this.areaList[this.multiAreaIndex[2]]) {
					text += ' ' + this.areaList[this.multiAreaIndex[2]].name
				}
				this.areaDisplayText = text
			},
			
			// 时间段选择器确认事件
			onTimeSlotChange(e) {
				const values = e.detail.value
				this.timeSlotIndex = values
				
				const startTime = this.hourOptions[values[0]]
				const endTime = this.hourOptions[values[1]]
				
				// 验证结束时间必须大于开始时间
				if (values[1] <= values[0]) {
					uni.showToast({
						title: '结束时间必须大于开始时间',
						icon: 'none'
					})
					// 自动调整结束时间为开始时间+1
					if (values[0] < 23) {
						this.timeSlotIndex[1] = values[0] + 1
						this.formData.startTime = startTime
						this.formData.endTime = this.hourOptions[this.timeSlotIndex[1]]
						this.timeSlotDisplayText = `每天 ${startTime} - ${this.formData.endTime}`
					} else {
						// 如果开始时间是23:00，则结束时间设为23:00（表示到当天结束）
						this.formData.startTime = startTime
						this.formData.endTime = endTime
						this.timeSlotDisplayText = `每天 ${startTime} - ${endTime}`
					}
				} else {
					this.formData.startTime = startTime
					this.formData.endTime = endTime
					this.timeSlotDisplayText = `每天 ${startTime} - ${endTime}`
				}
			},
			
			// 提交申请
			async 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.provinceId || !this.formData.cityId || !this.formData.areaId) {
					uni.showToast({
						title: '请选择所在地区',
						icon: 'none'
					})
					return
				}
				
				if (!this.formData.experience) {
					uni.showToast({
						title: '请输入婚姻介绍经验',
						icon: 'none'
					})
					return
				}
				
				if (!this.formData.startTime || !this.formData.endTime) {
					uni.showToast({
						title: '请选择可服务时间',
						icon: 'none'
					})
					return
				}
				
				if (!this.formData.introduction) {
					uni.showToast({
						title: '请输入个人简介',
						icon: 'none'
					})
					return
				}
				
				uni.showModal({
					title: '提交申请',
					content: '确认提交兼职红娘申请吗？',
					success: async (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '提交中...'
							})
							
							try {
								// 获取当前登录用户ID
								const userInfo = uni.getStorageSync('userInfo')
								if (!userInfo || !userInfo.userId) {
									uni.hideLoading()
									uni.showToast({
										title: '请先登录',
										icon: 'none'
									})
									setTimeout(() => {
										uni.navigateTo({
											url: '/pages/page3/page3'
										})
									}, 1500)
									return
								}
								
								// 组装提交数据
								const submitData = {
									userId: userInfo.userId,
									name: this.formData.name,
									phone: this.formData.phone,
									email: this.formData.email,
									age: parseInt(this.formData.age),
									gender: this.formData.gender,
									area: this.areaDisplayText, // 使用显示文本作为地区
									experience: this.formData.experience,
									serverTime: `${this.formData.startTime}-${this.formData.endTime}`,
									introduction: this.formData.introduction
								}
								
								// 调用后端接口提交申请
								await api.matchmaker.submitApply(submitData)
								
								uni.hideLoading()
								uni.showModal({
									title: '申请成功',
									content: '您的申请已提交，我们会在1-3个工作日内完成审核，请耐心等待。审核结果将通过短信或邮件通知您。',
									showCancel: false,
									success: () => {
										// 清空表单
										this.formData = {
											name: '',
											phone: '',
											email: '',
											age: '',
											gender: 2,
											provinceId: null,
											cityId: null,
											areaId: null,
											experience: '',
											startTime: '',
											endTime: '',
											introduction: ''
										}
										this.multiAreaIndex = [0, 0, 0]
										this.areaDisplayText = ''
										this.timeSlotIndex = [0, 0]
										this.timeSlotDisplayText = ''
									}
								})
							} catch (error) {
								uni.hideLoading()
								console.error('提交申请失败:', error)
								uni.showToast({
									title: error.message || '提交失败，请稍后重试',
									icon: 'none',
									duration: 2000
								})
							}
						}
					}
				})
			}
		}
	}
</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;
				}
			}
			
			.picker-input {
				display: flex;
				align-items: center;
				justify-content: space-between;
				cursor: pointer;
				
				.placeholder-text {
					color: #999999;
				}
				
				.picker-arrow {
					color: #CCCCCC;
					font-size: 24rpx;
				}
			}
			
			.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>