i2-school-employee-uniapp/pages/message/index.vue

<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>
			</view>
			<view class="u-nav-slot" slot="right"></view>
		</u-navbar>
		<!-- 日历 -->
		<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
	},
	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);
			});
		},
		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));
		}
	}
};
</script>

<style scoped>
	.hint-box {
		height: 5px;
	}
	.hint-item {
		margin: 0 5px 0 5px;
	}
	.hint-icon {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		margin-right: 5px;
	}	
</style>