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-12-04 17:30:32 +08:00
parent 331d6facdb
commit f59ed2e36d
21 changed files with 1642 additions and 399 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
bundle/reserve/reserve.vue
View File

@ -7,59 +7,34 @@
</view>
<view class="html">
<view class="cg-name">这里是场馆的名称场馆的名称</view>
<view class="cg-name">{{ venue.name }}</view>
<view class="line"></view>
<view class="" v-html="content"></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">
<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="timePopup = false"></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" style="margin-top: 10rpx;" @tap="handleShowBill">
<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" @tap="toConfirm">立即预定<text class="" v-if="countSelectedTime > 0">（{{countSelectedTime}}小时）</text></view>
</view>
</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">
@ -131,16 +106,23 @@
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
Popup,
ReserveTime,
BookingTime
// BookingTime
},
data() {
return {
venueId: 0,
roomId: 0,
bannerData: [],
value: 4,
currentTab: 1,
@ -151,39 +133,62 @@
],
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},
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();
},
@ -193,16 +198,39 @@
uni.showLoading({
title: '加载中'
});
self._get(
'index/index',
// 获取场馆详情
self._post(
'ground.ground/groundDetails',
{
url: self.url
app_id: self.getAppId(),
id: self.venueId, // 场馆ID
latitude: uni.getStorageSync('latitude') || '',
longitude: uni.getStorageSync('longitude') || '',
},
function(res) {
self.bannerData = res.data.items[0];
console.log("🚀 ~ self.bannerData:", self.bannerData)
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
@ -210,24 +238,6 @@
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;
@ -258,13 +268,29 @@
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'
url: `/bundle/reserve/confirm?venueId=${this.venue.id}&roomId=${this.roomId}`
});
},
confirmPicker(e) {
console.log("🚀 ~ e:", e)
}
}
};
}
</script>
<style lang="scss">