Ci2Order.vue/App/pages/book/index/index.vue

<template>
	<view class="order_index">
		<!-- 日期选择器 -->
		<!-- datevalue -->
		<w-picker mode="date" startYear="2000" endYear="2100" :value="datevalue" :current="true" :fields="showtype"
			@confirm="onConfirm($event)" @cancel="onCancel" :disabled-after="false" ref="date"></w-picker>
		<z-navbar>
			<!-- 	<view slot="left" style="font-size: 28rpx;">
				筛选
			</view> -->
			<!-- <view slot="left" class="iconfont iconjuxing5" @click="gotoSearch"></view> -->
			<view class="flex-n fac" style="width: 100%;" slot="title">
				<view class="iconfont iconjuxing18kaobei" style="position: absolute;left: 30rpx;font-size: 30rpx;" @click="backtoday"></view>
				<view @click="chooseDate(stateTab)">{{dataYearMonth}}</view>
			</view>
			
			<view slot="right" class="iconfont iconjuxing5" style="font-size: 30rpx;" @click="gotoSearch"></view>
		</z-navbar>
		<!-- '列表','场地', -->
		<z-tabs :tabs="['日','月']" v-model="stateTab" @change="changeTabs"></z-tabs>
		<!-- 列表 -->
		<!-- <book-list :refresh="refresh" v-if="stateTab==0" :date="datevalue"></book-list> -->
		<!-- 场地 -->
		<!-- <book-field :refresh="refresh" v-if="stateTab==1" @getDateInfo="getDateInfo"></book-field> -->
		<!-- 日 -->
		<view class="day-height" v-if="stateTab==0">
			<book-day ref='day' @changeDate="changeDate"></book-day>
		</view>
		<!-- 月 -->
		<view class="month-height" v-if="stateTab==1">
			<book-month ref="month" @changeDate="changeDate" @clickDate="clickDate"></book-month>
		</view>

		<view class="add_order flex-n fac fjc" @click="addBook">
			<view class="iconfont iconjia"></view>
		</view>
		<!-- <view class="add_order flex-n fac fjc">
			<view class="iconfont iconjia"></view>
		</view> -->
		<!-- <view class="add_content">
			<view class="">增加预定</view>
			<view class="">场地筛选</view>
			<view class="">帮助</view>
		</view> -->
		<z-tabbar></z-tabbar>
	</view>
</template>

<script>
	import bookList from './book-list.vue';
	import bookField from './book-field.vue';
	import bookDay from './book-day.vue';
	import bookMonth from './book-month.vue';

	export default {
		components: {
			bookList,
			bookField,
			bookDay,
			bookMonth,

		},

		data() {
			return {
				dataYearMonth: '2020.04',
				showtype: 'day',
				datevalue: '',
				stateTab: 1,
				backState:true
			};
		},
		mounted() {
			uni.hideTabBar();
			uni.$on('saveOrder',(date)=>{
				console.log('---------------保存訂單后跳轉回來的-------------------')
				this.datevalue=date;
				this.tabInfo();
			})
			uni.$on('switchTab',(router)=>{
				console.log('--------------------',router,'----------------------')
				if(router=='book/index/index')
				this.backtoday();
			})
			this.backtoday();
		},
		computed: {

		},
		methods: {
			//新增预定
			addBook() {
				uni.navigateTo({
					url: '../manage/index?type=0',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			gotoSearch() {
				uni.navigateTo({
					url: '../../search/index?type=1',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			onConfirm(e) {
				console.log('-------',e,'-------')
				this.datevalue = e.value;
				this.tabInfo();
			},
			onCancel() {
				console.log(this.$refs.date.value, this.$refs.date.pickVal)
			},
			chooseDate: function(state) {
				if (state != 3) {
					this.showtype = 'day';
				} else {
					this.showtype = 'month';
				}

				this.$refs.date.show();
			},
			tabInfo() {
				console.warn(this.datevalue)
				var a = this.datevalue.split("-");
				this.dataYearMonth = a[0] + '.' + a[1];
					this.$nextTick(() => {
						console.log(this.datevalue)
				if (this.stateTab == 0) { //日
						
						if (this.$refs.day)
							this.$refs.day.getDate(this.datevalue);
				}
				if (this.stateTab == 1) { //月
				
						if (this.$refs.month)
							this.$refs.month.getDate(this.datevalue);
				

				}
					})
			},
			changeTabs(idx) {
				console.log(idx, this.datevalue)
				this.stateTab = idx;
				this.tabInfo();
			},
			backtoday(){
				let date = new Date();
				let month = date.getMonth() + 1;
				let day = date.getDate()
				this.datevalue = date.getFullYear() + '-' + (month > 9 ? month : ('0' + month)) + '-' + (day > 9 ? day : ('0' +
					day));
				this.tabInfo();
			},
			//日月切换日期
			changeDate(date) {
				console.log('日月切换日期', date)
				this.datevalue = date;
				var a = this.datevalue.split("-");
				this.dataYearMonth = a[0] + '.' + a[1];
			},
			clickDate(date) {
				console.log(1312)
				this.changeDate(date);
				this.stateTab = 0;
				this.$nextTick(() => {
					this.$refs.day.getDate(this.datevalue);
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.month-height {
		height: calc(100vh - 280rpx - var(--status-bar-height));
	}

	.day-height {
		height: calc(100vh - 280rpx - var(--status-bar-height));
	}

	.order_index {
		.add_order {
			position: fixed;
			width: 82rpx;
			height: 82rpx;
			background: #2481EE;
			border-radius: 50%;
			right: 51rpx;
			bottom: 143rpx;
			z-index: 10;

			view {
				width: 49rpx;
				height: 49rpx;
				font-size: 49rpx;
				line-height: 49rpx;
				color: white;
				z-index: 300;
			}

			color: white;
			box-shadow:10rpx 10rpx 30rpx 0rpx #C6E0FF;
		}

		// .add_content{
		// 	position: fixed;
		// 	right: 51rpx;
		// 		bottom: 243rpx;
		// 		background: white;
		// 		font-size: 28rpx;
		// 		line-height: 80rpx;

		// 		padding: 0 20rpx;
		// 		border-radius: 5rpx;
		// 		box-shadow: 0 0 10rpx #aaa;
		// 		view{
		// 			border-bottom: 1rpx solid #aaa;
		// 			padding: 0 20rpx;
		// 			text-align: right;
		// 		}
		// }
	}
</style>