1. 自定义日历组件

2. 添加下拉刷新列表

components/uni-calendar/uni-calendar.vue

@@ -1,623 +1,612 @@
-<template>
-	<view class="uni-calendar" @touchstart="handleTouchstart" @touchend="handleTouchend">
-		<view v-if="!insert&&show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}" @click="clean"></view>
-		<view v-if="insert || show" class="uni-calendar__content" :class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow}">
-			<view v-if="!insert" class="uni-calendar__header uni-calendar--fixed-top">
-				<view class="uni-calendar__header-btn-box" @click="close">
-					<text class="uni-calendar__header-text uni-calendar--fixed-width">{{cancelText}}</text>
-				</view>
-				<view class="uni-calendar__header-btn-box" @click="confirm">
-					<text class="uni-calendar__header-text uni-calendar--fixed-width">{{okText}}</text>
-				</view>
+<template>
+	<view class="uni-calendar" @touchstart="handleTouchstart" @touchend="handleTouchend">
+		<view v-if="!insert && show" class="uni-calendar__mask" :class="{ 'uni-calendar--mask-show': aniMaskShow }" @click="clean"></view>
+		<view v-if="insert || show" class="uni-calendar__content" :class="{ 'uni-calendar--fixed': !insert, 'uni-calendar--ani-show': aniMaskShow }">
+			<view v-if="!insert" class="uni-calendar__header uni-calendar--fixed-top">
+				<view class="uni-calendar__header-btn-box" @click="close">
+					<text class="uni-calendar__header-text uni-calendar--fixed-width">{{ cancelText }}</text>
+				</view>
+				<view class="uni-calendar__header-btn-box" @click="confirm">
+					<text class="uni-calendar__header-text uni-calendar--fixed-width">{{ okText }}</text>
+				</view>
 			</view>
-			<!-- header -->
-			<view class="uni-calendar__header">
-				<view class="uni-calendar__header-btn-box" @click.stop="pre">
-					<view class="uni-calendar__header-btn uni-calendar--left"></view>
-				</view>
-				<picker mode="date" :value="date" fields="month" @change="bindDateChange">
-					<text class="uni-calendar__header-text">{{ (nowDate.year||'') +' / '+( nowDate.month||'')}}</text>
-				</picker>
-				<view class="uni-calendar__header-btn-box" @click.stop="next">
-					<view class="uni-calendar__header-btn uni-calendar--right"></view>
-				</view>
-				<text class="uni-calendar__backtoday" @click="backtoday">{{todayText}}</text>
+			<!-- header -->
+			<view class="uni-calendar__header">
+				<view class="uni-calendar__header-btn-box" @click.stop="pre"><view class="uni-calendar__header-btn uni-calendar--left"></view></view>
+				<picker mode="date" :value="date" fields="month" @change="bindDateChange">
+					<text class="uni-calendar__header-text">{{ (nowDate.year || '') + ' / ' + (nowDate.month || '') }}</text>
+				</picker>
+				<view class="uni-calendar__header-btn-box" @click.stop="next"><view class="uni-calendar__header-btn uni-calendar--right"></view></view>
+				<text class="uni-calendar__backtoday" @click="backtoday">{{ todayText }}</text>
 			</view>
-			<!-- content -->
-			<view class="uni-calendar__box">
-				<view v-if="showMonthed" class="uni-calendar__box-bg">
-					<text class="uni-calendar__box-bg-text">{{nowDate.month}}</text>
-				</view>
-				<view class="uni-calendar__weeks">
-					<view class="uni-calendar__weeks-day">
-						<text class="uni-calendar__weeks-day-text">{{SUNText}}</text>
-					</view>
-					<view class="uni-calendar__weeks-day">
-						<text class="uni-calendar__weeks-day-text">{{monText}}</text>
-					</view>
-					<view class="uni-calendar__weeks-day">
-						<text class="uni-calendar__weeks-day-text">{{TUEText}}</text>
-					</view>
-					<view class="uni-calendar__weeks-day">
-						<text class="uni-calendar__weeks-day-text">{{WEDText}}</text>
-					</view>
-					<view class="uni-calendar__weeks-day">
-						<text class="uni-calendar__weeks-day-text">{{THUText}}</text>
-					</view>
-					<view class="uni-calendar__weeks-day">
-						<text class="uni-calendar__weeks-day-text">{{FRIText}}</text>
-					</view>
-					<view class="uni-calendar__weeks-day">
-						<text class="uni-calendar__weeks-day-text">{{SATText}}</text>
-					</view>
-				</view>
-				<view class="uni-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex">
+			<!-- content -->
+			<view class="uni-calendar__box">
+				<view v-if="showMonthed" class="uni-calendar__box-bg">
+					<text class="uni-calendar__box-bg-text">{{ nowDate.month }}</text>
+				</view>
+				<view class="uni-calendar__weeks">
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">{{ SUNText }}</text>
+					</view>
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">{{ monText }}</text>
+					</view>
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">{{ TUEText }}</text>
+					</view>
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">{{ WEDText }}</text>
+					</view>
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">{{ THUText }}</text>
+					</view>
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">{{ FRIText }}</text>
+					</view>
+					<view class="uni-calendar__weeks-day">
+						<text class="uni-calendar__weeks-day-text">{{ SATText }}</text>
+					</view>
+				</view>
+				<view class="uni-calendar__weeks" v-for="(item, weekIndex) in weeks" :key="weekIndex">
 					<view v-if="fold" class="uni-calendar__weeks-box">
-						<view v-if="foldIndex===weekIndex" class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
-							<calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar" :selected="selected" :lunar="lunar" @change="choiceDate"></calendar-item>
+						<view v-if="foldIndex === weekIndex" class="uni-calendar__weeks-item" v-for="(weeks, weeksIndex) in item" :key="weeksIndex">
+							<calendar-item
+								class="uni-calendar-item--hook"
+								:weeks="weeks"
+								:calendar="calendar"
+								:selected="selected"
+								:lunar="lunar"
+								@change="choiceDate"
+							></calendar-item>
 						</view>
 					</view>
-					<view v-else class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
+					<view v-else class="uni-calendar__weeks-item" v-for="(weeks, weeksIndex) in item" :key="weeksIndex">
 						<calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar" :selected="selected" :lunar="lunar" @change="choiceDate"></calendar-item>
-					</view>
-				</view>
+					</view>
+				</view>
 			</view>
 			<!-- footer -->
