509 lines
17 KiB
Vue
509 lines
17 KiB
Vue
<template>
|
||
<view style="padding-bottom: 280rpx">
|
||
<navbar title="预定" bg="#F6F7F9"></navbar>
|
||
|
||
<view class="banner">
|
||
<banner :itemData="bannerData"></banner>
|
||
</view>
|
||
|
||
<view class="html">
|
||
<view class="cg-name">{{ venue.name }}</view>
|
||
<view class="line"></view>
|
||
<view v-html="venue.textarea1"></view>
|
||
</view>
|
||
|
||
<view class="yy-btn">
|
||
<view class="btn" @tap="timePopup = true">立即预约</view>
|
||
</view>
|
||
|
||
<!-- <Popup :show="timePopup" :width="750" :padding="0" type="bottom" radius="32rpx 32rpx 0 0">
|
||
<booking-time
|
||
v-model="timePopup"
|
||
:day="date"
|
||
@selectedTime="onSelectedTime"
|
||
/>
|
||
</Popup> -->
|
||
<Popup :show="timePopup" :width="750" :padding="0" type="bottom" radius="32rpx 32rpx 0 0">
|
||
<template v-if="venue.type_id == 1">
|
||
<booking-time
|
||
@confirm="confirmPicker"
|
||
/>
|
||
</template>
|
||
|
||
<template v-if="venue.type_id == 2">
|
||
<reserve-time
|
||
@confirm="confirmPicker"
|
||
/>
|
||
</template>
|
||
</Popup>
|
||
|
||
<Popup :show="billPopup" :width='750' :padding="0" type="bottom" backgroundColor="#FBFBFB" radius="32rpx 32rpx 0 0">
|
||
<view class="ww100 box-s-b pop-improt typeof pr time-popup">
|
||
<image style="width: 64rpx;height: 64rpx;position: absolute; top: 26rpx;right: 30rpx;" src="@/static/icon/close2.png" mode="" @tap="handleShowTime"></image>
|
||
|
||
<view class="d-c-c pt42">
|
||
<text class="f34 fb">费用明细</text>
|
||
</view>
|
||
|
||
<view class="bg-white bill-info">
|
||
<view class="">
|
||
<view class="title1 d-b-c">
|
||
<view>场地费</view>
|
||
<view>
|
||
<price-format color="#303133" :subscript-size="30" :first-size="30" :second-size="30" price="100"></price-format>
|
||
</view>
|
||
</view>
|
||
<view class="title2 d-b-c">
|
||
<view>场地费（￥100元/小时）</view>
|
||
<view>x3</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view style="margin-top: 52rpx;">
|
||
<view class="title1 d-b-c">
|
||
<view>灯光费</view>
|
||
<view>
|
||
<price-format color="#303133" :subscript-size="30" :first-size="30" :second-size="30" price="100"></price-format>
|
||
</view>
|
||
</view>
|
||
<view class="title2 d-b-c">
|
||
<view>灯光费（￥50元/小时）</view>
|
||
<view>x3</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="line"></view>
|
||
|
||
<view class="title3 d-b-c">
|
||
<view>实付金额</view>
|
||
<view>
|
||
<price-format color="#303133" :subscript-size="30" :first-size="30" :second-size="30" price="100"></price-format>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="price bg-white" style="margin: 0; padding: 56rpx 22rpx 42rpx;">
|
||
<view class="d-b-c price-block" style="margin: 0;">
|
||
<view class="d-f d-c j-c-b">
|
||
<view class="">
|
||
合计： <price-format color="#FF5951" :subscript-size="26" :first-size="40" :second-size="40" price="100"></price-format>
|
||
</view>
|
||
<view class="d-f j-c-c a-i-c" style="margin-top: 10rpx;" @tap="handleShowTime">
|
||
<view class="price-detail">费用明细</view>
|
||
<image style="width: 14rpx;height: 8rpx;margin-left: 10rpx;" src="@/static/icon/up.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="price-btn">立即预定<text class="" v-if="countSelectedTime > 0">（{{countSelectedTime}}小时）</text></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</Popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import navbar from '@/components/navbar.vue';
|
||
import banner from '@/components/diy/banner/banner.vue';
|
||
import priceFormat from '@/components/price-format/price-format.vue';
|
||
import Popup from '@/components/uni-popup.vue';
|
||
import BookingTime from '@/components/booking-time.vue'
|
||
import ReserveTime from '@/components/reserve-time'
|
||
|
||
export default {
|
||
components: {
|
||
navbar,
|
||
banner,
|
||
priceFormat,
|
||
Popup,
|
||
ReserveTime,
|
||
BookingTime
|
||
// BookingTime
|
||
},
|
||
data() {
|
||
return {
|
||
venueId: 0,
|
||
roomId: 0,
|
||
bannerData: [],
|
||
value: 4,
|
||
currentTab: 1,
|
||
tab: [
|
||
{type: 1, name: '今天'},
|
||
{type: 2, name: '明天'},
|
||
{type: 3, name: '后天'},
|
||
],
|
||
content: '<p>欢迎来到秀湖网球中心！我们提供优质的网球场地和设施，适合各类网球爱好者。无论您是初学者还是专业选手，我们都能满足您的需求。我们的场地配备了先进的照明系统和舒适的休息区，让您在愉快的环境中享受网球运动。立即预定，开启您的网球之旅吧！</p>',
|
||
timePopup: false,
|
||
currentTime: 0,
|
||
date: {
|
||
minimum_time: 2,
|
||
time: [
|
||
{
|
||
display: "12/02周二",
|
||
date: "2025-12-02",
|
||
time_slots: [
|
||
{start_time: "08:00", timestamp: 1764633600, datetime: "2025-12-02 08:00", disabled: 1},
|
||
{start_time: "09:00", timestamp: 1764637200, datetime: "2025-12-02 09:00", disabled: 1},
|
||
{start_time: "10:00", timestamp: 1764640800, datetime: "2025-12-02 10:00", disabled: 1},
|
||
{start_time: "11:00", timestamp: 1764644400, datetime: "2025-12-02 11:00", disabled: 1},
|
||
{start_time: "12:00", timestamp: 1764648000, datetime: "2025-12-02 12:00", disabled: 1},
|
||
{start_time: "13:00", timestamp: 1764651600, datetime: "2025-12-02 13:00", disabled: 1},
|
||
{start_time: "14:00", timestamp: 1764655200, datetime: "2025-12-02 14:00", disabled: 1},
|
||
{start_time: "15:00", timestamp: 1764658800, datetime: "2025-12-02 15:00", disabled: 1},
|
||
{start_time: "16:00", timestamp: 1764662400, datetime: "2025-12-02 16:00", disabled: 1},
|
||
{start_time: "17:00", timestamp: 1764666000, datetime: "2025-12-02 17:00", disabled: 1}
|
||
],
|
||
timestamp: 1764640505
|
||
|
||
},
|
||
{
|
||
display: "12/03周三",
|
||
date: "2025-12-03",
|
||
time_slots: [
|
||
{start_time: "08:00", timestamp: 1764633600, datetime: "2025-12-02 08:00", disabled: 1},
|
||
{start_time: "09:00", timestamp: 1764637200, datetime: "2025-12-02 09:00", disabled: 1},
|
||
{start_time: "10:00", timestamp: 1764640800, datetime: "2025-12-02 10:00", disabled: 1},
|
||
{start_time: "11:00", timestamp: 1764644400, datetime: "2025-12-02 11:00", disabled: 1},
|
||
{start_time: "12:00", timestamp: 1764648000, datetime: "2025-12-02 12:00", disabled: 1},
|
||
{start_time: "13:00", timestamp: 1764651600, datetime: "2025-12-02 13:00", disabled: 1},
|
||
{start_time: "14:00", timestamp: 1764655200, datetime: "2025-12-02 14:00", disabled: 1},
|
||
{start_time: "15:00", timestamp: 1764658800, datetime: "2025-12-02 15:00", disabled: 1},
|
||
{start_time: "16:00", timestamp: 1764662400, datetime: "2025-12-02 16:00", disabled: 1},
|
||
{start_time: "17:00", timestamp: 1764666000, datetime: "2025-12-02 17:00", disabled: 1}
|
||
],
|
||
timestamp: 1764640505
|
||
}
|
||
]
|
||
},
|
||
selectedTime: [],
|
||
countSelectedTime: 0,
|
||
billPopup: false,
|
||
loadding: true,
|
||
venue: {},
|
||
bannerData: {
|
||
data: [],
|
||
style: {btnColor: "#ffffff", background: "#ffffff", btnShape: "round", imgShape: "round", height: "330"}
|
||
},
|
||
};
|
||
},
|
||
|
||
onLoad(args) {
|
||
this.venueId = args.venueId || 0;
|
||
this.roomId = args.roomId || 0;
|
||
this.getData();
|
||
},
|
||
|
||
methods: {
|
||
getData() {
|
||
let self = this;
|
||
uni.showLoading({
|
||
title: '加载中'
|
||
});
|
||
|
||
// 获取场馆详情
|
||
self._post(
|
||
'ground.ground/groundDetails',
|
||
{
|
||
app_id: self.getAppId(),
|
||
id: self.venueId, // 场馆ID
|
||
latitude: uni.getStorageSync('latitude') || '',
|
||
longitude: uni.getStorageSync('longitude') || '',
|
||
},
|
||
function(res) {
|
||
if (res.code) {
|
||
self.venue = res.data.lists
|
||
res.data.lists.image_arr.map(items => {
|
||
self.bannerData.data.push({imgUrl: items, height: '400px'})
|
||
})
|
||
}
|
||
}
|
||
)
|
||
|
||
// 获取时间预约
|
||
self._post(
|
||
'ground.ground/get7Time',
|
||
{
|
||
app_id: self.getAppId()
|
||
},
|
||
function(res) {
|
||
if (res.code) {
|
||
self.date = res.data.lists
|
||
}
|
||
self.loadding = false;
|
||
}
|
||
)
|
||
},
|
||
|
||
// 切换tab
|
||
handleChangeTab(e) {
|
||
this.currentTab = e.type;
|
||
},
|
||
|
||
// 选择时间
|
||
handleFilterTime(index) {
|
||
this.currentTime = index;
|
||
},
|
||
|
||
// 计算时长
|
||
handleSelectTime(time) {
|
||
const idx = this.selectedTime.indexOf(time)
|
||
if (idx > -1) {
|
||
this.selectedTime.splice(idx, 1) // 取消选中
|
||
} else {
|
||
this.selectedTime.push(time) // 选中
|
||
}
|
||
|
||
// 计算时长
|
||
this.countSelectedTime = this.selectedTime.length * 1
|
||
},
|
||
|
||
// 显示费用明细
|
||
handleShowBill() {
|
||
this.billPopup = true;
|
||
this.timePopup = false;
|
||
},
|
||
|
||
// 显示选择时间
|
||
handleShowTime() {
|
||
this.billPopup = false;
|
||
this.timePopup = true;
|
||
},
|
||
|
||
// 预约时间选择回调
|
||
onSelectedTime(data) {
|
||
console.log("🚀 ~ data:", data)
|
||
// data: [selectedDay, selectedTime, selectedTimeStamp, countSelectedTime]
|
||
this.selectedTime = data[1] || [];
|
||
this.countSelectedTime = data[3] || 0;
|
||
uni.setStorageSync('reserveDate', data);
|
||
|
||
this.toConfirm()
|
||
},
|
||
|
||
// 确认订单
|
||
toConfirm() {
|
||
uni.navigateTo({
|
||
url: `/bundle/reserve/confirm?venueId=${this.venue.id}&roomId=${this.roomId}`
|
||
});
|
||
},
|
||
|
||
confirmPicker(e) {
|
||
console.log("🚀 ~ e:", e)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: $xh-bg;
|
||
}
|
||
|
||
.top_head {
|
||
line-height: 30px;
|
||
z-index: 1;
|
||
padding-left: 26rpx;
|
||
position: sticky;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 100;
|
||
}
|
||
|
||
.head_top {
|
||
width: 100%;
|
||
height: var(--status-bar-height);
|
||
}
|
||
|
||
.banner {
|
||
.diy-banner-box {
|
||
margin-bottom: 0 !important;
|
||
}
|
||
}
|
||
|
||
.html {
|
||
margin: 0 30rpx;
|
||
background-color: #fff;
|
||
padding: 26rpx 30rpx;
|
||
border-radius: 16rpx;
|
||
|
||
.cg-name {
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #303133;
|
||
line-height: 50rpx;
|
||
}
|
||
|
||
.line {
|
||
border: 2rpx solid #F6F7F9;
|
||
margin-top: 20rpx;
|
||
margin-bottom: 28rpx;
|
||
}
|
||
}
|
||
|
||
.yy-btn {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background-color: #fff;
|
||
padding: 52rpx 60rpx 78rpx;
|
||
|
||
.btn {
|
||
background: #365A9A;
|
||
border-radius: 8rpx;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
.time-popup {
|
||
position: relative;
|
||
|
||
.title {
|
||
font-size: 36rpx;
|
||
color: #121212;
|
||
line-height: 50rpx;
|
||
}
|
||
|
||
.pt42 {
|
||
padding-top: 42rpx;
|
||
}
|
||
|
||
.notice {
|
||
margin-top: 30rpx;
|
||
width: 100%;
|
||
height: 56rpx;
|
||
background: #FFFBE5;
|
||
padding: 10rpx 30rpx;
|
||
font-weight: 500;
|
||
font-size: 26rpx;
|
||
color: #E2950F;
|
||
line-height: 48rpx;
|
||
text-align: left;
|
||
}
|
||
|
||
.time-item {
|
||
margin-right: 32rpx;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #303133;
|
||
line-height: 44rpx;
|
||
height: 62rpx;
|
||
}
|
||
|
||
.time-item-line {
|
||
width: 60rpx;
|
||
height: 10px;
|
||
background-color: #365A9A;
|
||
border-radius: 6rpx;
|
||
}
|
||
|
||
.active {
|
||
color: #365A9A;
|
||
font-size: 32rpx;
|
||
line-height: 44rpx;
|
||
}
|
||
|
||
.active:after {
|
||
content: '';
|
||
display: block;
|
||
width: 60rpx;
|
||
height: 10rpx;
|
||
background-color: #365A9A;
|
||
border-radius: 6rpx;
|
||
margin: 8rpx auto 0 auto;
|
||
}
|
||
|
||
/* 日期网格：一行四个，间距 20rpx */
|
||
.date-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
grid-gap: 20rpx 20rpx; /* 行间距和列间距均为 20rpx */
|
||
padding: 0 30rpx; /* 保持与上方时间切换区域一致的左右内边距 */
|
||
}
|
||
|
||
.date-item {
|
||
background-color: #F7F7F7;
|
||
border-radius: 10rpx;
|
||
height: 72rpx; /* 可按需调整高度 */
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 30rpx;
|
||
color: #303133;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 可选：选中样式 */
|
||
.date-item.active {
|
||
border-color: #365A9A;
|
||
color: #365A9A;
|
||
box-shadow: 0 4rpx 10rpx rgba(54,90,154,0.08);
|
||
}
|
||
|
||
.price {
|
||
margin-top: 100rpx;
|
||
|
||
.line {
|
||
height: 2rpx;
|
||
background: #E5E5E5;
|
||
width: 100%;
|
||
}
|
||
|
||
.price-block {
|
||
margin: 42rpx 22rpx;
|
||
}
|
||
|
||
.price-detail {
|
||
color: #365A9A;
|
||
font-size: 24rpx;
|
||
line-height: 34rpx;
|
||
}
|
||
|
||
.price-btn {
|
||
width: 368rpx;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
text-align: center;
|
||
background: #365A9A;
|
||
border-radius: 8rpx;
|
||
font-size: 32rpx;
|
||
color: #FFF;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bill-info {
|
||
border-radius: 16rpx;
|
||
margin: 32rpx 30rpx 22rpx;
|
||
padding: 48rpx 30rpx 30rpx;
|
||
|
||
.title1 {
|
||
font-size: 30rpx;
|
||
color: #303133;
|
||
line-height: 42rpx;
|
||
}
|
||
|
||
.title2 {
|
||
margin-top: 12rpx;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #909399;
|
||
line-height: 34rpx;
|
||
}
|
||
|
||
.line {
|
||
border: 2rpx solid #F6F7F9;
|
||
margin: 34rpx 0 30rpx;
|
||
}
|
||
|
||
.title3 {
|
||
font-size: 30rpx;
|
||
color: #303133;
|
||
line-height: 42rpx;
|
||
}
|
||
}
|
||
</style>
|