| xqd
@@ -1,19 +1,52 @@
|
|
|
<template>
|
|
|
<app-layout>
|
|
|
<view class="book-index">
|
|
|
+
|
|
|
+ <view class="custom-header-container">
|
|
|
+ <view class="header-bg" :style="{height:headerBgHeight}">
|
|
|
+ <image src="../../../static/image/course/bg.png"/>
|
|
|
+ </view>
|
|
|
+ <view class="custom-header-status-bar" :style="{height:getStausBarHeight}"></view>
|
|
|
+ <view class="custom-header-top-container">
|
|
|
+ <view class="custom-header-title">场地预约</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="swiper-container">
|
|
|
+ <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
|
|
|
+ <swiper-item class="swiper-item">
|
|
|
+ <image class="swiper-item-img" src="../../../static/image/course/banner.png" mode=""></image>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="check-container">
|
|
|
+ <view class="check-item" v-for="(item, index) in dateArr"
|
|
|
+ :key="index" @click="dateActive(index, item)"
|
|
|
+ :class="(index == dateArrIndex) && dateArrActive?'check-item-active' : ''">
|
|
|
+ <view class="week">{{item.week}}</view>
|
|
|
+ <view class="data">{{item.date}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
<view class="page-width quick-navigation">
|
|
|
<app-quick-navigation></app-quick-navigation>
|
|
|
</view>
|
|
|
|
|
|
- <view class="page-width head-nav-list">
|
|
|
+ <!-- <view class="page-width head-nav-list">
|
|
|
<app-head-nav-list
|
|
|
v-bind:catList="catList"
|
|
|
@click="changeStatus"
|
|
|
v-bind:cat_id="cat_id"
|
|
|
></app-head-nav-list>
|
|
|
</view>
|
|
|
-
|
|
|
+ -->
|
|
|
<view class="page-width product-list" v-if="goods_list.length > 0">
|
|
|
+ <view class="title">
|
|
|
+ <view class="title-icon">
|
|
|
+ <image src="../../../static/image/reservation.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <text class="title-content">场地预约</text>
|
|
|
+ </view>
|
|
|
<app-product-list v-bind:goodsList="goods_list"></app-product-list>
|
|
|
</view>
|
|
|
|
| xqd
@@ -45,6 +78,9 @@
|
|
|
page: 1,
|
|
|
goods_list: [],
|
|
|
page_count: 1,
|
|
|
+ dateArr:[],
|
|
|
+ dateArrIndex: -1,
|
|
|
+ dateArrActive: false
|
|
|
}
|
|
|
},
|
|
|
onLoad(option) {
|
| xqd
@@ -66,10 +102,55 @@
|
|
|
// this.request();
|
|
|
}
|
|
|
});
|
|
|
-
|
|
|
+ // uni.removeStorage({
|
|
|
+ // key: 'date'
|
|
|
+ // })
|
|
|
+ this.getDate(7)
|
|
|
},
|
|
|
+ computed:{
|
|
|
+ getStausBarHeight(){
|
|
|
+ try {
|
|
|
+ const res = uni.getSystemInfoSync();
|
|
|
+ return res.statusBarHeight + 'px';
|
|
|
+ } catch (err) {
|
|
|
+ console.log(err)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ headerBgHeight(){
|
|
|
+ try {
|
|
|
+ const res = uni.getSystemInfoSync();
|
|
|
+ return 120+44+res.statusBarHeight + 'px';
|
|
|
+ } catch (err) {
|
|
|
+ console.log(err)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
methods: {
|
|
|
-
|
|
|
+ dateActive(index, item){
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '选中日期',
|
|
|
+ duration: 1000
|
|
|
+ });
|
|
|
+ // if(this.dateArrIndex == index){
|
|
|
+ // uni.showToast({
|
|
|
+ // icon: 'none',
|
|
|
+ // title: '取消日期',
|
|
|
+ // duration: 1000
|
|
|
+ // });
|
|
|
+ // uni.removeStorage({
|
|
|
+ // key: 'date'
|
|
|
+ // })
|
|
|
+ // this.dateArrActive = !this.dateArrActive
|
|
|
+ // }else{
|
|
|
+ this.dateArrIndex = index
|
|
|
+ this.dateArrActive = true
|
|
|
+ uni.setStorage({
|
|
|
+ key: 'date',
|
|
|
+ data: item
|
|
|
+ })
|
|
|
+ // }
|
|
|
+ },
|
|
|
changeStatus(status) {
|
|
|
this.page = 1;
|
|
|
this.cat_id = status;
|
| xqd
@@ -103,7 +184,49 @@
|
|
|
}
|
|
|
}
|
|
|
this.page_count = data.pagination.page_count;
|
|
|
- }
|
|
|
+ },
|
|
|
+ getDate(num){
|
|
|
+ // 获取当前时间
|
|
|
+ let Date1 = new Date()
|
|
|
+ for(let i = 0; i < num; i++ ){
|
|
|
+ let Date2 = new Date()
|
|
|
+ Date2.setDate(Date1.getDate() + i + 1)
|
|
|
+ let time = (Date2.getMonth() + 1) + "月" + Date2.getDate() + "日";
|
|
|
+ console.log(time)
|
|
|
+ let Day = Date2.getDay()
|
|
|
+ let days;
|
|
|
+ switch(Day){
|
|
|
+ case 1:
|
|
|
+ days = '星期一';
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ days = '星期二';
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ days = '星期三';
|
|
|
+ break;
|
|
|
+ case 4:
|
|
|
+ days = '星期四';
|
|
|
+ break;
|
|
|
+ case 5:
|
|
|
+ days = '星期五';
|
|
|
+ break;
|
|
|
+ case 6:
|
|
|
+ days = '星期六';
|
|
|
+ break;
|
|
|
+ case 0:
|
|
|
+ days = '星期日';
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ console.log(days)
|
|
|
+ let dateObj = {
|
|
|
+ date: time,
|
|
|
+ week: days,
|
|
|
+ }
|
|
|
+ this.dateArr.push(dateObj)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
},
|
|
|
onReachBottom() {
|
|
|
if (this.page < this.page_count) {
|
| xqd
@@ -137,11 +260,150 @@
|
|
|
z-index: 1500;
|
|
|
}
|
|
|
|
|
|
+ // .product-list {
|
|
|
+ // margin-top: #{100rpx};
|
|
|
+ // }
|
|
|
.product-list {
|
|
|
- margin-top: #{100rpx};
|
|
|
+ margin-top: #{30rpx};
|
|
|
}
|
|
|
|
|
|
.no-goods {
|
|
|
margin-top: #{150rpx};
|
|
|
}
|
|
|
+ .custom-header-container{
|
|
|
+ width: 100%;
|
|
|
+ top: 0;
|
|
|
+ z-index: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ background: #fff;
|
|
|
+ font-size: 26upx;
|
|
|
+ background: transparent;
|
|
|
+ .header-bg{
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ overflow: hidden;
|
|
|
+ z-index: 0;
|
|
|
+ image{
|
|
|
+ width: 100%;
|
|
|
+ height: 230px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .custom-header-status-bar{
|
|
|
+ width: 100%;
|
|
|
+ top: 0;
|
|
|
+ position: sticky;
|
|
|
+ z-index: 100;
|
|
|
+ }
|
|
|
+ .custom-header-top-container{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 15upx;
|
|
|
+ .custom-header-title{
|
|
|
+ height: 44px;
|
|
|
+ line-height: 44px;
|
|
|
+ font-size: 36upx;
|
|
|
+ font-weight:400;
|
|
|
+ font-family:Source Han Sans CN;
|
|
|
+ color: #FBF9F9;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cu-bar{
|
|
|
+ width: 100%;
|
|
|
+ height: 55px;
|
|
|
+ }
|
|
|
+ .head-search{
|
|
|
+ width: 100%;
|
|
|
+ height: 60upx;
|
|
|
+ .head-search-item{
|
|
|
+ width: 690upx;
|
|
|
+ height: 65upx;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title{
|
|
|
+ height: 80upx;
|
|
|
+ line-height: 80upx;
|
|
|
+ padding: 0 24upx;
|
|
|
+ font-size: 28upx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .title-icon{
|
|
|
+ width: 33upx;
|
|
|
+ height: 33upx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ // display: inline-block;
|
|
|
+ image{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title-content{
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 34upx;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #3D3D3D;
|
|
|
+ margin-left: 10upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .swiper-container{
|
|
|
+ width: 94vw;
|
|
|
+ height: auto;
|
|
|
+ margin: 0 3vw;
|
|
|
+ padding: 5vw 0;
|
|
|
+ z-index: 1;
|
|
|
+ .swiper-item{
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ transform: translate(0%, 0px) translateZ(0px);
|
|
|
+ .swiper-item-img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .check-container{
|
|
|
+ width: 100%;
|
|
|
+ height: 115upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ border-top: 2rpx solid #D8D8D8;
|
|
|
+ border-bottom: 2rpx solid #D8D8D8;
|
|
|
+ .check-item{
|
|
|
+ width: 90upx;
|
|
|
+ height: 80upx;
|
|
|
+ color: #000;
|
|
|
+ background: #F2F2F2;
|
|
|
+ font-size: 18upx;
|
|
|
+ border-radius: 8upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ .week{
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .data{
|
|
|
+ margin-top: 10upx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .check-item-active{
|
|
|
+ background: #F09A21;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|