ui修改.
This commit is contained in:
parent
83668500df
commit
a3e160ffe1
|
|
@ -320,7 +320,7 @@ const handleJoin = () => {
|
|||
.info-text {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size:18rpx;
|
||||
font-size:24rpx;
|
||||
color: #575757;
|
||||
text-align: left;
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -113,7 +113,8 @@
|
|||
<view v-if="reservationInfo.deposit_fee === -1" :style="{ height: lineHeight }"></view>
|
||||
<label-slect-field v-if="reservationInfo.deposit_fee === -1" label="金额">
|
||||
<view class="input-wrapper">
|
||||
<up-input type="number" placeholder="请输入0-50" v-model="customDeposit" @input="onCustomDepositInput"></up-input>
|
||||
<up-input type="number" placeholder="请输入0-50" v-model="customDeposit"
|
||||
@input="onCustomDepositInput"></up-input>
|
||||
</view>
|
||||
</label-slect-field>
|
||||
<view :style="{ height: lineHeight }"></view>
|
||||
|
|
@ -137,34 +138,34 @@
|
|||
|
||||
</view>
|
||||
</view>
|
||||
<up-datetime-picker :show="datePickerVisible" v-model="datePickerValue" mode="date"
|
||||
:minDate="datePickerMinDate" :maxDate="datePickerMaxDate" title="选择日期" @confirm="onDatePickerConfirm"
|
||||
<up-datetime-picker :show="datePickerVisible" v-model="datePickerValue" mode="date" :minDate="datePickerMinDate"
|
||||
:maxDate="datePickerMaxDate" title="选择日期" @confirm="onDatePickerConfirm"
|
||||
@cancel="() => datePickerVisible = false" @close="() => datePickerVisible = false"></up-datetime-picker>
|
||||
<up-datetime-picker :show="latestDateTimePickerVisible" v-model="latestDateTimePickerValue" mode="time"
|
||||
:minHour="latestDateTimeMinHour" :maxHour="latestDateTimeMaxHour"
|
||||
:minMinute="latestDateTimeMinMinute" :maxMinute="latestDateTimeMaxMinute"
|
||||
title="选择最晚到店时间" @confirm="onLatestDateTimePickerConfirm"
|
||||
@cancel="() => latestDateTimePickerVisible = false" @close="() => latestDateTimePickerVisible = false"></up-datetime-picker>
|
||||
:minHour="latestDateTimeMinHour" :maxHour="latestDateTimeMaxHour" :minMinute="latestDateTimeMinMinute"
|
||||
:maxMinute="latestDateTimeMaxMinute" title="选择最晚到店时间" @confirm="onLatestDateTimePickerConfirm"
|
||||
@cancel="() => latestDateTimePickerVisible = false"
|
||||
@close="() => latestDateTimePickerVisible = false"></up-datetime-picker>
|
||||
<up-picker title="年龄范围选择" :show="agePickerVisible" :columns="agePickerColumns" :keyName="'text'"
|
||||
:defaultIndex="agePickerDefaultIndex" @confirm="onAgePickerConfirm" @cancel="() => agePickerVisible = false"
|
||||
@close="() => agePickerVisible = false"></up-picker>
|
||||
|
||||
<uni-popup ref="submitPopupRef" type="center" :isMaskClick="false">
|
||||
|
||||
<view style="width: 90vw;height:300rpx;background-color: #fff;border-radius: 20rpx;">
|
||||
<view style="width: 90vw; background-color: #fff; border-radius: 20rpx; padding: 20rpx;">
|
||||
<view>
|
||||
<view style="height: 80rpx;"></view>
|
||||
<view style="font-size: 32rpx;font-weight: 500;color: #000;text-align: center;">发起预约成功！</view>
|
||||
<view style="height:100rpx;"></view>
|
||||
<view style="display: flex;width: 100%;height:100rpx;">
|
||||
<view style="display: flex; width: 100%; height:100rpx;">
|
||||
<button @click.stop open-type="share"
|
||||
style=" background-color:#00AC4E;color: #fff;width: 50%;height: 100%; background-color:#00AC4E;"
|
||||
class="center evaluate-btn" :data-item="reservationData">
|
||||
style="background-color:#00AC4E; color: #fff;width: 45%;height: 100%; margin-left: 0;" class="center"
|
||||
:data-item="reservationData">
|
||||
<text class="evaluate-btn-text">分享给好友</text>
|
||||
</button>
|
||||
|
||||
<view
|
||||
style="width: 50%;height: 100%;background-color: #f7f7f7;display: flex;align-items: center;justify-content: center;"
|
||||
style="width: 45%; height: 100%;background-color: #f7f7f7;display: flex;align-items: center;justify-content: center; border-radius: 10rpx;"
|
||||
@click="handleClosePopup">
|
||||
<text>关闭</text>
|
||||
</view>
|
||||
|
|
@ -189,7 +190,9 @@
|
|||
getSubscribeMessage,
|
||||
configData
|
||||
} from '@/common/server/config'
|
||||
import { onShareAppMessage } from '@dcloudio/uni-app';
|
||||
import {
|
||||
onShareAppMessage
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
usePay
|
||||
} from '@/common/server/interface/user'
|
||||
|
|
@ -421,11 +424,19 @@
|
|||
* 获取时间段的时间范围限制
|
||||
*/
|
||||
const getTimeSlotRange = () => {
|
||||
if (!selectedTimeSlot.value || selectedTimeSlot.value === null || selectedTimeSlot.value === undefined) {
|
||||
return { minHour: 0, maxHour: 23, minMinute: 0, maxMinute: 59 };
|
||||
if (selectedTimeSlot.value === null || selectedTimeSlot.value === undefined) {
|
||||
return {
|
||||
minHour: 0,
|
||||
maxHour: 23,
|
||||
minMinute: 0,
|
||||
maxMinute: 59
|
||||
};
|
||||
}
|
||||
|
||||
let minHour = 0, maxHour = 23, minMinute = 0, maxMinute = 59;
|
||||
let minHour = 0,
|
||||
maxHour = 23,
|
||||
minMinute = 0,
|
||||
maxMinute = 59;
|
||||
|
||||
switch (selectedTimeSlot.value) {
|
||||
case 0: // 凌晨 00:00-05:59
|
||||
|
|
@ -454,7 +465,12 @@
|
|||
break;
|
||||
}
|
||||
|
||||
return { minHour, maxHour, minMinute, maxMinute };
|
||||
return {
|
||||
minHour,
|
||||
maxHour,
|
||||
minMinute,
|
||||
maxMinute
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -469,7 +485,7 @@
|
|||
return;
|
||||
}
|
||||
|
||||
if (!selectedTimeSlot.value || selectedTimeSlot.value === null || selectedTimeSlot.value === undefined) {
|
||||
if (selectedTimeSlot.value === null || selectedTimeSlot.value === undefined) {
|
||||
uni.showToast({
|
||||
title: '请先选择时间段',
|
||||
icon: 'none'
|
||||
|
|
@ -687,8 +703,24 @@
|
|||
// 处理关闭弹窗，返回上一页
|
||||
const handleClosePopup = () => {
|
||||
submitPopupRef.value.close()
|
||||
refreshPrevPageRoomList()
|
||||
goBack()
|
||||
}
|
||||
|
||||
// 刷新上一页的房间列表（发起预约入口页）
|
||||
const refreshPrevPageRoomList = () => {
|
||||
const pages = getCurrentPages()
|
||||
if (!pages || pages.length < 2) return
|
||||
const prevPage = pages[pages.length - 2]
|
||||
const vm = prevPage?.$vm || prevPage
|
||||
if (vm && typeof vm.loadRoomList === 'function') {
|
||||
vm.loadRoomList()
|
||||
return
|
||||
}
|
||||
if (vm && typeof vm.loadDates === 'function') {
|
||||
vm.loadDates()
|
||||
}
|
||||
}
|
||||
const maxPlayerCount = ref(0)
|
||||
|
||||
const peopleRange = ref([])
|
||||
|
|
@ -744,26 +776,50 @@
|
|||
return gameRule ? gameRule.text : '';
|
||||
}
|
||||
|
||||
const smokingOptions = ref([
|
||||
{ value: 2, text: '不禁烟' },
|
||||
{ value: 1, text: '禁烟' },
|
||||
])
|
||||
const genderOptions = ref([
|
||||
{ value: 0, text: '不限' },
|
||||
{ value: 1, text: '男' },
|
||||
{ value: 2, text: '女' },
|
||||
])
|
||||
const depositOptions = ref([
|
||||
{ value: 0, text: '0元' },
|
||||
{ value: 5, text: '5元' },
|
||||
{ value: 10, text: '10元' },
|
||||
{ value: -1, text: '自定义' },
|
||||
])
|
||||
const smokingOptions = ref([{
|
||||
value: 2,
|
||||
text: '不禁烟'
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
text: '禁烟'
|
||||
},
|
||||
])
|
||||
const genderOptions = ref([{
|
||||
value: 0,
|
||||
text: '不限'
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
text: '男'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
text: '女'
|
||||
},
|
||||
])
|
||||
const depositOptions = ref([{
|
||||
value: 0,
|
||||
text: '0元'
|
||||
},
|
||||
{
|
||||
value: 5,
|
||||
text: '5元'
|
||||
},
|
||||
{
|
||||
value: 10,
|
||||
text: '10元'
|
||||
},
|
||||
{
|
||||
value: -1,
|
||||
text: '自定义'
|
||||
},
|
||||
])
|
||||
|
||||
const currentValue = ref(0)
|
||||
const customDeposit = ref('')
|
||||
const currentValue = ref(0)
|
||||
const customDeposit = ref('')
|
||||
|
||||
const onCustomDepositInput = (val) => {
|
||||
const onCustomDepositInput = (val) => {
|
||||
// 仅保留数字与小数点，但需求是整数金额，按只允许数字处理
|
||||
let v = String(val).replace(/[^0-9]/g, '')
|
||||
if (v === '') v = '0'
|
||||
|
|
@ -771,7 +827,7 @@ const onCustomDepositInput = (val) => {
|
|||
if (n > 50) n = 50
|
||||
if (n < 0) n = 0
|
||||
customDeposit.value = String(n)
|
||||
}
|
||||
}
|
||||
|
||||
const increment = () => {
|
||||
if (currentValue.value < 5) {
|
||||
|
|
@ -943,7 +999,10 @@ const onCustomDepositInput = (val) => {
|
|||
if (finalDeposit === -1) {
|
||||
const n = Number(customDeposit.value || 0)
|
||||
if (isNaN(n) || n < 0 || n > 50) {
|
||||
uni.showToast({ title: '自定义金额需在0-50之间', icon: 'none' })
|
||||
uni.showToast({
|
||||
title: '自定义金额需在0-50之间',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
finalDeposit = n
|
||||
|
|
@ -1102,11 +1161,18 @@ const onCustomDepositInput = (val) => {
|
|||
* 加载房间详情，用于预约页面
|
||||
*/
|
||||
const loadRoomDetailForReservation = async (roomId, date) => {
|
||||
console.log('loadRoomDetailForReservation 调用参数:', { roomId, date, dateType: typeof date });
|
||||
console.log('loadRoomDetailForReservation 调用参数:', {
|
||||
roomId,
|
||||
date,
|
||||
dateType: typeof date
|
||||
});
|
||||
|
||||
// 验证参数
|
||||
if (!roomId || !date) {
|
||||
console.error('loadRoomDetailForReservation 参数无效:', { roomId, date });
|
||||
console.error('loadRoomDetailForReservation 参数无效:', {
|
||||
roomId,
|
||||
date
|
||||
});
|
||||
uni.showToast({
|
||||
title: '参数错误',
|
||||
icon: 'none'
|
||||
|
|
@ -1141,7 +1207,7 @@ const onCustomDepositInput = (val) => {
|
|||
peopleText.value = "请选择游玩人数";
|
||||
t.push({
|
||||
value: 1,
|
||||
text:'无需组局'
|
||||
text: '无需组局'
|
||||
});
|
||||
for (let i = 2; i <= detail.capacity; i++) {
|
||||
t.push({
|
||||
|
|
@ -1185,17 +1251,32 @@ const onCustomDepositInput = (val) => {
|
|||
|
||||
// 时段时间范围映射
|
||||
const timeRangeMap = {
|
||||
0: { text: '凌晨', range: '00:00-05:59' },
|
||||
1: { text: '上午', range: '06:00-11:59' },
|
||||
2: { text: '下午', range: '12:00-17:59' },
|
||||
3: { text: '晚上', range: '18:00-23:59' }
|
||||
0: {
|
||||
text: '凌晨',
|
||||
range: '00:00-05:59'
|
||||
},
|
||||
1: {
|
||||
text: '上午',
|
||||
range: '06:00-11:59'
|
||||
},
|
||||
2: {
|
||||
text: '下午',
|
||||
range: '12:00-17:59'
|
||||
},
|
||||
3: {
|
||||
text: '晚上',
|
||||
range: '18:00-23:59'
|
||||
}
|
||||
};
|
||||
|
||||
// 过滤出可预约的时段并生成选项
|
||||
const availableSlots = timeSlots.filter(slot => slot.status === 'available');
|
||||
|
||||
timeSlotOptions.value = availableSlots.map(slot => {
|
||||
const slotInfo = timeRangeMap[slot.slot_type] || { text: slot.slot_name, range: '' };
|
||||
const slotInfo = timeRangeMap[slot.slot_type] || {
|
||||
text: slot.slot_name,
|
||||
range: ''
|
||||
};
|
||||
// 生成显示文本
|
||||
let displayText = slotInfo.text;
|
||||
if (slotInfo.range) {
|
||||
|
|
@ -1382,7 +1463,11 @@ const onCustomDepositInput = (val) => {
|
|||
}
|
||||
|
||||
// 分享处理函数
|
||||
onShareAppMessage(({ from, target, webViewUrl }) => {
|
||||
onShareAppMessage(({
|
||||
from,
|
||||
target,
|
||||
webViewUrl
|
||||
}) => {
|
||||
console.log('onShareAppMessage', from, target, webViewUrl);
|
||||
var resid = 0;
|
||||
if (target != null && target.dataset && target.dataset.item) {
|
||||
|
|
|
|||
|
|
@ -1,82 +1,74 @@
|
|||
<template>
|
||||
<view class="content column">
|
||||
|
||||
<view class="column" style="width: 100%; height: 308rpx; background-color: white;">
|
||||
<view style="flex: 1;"></view>
|
||||
<view class="column header-container">
|
||||
<view class="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" :key="index" :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 class="row date-row">
|
||||
<view class="column center date-item" v-for="(item, index) in dateList" :key="index"
|
||||
:style="setBgColor(index)" @click="clickTime(index)">
|
||||
<text class="date-item-time">{{ item.time }}</text>
|
||||
<text class="date-item-weekday">{{ item.weekday }}</text>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<text style="margin-top: 20rpx; margin-left: 32rpx; font-size: 24rpx;">{{ getBusinessAnnouncement() }}</text>
|
||||
<text class="announcement-text">{{ getBusinessAnnouncement() }}</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 class="row toggle-bar">
|
||||
<text class="toggle-label">查看当前时段空闲时间</text>
|
||||
<up-switch class="toggle-switch" 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="list-container">
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<view v-if="loading" class="center" style="padding: 60rpx 0;">
|
||||
<text style="color: #999;">加载中...</text>
|
||||
<view v-if="loading" class="center loading-placeholder">
|
||||
<text class="muted-text">加载中...</text>
|
||||
</view>
|
||||
|
||||
<!-- 空数据提示 -->
|
||||
<view v-else-if="roomList.length === 0" class="center" style="padding: 60rpx 0;">
|
||||
<text style="color: #999;">暂无房间数据</text>
|
||||
<view v-else-if="roomList.length === 0" class="center loading-placeholder">
|
||||
<text class="muted-text">暂无房间数据</text>
|
||||
</view>
|
||||
|
||||
<!-- 房间列表 -->
|
||||
<view class="" v-for="item in roomList" :key="item.id"
|
||||
style="position: relative; width: 706rpx; height: 270rpx; border-radius: 20rpx; background-color: white; margin: 0 auto 20rpx;"
|
||||
@click.stop="handleRoomClick(item)">
|
||||
<view class="room-card" v-for="item in roomList" :key="item.id" @click.stop="handleRoomClick(item)">
|
||||
|
||||
|
||||
<image :src="item.image_url || '/static/default_room.jpg'"
|
||||
style="width: 180rpx; height: 156rpx; background-color: #DEDEDE; border-radius: 14rpx; position: absolute; top: 10rpx; left: 10rpx;"
|
||||
mode="aspectFill"></image>
|
||||
<image :src="item.image_url || '/static/default_room.jpg'" class="room-image" mode="aspectFill"></image>
|
||||
|
||||
<view class="column" style=" position: absolute; left: 200rpx; top: 20rpx;">
|
||||
<text style="font-size: 28rpx;">{{ item.name }}</text>
|
||||
<text style="font-size: 20rpx;">{{ item.room_type_name }}</text>
|
||||
<view class="column room-info">
|
||||
<text class="room-name">{{ item.name }}</text>
|
||||
<text class="room-type">{{ item.room_type_name }}</text>
|
||||
|
||||
<text style="font-size: 24rpx; margin-top: 24rpx;">{{ item.standard_price_desc || '价格详询' }}</text>
|
||||
<text style="font-size: 24rpx; color: #FF0000;">会员价{{ item.member_price_desc || '详询' }}</text>
|
||||
<text class="room-price">{{ item.standard_price_desc || '价格详询' }}</text>
|
||||
<text class="room-member-price">会员价{{ item.member_price_desc || '详询' }}</text>
|
||||
</view>
|
||||
|
||||
<text v-if="item.status === 'using'"
|
||||
style="font-size: 20rpx; position: absolute; top: 10rpx; right: 16rpx; color: #FF9901;">当前使用中</text>
|
||||
<!-- <text v-if="item.status === 'using'" class="room-status-using">当前使用中</text> -->
|
||||
|
||||
<view class="center reservation-btn" :class="{ 'reservation-btn-disabled': !hasAvailableSlots(item) }"
|
||||
@click.stop="hasAvailableSlots(item) && handleReservation(item)">
|
||||
预约
|
||||
</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: #52c41a; margin-left: 22rpx;"></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 class="row legend-row">
|
||||
<view class="legend-block legend-reserved"></view>
|
||||
<text class="legend-text">已预定时段</text>
|
||||
<view class="legend-block legend-available"></view>
|
||||
<text class="legend-text">可预定时段</text>
|
||||
<view class="legend-block legend-unavailable"></view>
|
||||
<text class="legend-text">不可预定时段</text>
|
||||
</view>
|
||||
|
||||
<view class="row" style="align-items: center; position: absolute; left: 10rpx; bottom: 14rpx;">
|
||||
<view class="row slot-row">
|
||||
|
||||
<view class="column center" style="margin-right: 20rpx;" v-for="slot in item.time_slots"
|
||||
:key="slot.slot_type">
|
||||
<view :style="{ width: '70rpx', height: '4rpx', backgroundColor: getSlotColor(slot.status) }">
|
||||
<view class="column center slot-item" v-for="slot in item.time_slots" :key="slot.slot_type">
|
||||
<view class="slot-bar" :style="{ backgroundColor: getSlotColor(slot.status) }">
|
||||
</view>
|
||||
<text style="font-size: 12rpx; margin-top: 4rpx;">{{ slot.slot_name }}</text>
|
||||
<text class="slot-label">{{ slot.slot_name }}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
|
@ -90,16 +82,16 @@
|
|||
<view class="room-detail-popup">
|
||||
<!-- 关闭按钮 -->
|
||||
<view class="popup-close" @click="closeRoomDetail">
|
||||
<text style="font-size: 40rpx; color: #999;">×</text>
|
||||
<text class="popup-close-text">×</text>
|
||||
</view>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<view v-if="roomDetailLoading" class="popup-loading center">
|
||||
<text style="color: #999;">加载中...</text>
|
||||
<text class="popup-loading-text">加载中...</text>
|
||||
</view>
|
||||
|
||||
<!-- 房间详情内容 -->
|
||||
<scroll-view v-else-if="roomDetail" scroll-y class="popup-content" :style="{ maxHeight: '80vh' }">
|
||||
<scroll-view v-else-if="roomDetail" scroll-y class="popup-content">
|
||||
<!-- 图片轮播 -->
|
||||
<view class="detail-swiper-container">
|
||||
<swiper v-if="roomDetailImages && roomDetailImages.length > 0" class="detail-swiper"
|
||||
|
|
@ -164,13 +156,8 @@
|
|||
<view v-for="slot in roomDetail.time_slots" :key="slot.slot_type" class="time-slot-item">
|
||||
<view class="time-slot-header">
|
||||
<text class="time-slot-name">{{ slot.slot_name }}</text>
|
||||
<view :style="{
|
||||
width: '12rpx',
|
||||
height: '12rpx',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: getSlotColor(slot.status),
|
||||
marginLeft: '12rpx'
|
||||
}"></view>
|
||||
<view class="time-slot-dot" :style="{ backgroundColor: getSlotColor(slot.status) }">
|
||||
</view>
|
||||
</view>
|
||||
<view class="time-slot-content">
|
||||
<text class="time-slot-status">{{ getSlotStatusText(slot.status) }}</text>
|
||||
|
|
@ -204,9 +191,15 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { getAvailableDates, getRoomListWithSlotsNew, getRoomDetail } from '@/common/server/interface/sq.js';
|
||||
import { getConfigData } from '@/common/server/config';
|
||||
export default {
|
||||
import {
|
||||
getAvailableDates,
|
||||
getRoomListWithSlotsNew,
|
||||
getRoomDetail
|
||||
} from '@/common/server/interface/sq.js';
|
||||
import {
|
||||
getConfigData
|
||||
} from '@/common/server/config';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentTimeIndex: 0,
|
||||
|
|
@ -221,8 +214,10 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
|
||||
onLoad() {
|
||||
this.loadDates();
|
||||
console.log("onLoad");
|
||||
getConfigData().then(data => {
|
||||
this.configData = data;
|
||||
});
|
||||
|
|
@ -235,7 +230,7 @@ export default {
|
|||
this.loadRoomList();
|
||||
},
|
||||
getBusinessAnnouncement() {
|
||||
return this.configData.config.businessAnnouncement??"营业时间：早00点 至 晚23点";
|
||||
return this.configData.config.businessAnnouncement ?? "营业时间：早00点 至 晚23点";
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -332,7 +327,7 @@ export default {
|
|||
'available': '#52c41a', // 绿色
|
||||
'reserved': '#FF9901', // 橙色
|
||||
'unavailable': '#E6E6E6', // 灰色
|
||||
'using': '#1890ff' // 蓝色
|
||||
'using': '#FF9901' // 蓝色
|
||||
};
|
||||
return colorMap[status] || '#E6E6E6';
|
||||
},
|
||||
|
|
@ -501,34 +496,209 @@ export default {
|
|||
return [];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: #F7F7F7;
|
||||
}
|
||||
}
|
||||
|
||||
/* 页面标题 */
|
||||
.page-title {
|
||||
.loading-placeholder {
|
||||
padding: 60rpx 0;
|
||||
}
|
||||
|
||||
.muted-text {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
width: 100%;
|
||||
height: 308rpx;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.date-row {
|
||||
width: 90%;
|
||||
height: 120rpx;
|
||||
margin: 20rpx auto 0;
|
||||
}
|
||||
|
||||
.date-item {
|
||||
width: 96rpx;
|
||||
height: 100%;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.date-item-time {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.date-item-weekday {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.announcement-text {
|
||||
margin-top: 20rpx;
|
||||
margin-left: 32rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.toggle-bar {
|
||||
width: 686rpx;
|
||||
height: 56rpx;
|
||||
background-color: #2ED9BF;
|
||||
border-radius: 5rpx;
|
||||
margin: 20rpx auto 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.toggle-label {
|
||||
font-size: 22rpx;
|
||||
color: #262626;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
.toggle-switch {
|
||||
margin-right: 16rpx;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.list-container {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
margin-top: 12rpx;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* 页面标题 */
|
||||
.page-title {
|
||||
margin-top: 100rpx;
|
||||
text-align: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 房间详情弹窗样式 */
|
||||
.room-detail-popup {
|
||||
.room-card {
|
||||
position: relative;
|
||||
width: 706rpx;
|
||||
height: 270rpx;
|
||||
border-radius: 20rpx;
|
||||
background-color: #FFFFFF;
|
||||
margin: 0 auto 20rpx;
|
||||
}
|
||||
|
||||
.room-image {
|
||||
width: 180rpx;
|
||||
height: 156rpx;
|
||||
background-color: #DEDEDE;
|
||||
border-radius: 14rpx;
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
left: 10rpx;
|
||||
}
|
||||
|
||||
.room-info {
|
||||
position: absolute;
|
||||
left: 200rpx;
|
||||
top: 20rpx;
|
||||
}
|
||||
|
||||
.room-name {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.room-type {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.room-price {
|
||||
font-size: 24rpx;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.room-member-price {
|
||||
font-size: 24rpx;
|
||||
color: #FF0000;
|
||||
}
|
||||
|
||||
.room-status-using {
|
||||
font-size: 20rpx;
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
right: 16rpx;
|
||||
color: #FF9901;
|
||||
}
|
||||
|
||||
.legend-row {
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: 10rpx;
|
||||
bottom: 60rpx;
|
||||
}
|
||||
|
||||
.legend-block {
|
||||
width: 24rpx;
|
||||
height: 4rpx;
|
||||
}
|
||||
|
||||
.legend-reserved {
|
||||
background-color: #FF9901;
|
||||
}
|
||||
|
||||
.legend-available {
|
||||
background-color: #52c41a;
|
||||
margin-left: 22rpx;
|
||||
}
|
||||
|
||||
.legend-unavailable {
|
||||
background-color: #E6E6E6;
|
||||
margin-left: 22rpx;
|
||||
}
|
||||
|
||||
.legend-text {
|
||||
font-size: 24rpx;
|
||||
color: #323232;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
.slot-row {
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: 10rpx;
|
||||
bottom: 14rpx;
|
||||
}
|
||||
|
||||
.slot-item {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.slot-bar {
|
||||
width: 70rpx;
|
||||
height: 4rpx;
|
||||
}
|
||||
|
||||
.slot-label {
|
||||
font-size: 18rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
/* 房间详情弹窗样式 */
|
||||
.room-detail-popup {
|
||||
width: 680rpx;
|
||||
max-height: 80vh;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-close {
|
||||
.popup-close {
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
right: 10rpx;
|
||||
|
|
@ -540,208 +710,225 @@ export default {
|
|||
z-index: 10;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-loading {
|
||||
.popup-close-text {
|
||||
font-size: 40rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.popup-loading {
|
||||
padding: 100rpx 0;
|
||||
min-height: 400rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
.popup-loading-text {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
width: 100%;
|
||||
}
|
||||
max-height: 80vh;
|
||||
}
|
||||
|
||||
/* 图片轮播容器 */
|
||||
.detail-swiper-container {
|
||||
/* 图片轮播容器 */
|
||||
.detail-swiper-container {
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
background-color: #DEDEDE;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-swiper {
|
||||
.detail-swiper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-swiper-image {
|
||||
.detail-swiper-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 详情区域 */
|
||||
.detail-section {
|
||||
/* 详情区域 */
|
||||
.detail-section {
|
||||
padding: 30rpx;
|
||||
border-bottom: 1rpx solid #F0F0F0;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-section:last-child {
|
||||
.detail-section:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-title-row {
|
||||
.detail-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-room-name {
|
||||
.detail-room-name {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #262626;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-status-tag {
|
||||
.detail-status-tag {
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-status-tag.using {
|
||||
.detail-status-tag.using {
|
||||
background-color: #FF9901;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-status-tag.available {
|
||||
.detail-status-tag.available {
|
||||
background-color: #52c41a;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-room-type {
|
||||
.detail-room-type {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-price-row {
|
||||
.detail-price-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-price-label {
|
||||
.detail-price-label {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-price-value {
|
||||
.detail-price-value {
|
||||
font-size: 28rpx;
|
||||
color: #262626;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-price-member {
|
||||
.detail-price-member {
|
||||
font-size: 28rpx;
|
||||
color: #FF0000;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-info-row {
|
||||
.detail-info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-info-label {
|
||||
.detail-info-label {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-info-value {
|
||||
.detail-info-value {
|
||||
font-size: 24rpx;
|
||||
color: #262626;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-section-title {
|
||||
.detail-section-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #262626;
|
||||
margin-bottom: 20rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-description {
|
||||
.detail-description {
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
|
||||
/* 设施标签 */
|
||||
.amenities-container {
|
||||
/* 设施标签 */
|
||||
.amenities-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.amenity-tag {
|
||||
.amenity-tag {
|
||||
padding: 8rpx 20rpx;
|
||||
background-color: #F5F5F5;
|
||||
border-radius: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
/* 时段状态 */
|
||||
.time-slots-container {
|
||||
/* 时段状态 */
|
||||
.time-slots-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.time-slot-item {
|
||||
.time-slot-item {
|
||||
background-color: #F8F8F8;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.time-slot-header {
|
||||
.time-slot-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.time-slot-name {
|
||||
.time-slot-dot {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 50%;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
|
||||
.time-slot-name {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #262626;
|
||||
}
|
||||
}
|
||||
|
||||
.time-slot-content {
|
||||
.time-slot-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.time-slot-status {
|
||||
.time-slot-status {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.time-slot-price {
|
||||
.time-slot-price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.time-slot-price-text {
|
||||
.time-slot-price-text {
|
||||
font-size: 22rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.time-slot-price-text.member {
|
||||
.time-slot-price-text.member {
|
||||
color: #FF0000;
|
||||
}
|
||||
}
|
||||
|
||||
/* 底部操作按钮 */
|
||||
.popup-footer {
|
||||
/* 底部操作按钮 */
|
||||
.popup-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 30rpx;
|
||||
border-top: 1rpx solid #F0F0F0;
|
||||
gap: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-btn {
|
||||
.popup-btn {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
|
|
@ -750,26 +937,26 @@ export default {
|
|||
border-radius: 12rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-btn.secondary {
|
||||
.popup-btn.secondary {
|
||||
background-color: #F5F5F5;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-btn.primary {
|
||||
.popup-btn.primary {
|
||||
background-color: #20BBA4;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-btn.disabled {
|
||||
.popup-btn.disabled {
|
||||
background-color: #CCCCCC;
|
||||
color: #FFFFFF;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
/* 房间列表预约按钮样式 */
|
||||
.reservation-btn {
|
||||
/* 房间列表预约按钮样式 */
|
||||
.reservation-btn {
|
||||
width: 92rpx;
|
||||
height: 46rpx;
|
||||
background-color: #20BBA4;
|
||||
|
|
@ -779,10 +966,10 @@ export default {
|
|||
position: absolute;
|
||||
bottom: 94rpx;
|
||||
right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.reservation-btn-disabled {
|
||||
.reservation-btn-disabled {
|
||||
background-color: #CCCCCC;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
|
||||
|
||||
|
||||
<uni-popup ref="userInfo_popup" type="center">
|
||||
<!-- <uni-popup ref="userInfo_popup" type="center">
|
||||
|
||||
<view class="column" style="width: 500rpx; background-color: white; padding: 20rpx;">
|
||||
|
||||
|
|
@ -97,7 +97,7 @@
|
|||
|
||||
</view>
|
||||
|
||||
</uni-popup>
|
||||
</uni-popup> -->
|
||||
|
||||
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<view class="loading-container">
|
||||
<image class="logo" src="/static/Logo.jpg" mode="widthFix"></image>
|
||||
<image class="logo" src="/static/logo.png" mode="widthFix"></image>
|
||||
<view class="spinner"></view>
|
||||
<text class="tip">{{ tips_text }}</text>
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -100,10 +100,10 @@
|
|||
<text style="font-size: 30rpx; margin-top: 26rpx; margin-left: 36rpx;">常用功能</text>
|
||||
|
||||
<view class="row" style="flex-wrap: wrap; justify-content: flex-start; margin: 40rpx;">
|
||||
<view class="column" v-for="item in commonActions" :key="item.label"
|
||||
@click="handleCommonAction(item)"
|
||||
style="width: 25%; align-items: center; margin-bottom: 30rpx;">
|
||||
<view class="column common-action-item" v-for="item in commonActions" :key="item.label"
|
||||
@click="handleCommonAction(item)">
|
||||
<image :src="item.icon" style="width: 50rpx; height: 50rpx;" mode=""></image>
|
||||
<view v-if="item.action === 'message' && unreadCount > 0" class="red-dot"></view>
|
||||
<text style="font-size: 24rpx; margin-top: 20rpx;">{{ item.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -124,6 +124,7 @@ import {
|
|||
} from '@/common/server/user'
|
||||
import { navigateToAgreement } from '@/common/system/router'
|
||||
import { sqInterface } from '@/common/server/interface/sq'
|
||||
import { getUnreadCount } from '@/common/server/interface/message'
|
||||
import ReservationEvaluate from '@/components/com/page/reservation-evaluate.vue'
|
||||
import ContainerBase from '@/components/com/page/container-base.vue'
|
||||
import {
|
||||
|
|
@ -139,6 +140,7 @@ import ReservationItem from '@/components/com/page/reservation-item.vue'
|
|||
const rateValue = ref(4.5)
|
||||
const loading = ref(false)
|
||||
const _containerBase = ref(null)
|
||||
const unreadCount = ref(0)
|
||||
|
||||
|
||||
// 当前预约信息
|
||||
|
|
@ -146,16 +148,15 @@ const currentAppointment = ref(null)
|
|||
|
||||
|
||||
|
||||
|
||||
// 常用功能 - 动态项
|
||||
const commonActions = [
|
||||
{ label: '预约记录', icon: '@@:app/static/me/wodd.png', action: 'appointment' },
|
||||
{ label: '预约记录', icon: '@@:app/static/me/wdyy.png', action: 'appointment' },
|
||||
{ label: '订单记录', icon: '@@:app/static/me/wodd.png', action: 'payment' },
|
||||
{ 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' },
|
||||
{ label: '我的消息', icon: '@@:app/static/me/wdxx.png', action: 'message' },
|
||||
{ label: '我的收益', icon: '@@:app/static/me/wdsy.png', action: 'revenue' },
|
||||
]
|
||||
|
||||
const handleCommonAction = (item) => {
|
||||
|
|
@ -294,6 +295,28 @@ const loadCurrentAppointment = async () => {
|
|||
}
|
||||
}
|
||||
|
||||
// 加载未读消息数量并更新红点状态
|
||||
const loadUnreadCount = async () => {
|
||||
const _isLogin = await isLogin();
|
||||
if (!_isLogin) {
|
||||
unreadCount.value = 0;
|
||||
uni.hideTabBarRedDot({ index: 2 });
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const count = await getUnreadCount();
|
||||
unreadCount.value = count;
|
||||
if (count > 0) {
|
||||
uni.showTabBarRedDot({ index: 2 });
|
||||
} else {
|
||||
uni.hideTabBarRedDot({ index: 2 });
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载未读消息失败:', error);
|
||||
uni.hideTabBarRedDot({ index: 2 });
|
||||
}
|
||||
}
|
||||
|
||||
onShareAppMessage(({ from, target, webViewUrl }) => {
|
||||
// console.log('onShareAppMessage', from, target, webViewUrl);
|
||||
var resid = 0;
|
||||
|
|
@ -311,6 +334,7 @@ onShow(async () => {
|
|||
// getUserInfoData();
|
||||
loadCurrentAppointment();
|
||||
await loadUserInfo();
|
||||
await loadUnreadCount();
|
||||
})
|
||||
onLoad(async () => {
|
||||
|
||||
|
|
@ -336,4 +360,21 @@ onLoad(async () => {
|
|||
border-radius: 10rpx;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.common-action-item {
|
||||
position: relative;
|
||||
width: 25%;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.red-dot {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 35rpx;
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #ff3b30;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -114,7 +114,7 @@
|
|||
</view>
|
||||
|
||||
<view class="center"
|
||||
style="width: 304rpx; height: 90rpx; background-color: #00AC4E; color: #FFFFFF; margin: 30rpx auto 0; font-size: 32rpx;"
|
||||
style="width: 304rpx; height: 90rpx; background-color: #00AC4E; color: #FFFFFF; margin: 30rpx auto 30rpx; border-radius: 20rpx; font-size: 32rpx;"
|
||||
@click="submitWithdraw">
|
||||
申请提现
|
||||
</view>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user