yogaApp/pages/teacher/course.vue

<template>
	<view class="page">
		
		<uni-table class="courcon" ref="table" :loading="loading" emptyText="暂无更多数据">
			<view class="table_head">
				<uni-tr>
					<uni-th width="60" align="center" class="leftfix">
						<view class="leftcell">
							<view class="ctitle">日期</view>
							<view class="ctitle">15日内</view>
						</view>
					</uni-th>
					<uni-th width="120" align="center" v-for="(item, index) in columnTitles" :key="index">
						<view class="rightcell">
							<view class="ctitle">{{item.day}}</view>
							<view class="ctitle">{{item.weekName}}</view>
							<view class="cnum" v-if="item.count>0">{{item.count}}</view>
						</view>
					</uni-th>
				</uni-tr>
			</view>
			<view class="table_body">
				<uni-tr v-for="(item, index) in claTimeContainer" :key="index">
					<uni-td width="60" align="center" class="leftfix">
						<view class="courfix">
							{{item.time}}
						</view>
					</uni-td>
					<uni-td width="120" align="center" v-for="(cell, ii) in columnTitles" :key="ii"> 
						<block v-for="(cc, kk) in item.claTimeWeekDayMap" :key="kk">
							<block v-for="(dd, mm) in cc" :key="mm">
								<!-- dd.weekDay==cell.weekName && -->
								<view class="courheadtext" v-if="dd.claDate==cell.day" 
								:style="{color:colorlist[index].fcolor,backgroundColor:colorlist[index].color,borderLeftColor:colorlist[index].fcolor}" >
									<view class="ctxt">{{dd.startTime}}-{{dd.endTime}}</view>
									<view class="ctxt">{{dd.courseName}}</view>
									<view class="ctxt">{{dd.claName}}</view>
									<view class="ctxt">{{dd.staffName}}</view>
								</view>
							</block>
						</block>
					</uni-td>
				</uni-tr>
				
			</view>
		</uni-table>
 
		<!-- 是否登录 -->
		<openlogin ref="loginId" @getPhoneNumber="getPhoneNumber"></openlogin>
		
		<!-- service 客服-->
		<service ref="serviceId" @goservice="goservice"></service>
		
		<!-- top 返回顶部-->
		<top ref="topId"></top>
		
		
	</view>
</template>

