Merge branch 'yxy' into test_dev

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

@@ -88,8 +88,13 @@
 				</view>
 
 				<view class="form-group">
-					<text class="form-label">所在城市：</text>
-					<input class="form-input" v-model="formData.city" placeholder="请输入您的所在城市" />
+					<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">
@@ -99,7 +104,12 @@
 
 				<view class="form-group">
 					<text class="form-label">可服务时间：</text>
-					<input class="form-input" v-model="formData.availableTime" placeholder="请输入您的工作时间" />
+					<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">
@@ -139,6 +149,8 @@
 </template>
 
 <script>
+	import api from '@/utils/api.js'
+	
 	export default {
 		data() {
 			return {
@@ -148,13 +160,37 @@
 					email: '',
 					age: '',
 					gender: 2, // 默认女
-					city: '',
+					provinceId: null,
+					cityId: null,
+					areaId: null,
 					experience: '',
-					availableTime: '',
+					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() {
@@ -169,6 +205,191 @@
 				})
 			},
 			
+			// 省市区相关方法
+			// 加载省市区数据
+			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}`
+				}
+			},
+			
 			// 提交申请
 			handleSubmit() {
 				// 表单验证
@@ -224,9 +445,17 @@
 					return
 				}
 				
-				if (!this.formData.city) {
+				if (!this.formData.provinceId || !this.formData.cityId || !this.formData.areaId) {
+					uni.showToast({
+						title: '请选择所在地区',
+						icon: 'none'
+					})
+					return
+				}
+				
+				if (!this.formData.startTime || !this.formData.endTime) {
 					uni.showToast({
-						title: '请输入所在城市',
+						title: '请选择可服务时间',
 						icon: 'none'
 					})
 					return
@@ -256,11 +485,18 @@
 											email: '',
 											age: '',
 											gender: 2,
-											city: '',
+											provinceId: null,
+											cityId: null,
+											areaId: null,
 											experience: '',
-											availableTime: '',
+											startTime: '',
+											endTime: '',
 											introduction: ''
 										}
+										this.multiAreaIndex = [0, 0, 0]
+										this.areaDisplayText = ''
+										this.timeSlotIndex = [0, 0]
+										this.timeSlotDisplayText = ''
 									}
 								})
 							}, 1500)
@@ -456,6 +692,22 @@
 				}
 			}
 			
+			.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;