football/plugins/book/index/index.vue

<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="check-container">
				<view class="check-item" v-for="(item, index) in dateArr" 
					  :key="index" @click="dateActive(index, item)" 
					  :class="index == dateArrIndex?'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">
				<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>
			
			<view class="page-width no-goods" v-else>
				<app-no-goods background="#f7f7f7"></app-no-goods>
			</view>
		</view>
	</app-layout>
</template>

<script>
	import appHeadNavList from '../components/app-head-nav-list.vue';
	import appProductList from '../components/app-product-list.vue';
    import appQuickNavigation from "../../../components/page-component/app-quick-navigation/app-quick-navigation.vue";
	import appNoGoods from '../../../components/page-component/app-no-goods/app-no-goods.vue';
	
    export default {
        name: "index",
	   
	    data() {
            return {
                catList: [
	                {
	                    name: '全部',
		                id: 0
	                }
                ],
                cat_id: 0,
                page: 1,
                goods_list: [],
                page_count: 1,
				dateArr:[],
				// dateArrIndex: -1,
				dateArrIndex: 0,
				dateArrActive: false
            }
	    },
	    onLoad(option) {
            uni.showLoading({
	            title: '加载中',
            });
            if (option.cat_id) {
                this.cat_id = option.cat_id;
            } else {
                this.cat_id = this.catList[0].id;
            }
            this.request();
            this.$request({
	            url: this.$api.book.cats
            }).then(response => {
                uni.hideLoading();
                if (response.code === 0) {
                    this.catList = [...this.catList, ...response.data.cat];
	                // 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;
	            this.goods_list = [];
                this.request();
            },
		    
		    async request() {
                uni.showLoading({
                    title: '加载中',
                });
                const res = await this.$request({
                    url: this.$api.book.list,
                    data: {
                        page: this.page,
                        cat_id: this.cat_id,
                    }
                });
                uni.hideLoading();
                if (res.code === 0) {
                    this.dataProcessing(res.data);
                }
		    },

            dataProcessing(data) {
                for (let i = 0; i < data.list.length; i+=2) {
                    if (i+1 !== data.list.length) {
                        this.goods_list.push([data.list[i], data.list[i+1]]);
                    } else {
                        this.goods_list.push([data.list[i]]);
                    }
                }
                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)
					for(i in this.dateArr){
						if(i == this.dateArrIndex){
							uni.setStorage({
								key: 'date',
								data: this.dateArr[i]
							})
						}
					}
				}
			}
			
	    },
	    onReachBottom() {
            if (this.page < this.page_count) {
                this.page++;
                this.request();
            }
        },
	    
        onShareAppMessage() {
            return this.$shareAppMessage({
                path: '/plugins/book/index/index',
                title: this.$children[0].navigationBarTitle,
            });
        },
	    
        components: {
            'app-head-nav-list': appHeadNavList,
            'app-product-list': appProductList,
            'app-quick-navigation': appQuickNavigation,
	        'app-no-goods': appNoGoods,
        },
    }
</script>

<style scoped lang="scss">
	
	.head-nav-list {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1500;
	}
	
	// .product-list {
	// 	margin-top: #{100rpx};
	// }
	.product-list {
		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>