LabCenter/pages/record/tutorialRecord.vue

<template>
	<view class="box u-skeleton">
		<u-skeleton :loading="loading" :animation="true"></u-skeleton>
		<view style="display: flex;flex-direction: column;position: fixed;top: 0;left: 0;width: 100%;">
			<view class="tabbar">
				<u-dropdown>
					<u-dropdown-item v-model="tabIndex"
						:title="tabbar[tabIndex].label=='全部' ?'类型' : tabbar[tabIndex].label" :options="tabbar"
						@change="tabClick"></u-dropdown-item>
					<u-dropdown-item v-model="typeIndex"
						:title="typeArr[typeIndex].label=='全部' ?'状态' : typeArr[typeIndex].label" :options="typeArr"
						@change="typeClick"></u-dropdown-item>
				</u-dropdown>
				<view class="top">
					<view>
						<text>日期：</text>
						<u-picker v-model="startshow" mode="time" safe-area-inset-bottom="true" :show-time-tag="false"
							@confirm="start_confirm"></u-picker>
						<text style="margin-right: 5px;" @click="startshow = true">{{starttime}}</text>
						<u-icon name="close-circle-fill" size="30" @click="closeTime" color="#ccc"
							v-if="starttime!='请选择'"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="message"  v-if="list.length>0">
			
				<view class="msg-li" v-for="(item,index) in list" :key="index">
					<view class="li-top">
						<text style="font-size: 15px;font-weight: bold;color: #333333;">{{item.lesson.name}}</text>
						<text class="status-text" v-if="item.status == 6"
							@click="lookCheckStep(item)">{{item.status_text}}</text>
						<text class="status-text-loading"
							v-if="item.status == 1 || item.status == 2 || item.status == 4"
							@click="lookCheckStep(item)">{{item.status_text}}</text>
						<text class="status-text-fail" v-if="item.status == 3 || item.status == 5"
							@click="lookCheckStep(item)">{{item.status_text}}</text>
						<text class="status-text-fail" v-if="item.status == 0 || item.status == 7"
							@click="lookCheckStep(item)">{{item.status_text}}</text>
					</view>
					<view class="li-center">
						<text>教师：{{item.schedule_data.teacher? item.schedule_data.teacher.name : '--'}} {{item.schedule_data.teacher ? item.schedule_data.teacher.username : '--'}}</text>
						<text>班级：{{item.schedule_data.grade.name}}</text>
						<text>原上课时间：{{item.schedule_data.day}} · 第{{item.schedule_data.week}}周 · {{item.schedule_data.week_index}} · {{item.schedule_data.time.name}}节</text>
						<text v-if="item.type == 2">调整后时间：{{item.migrate_data.day}} · 第{{item.migrate_data.week}}周 · {{item.migrate_data.week_index}} · {{item.migrate_data.time.name}}节</text>
						<text>申请类型：
							<text style="color: #ff4d4f;" v-if="item.type == 1">停课</text>
							<text style="color: #ffba00;" v-if="item.type == 2">调课</text>
							<text style="color: #3665FF;" v-if="item.type == 3">补课</text>
						</text>
					</view>
					<view class="li-bottom" @click="detail(item.id)">
						<text style="font-size: 13px;font-weight: 400;color: #333;">申请时间：{{item.created_at}}</text>
						<view>
							<text>查看详情</text>
						</view>
					</view>
				</view>

			
			<view class="look-steps" @click="handleStep" v-if="!startshow">
				<image src="../../static/image/mine/icon_8.png" mode=""></image>
			</view>
			<u-loadmore :status="statuss" :load-text="loadText" icon="true" v-if="!tabShow && !show" />
		</view>
		<view class="empty" v-else style="padding-top: 110px;">
			<u-empty text="暂无记录~" mode="favor"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				startshow: false,
				starttime: '请选择',
				tabbar: [{
						label: '全部',
						value: 0
					},
					{
						label: '待院系审核',
						value: 1
					},
					{
						label: '待实验中心审核',
						value: 2
					},
					{
						label: '院系审核失败',
						value: 3
					},
					{
						label: '实验中心审核通过',
						value: 4
					},
					{
						label: '实验中心审核失败',
						value: 5
					},
					{
						label: '已完成',
						value: 6
					},
				],
				tabIndex: 0,
				typeArr: [{
						label: '全部',
						value: 0
					},
					{
						label: '停课',
						value: 1
					},
					{
						label: '调课',
						value: 2
					},
					{
						label: '补课',
						value: 3
					},
				],
				typeIndex: 0,
				show: false,
				tabShow: false,
				list: '',
				statuss: 'loadmore',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				page: 1,
				meta: '',
				loading: true
			}
		},
		methods: {
			//查看流程
			handleStep() {
				uni.navigateTo({
					url: '/pages/record/handlesteps'
				})
			},
			//查看停调补课审核进度
			lookCheckStep(item) {
				console.log(11)
				uni.navigateTo({
					url: '/pages/index/checkStep?id=' + item.id + '&time=' + item.created_at + '&apply_name=' +
						(item.admin ? item.admin.name : '--')
				})
			},
			start_confirm(e) {
				//开始时间确认事件
				console.log(e, 'chufale')
				this.starttime = e.year + '-' + e.month + '-' + e.day
				this.lists()
			},
			closeTime() {
				this.starttime = '请选择'
				this.lists()
			},
			detail(id) {
				//查看详情事件
				uni.navigateTo({
					url: '/pages/record/tutorialDetail?id=' + id
				})
			},
			typeClick(index) {
				//选择类型点击事件
				this.typeIndex = index;
				this.show = false;
				this.lists()
			},
			tabClick(index) {
				this.tabIndex = index;
				this.tabShow = false;
				this.lists()
			},
			lists() {
				var data = {
					type: this.typeIndex == 0 ? '' : this.typeIndex,
					status: this.tabIndex == 0 ? '' : this.tabIndex,
					created_at: this.starttime == '请选择' ? '' : this.starttime
				}
				this.$u.get('/school/schedule/record', data).then(res => {
					console.log(res)
					var list = res.data.list;
					this.loading = false;
					this.meta = res.data.meta.pagination;
					if (res.data.list.length < 10) {
						this.statuss = 'nomore'
					}
					list.map((item) => {
						if (item.migrate_data != null) {
							switch (item.migrate_data.week_index) {
								case 0:
									item.migrate_data.week_index = '星期一'
									break
								case 1:
									item.migrate_data.week_index = '星期二'
									break
								case 2:
									item.migrate_data.week_index = '星期三'
									break
								case 3:
									item.migrate_data.week_index = '星期四'
									break
								case 4:
									item.migrate_data.week_index = '星期五'
									break
								case 5:
									item.migrate_data.week_index = '星期六'
									break
								case 6:
									item.migrate_data.week_index = '星期日'
									break
							}
						}
						switch (item.schedule_data.week_index) {
							case 0:
								item.schedule_data.week_index = '星期一'
								break
							case 1:
								item.schedule_data.week_index = '星期二'
								break
							case 2:
								item.schedule_data.week_index = '星期三'
								break
							case 3:
								item.schedule_data.week_index = '星期四'
								break
							case 4:
								item.schedule_data.week_index = '星期五'
								break
							case 5:
								item.schedule_data.week_index = '星期六'
								break
							case 6:
								item.schedule_data.week_index = '星期日'
								break
						}
						return item
					})
					this.list = res.data.list;
				})
			},
			// 获取弹出框选择的部门
			getValue(e) {
				console.log(e);
			},

		},
		onLoad() {
			console.log(11)
			this.lists()
		},
		onPullDownRefresh() {
			this.lists()
			this.page = 1;
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			this.statuss = 'loading';
			var page = this.page;
			if (page >= this.meta.total_pages) {
				this.statuss = 'nomore';
			} else {
				var data = {
					type: this.typeIndex == 0 ? '' : this.typeIndex,
					status: this.tabIndex == 0 ? '' : this.tabIndex,
					page: Number(page + 1)
				}
				this.$u.get('/school/schedule/record', data).then(res => {
					console.log(res)
					this.list = this.list.concat(res.data.list);
					this.page = ++page;
				})
				this.statuss = 'loading';
			}
		},

	}