<script>
	import { myCache,getRemoteFile,getRemoteHtmlFile } from '../../utils/utils.js';
	import openlogin from "../components/openlogin.vue";
	import top from "../components/top.vue";
	import service from "../components/service.vue";
	
	export default {
		components: {
		  openlogin,top,service
		},
		data() {
			return {
				openId:"",
				phone:"",
				userid:"",
				id:'',
				type:'',// 1 老师课程表  2、精品课程表
				name:'精品', // 精品课程名称
				loading:false,
				colorlist:[
					{
						time:'08:30',
						fcolor:'#ce4b62',
						color:'#ffdbdf'
					},
					{
						time:'10:00',
						fcolor:'#0c7e07',
						color:'#f4fff3'
					},
					{
						time:'11:00',
						fcolor:'#b871d7',
						color:'#faebfe'
					},
					{
						time:'14:00',
						fcolor:'#95440f',
						color:'#ffe9cb'
					},
					{
						time:'15:00',
						fcolor:'#116c94',
						color:'#cbefff'
					},
					{
						time:'16:00',
						fcolor:'#867ae0',
						color:'#f4f0ff'
					},
					{
						time:'17:00',
						fcolor:'#37acc0',
						color:'#e0f8fa'
					},
					{
						time:'18:00',
						fcolor:'#e8739d',
						color:'#feecfa'
					},
					{
						time:'19:00',
						fcolor:'#4d8ae3',
						color:'#eaf0ff'
					},
					{
						time:'20:00',
						fcolor:'#f2960f',
						color:'#fbeacc'
					}
				],
				columnTitles: [
					{
						"weekName": "星期二",
						"day": "08-19",
						"count": 1
					},
					{
						"weekName": "星期三",
						"day": "08-20",
						"count": 3
					},
					{
						"weekName": "星期四",
						"day": "08-21",
						"count": 0
					},
					{
						"weekName": "星期五",
						"day": "08-22",
						"count": 1
					},
					{
						"weekName": "星期六",
						"day": "08-23",
						"count": 1
					},
					{
						"weekName": "星期日",
						"day": "08-24",
						"count": 2
					},
					{
						"weekName": "星期一",
						"day": "08-25",
						"count": 2
					},
					{
						"weekName": "星期二",
						"day": "08-26",
						"count": 1
					},
					{
						"weekName": "星期三",
						"day": "08-27",
						"count": 3
					},
					{
						"weekName": "星期四",
						"day": "08-28",
						"count": 0
					},
					{
						"weekName": "星期五",
						"day": "08-29",
						"count": 1
					},
					{
						"weekName": "星期六",
						"day": "08-30",
						"count": 1
					},
					{
						"weekName": "星期日",
						"day": "08-31",
						"count": 2
					},
					{
						"weekName": "星期一",
						"day": "09-01",
						"count": 2
					}
				],
				claTimeContainer: [
				{
						"time": "08:30",
						"claTimeWeekDayMap": {
							"1": [
								{
									"courseTimeId": 1935590320385343489,
									"claName": "普拉提A班",
									"courseName": "普拉提",
									"claDate": "2025-08-24",
									"weekDay": "星期日",
									"startTime": "08:00",
									"endTime": "09:30",
									"staffName": "教师A",
									"studentCount": 0,
									"roomName": null,
									"claColor": "#409EFF",
									"claTimeStatus": "1"
								},
								{
									"courseTimeId": 1935590320385343492,
									"claName": "普拉提A班",
									"courseName": "普拉提",
									"claDate": "2025-08-31",
									"weekDay": "星期日",
									"startTime": "08:00",
									"endTime": "09:30",
									"staffName": "教师A",
									"studentCount": 0,
									"roomName": null,
									"claColor": "#409EFF",
									"claTimeStatus": "1"
								}
							],
							"2": [
								{
									"courseTimeId": 1935590320385343490,
									"claName": "普拉提A班",
									"courseName": "普拉提",
									"claDate": "2025-08-25",
									"weekDay": "星期一",
									"startTime": "08:00",
									"endTime": "09:30",
									"staffName": "教师A",
									"studentCount": 0,
									"roomName": null,
									"claColor": "#409EFF",
									"claTimeStatus": "1"
								},
								{
									"courseTimeId": 1935590320385343493,
									"claName": "普拉提A班",
									"courseName": "普拉提",
									"claDate": "2025-09-01",
									"weekDay": "星期一",
									"startTime": "08:00",
									"endTime": "09:30",
									"staffName": "教师A",
									"studentCount": 0,
									"roomName": null,
									"claColor": "#409EFF",
									"claTimeStatus": "1"
								}
							],
							"3": [],
							"4": [
								{
									"courseTimeId": 1935590320322428930,
									"claName": "普拉提A班",
									"courseName": "普拉提",
									"claDate": "2025-08-20",
									"weekDay": "星期三",
									"startTime": "08:00",
									"endTime": "09:30",
									"staffName": "教师A",
									"studentCount": 0,
									"roomName": null,
									"claColor": "#409EFF",
									"claTimeStatus": "1"
								},
								{
									"courseTimeId": 1935596230449086465,
									"claName": "普拉提A班",
									"courseName": "普拉提",
									"claDate": "2025-08-27",
									"weekDay": "星期三",
									"startTime": "08:00",
									"endTime": "09:00",
									"staffName": "教师A",
									"studentCount": 0,
									"roomName": null,
									"claColor": "#409EFF",
									"claTimeStatus": "1"
								},
								{
									"courseTimeId": 1935590320385343491,
									"claName": "普拉提A班",
									"courseName": "普拉提",
									"claDate": "2025-09-03",
									"weekDay": "星期三",
									"startTime": "08:00",
									"endTime": "09:30",
									"staffName": "教师A",
									"studentCount": 0,
									"roomName": null,
									"claColor": "#409EFF",
									"claTimeStatus": "1"
								}
							],
							"5": [],
							"6": [],
							"7": [],
							"8": [],
							"9": [],
							"10": [],
							"11": [],
							"12": [],
							"13": [],
							"14": [],
							"15": []
						}
					},
					{
						"time": "10:00",
						"claTimeWeekDayMap": {
							"1": [],
							"2": [],
							"3": [],
							"4": [],
							"5": [],
							"6": [],
							"7": [],
							"8": [],
							"9": [],
							"10": [],
							"11": [],
							"12": [],
							"13": [],
							"14": [],
							"15": []
						}
					},
					{
						"time": "11:00",
						"claTimeWeekDayMap": {
							"1": [],
							"2": [],
							"3": [],
							"4": [],
							"5": [],
							"6": [],
							"7": [],
							"8": [],
							"9": [],
							"10": [],
							"11": [],
							"12": [],
							"13": [],
							"14": [],
							"15": []
						}
					},
					{
						"time": "14:00",
						"claTimeWeekDayMap": {
							"1": [],
							"2": [],
							"3": [],
							"4": [],
							"5": [],
							"6": [],
							"7": [],
							"8": [],
							"9": [],
							"10": [],
							"11": [],
							"12": [],
							"13": [],
							"14": [],
							"15": []
						}
					},
					{
						"time": "15:00",
						"claTimeWeekDayMap": {
							"1": [],
							"2": [],
							"3": [],
							"4": [],
							"5": [],
							"6": [],
							"7": [],
							"8": [],
							"9": [],
							"10": [],
							"11": [],
							"12": [],
							"13": [],
							"14": [],
							"15": []
						}
					},
					{
						"time": "16:00",
						"claTimeWeekDayMap": {
							"1": [],
							"2": [],
							"3": [],
							"4": [],
							"5": [],
							"6": [],
							"7": [],
							"8": [],
							"9": [],
							"10": [],
							"11": [],
							"12": [],
							"13": [],
							"14": [],
							"15": []
						}
					},
					{
						"time": "17:00",
						"claTimeWeekDayMap": {
							"1": [],
							"2": [],
							"3": [],
							"4": [],
							"5": [],
							"6": [],
							"7": [],
							"8": [],
							"9": [],
							"10": [],
							"11": [],
							"12": [],
							"13": [],
							"14": [],
							"15": []
						}
					},
					{
						"time": "18:00",
						"claTimeWeekDayMap": {
							"1": [],
							"2": [],
							"3": [],
							"4": [],
							"5": [],
							"6": [],
							"7": [],
							"8": [],
							"9": [],
							"10": [],
							"11": [],
							"12": [],
							"13": [],
							"14": [],
							"15": []
						}
					},
					{
						"time": "19:30",
						"claTimeWeekDayMap": {
							"1": [],
							"2": [],
							"3": [
								{
									"courseTimeId": 1935590110594646018,
									"claName": "普拉提A班",
									"courseName": "普拉提",
									"claDate": "2025-08-19",
									"weekDay": "星期二",
									"startTime": "16:00",
									"endTime": "17:30",
									"staffName": "教师A",
									"studentCount": 0,
									"roomName": null,
									"claColor": "#409EFF",
									"claTimeStatus": "1"
								}
							],
							"4": [],
							"5": [],
							"6": [
								{
									"courseTimeId": 1935590110657560578,
									"claName": "普拉提A班",
									"courseName": "普拉提",
									"claDate": "2025-08-29",
									"weekDay": "星期五",
									"startTime": "16:00",
									"endTime": "17:30",
									"staffName": "教师A",
									"studentCount": 0,
									"roomName": null,
									"claColor": "#409EFF",
									"claTimeStatus": "1"
								}
							],
							"7": [
								{
									"courseTimeId": 1935590110657560579,
									"claName": "普拉提A班",
									"courseName": "普拉提",
									"claDate": "2025-08-30",
									"weekDay": "星期六",
									"startTime": "16:00",
									"endTime": "17:30",
									"staffName": "教师A",
									"studentCount": 0,
									"roomName": null,
									"claColor": "#409EFF",
									"claTimeStatus": "1"
								}
							],
							"8": [],
							"9": [],
							"10": [],
							"11": [],
							"12": [],
							"13": [],
							"14": [],
							"15": []
						}
					}
				],
				
			};
		},
		onLoad(option) {
			// 课程表类型
			if(option.type){
				this.type=option.type;
			}
			if(option.name){
				this.name=option.name;
			}
			
			if(option.id&&option.id!=='undefined'){
				this.id=option.id;
				// 课程表
				this.loadinfo();
			}
			else{
				uni.showModal({
					title: '提示',
					content: '当前信息不存在..',
					cancelText: '取消',
					confirmText: '确定',
					success: ress => {
						// 返回
						uni.navigateBack({
							delta: 1
						});
					}
				});
			}
		},
		onReady(){
			if(this.type=='1'){
				uni.setNavigationBarTitle({
				  title: this.name+"—教练课程表",
				});
			}
			else if(this.type=='2'){
				uni.setNavigationBarTitle({
				  title: this.name+"—课程表",
				});
			}
		},
		onShow() {
			this.openId = myCache('openId');
			var user = myCache('user');
			this.userid = user.userid? user.userid:'';
			this.phone = user.userphone;
		},
		onPullDownRefresh() {
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},500);
		},
		onPageScroll(e) {
			//调用子组件方法
			this.$refs.topId.topData(e.scrollTop);
		},
		methods: {
			goservice(val){
				console.log(val);
			}, 
			iflogin(){
				this.openId = myCache('openId');
				var user = myCache('user');
				this.userid = user.userid? user.userid:'';
				this.phone = user.userphone;
				if(this.userid==""||this.userid=="0"){
					this.$refs.loginId.open();
					return false;
				}
				else{
					return true;
				}
			},
			async loadinfo(){
				// 详情
				uni.showLoading();
				var params = {
					teacherId: this.id
				};
				try{
					const {data: res1} = await uni.$http.post('/api/context/searchListForCalendar',params);
					// console.log(res1);
					if (res1.success) {
						var data = res1.data;
						this.columnTitles=data.columnTitles?data.columnTitles:[];
						this.claTimeContainer=data.claTimeContainer?data.claTimeContainer:[];
						this.$forceUpdate();
					}
					else{
						uni.showModal({
							title: '提示',
							content: '当前信息不存在..',
							cancelText: '取消',
							confirmText: '确定',
							success: ress => {
								// 返回
								uni.navigateBack({
									delta: 1
								});
							}
						});
					}
				}
				catch(e){
					console.log(e);
					uni.showModal({
						title: '提示',
						content: '当前信息不存在..',
						cancelText: '取消',
						confirmText: '确定',
						success: ress => {
							// 返回
							uni.navigateBack({
								delta: 1
							});
						}
					});
				}
			},
			getPhoneNumber(e){
				if(e.phone){
					this.phone = e.phone
				}
				if(e.userid){
					this.userid = e.userid
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.page {
		padding: 0;
		position: relative;
		background-color: #f8f8f8;
		height: calc(100vh);
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
	}
	.table_head{ 
		position: sticky;
		top: 0;
		z-index: 20;
	}
	.table_body{
		position: sticky;
		top: 0;
		height: calc(100vh - 120rpx);
		/* #ifdef H5 */
		height: calc(100vh - 120rpx - var(--window-top));
		/* #endif */
		background: #f8f8f8;
		z-index: 19;
	} 
	::v-deep .uni-table-tr{
		display: flex;
	}
	::v-deep .uni-table-th{
		padding:0 !important
	}
	::v-deep .uni-table-td{
		padding:0 !important
	}
	::v-deep .uni-table-tr .uni-table-th:first-child {
	  position: sticky;
	  left: 0;
	  z-index: 10;
	  background-color: #FFFAF2;
	}
	::v-deep .uni-table-tr .uni-table-td:first-child {
	  position: sticky;
	  left: 0;
	  z-index: 10;
	  background-color: #FFFAF2;
	}
	.leftfix{
		position: sticky;
		left: 0;
		z-index: 10;
		background-color: #fffae0;
	}
	.courcon{
		width: 100%;
		height: calc(100vh);
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
		overflow: auto;
		margin: 0;
		padding: 0;
		.leftcell{
			position: sticky;
			left: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 120rpx;
			height: 120rpx;
			background-color: #fffae0;
		}
		.rightcell{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 240rpx;
			height: 120rpx;
			background-color: #ffffff;
		}
		.cnum{
			position: absolute;
			top:15rpx;
			right: 20rpx;
			min-width: 28rpx;
			padding: 0 2rpx;
			border-radius: 50% 50%;
			background-color: #ff0000;
			color: #FFF;
			font-size: 22rpx;
		}
		.courhead{
			border-radius: 8rpx;
			background-color: #ffffff;
			display: flex;
			flex-direction: column;
			width: 120rpx;
			height: 120rpx;
			justify-content: center;
			align-items: center;
			position: absolute;
			left: 0;
			top: 0;
		}
		.ctitle{
			font-size: 30rpx;
			color:#000;
		}
		.courcell{
			width: 120rpx;
			height: 120rpx;
			border-bottom: 1rpx dotted #ccc;
			background-color: #ffffff;
		}
		.chcell{
			width: 240rpx;
		}
		.courfix{
			position: sticky;
			left: 0;
			z-index: 19;
			display: flex;
			flex-direction: column;
			width: 120rpx;
			height: 180rpx;
			justify-content: center;
			align-items: center;
			border-bottom: 1rpx dotted #ccc;
		}
		.courheadtext{
			display: flex;
			flex-direction: column;
			width: 240rpx;
			height: 180rpx;
			justify-content: center;
			align-items: center;
			border-radius: 10rpx;
			border-radius: 10rpx;
			border-left-width: 10rpx;
			border-left: solid;
		}
		.ctxt{
			font-size: 28rpx;
			line-height: 36rpx;
		}
	}
	.bbtn{
		margin: 20rpx 30rpx 54rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FCFCFD;
		width: 314rpx;
		height: 76rpx;
		line-height: 76rpx;
		background: #89965f;
		box-shadow: 0rpx 12rpx 64rpx 2rpx rgba(137,150,95,0.4);
		border-radius: 10rpx;
		opacity: 1;
		&::after{
			border:none;
		}
	}
	
</style>