sz-kjsxy-wx-new/packages/mycourse/courseContents.vue

<template>
	<view class="container">
		<image class="cbg" :src="base.imgHost('common_bg.png')"></image>
		<view class="search">
			<!-- <view class="select"> -->
				<w-select width="250rpx" :showClose="false" style="margin-left: 20rpx;" v-model="chooseValue" :list="selectList" valueName="name"
					keyName="id" @change="changeMonth">
				</w-select>
			<!-- </view> -->
			<view class="all" @click="changeAll">全部课表</view>
		</view>
		<view class="wrap">
			<view v-if="monthList.length>0">
				<view class="item" v-for="item in monthList">
					<view class="item-date">{{item.monthday}}</view>
					<view class="item-period">{{item.period}}</view>
					<view class="item-img">
						<image :src="base.imgHost('mycourse-c1.png')" style="width:22rpx;height:22rpx"></image>
						<text>{{item.theme}}</text>
					</view>
					<view class="item-img">
						<image :src="base.imgHost('mycourse-c2.png')" style="width:20rpx;height:23rpx"></image>
						<text>{{item.teacher?item.teacher.name:''}}</text>
					</view>
					<view class="item-img">
						<image :src="base.imgHost('mycourse-c3.png')" style="width:19rpx;height:27rpx"></image>
						<text>{{item.address}}</text>
					</view>
				</view>
			</view>
			<view class="nodata" v-else>
				<u-empty text="当前没有排课" mode="data"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import wSelect from "@/components/w-select/w-select.vue"
	export default {
		components: {
			wSelect
		},
		data() {
			return {
				list: [],
				monthList: [],
				chooseValue: '',
				selectList: ''
			}
		},
		onLoad(options) {
			this.getMyCourseContents(options.id)
		},
		methods: {
			async getMyCourseContents(id) {
				const res = await this.$u.api.courseContent({
					course_id: id,
				})
				this.list = res.list
				if(res.list.length>0){
					// this.monthList = res.list
					let obj = this.groupByMonthAndSort(res.list)
					const currentMonth = this.$moment().format('YYYY年MM月')
					
					if(this.selectList.length>0){
						this.selectList.map((item,index)=>{
							if(item.name===currentMonth){
								this.monthList = item.item
								this.chooseValue = item.name
							}else{
								this.monthList = this.selectList[this.selectList.length-1]['item']
								this.chooseValue = item.name
							}
						})
					}
					
				}
				
				
			},
			changeMonth(e) {
				console.log("e",e,this.chooseValue)
				this.monthList = e.item
			},
			changeAll(){
				this.chooseValue = ''
				this.monthList = this.list
			},
			groupByMonthAndSort(a) {
				// 创建一个空对象来存储按月份分组的数据
				const groupedData = {};
				// 遍历数组 a 中的每个对象
				a.forEach(item => {
					// 提取 date 字段，并转换为包含年份和月份的字符串格式
					const date = this.$moment(item.date, 'YYYY-MM-DD');
					const monthKey = date.format('YYYY年MM月');
					// 添加 monthday 字段
					item.monthday = date.format('MM月DD日');
					// 如果这个月份还没有出现在 groupedData 中，就添加一个空数组
					if (!groupedData[monthKey]) {
						groupedData[monthKey] = [];
					}
					// 将当前对象添加到对应的月份数组中
					groupedData[monthKey].push(item);
				});
				let _arr = []

				for(var k in groupedData){
					_arr.push({
						name:k,
						item:groupedData[k],
						id:k
					})
				}
				this.selectList = _arr
				// 返回重组后的数据
				return groupedData;
			}
		}

	}
</script>

<style scoped lang="scss">
	.container {
		padding: 30rpx;
		width: 100%;
		height: 100vh;
		overflow: scroll;

		.cbg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
		}

		.search {
			width:100%;
			padding: 30rpx;
			position: fixed;
			top:0;
			left:0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-shadow: 1rpx -4rpx 15rpx 0 #333;
			z-index:9;
			background-color: #fff;
			height:100rpx;
			.all {
				font-size: 28rpx;
				color:#b89155;
			}
		}

		.wrap {
			position: relative;
			padding-top:100rpx;
			.item {
				background-color: #fff;
				padding: 30rpx;
				margin-bottom: 20rpx;
				border-radius: 20rpx;

				&-date {
					font-size: 32rpx;
					color: #b08c6c;
					margin-bottom: 20rpx
				}

				&-period {
					color: #333333;
					margin-left: 20rpx;
					margin-bottom: 10rpx
				}

				&-img {
					color: #666666;
					display: flex;
					align-items: center;
					margin-left: 20rpx;
					margin-bottom: 10rpx;

					image {
						margin-right: 10rpx;
					}
				}
			}

			.nodata {
				height: 100vh;
			}
		}
	}
</style>