-			<view v-if="foldAble" class="uni-calendar__footer">
-				<u-icon :name="fold?'arrow-down':'arrow-up'" @tap="foldBtnDidClick" size="20"></u-icon>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	import Calendar from './util.js';
-	import calendarItem from './uni-calendar-item.vue'
-	
-	/**
-	 * Calendar 日历
-	 * @description 日历组件可以查看日期，选择任意范围内的日期，打点操作。常用场景如：酒店日期预订、火车机票选择购买日期、上下班打卡等
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=56
-	 * @property {String} date 自定义当前时间，默认为今天
-	 * @property {Boolean} lunar 显示农历
-	 * @property {String} startDate 日期选择范围-开始日期
-	 * @property {String} endDate 日期选择范围-结束日期
-	 * @property {Boolean} range 范围选择
-	 * @property {Boolean} insert = [true|false] 插入模式,默认为false
-	 * 	@value true 弹窗模式
-	 * 	@value false 插入模式
-	 * @property {Boolean} clearDate = [true|false] 弹窗模式是否清空上次选择内容
-	 * @property {Array} selected 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]
-	 * @property {Boolean} showMonth 是否选择月份为背景
-	 * @event {Function} change 日期改变，`insert :ture` 时生效
-	 * @event {Function} confirm 确认选择`insert :false` 时生效
-	 * @event {Function} monthSwitch 切换月份时触发
-	 * @example <uni-calendar :insert="true":lunar="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" />
-	 */
-	export default {
-		components: {
-			calendarItem
-		},
-		emits:['close','confirm','change','monthSwitch'],
-		props: {
-			date: {
-				type: String,
-				default: ''
-			},
-			selected: {
-				type: Array,
-				default () {
-					return []
-				}
-			},
-			lunar: {
-				type: Boolean,
-				default: false
-			},
-			startDate: {
-				type: String,
-				default: ''
-			},
-			endDate: {
-				type: String,
-				default: ''
-			},
-			range: {
-				type: Boolean,
-				default: false
-			},
-			insert: {
-				type: Boolean,
-				default: true
-			},
-			showMonth: {
-				type: Boolean,
-				default: false
-			},
-			clearDate: {
-				type: Boolean,
-				default: true
-			},
-			/// 是否能够折叠
-			foldAble: {
-				type: Boolean,
-				default: false
-			}
-		},
-		data() {
-			return {
-				show: false,
-				weeks: [],
-				calendar: {},
-				nowDate: '',
-				aniMaskShow: false,
-				fold: true,
-				showMonthed: false,
-				foldIndex: -1,
-				startTime: 0,
-				startX: 0,
-				startY: 0,
-			}
-		},
-		computed:{
-			/**
-			 * for i18n
-			 */
-
-			okText() {
-				return this.$i18n.t("uni-calender.ok")
-			},
-			cancelText() {
-				return this.$i18n.t("uni-calender.cancel")
-			},
-			todayText() {
-				return this.$i18n.t("uni-calender.today")
-			},
-			monText() {
-				return this.$i18n.t("uni-calender.MON")
-			},
-			TUEText() {
-				return this.$i18n.t("uni-calender.TUE")
-			},
-			WEDText() {
-				return this.$i18n.t("uni-calender.WED")
-			},
-			THUText() {
-				return this.$i18n.t("uni-calender.THU")
-			},
-			FRIText() {
-				return this.$i18n.t("uni-calender.FRI")
-			},
-			SATText() {
-				return this.$i18n.t("uni-calender.SAT")
-			},
-			SUNText() {
-				return this.$i18n.t("uni-calender.SUN")
-			}
-		},
-		watch: {
-			date(newVal) {
-				// this.cale.setDate(newVal)
-				this.init(newVal)
-			},
-			startDate(val){
-				this.cale.resetSatrtDate(val)
-				this.cale.setDate(this.nowDate.fullDate)
-				this.weeks = this.cale.weeks
-			},
-			endDate(val){
-				this.cale.resetEndDate(val)
-				this.cale.setDate(this.nowDate.fullDate)
-				this.weeks = this.cale.weeks
-			},
-			selected(newVal) {
-				this.cale.setSelectInfo(this.nowDate.fullDate, newVal)
-				this.weeks = this.cale.weeks
-			}
-		},
-		created() {
-			// 获取日历方法实例
-			this.cale = new Calendar({
-				// date: new Date(),
-				selected: this.selected,
-				startDate: this.startDate,
-				endDate: this.endDate,
-				range: this.range,
-			})
-			// 选中某一天
-			// this.cale.setDate(this.date)
-			this.init(this.date)
-			this.showMonthed = this.showMonth
-			this.getFoldIndex()
-		},
-		methods: {
-			// 取消穿透
-			clean() {},
-			bindDateChange(e) {
-				const value = e.detail.value + '-1'
-				console.log(this.cale.getDate(value));
-				this.init(value)
-			},
-			/**
-			 * 初始化日期显示
-			 * @param {Object} date
-			 */
-			init(date) {
-				this.cale.setDate(date)
-				this.weeks = this.cale.weeks
-				this.nowDate = this.calendar = this.cale.getInfo(date)
-			},
-			/**
-			 * 打开日历弹窗
-			 */
-			open() {
-				// 弹窗模式并且清理数据
-				if (this.clearDate && !this.insert) {
-					this.cale.cleanMultipleStatus()
-					// this.cale.setDate(this.date)
-					this.init(this.date)
-				}
-				this.show = true
-				this.$nextTick(() => {
-					setTimeout(() => {
-						this.aniMaskShow = true
-					}, 50)
-				})
-			},
-			/**
-			 * 关闭日历弹窗
-			 */
-			close() {
-				this.aniMaskShow = false
-				this.$nextTick(() => {
-					setTimeout(() => {
-						this.show = false
-						this.$emit('close')
-					}, 300)
-				})
-			},
-			/**
-			 * 确认按钮
-			 */
-			confirm() {
-				this.setEmit('confirm')
-				this.close()
-			},
-			/**
-			 * 变化触发
-			 */
-			change() {
-				if (!this.insert) return
-				this.getFoldIndex()
-				this.setEmit('change')
-			},
-			/// 获取缩进后显示的行号
-			getFoldIndex() {
-				var _selectedData = this.nowDate.fullDate
-				if (this.calendar.fullDate === undefined) {
-					_selectedData = this.calendar.fullDate
-				}
-				for (let index in this.weeks) {
-					let days = this.weeks[index].map((e)=>e.fullDate)
-					if (days.indexOf(this.calendar.fullDate) !== -1) {
-						this.foldIndex = index
-					}
-				}
-			},
-			/**
-			 * 选择月份触发
-			 */
-			monthSwitch() {
-				let {
-					year,
-					month
-				} = this.nowDate
-				this.$emit('monthSwitch', {
-					year,
-					month: Number(month)
-				})
-			},
-			/**
-			 * 派发事件
-			 * @param {Object} name
-			 */
-			setEmit(name) {
-				let {
-					year,
-					month,
-					date,
-					fullDate,
-					lunar,
-					extraInfo
-				} = this.calendar
-				this.$emit(name, {
-					range: this.cale.multipleStatus,
-					year,
-					month,
-					date,
-					fulldate: fullDate,
-					lunar,
-					extraInfo: extraInfo || {}
-				})
-			},
-			/**
-			 * 选择天触发
-			 * @param {Object} weeks
-			 */
-			choiceDate(weeks) {
-				console.log('fuck')
-				if (weeks.disable) return
-				this.calendar = weeks
-				// 设置多选
-				this.cale.setMultiple(this.calendar.fullDate)
-				this.weeks = this.cale.weeks
-				this.change()
-			},
-			/**
-			 * 回到今天
-			 */
-			backtoday() {
-				console.log(this.cale.getDate(new Date()).fullDate);
-				let date = this.cale.getDate(new Date()).fullDate
-				// this.cale.setDate(date)
-				this.init(date)
-				this.change()
-			},
-			/**
-			 * 上个月
-			 */
-			pre() {
-				const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate
-				this.setDate(preDate)
-				this.monthSwitch()
-				this.fold = false
-			},
-			/**
-			 * 下个月
-			 */
-			next() {
-				const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate
-				this.setDate(nextDate)
-				this.monthSwitch()
-				this.fold = false
-			},
-			/**
-			 * 设置日期
-			 * @param {Object} date
-			 */
-			setDate(date) {
-				this.cale.setDate(date)
-				this.weeks = this.cale.weeks
-				this.nowDate = this.cale.getInfo(date)
-			},
-			/// 展开按钮点击事件
-			foldBtnDidClick() {
-				this.fold = !this.fold
-				this.showMonthed = !this.fold
-			},
-			handleTouchstart(e) {
-			     //记录用户按下的时间
-			     this.startTime = Date.now();
-			     //记录用户按下的坐标
-			     this.startX = e.changedTouches[0].clientX;
-			     this.startY = e.changedTouches[0].clientY;
-				},
-			handleTouchend(e) {
-			    const endTime = Date.now();
-			    const endX = e.changedTouches[0].clientX;
-			    if (Math.abs(endX - this.startX) < 10) return
-			    if (endX - this.startX < 0) {
-					this.next();
-				} else {
-					this.pre();
-				}
-			},
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	.uni-calendar {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: column;
-	}
-
-	.uni-calendar__mask {
-		position: fixed;
-		bottom: 0;
-		top: 0;
-		left: 0;
-		right: 0;
-		background-color: $uni-bg-color-mask;
-		transition-property: opacity;
-		transition-duration: 0.3s;
-		opacity: 0;
-		/* #ifndef APP-NVUE */
-		z-index: 99;
-		/* #endif */
-	}
-
-	.uni-calendar--mask-show {
-		opacity: 1
-	}
-
-	.uni-calendar--fixed {
-		position: fixed;
-		bottom: calc(var(--window-bottom));
-		left: 0;
-		right: 0;
-		transition-property: transform;
-		transition-duration: 0.3s;
-		transform: translateY(460px);
-		/* #ifndef APP-NVUE */
-		z-index: 99;
-		/* #endif */
-	}
-
-	.uni-calendar--ani-show {
-		transform: translateY(0);
-	}
-
-	.uni-calendar__content {
-		background-color: #fff;
-	}
-
-	.uni-calendar__header {
-		position: relative;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		justify-content: center;
-		align-items: center;
-		height: 50px;
-		border-bottom-color: $uni-border-color;
-		border-bottom-style: solid;
-		border-bottom-width: 1px;
-	}
-
-	.uni-calendar--fixed-top {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		justify-content: space-between;
-		border-top-color: $uni-border-color;
-		border-top-style: solid;
-		border-top-width: 1px;
-	}
-
-	.uni-calendar--fixed-width {
-		width: 50px;
-		// padding: 0 15px;
-	}
-
-	.uni-calendar__backtoday {
-		position: absolute;
-		right: 0;
-		top: 25rpx;
-		padding: 0 5px;
-		padding-left: 10px;
-		height: 25px;
-		line-height: 25px;
-		font-size: 12px;
-		border-top-left-radius: 25px;
-		border-bottom-left-radius: 25px;
-		color: $uni-text-color;
-		background-color: $uni-bg-color-hover;
-	}
-
-	.uni-calendar__header-text {
-		text-align: center;
-		width: 100px;
-		font-size: $uni-font-size-base;
-		color: $uni-text-color;
-	}
-
-	.uni-calendar__header-btn-box {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		align-items: center;
-		justify-content: center;
-		width: 50px;
-		height: 50px;
-	}
-
-	.uni-calendar__header-btn {
-		width: 10px;
-		height: 10px;
-		border-left-color: $uni-text-color-placeholder;
-		border-left-style: solid;
-		border-left-width: 2px;
-		border-top-color: $uni-color-subtitle;
-		border-top-style: solid;
-		border-top-width: 2px;
-	}
-
-	.uni-calendar--left {
-		transform: rotate(-45deg);
-	}
-
-	.uni-calendar--right {
-		transform: rotate(135deg);
-	}
-
-
-	.uni-calendar__weeks {
-		position: relative;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-	}
+			<view v-if="foldAble" class="uni-calendar__footer"><u-icon :name="fold ? 'arrow-down' : 'arrow-up'" @tap="foldBtnDidClick" size="20"></u-icon></view>
+		</view>
+	</view>
+</template>
 
-	.uni-calendar__weeks-box {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		flex: 1;
-	}
-
-	.uni-calendar__weeks-item {
-		flex: 1;
-	}
-
-	.uni-calendar__weeks-day {
-		flex: 1;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		height: 45px;
-		border-bottom-color: #F5F5F5;
-		border-bottom-style: solid;
-		border-bottom-width: 1px;
-	}
-
-	.uni-calendar__weeks-day-text {
-		font-size: 14px;
-	}
-
-	.uni-calendar__box {
-		position: relative;
-	}
-
-	.uni-calendar__box-bg {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		justify-content: center;
-		align-items: center;
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-	}
-
-	.uni-calendar__box-bg-text {
-		font-size: 200px;
-		font-weight: bold;
-		color: $uni-text-color-grey;
-		opacity: 0.1;
-		text-align: center;
-		/* #ifndef APP-NVUE */
-		line-height: 1;
-		/* #endif */
-	}
-	
-	.uni-calendar__footer {
-		display: flex;
-		flex-direction: row;
-		justify-content: center;
-		align-items: center;
+<script>
+import Calendar from './util.js';
+import calendarItem from './uni-calendar-item.vue';
+
+/**
+ * Calendar 日历
+ * @description 日历组件可以查看日期，选择任意范围内的日期，打点操作。常用场景如：酒店日期预订、火车机票选择购买日期、上下班打卡等
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=56
+ * @property {String} date 自定义当前时间，默认为今天
+ * @property {Boolean} lunar 显示农历
+ * @property {String} startDate 日期选择范围-开始日期
+ * @property {String} endDate 日期选择范围-结束日期
+ * @property {Boolean} range 范围选择
+ * @property {Boolean} insert = [true|false] 插入模式,默认为false
+ * 	@value true 弹窗模式
+ * 	@value false 插入模式
+ * @property {Boolean} clearDate = [true|false] 弹窗模式是否清空上次选择内容
+ * @property {Array} selected 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]
+ * @property {Boolean} showMonth 是否选择月份为背景
+ * @event {Function} change 日期改变，`insert :ture` 时生效
+ * @event {Function} confirm 确认选择`insert :false` 时生效
+ * @event {Function} monthSwitch 切换月份时触发
+ * @example <uni-calendar :insert="true":lunar="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" />
+ */
+export default {
+	components: {
+		calendarItem
+	},
+	emits: ['close', 'confirm', 'change', 'monthSwitch'],
+	props: {
+		date: {
+			type: String,
+			default: ''
+		},
+		selected: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		lunar: {
+			type: Boolean,
+			default: false
+		},
+		startDate: {
+			type: String,
+			default: ''
+		},
+		endDate: {
+			type: String,
+			default: ''
+		},
+		range: {
+			type: Boolean,
+			default: false
+		},
+		insert: {
+			type: Boolean,
+			default: true
+		},
+		showMonth: {
+			type: Boolean,
+			default: false
+		},
+		clearDate: {
+			type: Boolean,
+			default: true
+		},
+		/// 是否能够折叠
+		foldAble: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			show: false,
+			weeks: [],
+			calendar: {},
+			nowDate: '',
+			aniMaskShow: false,
+			fold: true,
+			showMonthed: false,
+			foldIndex: -1,
+			startTime: 0,
+			startX: 0,
+			startY: 0
+		};
+	},
+	computed: {
+		/**
+		 * for i18n
+		 */
+
+		okText() {
+			return this.$i18n.t('uni-calender.ok');
+		},
+		cancelText() {
+			return this.$i18n.t('uni-calender.cancel');
+		},
+		todayText() {
+			return this.$i18n.t('uni-calender.today');
+		},
+		monText() {
+			return this.$i18n.t('uni-calender.MON');
+		},
+		TUEText() {
+			return this.$i18n.t('uni-calender.TUE');
+		},
+		WEDText() {
+			return this.$i18n.t('uni-calender.WED');
+		},
+		THUText() {
+			return this.$i18n.t('uni-calender.THU');
+		},
+		FRIText() {
+			return this.$i18n.t('uni-calender.FRI');
+		},
+		SATText() {
+			return this.$i18n.t('uni-calender.SAT');
+		},
+		SUNText() {
+			return this.$i18n.t('uni-calender.SUN');
+		}
+	},
+	watch: {
+		date(newVal) {
+			// this.cale.setDate(newVal)
+			this.init(newVal);
+		},
+		startDate(val) {
+			this.cale.resetSatrtDate(val);
+			this.cale.setDate(this.nowDate.fullDate);
+			this.weeks = this.cale.weeks;
+		},
+		endDate(val) {
+			this.cale.resetEndDate(val);
+			this.cale.setDate(this.nowDate.fullDate);
+			this.weeks = this.cale.weeks;
+		},
+		selected(newVal) {
+			this.cale.setSelectInfo(this.nowDate.fullDate, newVal);
+			this.weeks = this.cale.weeks;
+		}
+	},
+	created() {
+		// 获取日历方法实例
+		this.cale = new Calendar({
+			// date: new Date(),
+			selected: this.selected,
+			startDate: this.startDate,
+			endDate: this.endDate,
+			range: this.range
+		});
+		// 选中某一天
+		// this.cale.setDate(this.date)
+		this.init(this.date);
+		this.showMonthed = this.showMonth;
+		this.getFoldIndex();
+	},
+	methods: {
+		// 取消穿透
+		clean() {},
+		bindDateChange(e) {
+			const value = e.detail.value + '-1';
+			console.log(this.cale.getDate(value));
+			this.init(value);
+		},
+		/**
+		 * 初始化日期显示
+		 * @param {Object} date
+		 */
+		init(date) {
+			this.cale.setDate(date);
+			this.weeks = this.cale.weeks;
+			this.nowDate = this.calendar = this.cale.getInfo(date);
+		},
+		/**
+		 * 打开日历弹窗
+		 */
+		open() {
+			// 弹窗模式并且清理数据
+			if (this.clearDate && !this.insert) {
+				this.cale.cleanMultipleStatus();
+				// this.cale.setDate(this.date)
+				this.init(this.date);
+			}
+			this.show = true;
+			this.$nextTick(() => {
+				setTimeout(() => {
+					this.aniMaskShow = true;
+				}, 50);
+			});
+		},
+		/**
+		 * 关闭日历弹窗
+		 */
+		close() {
+			this.aniMaskShow = false;
+			this.$nextTick(() => {
+				setTimeout(() => {
+					this.show = false;
+					this.$emit('close');
+				}, 300);
+			});
+		},
+		/**
+		 * 确认按钮
+		 */
+		confirm() {
+			this.setEmit('confirm');
+			this.close();
+		},
+		/**
+		 * 变化触发
+		 */
+		change() {
+			if (!this.insert) return;
+			this.getFoldIndex();
+			this.setEmit('change');
+		},
+		/// 获取缩进后显示的行号
+		getFoldIndex() {
+			var _selectedData = this.nowDate.fullDate;
+			if (this.calendar.fullDate === undefined) {
+				_selectedData = this.calendar.fullDate;
+			}
+			for (let index in this.weeks) {
+				let days = this.weeks[index].map(e => e.fullDate);
+				if (days.indexOf(this.calendar.fullDate) !== -1) {
+					this.foldIndex = index;
+				}
+			}
+		},
+		/**
+		 * 选择月份触发
+		 */
+		monthSwitch() {
+			let { year, month } = this.nowDate;
+			this.$emit('monthSwitch', {
+				year,
+				month: Number(month)
+			});
+		},
+		/**
+		 * 派发事件
+		 * @param {Object} name
+		 */
+		setEmit(name) {
+			let { year, month, date, fullDate, lunar, extraInfo } = this.calendar;
+			this.$emit(name, {
+				range: this.cale.multipleStatus,
+				year,
+				month,
+				date,
+				fulldate: fullDate,
+				lunar,
+				extraInfo: extraInfo || {}
+			});
+		},
+		/**
+		 * 选择天触发
+		 * @param {Object} weeks
+		 */
+		choiceDate(weeks) {
+			console.log('fuck');
+			if (weeks.disable) return;
+			this.calendar = weeks;
+			// 设置多选
+			this.cale.setMultiple(this.calendar.fullDate);
+			this.weeks = this.cale.weeks;
+			this.change();
+		},
+		/**
+		 * 回到今天
+		 */
+		backtoday() {
+			console.log(this.cale.getDate(new Date()).fullDate);
+			let date = this.cale.getDate(new Date()).fullDate;
+			// this.cale.setDate(date)
+			this.init(date);
+			this.change();
+		},
+		/**
+		 * 上个月
+		 */
+		pre() {
+			const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate;
+			this.setDate(preDate);
+			this.monthSwitch();
+			this.fold = false;
+		},
+		/**
+		 * 下个月
+		 */
+		next() {
+			const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate;
+			this.setDate(nextDate);
+			this.monthSwitch();
+			this.fold = false;
+		},
+		/**
+		 * 设置日期
+		 * @param {Object} date
+		 */
+		setDate(date) {
+			this.cale.setDate(date);
+			this.weeks = this.cale.weeks;
+			this.nowDate = this.cale.getInfo(date);
+		},
+		/// 展开按钮点击事件
+		foldBtnDidClick() {
+			this.fold = !this.fold;
+			this.showMonthed = !this.fold;
+		},
+		handleTouchstart(e) {
+			//记录用户按下的时间
+			this.startTime = Date.now();
+			//记录用户按下的坐标
+			this.startX = e.changedTouches[0].clientX;
+			this.startY = e.changedTouches[0].clientY;
+		},
+		handleTouchend(e) {
+			const endTime = Date.now();
+			const endX = e.changedTouches[0].clientX;
+			if (Math.abs(endX - this.startX) < 10) return;
+			if (endX - this.startX < 0) {
+				this.next();
+			} else {
+				this.pre();
+			}
+		}
 	}
-	
-</style>
+};
+</script>
+
+<style lang="scss" scoped>
+.uni-calendar {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: column;
+}
+
+.uni-calendar__mask {
+	position: fixed;
+	bottom: 0;
+	top: 0;
+	left: 0;
+	right: 0;
+	background-color: $uni-bg-color-mask;
+	transition-property: opacity;
+	transition-duration: 0.3s;
+	opacity: 0;
+	/* #ifndef APP-NVUE */
+	z-index: 99;
+	/* #endif */
+}
+
+.uni-calendar--mask-show {
+	opacity: 1;
+}
+
+.uni-calendar--fixed {
+	position: fixed;
+	bottom: calc(var(--window-bottom));
+	left: 0;
+	right: 0;
+	transition-property: transform;
+	transition-duration: 0.3s;
+	transform: translateY(460px);
+	/* #ifndef APP-NVUE */
+	z-index: 99;
+	/* #endif */
+}
+
+.uni-calendar--ani-show {
+	transform: translateY(0);
+}
+
+.uni-calendar__content {
+	background-color: #fff;
+}
+
+.uni-calendar__header {
+	position: relative;
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	height: 50px;
+	border-bottom-color: $uni-border-color;
+	border-bottom-style: solid;
+	border-bottom-width: 1px;
+}
+
+.uni-calendar--fixed-top {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: row;
+	justify-content: space-between;
+	border-top-color: $uni-border-color;
+	border-top-style: solid;
+	border-top-width: 1px;
+}
+
+.uni-calendar--fixed-width {
+	width: 50px;
+	// padding: 0 15px;
+}
+
+.uni-calendar__backtoday {
+	position: absolute;
+	right: 0;
+	top: 25rpx;
+	padding: 0 5px;
+	padding-left: 10px;
+	height: 25px;
+	line-height: 25px;
+	font-size: 12px;
+	border-top-left-radius: 25px;
+	border-bottom-left-radius: 25px;
+	color: $uni-text-color;
+	background-color: $uni-bg-color-hover;
+}
+
+.uni-calendar__header-text {
+	text-align: center;
+	width: 100px;
+	font-size: $uni-font-size-base;
+	color: $uni-text-color;
+}
+
+.uni-calendar__header-btn-box {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	width: 50px;
+	height: 50px;
+}
+
+.uni-calendar__header-btn {
+	width: 10px;
+	height: 10px;
+	border-left-color: $uni-text-color-placeholder;
+	border-left-style: solid;
+	border-left-width: 2px;
+	border-top-color: $uni-color-subtitle;
+	border-top-style: solid;
+	border-top-width: 2px;
+}
+
+.uni-calendar--left {
+	transform: rotate(-45deg);
+}
+
+.uni-calendar--right {
+	transform: rotate(135deg);
+}
+
+.uni-calendar__weeks {
+	position: relative;
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: row;
+}
+
+.uni-calendar__weeks-box {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: row;
+	flex: 1;
+}
+
+.uni-calendar__weeks-item {
+	flex: 1;
+}
+
+.uni-calendar__weeks-day {
+	flex: 1;
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	height: 45px;
+	border-bottom-color: #f5f5f5;
+	border-bottom-style: solid;
+	border-bottom-width: 1px;
+}
+
+.uni-calendar__weeks-day-text {
+	font-size: 14px;
+}
+
+.uni-calendar__box {
+	position: relative;
+}
+
+.uni-calendar__box-bg {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	justify-content: center;
+	align-items: center;
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+}
+
+.uni-calendar__box-bg-text {
+	font-size: 200px;
+	font-weight: bold;
+	color: $uni-text-color-grey;
+	opacity: 0.1;
+	text-align: center;
+	/* #ifndef APP-NVUE */
+	line-height: 1;
+	/* #endif */
+}
+
+.uni-calendar__footer {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+}
+</style>

pages.json

@@ -35,8 +35,16 @@
 			"style": {
 				"navigationBarTitleText": "上传"
 			}
-		}
-	],
+		},
+	    {
+            "path" : "pages/test/livetest",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "直播测试",
+                "enablePullDownRefresh": false
+            }
+        }
+    ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "uni-app",

