aboutSphere.vue
3.0 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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<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" :isBooking="false" :key="item" />
</view>
<view class="footer">
<MyButton title="发起约球" @comfirn="goRouter" />
</view>
<u-picker :show="show" :confirmColor="ThemeColor.PrimaryColor" :columns="columns" :closeOnClickOverlay="true" @close="show = false" @cancel="show = false" @confirm="show = false"></u-picker>
<CommonTabbar tabbarValue="aboutSphere" />
</view>
</template>
<script>
import MyButton from '@/components/myButton.vue'
import ArenaCard from '@/pages/home/components/arenaCard.vue'
import ThemeColor from '@/utils/themeColor'
export default {
components: { ArenaCard, MyButton },
data() {
return {
ThemeColor,
show: false,
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' }
]
}
},
methods: {
goRouter(){
uni.navigateTo({
url: '/pages/aboutBalls/aboutBalls'
})
}
}
}
</script>
<style lang="scss" scoped>
.booking{
background-color: #F6F6F6;
padding-bottom: 112rpx;
.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;
}
.footer{
position: fixed;
height: 112rpx;
width: 100%;
box-sizing: border-box;
bottom: calc(50px + env(safe-area-inset-bottom));
left: 0;
background-color: #fff;
padding: 16rpx 30rpx;
}
}
</style>