booking.vue
2.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<template>
<view class="booking">
<u-sticky bgColor="#fff">
<view class="header_booking">
<u-tabs :list="list" :lineColor="ThemeColor.PrimaryColor" :activeStyle="{color: ThemeColor.PrimaryColor}"></u-tabs>
<view class="select_list">
<view class="select_item" @click="show = true">
<text class="text">距离</text>
<u-icon name="arrow-down-fill"></u-icon>
</view>
<view class="select_item" @click="show = true">
<text class="text">价格</text>
<u-icon name="arrow-down-fill" color="#666"></u-icon>
</view>
<view class="select_item">
<text>时间段</text>
<u-icon name="arrow-down-fill" color="#666"></u-icon>
</view>
</view>
</view>
</u-sticky>
<!-- 球场列表 -->
<view class="arena_list">
<ArenaCard v-for="item in 5" :key="item" />
</view>
<u-picker :show="show" :columns="columns" @cancel="show = false" @confirm="show = false"></u-picker>
<CommonTabbar tabbarValue="booking" />
</view>
</template>
<script>
import ArenaCard from '@/pages/home/components/arenaCard.vue'
import ThemeColor from '@/utils/themeColor'
export default {
components: { ArenaCard },
data() {
return {
show: false,
ThemeColor,
columns: [
['1km以内', '3km以内', '5km以内', '10km以内']
],
list: [
{ name: '羽毛球', iconName: 'icon-yumaoqiu1' },
{ name: '足球', iconName: 'icon-zuqiu' },
{ name: '篮球', iconName: 'icon-lanqiu' },
{ name: '排球', iconName: 'icon-paiqiu' },
{ name: '乒乓球', iconName: 'icon-pingpangqiu' },
{ name: '网球', iconName: 'icon-wangqiu1' },
{ name: '排球', iconName: 'icon-paiqiu' },
{ name: '台球', iconName: 'icon-taiqiu' },
{ name: '高尔夫球', iconName: 'icon-gaoerfu2' },
{ name: '棒球', iconName: 'icon-bangqiu' }
]
}
}
}
</script>
<style lang="scss" scoped>
.booking{
min-height: 100vh;
background-color: #F6F6F6;
.header_booking{
background-color: #fff;
.select_list{
display: flex;
align-items: center;
justify-content: space-around;
height: 84rpx;
padding: 0 30rpx;
// border-top: 2rpx solid #E1E1E1;
box-sizing: border-box;
.select_item{
display: flex;
align-items: center;
font-size: 28rpx;
line-height: 32rpx;
color: #666;
.text{
margin-right: 8rpx;
}
}
}
}
.arena_list{
padding: 30rpx;
}
}
</style>