pages/calendar/index.vue

@@ -1,126 +1,149 @@
 <template>
 	<view class="calendar-page">
-		
 		<!-- 导航栏 -->
 		<u-navbar bgColor="red">
 			<view class="u-nav-slot" slot="left">
-				<text class="text-bold text-xxl text-white"> {{ $t('schedule') }} </text>
+				<text class="text-bold text-xxl text-white">{{ $t('schedule') }}</text>
+			</view>
+			<view class="u-nav-slot" slot="right">
+				<u-button @click="testBtnClick">直播测试</u-button>
 			</view>
-			<view class="u-nav-slot" slot="right"></view>
 		</u-navbar>
-		
-		 <uni-calendar insert foldAble :selected="selected" @change="change" />
-		 
-		 <u-gap height="120"/>
-		 <scroll-list ref="list" :option="option" @load="load" @refresh="refresh">
-		             <view class="list-item" v-for="(item, index) in list" :key="index">
-		                 <view class="avatar">{{ index + 1 }}</view>
-		                 <view class="info">
-		                     <view class="info-item"></view>
-		                     <view class="info-item"></view>
-		                 </view>
-		             </view>
-		         </scroll-list>
-		
+		<scroll-list ref="list" :option="option" @load="load" @refresh="refresh">
+			<!-- 日历 -->
+			<uni-calendar insert foldAble :selected="selected" @change="change" @monthSwitch="monthSwitch" />
+			<!-- hint -->
+			<view class="bg-gray flex justify-between align-center padding-lr-sm">
+				<view v-for="(item, index) in hints" :key="index">
+					<view class="flex justify-between align-center">
+						<view class="hint-icon" :style="{ 'background-color': item.color}"></view>
+						<text class="text-sm">{{ item.title }}</text>
+					</view>
+				</view>
+			</view>
+
+			<!-- 列表 -->
+			<view class="list-item" v-for="(item, index) in list" :key="index">
+				<view class="avatar">{{ index + 1 }}</view>
+				<view class="info">
+					<view class="info-item"></view>
+					<view class="info-item"></view>
+				</view>
+			</view>
+		</scroll-list>
 	</view>
 </template>
 
 <script>
