275 lines
9.4 KiB
Vue
275 lines
9.4 KiB
Vue
<template>
|
|
<view style="padding-bottom: 40rpx">
|
|
<navbar title="预约网球场馆"></navbar>
|
|
|
|
<view class="banner">
|
|
<banner :itemData="bannerData"></banner>
|
|
</view>
|
|
|
|
<!-- 信息介绍 -->
|
|
<view class="info-block">
|
|
<view class="info-title">秀湖网球中心</view>
|
|
<view class="d-f">
|
|
<uni-rate v-model="value" active-color="#FF5951" :size="18"/>
|
|
<text class="rate">4.0推荐</text>
|
|
</view>
|
|
<view class="time">营业时间：周一至周日 06:00-22:00</view>
|
|
<view class="line"></view>
|
|
<view class="d-b-c">
|
|
<view class="d-f">
|
|
<image style="width: 36rpx;height: 36rpx;margin-top: 4rpx;" src="@/static/icon/location2.png" mode=""></image>
|
|
<view class="">
|
|
<view class="address-time">嘉兴市秀洲区秀园路秀湖公园（西南角）</view>
|
|
<view class="address-time">距您14km</view>
|
|
</view>
|
|
</view>
|
|
<view class="d-f">
|
|
<view class="d-f d-c a-i-c" style="margin-right: 20rpx;" @tap="handleLocation">
|
|
<image style="width: 64rpx;height: 64rpx;margin-top: 2rpx" src="@/static/icon/share.png" mode=""></image>
|
|
<view class="mark-text">导航</view>
|
|
</view>
|
|
<view class="d-f d-c a-i-c" @tap="handleCall">
|
|
<image style="width: 64rpx;height: 64rpx;margin-top: 2rpx" src="@/static/icon/mobile.png" mode=""></image>
|
|
<view class="mark-text">电话</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 分隔线 -->
|
|
<view class="split-line"></view>
|
|
|
|
<!-- 场馆信息 -->
|
|
<view class="info-block">
|
|
<view class="info-title">场馆信息</view>
|
|
<view class="d-f">
|
|
<view class="tab" v-for="(item, index) in tab" :key="index"
|
|
:style="currentTab === item.type ? 'background-color: #F0F5FF; color: #365A9A;' : ''"
|
|
@tap="handleChangeTab(item)" >
|
|
{{ item.name }}
|
|
</view>
|
|
</view>
|
|
|
|
<view class="">
|
|
<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>
|
|
</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>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</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';
|
|
export default {
|
|
components: {
|
|
navbar,
|
|
banner,
|
|
priceFormat
|
|
},
|
|
data() {
|
|
return {
|
|
bannerData: [],
|
|
value: 4,
|
|
currentTab: 1,
|
|
tab: [
|
|
{type: 1, name: '今天'},
|
|
{type: 2, name: '明天'},
|
|
{type: 3, name: '后天'},
|
|
]
|
|
};
|
|
},
|
|
|
|
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;
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.banner {
|
|
.diy-banner-box {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
}
|
|
|
|
.info-block {
|
|
margin: 0 30rpx;
|
|
|
|
.info-title {
|
|
font-weight: bold;
|
|
font-size: 34rpx;
|
|
color: #303133;
|
|
line-height: 48rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.rate {
|
|
margin-left: 8rpx;
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #606266;
|
|
line-height: 36rpx;
|
|
}
|
|
|
|
.time {
|
|
font-size: 26rpx;
|
|
color: #606266;
|
|
line-height: 48rpx;
|
|
}
|
|
|
|
.line {
|
|
height: 2rpx;
|
|
background-color: #F6F7F9;
|
|
margin: 24rpx 0;
|
|
}
|
|
|
|
.address-time {
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #606266;
|
|
line-height: 36rpx;
|
|
}
|
|
|
|
.tab {
|
|
width: 108rpx;
|
|
height: 52rpx;
|
|
text-align: center;
|
|
line-height: 52rpx;
|
|
background-color: #F7F7F7;
|
|
font-size: 26rpx;
|
|
color: #606266;
|
|
border-radius: 8rpx;
|
|
margin-top: 16rpx;
|
|
margin-right: 10rpx;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.cg-name {
|
|
font-size: 28rpx;
|
|
color: #303133;
|
|
line-height: 40rpx;
|
|
margin-bottom: 74rpx;
|
|
}
|
|
|
|
.reserve-btn {
|
|
width: 104rpx;
|
|
height: 52rpx;
|
|
border-radius: 10rpx;
|
|
border: 2rpx solid #365A9A;
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #365A9A;
|
|
line-height: 52rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.time-block {
|
|
text-align: center;
|
|
margin-right: 8rpx;
|
|
|
|
.time-block-text {
|
|
font-weight: 400;
|
|
font-size: 20rpx;
|
|
color: #365A9A;
|
|
line-height: 28rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.time-block-box {
|
|
width: 30rpx;
|
|
height: 12rpx;
|
|
background: #365A9A;
|
|
border-radius: 6rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.split-line {
|
|
height: 20rpx;
|
|
background-color: #F6F7F9;
|
|
margin-top: 12rpx;
|
|
margin-bottom: 28rpx;
|
|
}
|
|
</style> |