</script>

<style lang="scss" scoped>
	.box {
		background: #F9F9F9;
		min-height: 100vh;
		padding-bottom: 30px;
		box-sizing: border-box;

		.top {
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: absolute;
			right: 10px;
			z-index: 11;
		}

		.tabbar {
			width: 100%;
			height: 46px;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			position: relative;
		}

		.message {
			width: 91.5%;
			display: flex;
			flex-direction: column;
			margin: 0 auto;
			padding-top: 46px;

			.msg-li {
				width: 100%;
				display: flex;
				flex-direction: column;
				padding: 12px 12px 9px 12px;
				box-sizing: border-box;
				background: white;
				margin-top: 12px;

				.li-top {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-bottom: 12px;
				}

				.li-center {
					padding: 7px 0px 12px 0px;
					border-top: 1px solid #F2F2F2;
					border-bottom: 1px solid #F2F2F2;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					font-size: 13px;
					color: #333;
					font-weight: 400;
					box-sizing: content-box;

					text {
						padding-top: 5px;
					}
				}

				.li-bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 9px;

					view {
						width: 64px;
						height: 28px;
						background: #3665FF;
						border-radius: 14px 14px 14px 14px;
						opacity: 1;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 12px;
						color: #FFFFFF;
						font-weight: 400;
					}
				}
			}
		}
	}

	.status-text {
		font-size: 12px;
		font-weight: 400;
		color: #13ce66;
	}

	.status-text-loading {
		font-size: 12px;
		font-weight: 400;
		color: #ffba00;
	}

	.status-text-fail {
		font-size: 12px;
		font-weight: 400;
		color: #ff4d4f;
	}

	//审核流程
	.look-steps {
		position: fixed;
		height: 45px;
		width: 45px;
		line-height: 45px;
		border-radius: 50%;
		background-color: #3665FF;
		// border: solid 1px #3665FF;
		right: 30px;
		text-align: center;
		cursor: pointer;
		bottom: 18vh;

		image {
			margin-top: 5px;
			width: 30px;
			height: 30px;
		}
	}
</style>