完善预约场馆页面

bundle/reserve/details.vue

@@ -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-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 || index === 11 ? 'background-color:#C9C9C9;' : ''}`"></view>
+                            <view class="time-block-box h-12rpx rounded-6rpx mt-4rpx" :style="index === 1 ? '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>
                     </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>

bundle/reserve/reserve.vue

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

common/style.scss

@@ -633,6 +633,10 @@ button.btn-gray-border[disabled][type=primary] {
 	align-items: start;
 }
 
+.j-c-c {
+	justify-content: center;
+}
+
 .d-c-c {
 	display: flex;
 	justify-content: center;
@@ -1727,3 +1731,16 @@ uni-image {
 .tl{
 	text-align: left;
 }
+
+.mx-30 {
+	margin-left: 30rpx;
+	margin-right: 30rpx;
+}
+
+.mt-28 {
+	margin-top: 28rpx;
+}
+
+.mt-30 {
+	margin-top: 30rpx;
+}

components/navbar.vue

@@ -1,6 +1,6 @@
 <template>
     <view class="">
-        <view class="top_head pr" :style="'background-color:#fff;'">
+        <view class="top_head pr" :style="'background-color:' + bg +';'">
 			<view class="head_top" :style="'height:' + topBarTop() + 'px;'"></view>
 			<view class="title" :style="topBarHeight() == 0 ? '' : 'height:' + topBarHeight() + 'px;'">
                 <image style="width: 48rpx;height: 48rpx;margin-top: 2rpx" src="@/static/icon/back2.png" mode=""></image>
@@ -16,6 +16,10 @@
             title: {
                 type: String,
                 default: '标题'
+            },
+            bg: {
+                type: String,
+                default: '#fff'
             }
         },
         data() {
@@ -32,10 +36,6 @@
 </script>
 
 <style lang="scss">
-    page {
-        background-color: #fff;
-    }
-
     .top_head {
 		line-height: 30px;
 		z-index: 1;

components/uni-popup.vue

@@ -1,7 +1,8 @@
 <template>
 	<view>
 		<view class="uni-mask" v-show="show" :style="{top:offsetTop + 'px'}" @click="hide"></view>
-		<view :class="['uni-popup','uni-popup-'+type]" v-show="show" :style="'width:'+width+'rpx; heigth:'+heigth+'rpx;padding:'+padding+'rpx;background-color:'+backgroundColor+';box-shadow:'+boxShadow+';'">
+		<view :class="['uni-popup','uni-popup-'+type]" v-show="show" 
+			:style="'width:'+width+'rpx; heigth:'+heigth+'rpx;padding:'+padding+'rpx;background-color:'+backgroundColor+';box-shadow:'+boxShadow+';border-radius:'+radius+'rpx;'">
 			<view class="popup-head" v-if="msg!=''">
 		 	{{msg}}
 			</view>	
@@ -45,6 +46,10 @@
 			msg: {
 				type: String,
 				default: ""
+			},
+			radius: {
+				type: String,
+				default: '0'
 			}
 		},
 		data() {

pages.json

@@ -961,6 +961,12 @@
 				"style": {
 					"navigationStyle": "custom"
 				}
+			},
+			{
+				"path": "reserve/reserve",
+				"style": {
+					"navigationStyle": "custom"
+				}
 			}
 		]
 	}],

pages/index/index.vue

@@ -1,12 +1,12 @@
 <template>
 	<view :data-theme="theme()" :class="theme() || ''" style="padding-bottom: 44rpx;">
-		<view class="top_head pr" :style="'background-image: url(@/static/bg.png); background-size:100% auto;background-color:#F6F7F9;'">
+		<view class="top_head pr" :style="'background-image: url(../../static/bg.png); background-size:100% auto;background-color:#F6F7F9;'">
 			<view class="head_top" :style="'height:' + topBarTop() + 'px;'"></view>
 			<view class="title" :style="topBarHeight() == 0 ? '' : 'height:' + topBarHeight() + 'px;'">
 				秀湖网球中心
 			</view>
 		</view>
-		<view :style="'background: url(@/static/bg.png) no-repeat; background-size:100% auto;'">
+		<view :style="'background: url(../../static/bg.png) no-repeat; background-size:100% auto;'">
 			<view v-if="thisindex == 0"><diy style="position: relative;" :diyItems="items"></diy></view>
 
 			<view class="notice">
@@ -25,7 +25,7 @@
 						<image style="width: 690rpx;height: 320rpx;" src="@/static/wqzx.png" mode="aspectFit"></image>
 						<view class="ball-title">
 							<image style="width: 108rpx;height: 160rpx;" src="@/static/wq.png" mode="aspectFill"></image>
-							<view style="background-image: url(@/static/wqbg.png);">
+							<view style="background-image: url(../../static/wqbg.png);">
 								<image style="width: 160rpx;height: 44rpx;" src="@/static/wqyd_txt.png" mode="aspectFill"></image>
 							</view>
 						</view>
@@ -44,7 +44,7 @@
 						<image style="width: 690rpx;height: 320rpx;" src="@/static/lqzx.png" mode="aspectFit"></image>
 						<view class="ball-title" style="bottom: 24rpx; left: 28rpx;">
 							<image style="width: 64rpx;height: 64rpx;" src="@/static/lq.png" mode="aspectFill"></image>
-							<view style="background-image: url(@/static/wqbg.png); bottom: 0; left: 20rpx;" >
+							<view style="background-image: url(../../static/wqbg.png); bottom: 0; left: 20rpx;" >
 								<image style="width: 160rpx;height: 44rpx;" src="@/static/lqyd_txt.png" mode="aspectFill"></image>
 							</view>
 						</view>