预约.

pages.json

@@ -97,6 +97,29 @@
 			"style": {
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path": "pages/me/my-message-page",
+			"style": {
+				"navigationBarTitleText": "",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path" : "pages/appointment/book-room-page",
+			"style" : 
+			{
+				"navigationBarTitleText" : "",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path" : "pages/me/my-earnings-page",
+			"style" : 
+			{
+				"navigationBarTitleText" : "",
+				"navigationStyle": "custom"
+			}
 		}
 	],
 	"globalStyle": {
@@ -118,7 +141,8 @@
 				"text": "首页"
 			},
 			{
-				"pagePath": "pages/appointment/appointment-page",
+				// "pagePath": "pages/appointment/appointment-page",
+				"pagePath": "pages/appointment/book-room-page",
 				"iconPath": "/static/tabbar/appointment.png",
 				"selectedIconPath": "/static/tabbar/appointment_s.png",
 				"text": "预约"

pages/appointment/appointment-page.vue

@@ -1,8 +1,8 @@
 <template>
 	<com-page-container-base ref="_containerBase">
 		<view class="content column">
-
 			<text class="page-title">发起预约</text>
+			<view class="column" style="overflow-y: auto;">
 
 				<card-container marginTop="30rpx">
 					<label-field label="预定时长">
@@ -58,13 +58,15 @@
 				<card-container marginTop="30rpx">
 					<label-slect-field label="是否禁烟">
 						<view style="height: 61rpx;display: flex;justify-content: left;align-items: center;">
-						<com-appointment-radio-select :options="smokingOptions" v-model="reservationInfo.is_smoking" />
+							<com-appointment-radio-select :options="smokingOptions"
+								v-model="reservationInfo.is_smoking" />
 						</view>
 					</label-slect-field>
 					<view :style="{ height: lineHeight }"></view>
 					<label-slect-field label="性别">
 						<view style="height: 61rpx;display: flex;justify-content: left;align-items: center;">
-						<com-appointment-radio-select :options="genderOptions" v-model="reservationInfo.gender_limit" />
+							<com-appointment-radio-select :options="genderOptions"
+								v-model="reservationInfo.gender_limit" />
 						</view>
 					</label-slect-field>
 					<view :style="{ height: lineHeight }"></view>
@@ -119,6 +121,7 @@
 
 
 			</view>
+		</view>
 		<com-appointment-picker-data ref="roomPickerRef" />
 		<up-picker title="年龄范围选择" :show="agePickerVisible" :columns="agePickerColumns" :keyName="'text'"
 			:defaultIndex="agePickerDefaultIndex" @confirm="onAgePickerConfirm" @cancel="() => agePickerVisible = false"
@@ -159,9 +162,12 @@ import {
 		watch
 	} from 'vue';
 	import {
-	getConfigData, getSubscribeMessage
+		getConfigData,
+		getSubscribeMessage
 	} from '@/common/server/config'
-import { usePay } from '@/common/server/interface/user'
+	import {
+		usePay
+	} from '@/common/server/interface/user'
 	import {
 		requestSubscribeMessage,
 		requestPayment
@@ -170,7 +176,9 @@ import {
 		getDayDescription,
 		ceilMinuteToNext5
 	} from '@/common/system/timeUtile';
-import { isLogin } from '@/common/server/user'
+	import {
+		isLogin
+	} from '@/common/server/user'
 	import {
 		forEach,
 		union
@@ -188,13 +196,19 @@ import TagSelect from '@/components/com/appointment/tag-select.vue'
 	import ComAppointmentPickerData from '@/components/com/appointment/picker-data.vue'
 	import ComAppointmentRadioSelect from '@/components/com/appointment/radio-select.vue'
 	import {
-	getReservationRoomList, addSQReservation, cancelReservation, canCreateSQReservation
+		getReservationRoomList,
+		addSQReservation,
+		cancelReservation,
+		canCreateSQReservation
 	} from '@/common/server/interface/sq'
 	const _containerBase = ref(null)
 	const submitPopupRef = ref(null)
 	// 年龄选择器状态
 	const agePickerVisible = ref(false)
-const agePickerColumns = ref([[], []])
+	const agePickerColumns = ref([
+		[],
+		[]
+	])
 	const agePickerDefaultIndex = ref([0, 0])
 	const reservationData = ref(null)
 	const lineHeight = ref("15rpx")
@@ -383,19 +397,40 @@ const getGameRuleText = (gameRuleValue) => {
 		return gameRule ? gameRule.text : '';
 	}
 
-const smokingOptions = ref([
+	const smokingOptions = ref([{
-	{ value: 2, text: '不禁烟' },
+			value: 2,
-	{ value: 1, text: '禁烟' },
+			text: '不禁烟'
+		},
+		{
+			value: 1,
+			text: '禁烟'
+		},
 	])
-const genderOptions = ref([
+	const genderOptions = ref([{
-	{ value: 0, text: '不限' },
+			value: 0,
-	{ value: 1, text: '男' },
+			text: '不限'
-	{ value: 2, text: '女' },
+		},
+		{
+			value: 1,
+			text: '男'
+		},
+		{
+			value: 2,
+			text: '女'
+		},
 	])
-const depositOptions = ref([
+	const depositOptions = ref([{
-	{ value: 0, text: '0元' },
+			value: 0,
-	{ value: 5, text: '5元' },
+			text: '0元'
-	{ value: 10, text: '10元' },
+		},
+		{
+			value: 5,
+			text: '5元'
+		},
+		{
+			value: 10,
+			text: '10元'
+		},
 	])
 
 	const currentValue = ref(0)
@@ -720,14 +755,29 @@ onShow(async () => {
 	})
 	// 年龄列构建与显示/文案
 	const buildAgeColumns = () => {
-	const minList = [{ value: 0, text: '不限' }]
+		const minList = [{
-	for (let i = 18; i <= 80; i++) minList.push({ value: i, text: String(i) })
+			value: 0,
-	const maxList = [{ value: 0, text: '不限' }]
+			text: '不限'
-	for (let i = 18; i <= 80; i++) maxList.push({ value: i, text: String(i) })
+		}]
+		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
+		const {
+			min_age,
+			max_age
+		} = reservationInfo.value
 		if (min_age == 0 && max_age == 0) {
 			return '不限'
 		}
@@ -738,7 +788,10 @@ const getAgeRangeText = () => {
 	const openAgePicker = () => {
 		buildAgeColumns()
 		// 计算默认索引
-	const { min_age, max_age } = reservationInfo.value
+		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))
@@ -771,7 +824,6 @@ const onAgePickerConfirm = (e) => {
 	.content {
 		width: 100%;
 		height: 100vh;
-	overflow-y: auto;
 		background-color: #F7F7F7;
 	}
 
@@ -779,6 +831,7 @@ const onAgePickerConfirm = (e) => {
 	.page-title {
 		margin-top: 100rpx;
 		text-align: center;
+		margin-bottom: 20rpx;
 	}
 
 	/* 输入外层统一样式 */
@@ -836,7 +889,8 @@ const onAgePickerConfirm = (e) => {
 	.action-submit {
 		flex: 1 1 auto;
 		height: 88rpx;
-    margin: 0; /* 覆盖原有 submit-button 的外边距，使其与 reset 同行 */
+		margin: 0;
+		/* 覆盖原有 submit-button 的外边距，使其与 reset 同行 */
 	}
 
 	/* 备注容器及文本 */

pages/appointment/book-room-page.vue

@@ -0,0 +1,176 @@
+<template>
+	<view class="content column">
+
+		<view class="column" style="width: 100%; height: 308rpx; background-color: white;">
+			<view style="flex: 1;"></view>
+			<text class="page-title">发起预约</text>
+			<view class="row" style="width: 90%; height: 120rpx; margin: 20rpx auto 0;">
+				<view class="column center" v-for="(item,index) in dateList" :style="setBgColor(index)"
+					@click="clickTime(index)" style="width: 96rpx; height: 100%;">
+					<text style="font-size: 26rpx;">{{item.time}}</text>
+					<text style="font-size: 22rpx;">{{item.weekday}}</text>
+
+				</view>
+			</view>
+		</view>
+
+		<text style="margin-top: 20rpx; margin-left: 32rpx; font-size: 24rpx;">营业时间：早XX点 至 晚XX点</text>
+
+		<view class="row"
+			style="width: 686rpx; height: 56rpx; background-color: #2ED9BF; border-radius: 5rpx; margin: 20rpx auto 0; align-items: center;">
+			<text style="font-size: 22rpx; color: #262626; margin-left: 16rpx;">查看当前时段空闲时间</text>
+			<up-switch style="margin-right: 16rpx; margin-left: auto; " v-model="value" @change="change"
+				size="20"></up-switch>
+		</view>
+
+		<view class="" style="width: 100%; flex: 1; margin-top: 12rpx; overflow-y: auto;">
+
+			<view class="" v-for="(item,index) in roomList"
+				style="position: relative; width: 706rpx; height: 270rpx; border-radius: 20rpx; background-color: white; margin: 0 auto 20rpx;">
+
+
+				<image src=""
+					style="width: 180rpx; height: 156rpx; background-color: #DEDEDE; border-radius: 14rpx; position: absolute; top: 10rpx; left: 10rpx;"
+					mode=""></image>
+
+				<view class="column" style=" position: absolute; left: 200rpx; top: 20rpx;">
+					<text style="font-size: 28rpx;">房间号或房间名</text>
+					<text style="font-size: 20rpx;">房间类型</text>
+
+					<text style="font-size: 24rpx; margin-top: 24rpx;">¥30/4小时</text>
+					<text style="font-size: 24rpx; color: #FF0000;">会员价¥30/5小时</text>
+				</view>
+
+				<text
+					style="font-size: 20rpx; position: absolute; top: 10rpx; right: 16rpx; color: #FF9901;">当前使用中</text>
+
+				<view class="center"
+					style="width: 92rpx; height: 46rpx; background-color: #20BBA4; border-radius: 52rpx; font-size: 26rpx; color: white; position: absolute; bottom: 94rpx; right: 10rpx;">
+					预约
+				</view>
+
+				<view class="row" style="align-items: center; position: absolute; left: 10rpx; bottom: 60rpx;">
+					<view style="width: 24rpx; height: 4rpx; background-color: #FF9901;"></view>
+					<text style="font-size: 16rpx; color: #323232; margin-left: 8rpx;">已预定时段</text>
+					<view style="width: 24rpx; height: 4rpx; background-color: #E6E6E6; margin-left: 22rpx;"></view>
+					<text style="font-size: 16rpx; color: #323232; margin-left: 8rpx;">已预定时段</text>
+				</view>
+
+				<view class="row" style="align-items: center; position: absolute; left: 10rpx; bottom: 14rpx;">
+
+					<view class="column center" style="margin-right: 20rpx;">
+						<view style="width: 70rpx; height: 4rpx; background-color: #FF9901;"></view>
+						<text style="font-size: 12rpx; margin-top: 4rpx;">凌晨</text>
+					</view>
+					<view class="column center" style="margin-right: 20rpx;">
+						<view style="width: 70rpx; height: 4rpx; background-color: #E6E6E6;"></view>
+						<text style="font-size: 12rpx; margin-top: 4rpx;">上午</text>
+					</view>
+					<view class="column center" style="margin-right: 20rpx;">
+						<view style="width: 70rpx; height: 4rpx; background-color: #FF9901;"></view>
+						<text style="font-size: 12rpx; margin-top: 4rpx;">下午</text>
+					</view>
+					<view class="column center" style="margin-right: 20rpx;">
+						<view style="width: 70rpx; height: 4rpx; background-color: #E6E6E6;"></view>
+						<text style="font-size: 12rpx; margin-top: 4rpx;">晚上</text>
+					</view>
+
+				</view>
+			</view>
+
+
+		</view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				currentTimeIndex: 0,
+				dateList: [],
+				value: false,
+				roomList: [1, 2, 3, 4, 5, 6],
+			}
+		},
+
+		onLoad() {
+			this.getDateList();
+		},
+
+		methods: {
+			change(e) {
+				console.log('change', e);
+			},
+			/**
+			 * 生成日期列表：当天+后续6天，共7天
+			 */
+			getDateList() {
+				const list = [];
+				const today = new Date(); // 当天日期（用于判断是否为今天）
+				const weekNames = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
+
+				for (let i = 0; i < 7; i++) {
+					const current = new Date();
+					current.setDate(today.getDate() + i); // 计算第i天的日期
+
+					// 1. 处理时间格式：月.日（如10.1、12.30）
+					const month = current.getMonth() + 1; // 月份从0开始
+					const day = current.getDate();
+					const time = `${month}.${day}`;
+
+					// 2. 处理星期显示：当天显示“今天”，其他显示周几
+					let weekday;
+					if (i === 0) {
+						weekday = "今天"; // 当天
+					} else {
+						const weekIndex = current.getDay(); // 0=周日，6=周六
+						weekday = weekNames[weekIndex];
+					}
+
+					list.push({
+						time,
+						weekday
+					});
+				}
+
+				this.dateList = list;
+			},
+
+			//设置背景
+			setBgColor(index) {
+				if (this.currentTimeIndex == index) {
+					return {
+						backgroundColor: "#20BBA4",
+						color: "#FFFFFF",
+					}
+				} else {
+					return {
+						backgroundColor: "#FFFFFF",
+						color: "#000000",
+					}
+				}
+			},
+
+			clickTime(index) {
+				this.currentTimeIndex = index;
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.content {
+		width: 100%;
+		height: 100vh;
+		background-color: #F7F7F7;
+	}
+
+	/* 页面标题 */
+	.page-title {
+		margin-top: 100rpx;
+		text-align: center;
+		margin-bottom: 20rpx;
+	}
+</style>

pages/me/me-page.vue

@@ -154,7 +154,8 @@ const commonActions = [
 	{ label: '常见问题', icon: '@@:app/static/me/cjwt.png', action: 'faq' },
 	{ label: '黑名单', icon: '@@:app/static/me/hmd.png', action: 'blacklist' },
 	{ label: '联系我们', icon: '@@:app/static/me/lxwm.png', action: 'contact' },
-
+	{ label: '我的消息', icon: '@@:app/static/me/lxwm.png', action: 'message' },
+	{ label: '我的收益', icon: '@@:app/static/me/lxwm.png', action: 'revenue' },
 ]
 
 const handleCommonAction = (item) => {
@@ -192,6 +193,16 @@ const handleCommonAction = (item) => {
 				url: '/pages/other/agreement?type=about'
 			});
 			break;
+		case 'message':
+			uni.navigateTo({
+				url: '/pages/me/my-message-page'
+			});
+			break;
+		case 'revenue':
+			uni.navigateTo({
+				url: '/pages/me/my-earnings-page'
+			});
+			break;
 		default:
 			uni.showToast({ title: '敬请期待', icon: 'none' });
 			break;

pages/me/my-earnings-page.vue

@@ -0,0 +1,46 @@
+<template>
+	<view class="content column">
+		<view class="row" style="width: 90%; margin: 100rpx auto 0; justify-content: space-between;">
+			<image src="/static/back.png" style="width: 40rpx; height: 40rpx;" @click="goBack()" mode=""></image>
+			<text style="font-size: 30rpx;">我的收益</text>
+			<view style="width: 40rpx;"></view>
+		</view>
+
+
+		<view class="" style="width: 728rpx; height: 2rpx; background-color: #EBEBEB; margin: 40rpx auto 0;"></view>
+
+
+		<view class=""
+			style="width: 686rpx; height: 282rpx; box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.08); margin: 20rpx auto 0; background-color: white;">
+
+		</view>
+
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+			// 返回上一页
+			goBack() {
+				uni.navigateBack({
+					delta: 1
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.content {
+		width: 100%;
+		height: 100vh;
+		background: #F7F7F7;
+	}
+</style>

pages/me/my-message-page.vue

@@ -0,0 +1,87 @@
+<template>
+	<view class="content column">
+		<view class="row" style="width: 90%; margin: 100rpx auto 0; justify-content: space-between;">
+			<image src="/static/back.png" style="width: 40rpx; height: 40rpx;" @click="goBack()" mode=""></image>
+			<text style="font-size: 30rpx;">我的消息</text>
+			<view style="width: 40rpx;"></view>
+		</view>
+
+		<view class="row" style="width: 100%; margin-top: 40rpx; margin-left: 56rpx;">
+			<view class="center" @click="clickTab(index)"
+				style="margin-right: 20rpx; width: 134rpx; height: 48rpx; font-size: 26rpx; border-radius: 34rpx;"
+				:style="setBgColor(index)" v-for="(item,index) in teabList">
+				{{item}}
+			</view>
+		</view>
+
+		<view class="" style="width: 100%; height: 1rpx; background-color: #EBEBEB; margin-top: 20rpx;"></view>
+
+		<view class="column"
+			style="width: 100%; flex: 1; margin-top: 20rpx; overflow-y: auto;">
+			<view class="column" v-for="(item,index) in messageList"
+				style="width: 686rpx; margin: 0rpx auto 30rpx; background-color: white; border-radius: 32rpx; ">
+				<text style="font-size: 32rpx; margin-top: 22rpx; margin-left: 30rpx;">标题标题标题</text>
+
+				<text
+					style="font-size: 32rpx; margin-top: 10rpx; margin-left: 30rpx;">正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文
+					正文正文正文正文正文正文正文</text>
+
+				<text
+					style="font-size: 32rpx; margin-top: 70rpx; margin-left: auto; margin-right: 18rpx; margin-bottom: 10rpx;">2025//1/1
+					11：12</text>
+
+			</view>
+		</view>
+
+
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				currentIndex: 0,
+				teabList: ["全部", "私信"],
+				messageList: [1, 2, 3, 4, 5]
+			}
+		},
+		methods: {
+			// 返回上一页
+			goBack() {
+				uni.navigateBack({
+					delta: 1
+				})
+			},
+
+			setBgColor(index) {
+				if (this.currentIndex == index) {
+					return {
+						backgroundColor: '#C4FFDF',
+						color: '#00AC4E',
+						border: 'solid 1rpx #00AC4E',
+					}
+				} else {
+					return {
+						backgroundColor: '#FFFFFF',
+						color: '#000000',
+						border: 'solid 1rpx #EBEBEB',
+					}
+				}
+			},
+
+			clickTab(index) {
+				this.currentIndex = index;
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.content {
+		width: 100%;
+		height: 100vh;
+		background: #F7F7F7;
+	}
+</style>