-	import Api from '../../api/api.js'
-	import UniCalendar from "../../components/uni-calendar/uni-calendar.vue"
-	export default {
-		components:{
-			UniCalendar
+import Api from '../../api/api.js';
+import UniCalendar from '../../components/uni-calendar/uni-calendar.vue';
+export default {
+	components: {
+		UniCalendar
+	},
+	data() {
+		return {
+			currentDate: '',
+			show: false,
+			mode: 'range',
+			selected: [
+				{ date: '2022-01-05', info: '签到', data: { custom: '自定义信息', name: '自定义消息头' } },
+				{ date: '2022-01-09', info: '打卡', data: { custom: '自定义信息', name: '自定义消息头' } },
+				{ date: '2022-02-03', info: '打卡', data: { custom: '自定义信息', name: '自定义消息头' } }
+			],
+			option: {
+				size: 10,
+				auto: false
+			},
+			list: [],
+			hints: [
+				{ index: 0, color: 'red', title: '未上课' },
+				{ index: 1, color: 'green', title: '已上课' },
+				{ index: 2, color: 'blue', title: '未上完课' },
+				{ index: 3, color: 'grey', title: '班级取消' }
+			]
+		};
+	},
+	onReady() {},
+	mounted() {		// let now = new Date(
+		let now = new Date();
+		var year = now.getFullYear();
+		var month = now.getMonth() + 1;
+		month = `${month}`.padStart(2,0);
+		this.currentDate = `${year}${month}`; /// 202201
+		console.log(this.currentDate);
+
+		this.getClassSchedule();
+	},
+	methods: {
+		async getClassSchedule() {
+			Api.classSchedule(this.currentDate).then(res => {
+				console.log(res);
+			});
+		},
+		previousBtnDidClick() {
+			console.log('previousBtnDidClick');
 		},
-		data() {
-			return {
-				currentDate: '',
-				show: false,
-				mode: 'range',
-				selected: [
-					{date: '2022-01-05', info: '签到', data: { custom: '自定义信息', name: '自定义消息头' }},
-					{date: '2022-01-09', info: '打卡', data: { custom: '自定义信息', name: '自定义消息头' }},
-					{date: '2022-02-03', info: '打卡', data: { custom: '自定义信息', name: '自定义消息头' }},
-				],
-				option: {
-				                size: 5,
-				                auto: true
-				            },
-				list: []
-			}
+		nextBtnDidClick() {
+			console.log('nextBtnDidClick');
 		},
-		onReady() {
-			
+		change(e) {
+			console.log(e);
 		},
-		mounted() {
-			// let now = new Date()
-			// let ye = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(now)
-			// let mo = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(now)
-			// this.currentDate = `${ye}${mo}` /// 202201
-			
-			let now = new Date();
-			var year = now.getFullYear()
-			var month = now.getMonth()+1
-			this.currentDate = `${year}${month}` /// 202201
+		monthSwitch(e) {
+			this.currentDate = `${e.year}${e.month.toString().padStart(2,0)}`
 			console.log(this.currentDate)
-			
-			this.getClassSchedule()
+			this.getClassSchedule();
 		},
-		methods:{
-			async getClassSchedule() {
-				Api.classSchedule(this.currentDate).then(res=>{
-					console.log(res)
-				})
-			},
-			previousBtnDidClick(){
-				console.log('previousBtnDidClick')
-			},
-			nextBtnDidClick(){
-				console.log('nextBtnDidClick')
-			},
-			change(e) {
-				console.log(e)
-			},
-			uploadAction() {
-				uni.navigateTo({url: '../test/upload'})
-			},
-			monitoringBtnClick() {
-				uni.navigateTo({
-					url: '../launch/index'
-				})
-			},
-			// 加载数据
-			        load(paging) {
-			            setTimeout(() => {
-			                let list = [];
-			                for (var i = 0; i < paging.size; i++) {
-			                    list.push(i);
-			                }
-			                this.list = [...this.list, ...list];
-			                // 加载成功  参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
-			                this.$refs.list.loadSuccess({ list: this.list, total: 50 });
-			                // 加载失败
-			                // this.$refs.list.loadFail()
-			            }, this.$u.random(100, 1000));
-			        },
-			        // 刷新刷剧
-			        refresh(paging) {
-			            setTimeout(() => {
-			                let list = [];
-			                for (var i = 0; i < paging.size; i++) {
-			                    list.push(i);
-			                }
-			                this.list = list;
-			                // 刷新成功  参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
-			                this.$refs.list.refreshSuccess({ list: this.list, total: 50 });
-			                // 刷新失败
-			                // this.$refs.list.refreshFail()
-			            }, this.$u.random(100, 1000));
-			        }
+		testBtnClick() {
+			console.log('testBtnClick')
+			uni.navigateTo({
+				url: '../test/livetest'
+			});
+		},
+		// 加载数据
+		load(paging) {
+			setTimeout(() => {
+				let list = [];
+				for (var i = 0; i < paging.size; i++) {
+					list.push(i);
+				}
+				this.list = [...this.list, ...list];
+				// 加载成功  参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
+				this.$refs.list.loadSuccess({ list: this.list, total: 50 });
+				// 加载失败
+				// this.$refs.list.loadFail()
+			}, this.$u.random(100, 1000));
+		},
+		// 刷新刷剧
+		refresh(paging) {
+			setTimeout(() => {
+				let list = [];
+				for (var i = 0; i < paging.size; i++) {
+					list.push(i);
+				}
+				this.list = list;
+				// 刷新成功  参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
+				this.$refs.list.refreshSuccess({ list: this.list, total: 50 });
+				// 刷新失败
+				// this.$refs.list.refreshFail()
+			}, this.$u.random(100, 1000));
 		}
 	}
+};
 </script>
 
-
 <style scoped>
-</style>
+	.hint-box {
+		height: 5px;
+	}
+	.hint-item {
+		margin: 0 5px 0 5px;
+	}
+	.hint-icon {
+		width: 8px;
+		height: 8px;
+		border-radius: 50%;
+		margin-right: 5px;
+	}	
+</style>

pages/index/index.vue

@@ -1,52 +1,53 @@
 <template>
 	<view>
-		<tabbar-calendar v-if="selectedIndex==0"></tabbar-calendar>
-		<tabbar-message v-if="selectedIndex==1"></tabbar-message>
-		<tabbar-mine v-if="selectedIndex==2"></tabbar-mine>
-		<view class="cu-bar tabbar bg-white shadow foot">
-			<view v-for="item in tabItems" :index='item.index' class="action" @click="tabBarDidChange" :data-index="item.index">
-				<view class="cuIcon-cu-image">
-					<image :src="selectedIndex==item.index?item.image_selected:item.image" />
-				</view>
-				<view :class="selectedIndex==item.index?'text-red':'text-gray'"> {{ item.name }} </view>
-			</view>
-		</view>
+		<tabbar-calendar v-if="selectedIndex == 0"></tabbar-calendar>
+		<tabbar-message v-if="selectedIndex == 1"></tabbar-message>
+		<tabbar-mine v-if="selectedIndex == 2"></tabbar-mine>
+		<u-tabbar :value="selectedIndex" fixed placeholder safeAreaInsetBottom activeColor="#d81e06">
+			<u-tabbar-item
+				v-for="item in tabItems"
+				:index="item.index"
+				:text="item.name"
+				:icon="selectedIndex == item.index ? item.image_selected : item.image"
+				:class="selectedIndex==item.index?'text-red':'text-gray'"
+				@click="tabBarDidChange"
+			></u-tabbar-item>
+		</u-tabbar>
 	</view>
 </template>
 
 <script>
-	import TabbarMine from '../mine/index.vue'
-	import TabbarCalendar from '../calendar/index.vue'
-	import TabbarMessage from '../message/index.vue'
-	export default {
-		components: {
-			TabbarMine,
-			TabbarCalendar,
-			TabbarMessage
-		},
-		data() {
-			return {
-				PageCur: 'calendar',
-				selectedIndex: 0
-			}
-		},
-		computed: {
-			tabItems() {
-				return [
-					{ 'index': 0, 'name': this.$i18n.t('calendar'), 'image': '/static/tabbar/calendar.png', 'image_selected': '/static/tabbar/calendar_active.png'},
-					{ 'index': 1, 'name': this.$i18n.t('message'), 'image': '/static/tabbar/message.png', 'image_selected': '/static/tabbar/message_active.png'},
-					{ 'index': 2, 'name': this.$i18n.t('me'), 'image': '/static/tabbar/me.png', 'image_selected': '/static/tabbar/me_active.png'},
-				]
-			}
-		},
-		methods: {
-			tabBarDidChange(e) {
-				this.selectedIndex = e.currentTarget.dataset.index
-			}
+import TabbarMine from '../mine/index.vue';
+import TabbarCalendar from '../calendar/index.vue';
+import TabbarMessage from '../message/index.vue';
+export default {
+	components: {
+		TabbarMine,
+		TabbarCalendar,
+		TabbarMessage
+	},
+	data() {
+		return {
+			PageCur: 'calendar',
+			selectedIndex: 0
+		};
+	},
+	computed: {
+		tabItems() {
+			return [
+				{ index: 0, name: this.$i18n.t('calendar'), image: '/static/tabbar/calendar.png', image_selected: '/static/tabbar/calendar_active.png' },
+				{ index: 1, name: this.$i18n.t('message'), image: '/static/tabbar/message.png', image_selected: '/static/tabbar/message_active.png' },
+				{ index: 2, name: this.$i18n.t('me'), image: '/static/tabbar/me.png', image_selected: '/static/tabbar/me_active.png' }
+			];
+		}
+	},
+	methods: {
+		tabBarDidChange(e) {
+			console.log(e)
+			this.selectedIndex = e;
 		}
 	}
+};
 </script>
 
-<style>
-
-</style>
+<style></style>

pages/message/index.vue

@@ -1,90 +1,147 @@
 <template>
 	<view class="calendar-page">
-		
 		<!-- 导航栏 -->
 		<u-navbar bgColor="red">
 			<view class="u-nav-slot" slot="left">
-				<text class="text-bold text-xxl text-white"> {{ $t('schedule') }} </text>
+				<text class="text-bold text-xxl text-white">{{ $t('schedule') }}</text>
 			</view>
 			<view class="u-nav-slot" slot="right"></view>
 		</u-navbar>
-		
-		 <uni-calendar insert foldAble :selected="selected" @change="change" />
-		 
-		 <u-gap height="120"/>
-		 <button class="cu-btn block bg-red margin-tb-sm lg radio" @click="uploadAction">
-		 	<text> 上传 </text>
-		 </button>
-		 <button class="cu-btn block bg-red margin-tb-sm lg radio" @click="monitoringBtnClick">
-		 	<text> 监控 </text>
-		 </button>
-		
+		<!-- 日历 -->
+		<uni-calendar insert foldAble :selected="selected" @change="change" />
+		<!-- hint -->
+		<view class="bg-gray flex justify-between align-center padding-lr-sm">
+			<view v-for="(item, index) in hints" :key="index">
+				<view class="flex justify-between align-center">
+					<view class="hint-icon" :style="{ 'background-color': item.color}"></view>
+					<text class="text-sm">{{ item.title }}</text>
+				</view>
+			</view>
+		</view>
+		<!-- 列表 -->
+		<scroll-list ref="list" :option="option" @load="load" @refresh="refresh">
+			<view class="list-item" v-for="(item, index) in list" :key="index">
+				<view class="avatar">{{ index + 1 }}</view>
+				<view class="info">
+					<view class="info-item"></view>
+					<view class="info-item"></view>
+				</view>
+			</view>
+		</scroll-list>
 	</view>
 </template>
 
 <script>
-	import Api from '../../api/api.js'
-	import UniCalendar from "../../components/uni-calendar/uni-calendar.vue"
-	export default {
-		components:{
-			UniCalendar
+import Api from '../../api/api.js';
+import UniCalendar from '../../components/uni-calendar/uni-calendar.vue';
+export default {
+	components: {
+		UniCalendar
+	},
+	data() {
+		return {
+			currentDate: '',
+			show: false,
+			mode: 'range',
+			selected: [
+				{ date: '2022-01-05', info: '签到', data: { custom: '自定义信息', name: '自定义消息头' } },
+				{ date: '2022-01-09', info: '打卡', data: { custom: '自定义信息', name: '自定义消息头' } },
+				{ date: '2022-02-03', info: '打卡', data: { custom: '自定义信息', name: '自定义消息头' } }
+			],
+			option: {
+				size: 10,
+				auto: false
+			},
+			list: [],
+			hints: [
+				{ index: 0, color: 'red', title: '未上课' },
+				{ index: 1, color: 'green', title: '已上课' },
+				{ index: 2, color: 'blue', title: '未上完课' },
+				{ index: 3, color: 'grey', title: '班级取消' }
+			]
+		};
+	},
+	onReady() {},
+	mounted() {
+		// let now = new Date()
+		// let ye = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(now)
+		// let mo = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(now)
+		// this.currentDate = `${ye}${mo}` /// 202201
+
+		let now = new Date();
+		var year = now.getFullYear();
+		var month = now.getMonth() + 1;
+		this.currentDate = `${year}${month}`; /// 202201
+		console.log(this.currentDate);
+
+		this.getClassSchedule();
+	},
+	methods: {
+		async getClassSchedule() {
+			Api.classSchedule(this.currentDate).then(res => {
+				console.log(res);
+			});
 		},
-		data() {
-			return {
-				currentDate: '',
-				show: false,
-				mode: 'range',
-				selected: [
-					{date: '2022-01-05', info: '签到', data: { custom: '自定义信息', name: '自定义消息头' }},
-					{date: '2022-01-09', info: '打卡', data: { custom: '自定义信息', name: '自定义消息头' }},
-					{date: '2022-02-03', info: '打卡', data: { custom: '自定义信息', name: '自定义消息头' }},
-				]
-			}
+		previousBtnDidClick() {
+			console.log('previousBtnDidClick');
 		},
-		onReady() {
-			
+		nextBtnDidClick() {
+			console.log('nextBtnDidClick');
 		},
-		mounted() {
-			// let now = new Date()
-			// let ye = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(now)
-			// let mo = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(now)
-			// this.currentDate = `${ye}${mo}` /// 202201
-			
-			let now = new Date();
-			var year = now.getFullYear()
-			var month = now.getMonth()+1
-			this.currentDate = `${year}${month}` /// 202201
-			console.log(this.currentDate)
-			
-			this.getClassSchedule()
+		change(e) {
+			console.log(e);
 		},
-		methods:{
-			async getClassSchedule() {
-				Api.classSchedule(this.currentDate).then(res=>{
-					console.log(res)
-				})
-			},
-			previousBtnDidClick(){
-				console.log('previousBtnDidClick')
-			},
-			nextBtnDidClick(){
-				console.log('nextBtnDidClick')
-			},
-			change(e) {
-				console.log(e)
-			},
-			uploadAction() {
-				uni.navigateTo({url: '../test/upload'})
-			},
-			monitoringBtnClick() {
-				uni.navigateTo({
-					url: '../launch/index'
-				})
-			}
+		uploadAction() {
+			uni.navigateTo({ url: '../test/upload' });
+		},
+		monitoringBtnClick() {
+			uni.navigateTo({
+				url: '../launch/index'
+			});
+		},
+		// 加载数据
+		load(paging) {
+			setTimeout(() => {
+				let list = [];
+				for (var i = 0; i < paging.size; i++) {
+					list.push(i);
+				}
+				this.list = [...this.list, ...list];
+				// 加载成功  参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
+				this.$refs.list.loadSuccess({ list: this.list, total: 50 });
+				// 加载失败
+				// this.$refs.list.loadFail()
+			}, this.$u.random(100, 1000));
+		},
+		// 刷新刷剧
+		refresh(paging) {
+			setTimeout(() => {
+				let list = [];
+				for (var i = 0; i < paging.size; i++) {
+					list.push(i);
+				}
+				this.list = list;
+				// 刷新成功  参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
+				this.$refs.list.refreshSuccess({ list: this.list, total: 50 });
+				// 刷新失败
+				// this.$refs.list.refreshFail()
+			}, this.$u.random(100, 1000));
 		}
 	}
+};
 </script>
 
-
 <style scoped>
-</style>
+	.hint-box {
+		height: 5px;
+	}
+	.hint-item {
+		margin: 0 5px 0 5px;
+	}
+	.hint-icon {
+		width: 8px;
+		height: 8px;
+		border-radius: 50%;
+		margin-right: 5px;
+	}	
+</style>

pages/mine/index.vue

@@ -35,8 +35,6 @@
 				</view>
 			</view>		
 		</view>
-		
-		<!-- <button class="u-button--primary" type="default" @click="back">back</button> -->
 	</view>
 </template>
 

pages/test/livetest.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

unpackage/dist/dev/app-plus/app-config-service.js

@@ -1,8 +1,8 @@
 
 var isReady=false;var onReadyCallbacks=[];
 var isServiceReady=false;var onServiceReadyCallbacks=[];
-var __uniConfig = {"pages":["pages/launch/index","pages/login/index","pages/index/index","pages/login/env_page","pages/mine/setting","pages/test/upload"],"window":{"navigationBarTextStyle":"black","navigationBarTitleText":"uni-app","navigationBarBackgroundColor":"#F8F8F8","backgroundColor":"#F8F8F8","enablePullDownRefresh":false},"nvueCompiler":"uni-app","nvueStyleCompiler":"uni-app","renderer":"auto","splashscreen":{"alwaysShowBeforeRender":true,"autoclose":false},"appname":"i2School","compilerVersion":"3.3.5","entryPagePath":"pages/launch/index","networkTimeout":{"request":60000,"connectSocket":60000,"uploadFile":60000,"downloadFile":60000}};
-var __uniRoutes = [{"path":"/pages/launch/index","meta":{"isQuit":true},"window":{"navigationStyle":"custom"}},{"path":"/pages/login/index","meta":{},"window":{"navigationStyle":"custom"}},{"path":"/pages/index/index","meta":{},"window":{"navigationStyle":"custom"}},{"path":"/pages/login/env_page","meta":{},"window":{"navigationBarTitleText":"开发者工具"}},{"path":"/pages/mine/setting","meta":{},"window":{"navigationBarTitleText":"设置"}},{"path":"/pages/test/upload","meta":{},"window":{"navigationBarTitleText":"上传"}}];
+var __uniConfig = {"pages":["pages/launch/index","pages/login/index","pages/index/index","pages/login/env_page","pages/mine/setting","pages/test/upload","pages/test/livetest"],"window":{"navigationBarTextStyle":"black","navigationBarTitleText":"uni-app","navigationBarBackgroundColor":"#F8F8F8","backgroundColor":"#F8F8F8","enablePullDownRefresh":false},"nvueCompiler":"uni-app","nvueStyleCompiler":"uni-app","renderer":"auto","splashscreen":{"alwaysShowBeforeRender":true,"autoclose":false},"appname":"i2School","compilerVersion":"3.3.11","entryPagePath":"pages/launch/index","networkTimeout":{"request":60000,"connectSocket":60000,"uploadFile":60000,"downloadFile":60000}};
+var __uniRoutes = [{"path":"/pages/launch/index","meta":{"isQuit":true},"window":{"navigationStyle":"custom"}},{"path":"/pages/login/index","meta":{},"window":{"navigationStyle":"custom"}},{"path":"/pages/index/index","meta":{},"window":{"navigationStyle":"custom"}},{"path":"/pages/login/env_page","meta":{},"window":{"navigationBarTitleText":"开发者工具"}},{"path":"/pages/mine/setting","meta":{},"window":{"navigationBarTitleText":"设置"}},{"path":"/pages/test/upload","meta":{},"window":{"navigationBarTitleText":"上传"}},{"path":"/pages/test/livetest","meta":{},"window":{"navigationBarTitleText":"直播测试","enablePullDownRefresh":false}}];
 __uniConfig.onReady=function(callback){if(__uniConfig.ready){callback()}else{onReadyCallbacks.push(callback)}};Object.defineProperty(__uniConfig,"ready",{get:function(){return isReady},set:function(val){isReady=val;if(!isReady){return}const callbacks=onReadyCallbacks.slice(0);onReadyCallbacks.length=0;callbacks.forEach(function(callback){callback()})}});
 __uniConfig.onServiceReady=function(callback){if(__uniConfig.serviceReady){callback()}else{onServiceReadyCallbacks.push(callback)}};Object.defineProperty(__uniConfig,"serviceReady",{get:function(){return isServiceReady},set:function(val){isServiceReady=val;if(!isServiceReady){return}const callbacks=onServiceReadyCallbacks.slice(0);onServiceReadyCallbacks.length=0;callbacks.forEach(function(callback){callback()})}});
 service.register("uni-app-config",{create(a,b,c){if(!__uniConfig.viewport){var d=b.weex.config.env.scale,e=b.weex.config.env.deviceWidth,f=Math.ceil(e/d);Object.assign(__uniConfig,{viewport:f,defaultFontSize:Math.round(f/20)})}return{instance:{__uniConfig:__uniConfig,__uniRoutes:__uniRoutes,global:void 0,window:void 0,document:void 0,frames:void 0,self:void 0,location:void 0,navigator:void 0,localStorage:void 0,history:void 0,Caches:void 0,screen:void 0,alert:void 0,confirm:void 0,prompt:void 0,fetch:void 0,XMLHttpRequest:void 0,WebSocket:void 0,webkit:void 0,print:void 0}}}});