312

pages/appointment/appointment-page.vue

@@ -56,7 +56,6 @@
 
 
 			<card-container marginTop="30rpx">
-
 				<label-slect-field label="是否禁烟">
 					<com-appointment-radio-select :options="smokingOptions" v-model="reservationInfo.is_smoking" />
 				</label-slect-field>
@@ -65,6 +64,13 @@
 					<com-appointment-radio-select :options="genderOptions" v-model="reservationInfo.gender_limit" />
 				</label-slect-field>
 				<view :style="{ height: lineHeight }"></view>
+				<label-slect-field label="年龄范围">
+					<view @click="openAgePicker"
+						style="font-size: 28rpx;width: 100%;display: flex;align-items: center;height: 60rpx;">
+						{{ getAgeRangeText() }}
+					</view>
+				</label-slect-field>
+				<view :style="{ height: lineHeight }"></view>
 				<label-slect-field label="信誉">
 					<view style="display:flex;align-items:center;">
 						<text style="font-size: 25.86rpx;width: 120rpx;">大于等于</text>
@@ -105,6 +111,9 @@
 
 		</view>
 		<com-appointment-picker-data ref="roomPickerRef" />
+		<up-picker title="年龄范围选择" :show="agePickerVisible" :columns="agePickerColumns" :keyName="'text'"
+			:defaultIndex="agePickerDefaultIndex" @confirm="onAgePickerConfirm" @cancel="() => agePickerVisible = false"
+			@close="() => agePickerVisible = false"></up-picker>
 	</com-page-container-base>
 
 </template>
@@ -136,6 +145,10 @@ import {
 	getReservationRoomList
 } from '@/common/server/interface/sq'
 const _containerBase = ref(null)
+// 年龄选择器状态
+const agePickerVisible = ref(false)
+const agePickerColumns = ref([[], []])
+const agePickerDefaultIndex = ref([0, 0])
 const startTimeStr = ref(0)
 const endTimeStr = ref(0)
 
@@ -402,6 +415,53 @@ onLoad(async () => {
 		gameTypeRange.value = [...config.config.playingMethodOptions];
 	}
 })
+// 年龄列构建与显示/文案
+const buildAgeColumns = () => {
+	const minList = [{ value: 0, text: '不限' }]
+	for (let i = 18; i <= 80; i++) minList.push({ value: i, text: String(i) })
+	const maxList = [{ value: 0, text: '不限' }]
+	for (let i = 18; i <= 80; i++) maxList.push({ value: i, text: String(i) })
+	agePickerColumns.value = [minList, maxList]
+}
+const getAgeRangeText = () => {
+	const { min_age, max_age } = reservationInfo.value
+	if (min_age == 0 && max_age == 0) {
+		return '不限'
+	}
+	const minText = min_age === 0 ? '不限' : min_age + '岁'
+	const maxText = max_age === 0 ? '不限' : max_age + '岁'
+	return minText + ' - ' + maxText
+}
+const openAgePicker = () => {
+	buildAgeColumns()
+	// 计算默认索引
+	const { min_age, max_age } = reservationInfo.value
+	const [mins, maxs] = agePickerColumns.value
+	const findIndexByValue = (arr, val) => {
+		const idx = arr.findIndex(it => Number(it.value) === Number(val))
+		return idx >= 0 ? idx : 0
+	}
+	agePickerDefaultIndex.value = [
+		findIndexByValue(mins, min_age ?? 0),
+		findIndexByValue(maxs, max_age ?? 0),
+	]
+	agePickerVisible.value = true
+}
+const onAgePickerConfirm = (e) => {
+	// uview-plus up-picker confirm 回调 e.value 为两列所选对象数组
+	const selected = e && e.value ? e.value : []
+	const min = selected[0] ? Number(selected[0].value) : 0
+	const max = selected[1] ? Number(selected[1].value) : 0
+	// 若最小值大于最大值，自动交换或归零“不限”优先
+	let minAge = min
+	let maxAge = max
+	if (minAge !== 0 && maxAge !== 0 && minAge > maxAge) {
+		[minAge, maxAge] = [maxAge, minAge]
+	}
+	reservationInfo.value.min_age = minAge
+	reservationInfo.value.max_age = maxAge
+	agePickerVisible.value = false
+}
 </script>
 
 <style lang="scss">