outsource/mahjong_group
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

预约.

Browse Source
This commit is contained in:
18631081161 2025-10-31 22:05:22 +08:00
parent 4bf41e8e34
commit 7b28ea6b5c
6 changed files with 1187 additions and 789 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
pages.json
View File

@ -97,6 +97,29 @@
"style": { "style": {
"navigationStyle": "custom" "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": { "globalStyle": {
@ -118,7 +141,8 @@
"text": "首页" "text": "首页"
}, },
{ {
"pagePath": "pages/appointment/appointment-page", // "pagePath": "pages/appointment/appointment-page",
"pagePath": "pages/appointment/book-room-page",
"iconPath": "/static/tabbar/appointment.png", "iconPath": "/static/tabbar/appointment.png",
"selectedIconPath": "/static/tabbar/appointment_s.png", "selectedIconPath": "/static/tabbar/appointment_s.png",
"text": "预约" "text": "预约"

410
pages/appointment/appointment-page.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<com-page-container-base ref="_containerBase"> <com-page-container-base ref="_containerBase">
<view class="content column"> <view class="content column">
<text class="page-title">发起预约</text> <text class="page-title">发起预约</text>
<view class="column" style="overflow-y: auto;">
<card-container marginTop="30rpx"> <card-container marginTop="30rpx">
<label-field label="预定时长"> <label-field label="预定时长">
@ -58,13 +58,15 @@
<card-container marginTop="30rpx"> <card-container marginTop="30rpx">
<label-slect-field label="是否禁烟"> <label-slect-field label="是否禁烟">
<view style="height: 61rpx;display: flex;justify-content: left;align-items: center;"> <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> </view>
</label-slect-field> </label-slect-field>
<view :style="{ height: lineHeight }"></view> <view :style="{ height: lineHeight }"></view>
<label-slect-field label="性别"> <label-slect-field label="性别">
<view style="height: 61rpx;display: flex;justify-content: left;align-items: center;"> <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> </view>
</label-slect-field> </label-slect-field>
<view :style="{ height: lineHeight }"></view> <view :style="{ height: lineHeight }"></view>
@ -119,6 +121,7 @@
</view> </view>
</view>
<com-appointment-picker-data ref="roomPickerRef" /> <com-appointment-picker-data ref="roomPickerRef" />
<up-picker title="年龄范围选择" :show="agePickerVisible" :columns="agePickerColumns" :keyName="'text'" <up-picker title="年龄范围选择" :show="agePickerVisible" :columns="agePickerColumns" :keyName="'text'"
:defaultIndex="agePickerDefaultIndex" @confirm="onAgePickerConfirm" @cancel="() => agePickerVisible = false" :defaultIndex="agePickerDefaultIndex" @confirm="onAgePickerConfirm" @cancel="() => agePickerVisible = false"
@ -154,57 +157,68 @@
</template> </template>
<script setup> <script setup>
import { import {
ref, ref,
watch watch
} from 'vue'; } from 'vue';
import { import {
getConfigData, getSubscribeMessage getConfigData,
} from '@/common/server/config' getSubscribeMessage
import { usePay } from '@/common/server/interface/user' } from '@/common/server/config'
import { import {
usePay
} from '@/common/server/interface/user'
import {
requestSubscribeMessage, requestSubscribeMessage,
requestPayment requestPayment
} from '@/common/utils' } from '@/common/utils'
import { import {
getDayDescription, getDayDescription,
ceilMinuteToNext5 ceilMinuteToNext5
} from '@/common/system/timeUtile'; } from '@/common/system/timeUtile';
import { isLogin } from '@/common/server/user' import {
import { isLogin
} from '@/common/server/user'
import {
forEach, forEach,
union union
} from 'lodash'; } from 'lodash';
import { import {
getDetail getDetail
} from '@/common/server/index' } from '@/common/server/index'
import TimeSelectCell from '@/components/com/appointment/time-select-cell.vue' import TimeSelectCell from '@/components/com/appointment/time-select-cell.vue'
import LabelField from '@/components/com/appointment/label-field.vue' import LabelField from '@/components/com/appointment/label-field.vue'
import LabelSlectField from '@/components/com/appointment/label-slect-field.vue' import LabelSlectField from '@/components/com/appointment/label-slect-field.vue'
import CardContainer from '@/components/com/appointment/card-container.vue' import CardContainer from '@/components/com/appointment/card-container.vue'
import TagSelect from '@/components/com/appointment/tag-select.vue' import TagSelect from '@/components/com/appointment/tag-select.vue'
import ComAppointmentPickerData from '@/components/com/appointment/picker-data.vue' import ComAppointmentPickerData from '@/components/com/appointment/picker-data.vue'
import ComAppointmentRadioSelect from '@/components/com/appointment/radio-select.vue' import ComAppointmentRadioSelect from '@/components/com/appointment/radio-select.vue'
import { import {
getReservationRoomList, addSQReservation, cancelReservation, canCreateSQReservation getReservationRoomList,
} from '@/common/server/interface/sq' addSQReservation,
const _containerBase = ref(null) cancelReservation,
const submitPopupRef = ref(null) canCreateSQReservation
// 年龄选择器状态 } from '@/common/server/interface/sq'
const agePickerVisible = ref(false) const _containerBase = ref(null)
const agePickerColumns = ref([[], []]) const submitPopupRef = ref(null)
const agePickerDefaultIndex = ref([0, 0]) // 年龄选择器状态
const reservationData = ref(null) const agePickerVisible = ref(false)
const lineHeight = ref("15rpx") const agePickerColumns = ref([
const timeRange = ref(["2小时", "3小时", "4小时", "自定义"]) [],
const timeRangeValue = ref("") []
// 房间选项 ])
const roomOptions = ref([]) const agePickerDefaultIndex = ref([0, 0])
const roomPickerRef = ref(null) const reservationData = ref(null)
//提交表单数据 const lineHeight = ref("15rpx")
const reservationInfo = ref({ const timeRange = ref(["2小时", "3小时", "4小时", "自定义"])
const timeRangeValue = ref("")
// 房间选项
const roomOptions = ref([])
const roomPickerRef = ref(null)
//提交表单数据
const reservationInfo = ref({
room_id: 0, //房间id 非空 room_id: 0, //房间id 非空
room_name: '请选择房间', //房间名称 room_name: '请选择房间', //房间名称
start_time: 0, //开始时间 时间戳 非空 start_time: 0, //开始时间 时间戳 非空
@ -220,9 +234,9 @@ const reservationInfo = ref({
credit_limit: 0, //信誉限制 credit_limit: 0, //信誉限制
deposit_fee: 0, //鸽子费 deposit_fee: 0, //鸽子费
player_count: 0, //人数 player_count: 0, //人数
}); });
//自动计算结束时间 //自动计算结束时间
const onTimeRangeChange = async (val) => { const onTimeRangeChange = async (val) => {
timeRangeValue.value = val; timeRangeValue.value = val;
console.log('timeRange change:', val) console.log('timeRange change:', val)
if (val != "") { if (val != "") {
@ -240,15 +254,15 @@ const onTimeRangeChange = async (val) => {
} }
} }
} }
} }
const getRoomPickerName = () => { const getRoomPickerName = () => {
return reservationInfo.value.room_name; return reservationInfo.value.room_name;
} }
const tipsShow = () => { const tipsShow = () => {
submitPopupRef.value.open() submitPopupRef.value.open()
} }
const openUpDatesTimePicker = async (isManual = true) => { const openUpDatesTimePicker = async (isManual = true) => {
var now = reservationInfo.value.start_time * 1000; var now = reservationInfo.value.start_time * 1000;
var min = Date.now(); var min = Date.now();
min += 1000 * 60 * 30; min += 1000 * 60 * 30;
@ -265,8 +279,8 @@ const openUpDatesTimePicker = async (isManual = true) => {
if (isManual) { if (isManual) {
timeRangeValue.value = "自定义" timeRangeValue.value = "自定义"
} }
} }
const openUpDatesTimePickerEnd = async (isManual = true) => { const openUpDatesTimePickerEnd = async (isManual = true) => {
if (reservationInfo.value.start_time == 0) { if (reservationInfo.value.start_time == 0) {
uni.showToast({ uni.showToast({
title: '请先选择开始时间', title: '请先选择开始时间',
@ -287,9 +301,9 @@ const openUpDatesTimePickerEnd = async (isManual = true) => {
if (isManual) { if (isManual) {
timeRangeValue.value = "自定义" timeRangeValue.value = "自定义"
} }
} }
const maxPlayerCount = ref(0) const maxPlayerCount = ref(0)
const openRoomPicker = async () => { const openRoomPicker = async () => {
// 需先选择有效的开始/结束时间 // 需先选择有效的开始/结束时间
if (!reservationInfo.value.start_time || !reservationInfo.value.end_time) { if (!reservationInfo.value.start_time || !reservationInfo.value.end_time) {
uni.showToast({ uni.showToast({
@ -328,14 +342,14 @@ const openRoomPicker = async () => {
maxPlayerCount.value = selected.capacity maxPlayerCount.value = selected.capacity
} }
} }
const peopleRange = ref([]) const peopleRange = ref([])
const peopleText = ref("请先选择房间"); const peopleText = ref("请先选择房间");
const gameTypeRange = ref([]) const gameTypeRange = ref([])
const gameRuleRange = ref([]) const gameRuleRange = ref([])
const gameRuleText = ref("请先选择玩法类型"); const gameRuleText = ref("请先选择玩法类型");
const gameTypeRangeChange = (e) => { const gameTypeRangeChange = (e) => {
console.log('gameTypeRangeChange:', e) console.log('gameTypeRangeChange:', e)
// gameRuleRange.value // gameRuleRange.value
if (e == 0) { if (e == 0) {
@ -360,47 +374,68 @@ const gameTypeRangeChange = (e) => {
gameRuleRange.value = temp; gameRuleRange.value = temp;
} }
} }
const gameRuleRangeChange = (e) => { const gameRuleRangeChange = (e) => {
console.log('gameRuleRangeChange:', e) console.log('gameRuleRangeChange:', e)
} }
// 获取玩法类型文本 // 获取玩法类型文本
const getGameTypeText = (gameTypeValue) => { const getGameTypeText = (gameTypeValue) => {
if (!gameTypeValue || gameTypeValue === 0) { if (!gameTypeValue || gameTypeValue === 0) {
return ''; return '';
} }
const gameType = gameTypeRange.value.find(item => item.value === gameTypeValue); const gameType = gameTypeRange.value.find(item => item.value === gameTypeValue);
return gameType ? gameType.text : ''; return gameType ? gameType.text : '';
} }
// 获取具体规则文本 // 获取具体规则文本
const getGameRuleText = (gameRuleValue) => { const getGameRuleText = (gameRuleValue) => {
if (!gameRuleValue || gameRuleValue === 0) { if (!gameRuleValue || gameRuleValue === 0) {
return ''; return '';
} }
const gameRule = gameRuleRange.value.find(item => item.value === gameRuleValue); const gameRule = gameRuleRange.value.find(item => item.value === gameRuleValue);
return gameRule ? gameRule.text : ''; return gameRule ? gameRule.text : '';
} }
const smokingOptions = ref([ const smokingOptions = ref([{
{ value: 2, text: '不禁烟' }, value: 2,
{ value: 1, text: '禁烟' }, text: '不禁烟'
]) },
const genderOptions = ref([ {
{ value: 0, text: '不限' }, value: 1,
{ value: 1, text: '男' }, text: '禁烟'
{ value: 2, text: '女' }, },
]) ])
const depositOptions = ref([ const genderOptions = ref([{
{ value: 0, text: '0元' }, value: 0,
{ value: 5, text: '5元' }, text: '不限'
{ value: 10, text: '10元' }, },
]) {
value: 1,
text: '男'
},
{
value: 2,
text: '女'
},
])
const depositOptions = ref([{
value: 0,
text: '0元'
},
{
value: 5,
text: '5元'
},
{
value: 10,
text: '10元'
},
])
const currentValue = ref(0) const currentValue = ref(0)
const increment = () => { const increment = () => {
if (currentValue.value < 5) { if (currentValue.value < 5) {
currentValue.value += 0.5 currentValue.value += 0.5
if (currentValue.value > 5) { if (currentValue.value > 5) {
@ -409,9 +444,9 @@ const increment = () => {
// 同步到表单对象 // 同步到表单对象
reservationInfo.value.credit_limit = currentValue.value reservationInfo.value.credit_limit = currentValue.value
} }
} }
const decrement = () => { const decrement = () => {
if (currentValue.value > 0) { if (currentValue.value > 0) {
currentValue.value -= 0.5 currentValue.value -= 0.5
if (currentValue.value < 0) { if (currentValue.value < 0) {
@ -420,14 +455,14 @@ const decrement = () => {
// 同步到表单对象 // 同步到表单对象
reservationInfo.value.credit_limit = currentValue.value reservationInfo.value.credit_limit = currentValue.value
} }
} }
const changeLog = (e) => { const changeLog = (e) => {
console.log('change事件:', e) console.log('change事件:', e)
} }
// 表单验证方法 // 表单验证方法
const validateForm = () => { const validateForm = () => {
const info = reservationInfo.value const info = reservationInfo.value
// 必填字段验证 // 必填字段验证
@ -505,10 +540,10 @@ const validateForm = () => {
} }
return true return true
} }
// 提交预约方法 // 提交预约方法
const submitReservation = async () => { const submitReservation = async () => {
var isLoginSucces = await isLogin(); var isLoginSucces = await isLogin();
if (!isLoginSucces) { if (!isLoginSucces) {
uni.navigateTo({ uni.navigateTo({
@ -632,10 +667,10 @@ const submitReservation = async () => {
icon: 'none' icon: 'none'
}) })
} }
} }
// 重置表单方法（可选） // 重置表单方法（可选）
const resetForm = () => { const resetForm = () => {
reservationInfo.value = { reservationInfo.value = {
room_id: 0, room_id: 0,
room_name: '请选择房间', room_name: '请选择房间',
@ -659,14 +694,14 @@ const resetForm = () => {
peopleRange.value = [] peopleRange.value = []
peopleText.value = "请先选择房间" peopleText.value = "请先选择房间"
gameRuleText.value = "请先选择玩法类型" gameRuleText.value = "请先选择玩法类型"
} }
// 当开始或结束时间变化时自动刷新房间 // 当开始或结束时间变化时自动刷新房间
watch([() => reservationInfo.value.start_time, () => reservationInfo.value.end_time], async ([s, e]) => { watch([() => reservationInfo.value.start_time, () => reservationInfo.value.end_time], async ([s, e]) => {
await tryLoadRooms() await tryLoadRooms()
}) })
watch(() => reservationInfo.value.room_id, async (newId, oldId) => { watch(() => reservationInfo.value.room_id, async (newId, oldId) => {
console.log('room_id changed:', oldId, '->', newId); console.log('room_id changed:', oldId, '->', newId);
if (newId == 0) { if (newId == 0) {
reservationInfo.value.player_count = 0; reservationInfo.value.player_count = 0;
@ -687,10 +722,10 @@ watch(() => reservationInfo.value.room_id, async (newId, oldId) => {
} }
peopleRange.value = t; peopleRange.value = t;
} }
}); });
// 拉取可预约房间 // 拉取可预约房间
const tryLoadRooms = async () => { const tryLoadRooms = async () => {
if (!reservationInfo.value.start_time || !reservationInfo.value.end_time) return if (!reservationInfo.value.start_time || !reservationInfo.value.end_time) return
if (reservationInfo.value.end_time <= reservationInfo.value.start_time) return if (reservationInfo.value.end_time <= reservationInfo.value.start_time) return
const list = await getReservationRoomList(reservationInfo.value.start_time, reservationInfo.value.end_time) const list = await getReservationRoomList(reservationInfo.value.start_time, reservationInfo.value.end_time)
@ -707,38 +742,56 @@ const tryLoadRooms = async () => {
reservationInfo.value.room_id = 0; reservationInfo.value.room_id = 0;
reservationInfo.value.room_name = '请选择房间'; reservationInfo.value.room_name = '请选择房间';
} }
} }
onLoad(async () => { onLoad(async () => {
const config = await getConfigData(); const config = await getConfigData();
console.log('config', config); console.log('config', config);
if (config != null && config.config != null) { if (config != null && config.config != null) {
gameTypeRange.value = [...config.config.playingMethodOptions]; gameTypeRange.value = [...config.config.playingMethodOptions];
} }
}) })
onShow(async () => { onShow(async () => {
// resetForm(); // resetForm();
}) })
// 年龄列构建与显示/文案 // 年龄列构建与显示/文案
const buildAgeColumns = () => { 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] agePickerColumns.value = [minList, maxList]
} }
const getAgeRangeText = () => { const getAgeRangeText = () => {
const { min_age, max_age } = reservationInfo.value const {
min_age,
max_age
} = reservationInfo.value
if (min_age == 0 && max_age == 0) { if (min_age == 0 && max_age == 0) {
return '不限' return '不限'
} }
const minText = min_age === 0 ? '不限' : min_age + '岁' const minText = min_age === 0 ? '不限' : min_age + '岁'
const maxText = max_age === 0 ? '不限' : max_age + '岁' const maxText = max_age === 0 ? '不限' : max_age + '岁'
return minText + ' - ' + maxText return minText + ' - ' + maxText
} }
const openAgePicker = () => { const openAgePicker = () => {
buildAgeColumns() buildAgeColumns()
// 计算默认索引 // 计算默认索引
const { min_age, max_age } = reservationInfo.value const {
min_age,
max_age
} = reservationInfo.value
const [mins, maxs] = agePickerColumns.value const [mins, maxs] = agePickerColumns.value
const findIndexByValue = (arr, val) => { const findIndexByValue = (arr, val) => {
const idx = arr.findIndex(it => Number(it.value) === Number(val)) const idx = arr.findIndex(it => Number(it.value) === Number(val))
@ -749,8 +802,8 @@ const openAgePicker = () => {
findIndexByValue(maxs, max_age ?? 0), findIndexByValue(maxs, max_age ?? 0),
] ]
agePickerVisible.value = true agePickerVisible.value = true
} }
const onAgePickerConfirm = (e) => { const onAgePickerConfirm = (e) => {
// uview-plus up-picker confirm 回调 e.value 为两列所选对象数组 // uview-plus up-picker confirm 回调 e.value 为两列所选对象数组
const selected = e && e.value ? e.value : [] const selected = e && e.value ? e.value : []
const min = selected[0] ? Number(selected[0].value) : 0 const min = selected[0] ? Number(selected[0].value) : 0
@ -764,105 +817,106 @@ const onAgePickerConfirm = (e) => {
reservationInfo.value.min_age = minAge reservationInfo.value.min_age = minAge
reservationInfo.value.max_age = maxAge reservationInfo.value.max_age = maxAge
agePickerVisible.value = false agePickerVisible.value = false
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.content { .content {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
overflow-y: auto;
background-color: #F7F7F7; background-color: #F7F7F7;
} }
/* 页面标题 */ /* 页面标题 */
.page-title { .page-title {
margin-top: 100rpx; margin-top: 100rpx;
text-align: center; text-align: center;
} margin-bottom: 20rpx;
}
/* 输入外层统一样式 */ /* 输入外层统一样式 */
.input-wrapper { .input-wrapper {
border: 1px solid #515151; border: 1px solid #515151;
border-radius: 4px; border-radius: 4px;
} }
/* 可点击的行（年龄范围显示） */ /* 可点击的行（年龄范围显示） */
.clickable-row { .clickable-row {
font-size: 28rpx; font-size: 28rpx;
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
height: 60rpx; height: 60rpx;
} }
/* 内联标签（信誉左侧“⼤于等于”） */ /* 内联标签（信誉左侧“⼤于等于”） */
.inline-label { .inline-label {
font-size: 25.86rpx; font-size: 25.86rpx;
width: 120rpx; width: 120rpx;
} }
/* 通用居中容器 */ /* 通用居中容器 */
.center { .center {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
/* 提交按钮容器样式 */ /* 提交按钮容器样式 */
.submit-button { .submit-button {
width: 90%; width: 90%;
border-radius: 10rpx; border-radius: 10rpx;
margin: 30rpx auto 0; margin: 30rpx auto 0;
background-color: #00AC4E; background-color: #00AC4E;
} }
/* 操作区一行布局：重置 + 发起 */ /* 操作区一行布局：重置 + 发起 */
.action-row { .action-row {
width: 90%; width: 90%;
margin: 30rpx auto 0; margin: 30rpx auto 0;
display: flex; display: flex;
gap: 20rpx; gap: 20rpx;
} }
.reset-button { .reset-button {
flex: 0 0 30%; flex: 0 0 30%;
height: 88rpx; height: 88rpx;
border-radius: 10rpx; border-radius: 10rpx;
background-color: #FFFFFF; background-color: #FFFFFF;
color: #333; color: #333;
} }
.action-submit { .action-submit {
flex: 1 1 auto; flex: 1 1 auto;
height: 88rpx; height: 88rpx;
margin: 0; /* 覆盖原有 submit-button 的外边距，使其与 reset 同行 */ margin: 0;
} /* 覆盖原有 submit-button 的外边距，使其与 reset 同行 */
}
/* 备注容器及文本 */ /* 备注容器及文本 */
.note-container { .note-container {
width: 90%; width: 90%;
margin: 20rpx auto 20rpx; margin: 20rpx auto 20rpx;
} }
.muted-text { .muted-text {
color: #979797; color: #979797;
font-size: 24rpx; font-size: 24rpx;
} }
.note-text { .note-text {
font-size: 24rpx; font-size: 24rpx;
margin-left: 20rpx; margin-left: 20rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
.counter-container { .counter-container {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.counter-btn { .counter-btn {
width: 80rpx; width: 80rpx;
height: 80rpx; height: 80rpx;
display: flex; display: flex;
@ -871,29 +925,29 @@ const onAgePickerConfirm = (e) => {
border-radius: 50%; border-radius: 50%;
padding: 0; padding: 0;
line-height: 1; line-height: 1;
} }
.minus-btn { .minus-btn {
background-color: #f5f5f5; background-color: #f5f5f5;
border: 1px solid #eee; border: 1px solid #eee;
} }
.counter-value { .counter-value {
width: 90rpx; width: 90rpx;
text-align: center; text-align: center;
font-size: 28rpx; font-size: 28rpx;
font-weight: 500; font-weight: 500;
color: #333; color: #333;
} }
.custom-select ::v-deep .uni-input-input { .custom-select ::v-deep .uni-input-input {
/* 正常状态下的边框颜色 */ /* 正常状态下的边框颜色 */
border: 1px solid #007aff !important; border: 1px solid #007aff !important;
border-radius: 6px; border-radius: 6px;
} }
.flex-center-row { .flex-center-row {
display: flex; display: flex;
} }
</style> </style>

176
pages/appointment/book-room-page.vue Normal file
View File

@ -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>

13
pages/me/me-page.vue
View File

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

46
pages/me/my-earnings-page.vue Normal file
View File

@ -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>

87
pages/me/my-message-page.vue Normal file
View File

@ -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>