引入日历前

pages/clock/clock.vue

@@ -0,0 +1,126 @@
+<template>
+	<view>
+		<view class="top">
+			<z-nav-bar title="读书打卡"></z-nav-bar>
+			<uni-calendar 
+				:insert="true"
+				:lunar="true" 
+				:start-date="'2019-3-2'"
+				:end-date="'2019-5-20'"
+				@change="change"
+				 />
+		</view>
+		<music-play :playData="playData"></music-play>
+		<z-navigation></z-navigation>
+	</view>
+</template>
+
+<script>
+	import musicPlay from '@/components/music.vue'
+	function getDate(date, AddDayCount = 0) {
+			if (!date) {
+				date = new Date()
+			}
+			if (typeof date !== 'object') {
+				date = date.replace(/-/g, '/')
+			}
+			const dd = new Date(date)
+	
+			dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
+	
+			const y = dd.getFullYear()
+			const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
+			const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
+			return {
+				fullDate: y + '-' + m + '-' + d,
+				year: y,
+				month: m,
+				date: d,
+				day: dd.getDay()
+			}
+		}
+	export default {
+		data() {
+			return {
+				playData:{},
+				showCalendar: false,
+				info: {
+									lunar: true,
+									range: true,
+									insert: false,
+									selected: []
+								}
+			}
+		},
+		onReady() {
+					this.$nextTick(() => {
+						this.showCalendar = true
+					})
+					// TODO 模拟请求异步同步数据
+					setTimeout(() => {
+						this.info.date = getDate(new Date(),-30).fullDate
+						this.info.startDate = getDate(new Date(),-60).fullDate
+						this.info.endDate =  getDate(new Date(),30).fullDate
+						this.info.selected = [{
+								date: getDate(new Date(),-3).fullDate,
+								info: '打卡'
+							},
+							{
+								date: getDate(new Date(),-2).fullDate,
+								info: '签到',
+								data: {
+									custom: '自定义信息',
+									name: '自定义消息头'
+								}
+							},
+							{
+								date: getDate(new Date(),-1).fullDate,
+								info: '已打卡'
+							}
+						]
+					}, 2000)
+				},
+		methods: {
+				open() {
+								this.$refs.calendar.open()
+							},
+							close(){
+								console.log('弹窗关闭');
+							},
+							change(e) {
+								console.log('change 返回:', e)
+								// 模拟动态打卡
+								if (this.info.selected.length > 5) return
+								this.info.selected.push({
+									date: e.fulldate,
+									info: '打卡'
+								})
+							},
+							confirm(e) {
+								console.log('confirm 返回:', e)
+							},
+							monthSwitch(e) {
+								console.log('monthSwitchs 返回:', e)
+							}
+				
+		},
+		components: {
+			musicPlay
+		},
+	}
+</script>
+
+<style lang="scss">
+	.example-body {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+	.calendar-button {
+		flex: 1;
+		font-weight: bold;
+		font-size: 32rpx;
+	}
+</style>
+