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

完善预约场馆页面

Browse Source
This commit is contained in:
wangxiaowei
2025-10-24 11:50:03 +08:00
parent d296723b97
commit fc35d6d459
9 changed files with 436 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
bundle/reserve/details.vue
View File

@ -62,7 +62,7 @@
<view class="">
<price-format color="#FF5951" :subscript-size="26" :first-size="38" :second-size="26" price="100"></price-format>
</view>
<view class="reserve-btn">
<view class="reserve-btn" @tap="heandleToReserve">
预定
</view>
</view>
@ -71,35 +71,8 @@
</view>
<view class="d-f a-i-c" style="margin-top: 16rpx;">
<view class="time-block" v-for="(item, index) in 17" :key="index">
<view class="time-block-text font-400 text-20rpx leading-28rpx" :style="`${index === 1 || index === 11 ? 'color:#C9C9C9;' : ''}`">{{ item + 5 }}</view>
<view class="time-block-box h-12rpx rounded-6rpx mt-4rpx" :style="`${index === 1 || index === 11 ? 'background-color:#C9C9C9;' : ''}`"></view>
</view>
</view>
<view class="line"></view>
</view>
<view class="">
<view class="d-b-c">
<view class="">
<image style="width: 200rpx;height: 200rpx;border-radius: 10rpx; margin-right: 32rpx;" src="https://6548.cn/uploads/20241019/ca61afebae2b1066b74fb42b791d8b29.jpg" mode=""></image>
</view>
<view class="flex-1">
<view class="cg-name">这个是场馆的分场名称</view>
<view class="d-b-c">
<view class="">
<price-format color="#FF5951" :subscript-size="26" :first-size="38" :second-size="26" price="100"></price-format>
</view>
<view class="reserve-btn">
预定
</view>
</view>
</view>
</view>
<view class="d-f a-i-c" style="margin-top: 16rpx;">
<view class="time-block" v-for="(item, index) in 17" :key="index">
<view class="time-block-text font-400 text-20rpx leading-28rpx" :style="`${index === 1 || index === 11 ? 'color:#C9C9C9;' : ''}`">{{ item + 5 }}</view>
<view class="time-block-box h-12rpx rounded-6rpx mt-4rpx" :style="`${index === 1 || index === 11 ? 'background-color:#C9C9C9;' : ''}`"></view>
<view class="time-block-text font-400 text-20rpx leading-28rpx" :style="index === 1 ? 'color:#C9C9C9;' : ''">{{ item + 5 }}</view>
<view class="time-block-box h-12rpx rounded-6rpx mt-4rpx" :style="index === 1 ? 'color:#C9C9C9;' : ''"></view>
</view>
</view>
<view class="line"></view>
@ -159,6 +132,31 @@
handleChangeTab(e) {
this.currentTab = e.type;
},
// 跳转预定页面
heandleToReserve() {
uni.navigateTo({
url: '/bundle/reserve/reserve'
});
},
// 处理导航
handleLocation() {
uni.openLocation({
latitude: 30.74621,
longitude: 120.76055,
name: '秀湖网球中心',
address: '嘉兴市秀洲区秀园路秀湖公园（西南角）',
scale: 18
});
},
// 处理拨打电话
handleCall() {
uni.makePhoneCall({
phoneNumber: '0573-82069999'
});
},
}
};
</script>

370
bundle/reserve/reserve.vue Normal file
View File

@ -0,0 +1,370 @@
<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">这里是场馆的名称场馆的名称</view>
<view class="line"></view>
<view class="" v-html="content"></view>
</view>
<view class="yy-btn">
<view class="btn" @tap="timePopup = true">立即预约</view>
</view>
<Popup :show="true" :width='750' :padding="0" type="bottom" 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=""></image>
<view class="d-c-c pt42">
<text class="f34 fb">选择时间</text>
</view>
<view class="notice">示例：07:00代表07:01-07:59</view>
<view class="mx-30 mt-28">
<view class="d-f a-i-c">
<view class="time-item" :class="index == currentTime ? 'active' : ''" v-for="(item, index) in time" :key="index" @tap="handleFilterTime(index)">
{{ item.time }}
</view>
</view>
</view>
<view class="mt-30">
<view class="date-grid">
<view @click="!item.disabled && handleSelectTime(item.time)" class="date-item" v-for="(item, index) in date" :key="index"
:style="item.disabled ? 'background-color: #F7F7F7; color: #C9C9C9;' : selectedTime.includes(item.time) ? 'background-color: #E6EFFF;color: #365A9A;' : 'background-color:#F7F7F7; color: #303133;'"
>
{{ item.time }}
</view>
</view>
</view>
<view class="price">
<view class="line"></view>
<view class="d-b-c price-block">
<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">
<view class="price-detail">费用明细</view>
<image style="width: 14rpx;height: 8rpx;margin-left: 10rpx;" src="@/static/icon/down.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';
export default {
components: {
navbar,
banner,
priceFormat,
Popup
},
data() {
return {
bannerData: [],
value: 4,
currentTab: 1,
tab: [
{type: 1, name: '今天'},
{type: 2, name: '明天'},
{type: 3, name: '后天'},
],
content: '<p>欢迎来到秀湖网球中心！我们提供优质的网球场地和设施，适合各类网球爱好者。无论您是初学者还是专业选手，我们都能满足您的需求。我们的场地配备了先进的照明系统和舒适的休息区，让您在愉快的环境中享受网球运动。立即预定，开启您的网球之旅吧！</p>',
timePopup: false,
time: [
{type: 1, time: '3/16周日'},
{type: 2, time: '3/17周一'},
{type: 3, time: '3/18周二'},
],
currentTime: 0,
date: [
{type: 1, time: '06:00', disabled: false},
{type: 2, time: '07:00', disabled: false},
{type: 3, time: '08:00', disabled: false},
{type: 4, time: '09:00', disabled: false},
{type: 5, time: '10:00', disabled: true},
{type: 6, time: '11:00', disabled: false},
{type: 7, time: '12:00', disabled: false},
{type: 8, time: '13:00', disabled: true},
{type: 9, time: '14:00', disabled: false},
{type: 10, time: '15:00', disabled: true},
{type: 11, time: '16:00', disabled: true},
{type: 12, time: '17:00', disabled: false},
{type: 13, time: '18:00', disabled: false},
{type: 14, time: '19:00', disabled: false},
{type: 15, time: '20:00', disabled: false},
{type: 16, time: '21:00', disabled: false},
{type: 17, time: '22:00', disabled: false},
],
selectedTime: [],
countSelectedTime: 0
};
},
onLoad(args) {
this.getData();
},
methods: {
getData() {
let self = this;
uni.showLoading({
title: '加载中'
});
self._get(
'index/index',
{
url: self.url
},
function(res) {
self.bannerData = res.data.items[0];
console.log("🚀 ~ self.bannerData:", self.bannerData)
}
);
},
// 切换tab
handleChangeTab(e) {
this.currentTab = e.type;
},
// 处理导航
handleLocation() {
uni.openLocation({
latitude: 30.74621,
longitude: 120.76055,
name: '秀湖网球中心',
address: '嘉兴市秀洲区秀园路秀湖公园（西南角）',
scale: 18
});
},
// 处理拨打电话
handleCall() {
uni.makePhoneCall({
phoneNumber: '0573-82069999'
});
},
// 选择时间
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
}
}
};
</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;
}
}
}
</style>