wangxiaowei/chazhi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调试接口

Browse Source
This commit is contained in:
wangxiaowei
2025-12-20 22:44:12 +08:00
parent fc3072980c
commit a2f1023de8
32 changed files with 982 additions and 483 deletions
Download Patch File Download Diff File Expand all files Collapse all files

225
src/components/BookingTime.vue
View File

@ -9,45 +9,44 @@
<view class="">
<view class="booking-time">
<wd-tabs v-model="selectedDay" color="#4C9F44" @click="BookingTime.handleChangeTimeTab">
<block v-for="item in day.time" :key="item">
<scroll-view scroll-y>
<scroll-view scroll-y class="!h-500rpx pb-100rpx">
<block v-for="item in day.time" :key="item">
<wd-tab :title="`${item.display}`" :name="item.display">
<view class="">
<view class="!h-500rpx mt-30rpx">
<view class=" mt-30rpx">
<view class="grid grid-cols-4 gap-x-20rpx gap-y-20rpx mx-30rpx">
<view v-for="item2 in item.time_slots" :key="item2.start_time"
class="h-72rpx rounded-16rpx flex items-center justify-center text-28rpx leading-40rpx"
:class="[
item2.disabled == 0
item2.disabled == 1
? 'bg-[#F7F7F7] text-[#C9C9C9]' // 禁用高亮
: selectedTime.includes(item2.start_time)
: selectedTime.some(t => t.date === item.date && t.time === item2.start_time)
? 'bg-[#F1F8F0] text-[#4C9F44]' // 选中高亮
: 'bg-[#F7F7F7] text-[#303133]', // 可选高亮
]" @click="item2.disabled == 1 && BookingTime.handleSelectTime(item2.start_time, item2.timestamp, item.time_slots)">
]" @click="item2.disabled == 0 && BookingTime.handleSelectTime(item2.start_time, item2.timestamp, item.time_slots, item.date, item.display)">
{{ item2.start_time }}
</view>
</view>
</view>
<view class="">
<view>
<wd-gap height="2rpx" bg-color="#E5E5E5"></wd-gap>
</view>
<view class="">
<view class="w-full fixed bottom-0 left-0 right-0 bg-white h-152rpx text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center">
<view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133] mr-30rpx" @click="BookingTime.handleResetSelectedTime">重置</view>
<view class="w-330rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]" @click="BookingTime.handleConfirmSelectedTime">
<text>确定</text>
<text v-if="countSelectedTime">（{{countSelectedTime}}小时）</text>
</view>
</view>
</view>
</view>
</view>
</wd-tab>
</scroll-view>
</block>
</block>
</scroll-view>
</wd-tabs>
<view class="">
<view>
<wd-gap height="2rpx" bg-color="#E5E5E5"></wd-gap>
</view>
<view class="">
<view class="w-full fixed bottom-0 left-0 right-0 bg-white h-152rpx text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center">
<view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133] mr-30rpx" @click="BookingTime.handleResetSelectedTime">重置</view>
<view class="w-330rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]" @click="BookingTime.handleConfirmSelectedTime">
<text>确定</text>
<text v-if="countSelectedTime">（{{countSelectedTime}}小时）</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
@ -78,61 +77,61 @@
// 初始化时间
onMounted(() => {
console.log("🚀 ~ day:", props.day)
})
/** 日期相关 **/
const days = ref<string[]>([])
const selectedDay = ref<number>(0)
const selectedTime = ref<string[]>([])
const selectedTimeStamp = ref<number[]>([])
// 支持跨天选择，结构为 { date, time, timestamp }
const selectedTime = ref<Array<{ date: string, time: string, timestamp: number }>>([])
const countSelectedTime = ref<number>(0)
const selectTimeIndex = ref<number>(0) // 选择的时间tab索引
const BookingTime = {
/**
* 选择时间段逻辑
* 选择时间段逻辑，支持跨天
* @param time 选择的时间字符串 "HH:MM"
* @param timestamp 选择的时间戳
* @param timeSlots 当前日期的所有时间段
* @param date 当前选择的日期 "2025-12-20"
* @param display 当前选择的日期展示 "12/20周六"
*/
handleSelectTime: (time: string, timestamp: number, timeSlots: any[]) => {
// 获取当前tab下所有可选时间段（未禁用）
const availableSlots = timeSlots.filter(slot => slot.disabled == 1)
const times = availableSlots.map(slot => slot.start_time)
const timestamps = availableSlots.map(slot => slot.timestamp)
const idx = times.indexOf(time)
// 当前已选的索引
const selectedIdxArr = selectedTime.value.map(t => times.indexOf(t)).sort((a, b) => a - b)
if (selectedTime.value.length === 0) {
// 没有已选，直接选中
selectedTime.value = [time]
selectedTimeStamp.value = [timestamp]
} else if (selectedTime.value.includes(time)) {
// 如果点击的是已选的端点，则取消该端及之后/之前的所有时间
const minIdx = selectedIdxArr[0]
const maxIdx = selectedIdxArr[selectedIdxArr.length - 1]
if (idx === minIdx) {
// 取消左端
selectedTime.value = times.slice(idx + 1, maxIdx + 1)
selectedTimeStamp.value = timestamps.slice(idx + 1, maxIdx + 1)
} else if (idx === maxIdx) {
// 取消右端
selectedTime.value = times.slice(minIdx, idx)
selectedTimeStamp.value = timestamps.slice(minIdx, idx)
handleSelectTime: (time: string, timestamp: number, timeSlots: any[], date: string, display: string) => {
// 获取当前tab的日期
const currentDate = props.day.time[selectTimeIndex.value].date
const idx = selectedTime.value.findIndex(t => t.date === currentDate && t.time === time)
if (selectedTime.value.length === 0 || selectedTime.value.length > 1) {
// 第一次点击或已选2个及以上，重置为只选当前
selectedTime.value = [{ date: currentDate, time, timestamp }]
} else if (selectedTime.value.length === 1) {
// 第二次点击，做范围选择
const first = selectedTime.value[0]
const second = { date: currentDate, time, timestamp }
// 获取所有可选时间段（含跨天）
let allSlots = []
props.day.time.forEach(dayItem => {
dayItem.time_slots.forEach(slot => {
if (slot.disabled == 0) {
allSlots.push({ date: dayItem.date, time: slot.start_time, timestamp: slot.timestamp })
}
})
})
// 按 timestamp 排序
allSlots = allSlots.sort((a, b) => a.timestamp - b.timestamp)
// 找到 first 和 second 的索引
const idx1 = allSlots.findIndex(t => t.date === first.date && t.time === first.time)
const idx2 = allSlots.findIndex(t => t.date === second.date && t.time === second.time)
if (idx1 > -1 && idx2 > -1) {
const [start, end] = idx1 < idx2 ? [idx1, idx2] : [idx2, idx1]
selectedTime.value = allSlots.slice(start, end + 1)
} else {
// 如果点的是中间的，直接只保留左侧
selectedTime.value = times.slice(minIdx, idx)
selectedTimeStamp.value = timestamps.slice(minIdx, idx)
// 找不到则只选当前
selectedTime.value = [second]
}
} else {
// 新选，补全区间
const allIdx = selectedIdxArr.concat(idx)
const minIdx = Math.min(...allIdx)
const maxIdx = Math.max(...allIdx)
selectedTime.value = times.slice(minIdx, maxIdx + 1)
selectedTimeStamp.value = timestamps.slice(minIdx, maxIdx + 1)
}
countSelectedTime.value = BookingTime.handleCalcContinuousHours(selectedTime.value)
countSelectedTime.value = BookingTime.handleCalcContinuousHours(selectedTime.value.map(t => t.timestamp))
},
// 确认选择的时间
@ -146,45 +145,87 @@
toast.info(props.day.minimum_time + '小时起订')
return
}
// 返回所有已选的时间段（含日期、时间、timestamp）及所有timestamp数组
const sortedSelected = selectedTime.value.slice().sort((a, b) => a.timestamp - b.timestamp)
const timestamps = sortedSelected.map(t => t.timestamp)
// 格式化时间戳为 2025-12-18 和 周三03/18
function formatDate(ts: number) {
const d = new Date(ts * 1000)
const y = d.getFullYear()
const m = (d.getMonth() + 1).toString().padStart(2, '0')
const day = d.getDate().toString().padStart(2, '0')
return `${y}-${m}-${day}`
}
function formatWeek(ts: number) {
const d = new Date(ts * 1000)
const weekArr = ['周日','周一','周二','周三','周四','周五','周六']
const week = weekArr[d.getDay()]
const m = (d.getMonth() + 1).toString().padStart(2, '0')
const day = d.getDate().toString().padStart(2, '0')
return `${week}${m}/${day}`
}
const formattedStartDates = formatDate(timestamps[0])
const formattedEndtDates = formatDate(timestamps[timestamps.length - 1])
let dayTime = '' // 2025-12-18
if (formattedStartDates == formattedEndtDates) {
dayTime = formattedStartDates
} else {
dayTime = `${formattedStartDates} 至 ${formattedEndtDates}`
}
let dayTitle = '' // 周三03/18
const formattedStartWeeks = formatWeek(timestamps[0])
const formattedEndWeeks = formatWeek(timestamps[timestamps.length - 1])
if (formattedStartWeeks == formattedEndWeeks) {
dayTitle = formattedStartWeeks
} else {
dayTitle = `${formattedStartWeeks} 至 ${formattedEndWeeks}`
}
const data = {
selectedDay: dayTime,
selectedTime: sortedSelected,
selectedTimestamps: timestamps,
dayTitle,
dayTime,
countSelectedTime: countSelectedTime.value
}
const data = [
selectedDay.value,
selectedTime.value.sort(),
selectedTimeStamp.value.sort(),
countSelectedTime.value
]
emit('selectedTime', data)
showPopup.value = false
},
// 切换时间tab的时候把之前选中的时间重置
handleChangeTimeTab: () => {
selectedTime.value = []
selectedTimeStamp.value = []
countSelectedTime.value = 0
// 切换时间tab的时候不重置已选，实现跨天选择
handleChangeTimeTab: (e: any) => {
selectTimeIndex.value = e.index
// 不重置 selectedTime
},
handleCalcContinuousHours(times: string[]): number {
if (times.length < 2) return 0
// 排序
const sorted = times.slice().sort()
// 计算所有连续区间的小时数总和，timestamps 为时间戳数组
handleCalcContinuousHours(timestamps: number[]): number {
if (timestamps.length < 1) return 0
const sorted = timestamps.slice().sort((a, b) => a - b)
let count = 0
let segment = 1
for (let i = 1; i < sorted.length; i++) {
// 取前后时间的小时数
const [h1, m1] = sorted[i - 1].split(':').map(Number)
const [h2, m2] = sorted[i].split(':').map(Number)
// 如果是连续的1小时（分钟相同且小时差1），则+1
if (m1 === m2 && h2 - h1 === 1) {
count++
if (sorted[i] - sorted[i - 1] === 1800) {
segment++
} else {
count += (segment - 1) * 0.5
segment = 1
}
}
count += (segment - 1) * 0.5
return count
},
// 重置选择的时间
handleResetSelectedTime: () => {
selectedTime.value = []
selectedTimeStamp.value = []
countSelectedTime.value = 0
},
}
@ -200,12 +241,6 @@
export default {}
</script>
<style lang="scss" scoped>
.booking-time {
:deep() {
.wd-tabs__line {
background-color: #4C9F44 !important;
}
}
}
</style>
<style lang="scss">
</style>

12
src/components/Pay.vue
View File

@ -1,10 +1,10 @@
<template>
<view class="pay-radio">
<view class="pay-radio relative">
<wd-radio-group v-model="pay" shape="dot" checked-color="#4C9F44" @change="Pay.handleChangePay">
<block v-for="(item, index) in PayList" :key="index">
<wd-radio :value="item.value">
<wd-radio :value="item.value" custom-class="!relative">
<view
class="flex justify-between items-center pb-10rpx"
class="flex justify-between items-center pb-10rpx "
v-if="!(hidePlatformBalance && item.type === PayCategory.PlatformBalance) && !(hideStoreBalance && item.type === PayCategory.StoreBalance) && !(hideWechat && item.type === PayCategory.WeChatPay)"
>
<view class="flex items-center mt-10rpx">
@ -12,8 +12,8 @@
<view class="ml-20rpx text-30rpx text-[#303133] leading-42rpx">{{ item.name }}</view>
</view>
</view>
<view class="absolute right-0 top-6rpx right-60rpx" v-if="item.type == PayCategory.PlatformBalance">可用{{ userInfo.user_money }}</view>
<view class="absolute right-0 top-6rpx right-60rpx" v-if="item.type == PayCategory.StoreBalance && storeMoney > 0">可用{{ storeMoney }}</view>
<view class="absolute right-0 top-16rpx right-60rpx" v-if="item.type == PayCategory.PlatformBalance">可用{{ userInfo.user_money || 0 }}</view>
<view class="absolute right-0 top-16rpx right-60rpx" v-if="item.type == PayCategory.StoreBalance && storeMoney > 0">可用{{ storeMoney || 0 }}</view>
</wd-radio>
</block>
</wd-radio-group>
@ -53,6 +53,8 @@
// 获取个人用户信息
const userRes = await getUserInfo()
Object.assign(userInfo, userRes || {})
console.log("🚀 ~ userInfo:", userInfo)
console.log("🚀 ~ userInfo:", userInfo.user_money)
})
const props = defineProps({

4
src/components/order/ComboCard.vue
View File

@ -21,7 +21,7 @@
<view class="mt-22rpx">
<view class="flex">
<view class="mr-28rpx">
<wd-img width="200rpx" height="200rpx" :src="`${OSS}images/home/home_image5.png`"></wd-img>
<wd-img width="200rpx" height="200rpx" :src="order.img"></wd-img>
</view>
<view class="flex-1">
<view @click="ComboCard.handleToOrderDetail">
@ -122,7 +122,7 @@
<view @click="ComboCard.handleToOrderDetail">
<view class="font-500 text-30rpx text-[#303133] leading-42rpx line-1 w-400rpx">{{ order.room_name }}</view>
<view class="font-400 leading-36rpx text-26rpx text-[#606266] mt-34rpx">
<view>预约时间：{{ order.day_time }} {{ order.start_time }}-{{ order.end_time }}</view>
<view>预约时间：{{ order.day_title }} {{ order.start_time }}-{{ order.end_time }}</view>
<view class="mt-18rpx">预约时长：{{ order.hours }}小时</view>
</view>
</view>

65
src/components/reserve/RoomList.vue
View File

@ -11,11 +11,13 @@
<view class="text-28rpx text-[#303133] leading-40rpx line-1 w-420rpx">{{ item.title }}</view>
<view class="mt-22rpx flex">
<template v-for="(label, labelIndex) in item.label" :key="labelIndex">
<view class="mr-20rpx flex items-start" v-if="label.category_id == 1">
<wd-tag color="#40AE36" bg-color="#40AE36" plain custom-class="!rounded-4rpx">文艺小清新</wd-tag>
</view>
<view class="flex items-start" v-if="label.category_id == 2">
<wd-tag color="#F55726" bg-color="#F55726" plain>全息投影</wd-tag>
<view class="mr-20rpx flex items-start">
<wd-tag
:color="randomLabelColor(labelIndex)"
:bg-color="randomLabelColor(labelIndex)"
plain
custom-class="!rounded-4rpx"
>{{ label.label_name }}</wd-tag>
</view>
</template>
</view>
@ -26,7 +28,7 @@
<wd-radio checked-color="#4C9F44" size='large' shape="dot" :value="index"></wd-radio>
</view>
<view v-if="!isUseCoupon">
<view class="text-[#6A6363] text-22rpx leading-30rpx">已售 {{ item.buy_nums > 10 ? item.buy_nums + '+' : item.buy_nums }}</view>
<view class="text-[#6A6363] text-22rpx leading-30rpx">已售 {{ item.sold > 10 ? item.sold + '+' : item.sold }}</view>
<view
class="w-104rpx h-52rpx mt-16rpx text-26rpx font-400 text-[#4C9F44] leading-52rpx text-center border-[2rpx] border-[#4C9F44] rounded-10rpx"
@click="RoomList.handleToPage(ReserveServiceCategory.ReserveRoom, item.store_id, item.id, item.price)">
@ -67,11 +69,23 @@
</view>
</view>
</view>
<view class="flex justify-around items-center ml-12rpx mt-18rpx" v-if="isReserve">
<view class="w-20rpx text-center" v-for="(timeItem, timeIndex) in item.room_time" :key="timeIndex">
<view class="font-400 text-20rpx text-[#606266] leading-28rpx">{{ timeItem.value }}</view>
<!-- timeItem.status: 1可选 2不可选 -->
<view class="h-12rpx rounded-6rpx bg-[#4C9F44] mt-4rpx" :class="`${timeItem.status == 2 ? 'bg-[#C9C9C9]' : ''}`"></view>
<view class="flex flex-wrap justify-between gap-4rpx ml-12rpx mt-18rpx" v-if="isReserve">
<view
v-for="(group, groupIndex) in getTimeGroups(item.room_time)"
:key="groupIndex"
class="flex flex-col items-center w-20rpx"
>
<view class="flex" style="width: 20rpx; height: 12rpx; border-radius: 6rpx; overflow: hidden;">
<view
style="width: 10rpx; height: 12rpx;"
:style="{ background: getTimeColor(group[0]) }"
></view>
<view
style="width: 10rpx; height: 12rpx;"
:style="{ background: getTimeColor(group[1]) }"
></view>
</view>
<view class="text-16rpx text-[#606266] mt-2rpx">{{ groupIndex }}</view>
</view>
</view>
<view class="my-24rpx gap" v-if="index !== props.list.length - 1">
@ -90,7 +104,7 @@
import PriceFormat from '@/components/PriceFormat.vue'
import {ReserveServiceCategory} from '@/utils/order'
import { router } from '@/utils/tools'
import { router, randomLabelColor } from '@/utils/tools'
import { StoreType } from '@/utils/tea'
const OSS = inject('OSS')
@ -122,6 +136,24 @@
}
})
// 将48个时间段两两分组
function getTimeGroups(roomTime: any[]) {
const groups = []
for (let i = 0; i < roomTime.length; i += 2) {
groups.push([roomTime[i], roomTime[i + 1]])
}
return groups
}
// 根据type返回对应颜色
function getTimeColor(timeItem: any) {
if (!timeItem) return '#F0F0F0'
if (timeItem.type == 1) return '#4C9F44' // 可预约
if (timeItem.type == 2) return '#C9C9C9' // 过期
if (timeItem.type == 3) return '#F55726' // 已预约
return '#F0F0F0'
}
const RoomList = {
/**
* 跳转页面
@ -144,12 +176,21 @@
}
emit('chooseCouponRoom', params)
},
handleGetTimeGroups(roomTime: any[]) {
const groups = []
for (let i = 0; i < roomTime.length; i += 2) {
groups.push([roomTime[i], roomTime[i + 1]])
}
return groups
}
}
// 定义emit事件
const emit = defineEmits(['chooseCouponRoom'])
</script>
<script lang="ts">