smartmeter-app/pages/Mystudent/arrange_work.vue

<template>
	<view class="pagebox">
		<u-navbar title="作业安排" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
			height='36'></u-navbar>
		<view class="serchbox">
			<view class="serchimg">
				<image src="https://file.langsi.online/yasiimg/web/static/uVMACkynkipOxuTYDqm0">

				</image>
			</view>
			<input type="text" v-model="searchKeyword" placeholder="搜索相关内容..." class="input"
				placeholder-style="color:#C7CDD3" @input="search()">
		</view>
		<view class="checkbox">
			<view class="chekcont">
				时间排序
				<view class="iconfont icon-arow_down"></view>
			</view>
			<view class="chekcont">
				题库类型
				<view class="iconfont icon-arow_down"></view>
			</view>
			<view class="chekcont">
				状态
				<view class="iconfont icon-arow_down"></view>
			</view>
		</view>
		<view class="card_bigbox">
			<view class="work_card" v-for="(item,index ) in workinfo" :key="index" @click="toworkdetail(item.id)"
				:class="item.status === 1 ? 'act1' : (item.status === '2' ? 'act3' : 'default')">
				<view class="work_card_top">
					<view class="work_card_top_left">
						<view class="work_card_top_left_img">
							<image src="https://file.langsi.online/yasiimg/web/static/u07sCQb6mW6OSamVr1Va"></image>
						</view>
						<view class="txt" v-html="highlightSearch(item.name)">
							
						</view>
						
					</view>
					<view class="work_card_top_right" :class="item.status == 1 ? 'act2' : ''">
						进行中
					</view>
				</view>
				<view class="work_card_cont_box">
					<!-- v-if="indexs<3" -->
					<view class="work_card_cont" v-for="(items,indexs ) in item.infos" :key="indexs" v-if="indexs<3">
						<view class="work_card_cont_point"></view>
						<view class="work_card_cont_text" v-if="items.classify==1||items.classify==2">
							{{items.paperName}}-{{items.testName}}-{{items.partName}}
						</view>
						<view class="work_card_cont_text" v-if="items.classify==4" style="display: inline-flex;flex-wrap: nowrap;">
							{{items.moduleName}}-{{items.partName}}-<view style="width:140rpx;	overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{items.questionName}}</view>-跟读
						</view>
						<view class="work_card_cont_text" v-if="items.classify==3">
							{{items.paperName}}-{{items.testName}}-{{items.partName}}
						</view>
						<view class="work_card_cont_tag" v-if="items.classify==1"
							style="background: rgba(27,225,178,0.1);color: #1BE1B2;">
							听力
						</view>
						<view class="work_card_cont_tag" v-if="items.classify==2"
							style="background: rgba(242,182,42,0.2);color: #F2AA02 ;">
							阅读
						</view>
						<view class="work_card_cont_tag" v-if="items.classify==3"
							style="background:rgba(63,122,242,0.2);color: #3F7AF2 ;">
							写作
						</view>
						<view class="work_card_cont_tag" v-if="items.classify==4"
							style="background: rgba(242,63,235,0.1);color: #F23FEB  ;">
							口语
						</view>

					</view>
					<view class="work_card_cont" v-if="item.infos.length>3">
						<view class="work_card_cont_point" style="margin-right: 10rpx;"></view>
						<view class="work_card_cont_point" style="margin-right: 10rpx;"></view>
						<view class="work_card_cont_point"></view>
					</view>
				</view>
				<view class="work_card_info_box">
					<view class="work_card_info_top">
						<view class="work_card_info_topimg">
							<image src="https://file.langsi.online/yasiimg/web/static/uw2jJ5BraHhwDDaIZ0MC"></image>
						</view>
						描述
					</view>
					<view class="work_card_info_bot">
						{{item.des}}
					</view>
				</view>
				<view class="work_card_info_box">
					<view class="work_card_info_top">
						<view class="work_card_info_topimg">
							<image src="https://file.langsi.online/yasiimg/web/static/uhApaomh5maFP29oecp3">

							</image>
						</view>
						时间
					</view>

					<view class="work_card_info_bot">
						{{item.doneTime}}
						<!-- {{ formatTimestamp(item.createTime) }} -->
					</view>
				</view>
			</view>
		</view>
		<view class="zhanwei" style="width: 100%;height: 60rpx;">
			
		</view>
		<view class="botbtn">
			<view class="btn">
				添加作业
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#F0F6FF",
				},
				isalready: true,
				work: [{
						"iswork": "0"
					},
					{
						"iswork": "1"
					},
					{
						"iswork": "2"
					},
					{
						"iswork": "0"
					}
				],
				classid: 0,
				workinfo: [],
				orgworkinfo: [],
				searchKeyword: '',
			}
		},
		onLoad(option) {
			console.log(option);
			this.classid = option.classId
			// this.classid=15
			this.getworklist()
		},
		methods: {
			toworkdetail(id){
				uni.navigateTo({
					url: "/pages_teacher/teacher_teachers/operation_detail?id=" + id
				}).then(res => {
				
				}).catch(err => {
				
				});
			},
			highlightSearch(name) {
				// 使用正则表达式替换匹配到的 searchKeyword 为带有颜色的文字
				if (this.searchKeyword) {
					const regex = new RegExp(this.searchKeyword, 'gi');
					return name.replace(regex, match => `<span style="color: #2D7CE6 ;">${match}</span>`);
				}
				return name;
			},
			formatTimestamp(timestamp) {
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				const hours = date.getHours().toString().padStart(2, '0');
				const minutes = date.getMinutes().toString().padStart(2, '0');

				return `${year}-${month}-${day} ${hours}:${minutes}`;
			},

			getworklist() {
				this.$u.get(`https://api.admin-v2.langsi.online/admin-api/classroom/work-record/list?classId=${this.classid}`).then(res => {


					if (res.code == 0) {
						this.workinfo = res.data
						this.orgworkinfo = JSON.parse(JSON.stringify(res.data));
						// this.classlist = res.data.list
						// this.isloding = false

					}
				})
			},
			search() {
				// 根据关键字过滤 this.classlist
				if (this.searchKeyword !== '') {
					const filteredList = JSON.parse(JSON.stringify(this.orgworkinfo)).filter(item => {
						// 匹配 nickName 或者 id
						return item.name.includes(this.searchKeyword) || item.des.includes(this.searchKeyword);
					});
					// 更新 this.classlist 为过滤后的列表
					this.workinfo = filteredList;
				} else {
					this.fuwei();
				}
			},
			fuwei() {

				this.workinfo = JSON.parse(JSON.stringify(this.orgworkinfo));
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(183deg, #F0F6FF 0%, #FAFAFA 100%);
		padding-bottom: 170rpx;
	}

	.pagebox {
		padding: 0 32rpx;

		.serchbox {
			padding: 0 32rpx;
			display: flex;
			flex-wrap: nowrap;
			margin-top: 30rpx;
			align-items: center;
			width: 686rpx;
			height: 88rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.serchimg {
				width: 30.51rpx;
				height: 32rpx;
				margin-right: 24rpx;
			}

			.input {
				margin: 0 auto;
				width: 568rpx;
				height: 88rpx;
				border-radius: 30rpx;
				// background-color: #f5f8fc;
				// display: flex;
				// justify-content: center;
				// align-items: center;
				// text-align: center;
				font-size: 28rpx;
				font-family: Source Han Sans CN, Source Han Sans CN-Light;
				font-weight: 300;
				text-align: left;
				color: #a7b9cd;
				letter-spacing: 1.2rpx;
				line-height: 36rpx;
				// padding: 0 100rpx;
				// padding-right: 135rpx;
				box-sizing: border-box;

			}
		}

		.checkbox {

			margin-top: 32rpx;
			padding: 0 34rpx;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-between;

			.chekcont {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				font-size: 24rpx;
				font-family: 'PingFang', 'PingFang';
				font-weight: 500;
				color: rgba(7, 47, 90, 0.6);

				.icon-arow_down {
					margin-left: 6rpx;
					font-size: 16rpx;
				}
			}

		}

		.card_bigbox {
			.work_card {
				margin-top: 20rpx;
				display: flex;
				flex-wrap: wrap;
				width: 686rpx;
				padding: 32rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;

				border-left: 8rpx solid #F18F21;

				.work_card_top {
					width: 100%;
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					justify-content: space-between;

					.work_card_top_left {
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
						font-size: 28rpx;
						font-family: 'PingFang', 'PingFang';
						font-weight: 800;
						color: #2E4975;

						.work_card_top_left_img {
							margin-right: 8rpx;
							width: 38rpx;
							height: 32rpx;
						}
						.txt{
							font-size: 28rpx;
							font-family: 'PingFang', 'PingFang';
							font-weight: 800;
							color: #2E4975;
						}
					}

					.work_card_top_right {
						font-size: 24rpx;
						font-family: 'PingFang', 'PingFang';
						font-weight: 500;
						color: #F18F21;
					}

					.act2 {
						color: #2D7CE6;
					}
				}

				.work_card_cont_box {
					margin-top: 16rpx;
					padding: 24rpx;
					width: 100%;
					background: #F9F9F9;
					border-radius: 20rpx 20rpx 20rpx 20rpx;

					.work_card_cont:last-child {
						margin-bottom: 0;
					}

					.work_card_cont {
						margin-bottom: 24rpx;
						display: flex;
						flex-wrap: nowrap;
						align-items: center;

						.work_card_cont_point {
							width: 8rpx;
							height: 8rpx;
							background: #2E4975;
							border-radius: 50%;
						}

						.work_card_cont_text {
							margin-left: 20rpx;
							font-size: 24rpx;
							font-family: 'PingFang', 'PingFang';
							font-weight: 500;
							color: #2E4975;
						}

						.work_card_cont_tag {
							margin-left: 30rpx;
							padding: 8rpx 18rpx;
							background: #FFF2E4;
							border-radius: 20rpx 20rpx 20rpx 20rpx;
							font-size: 20rpx;
							font-family: 'PingFang', 'PingFang';
							font-weight: 500;
							color: #F18F21;
						}

					}
				}

				.work_card_info_box {
					display: flex;
					flex-wrap: wrap;
					margin-top: 22rpx;
					width: 100%;

					.work_card_info_top {
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
						width: 100%;
						font-size: 20rpx;
						font-family: 'PingFang', 'PingFang';
						font-weight: 500;
						color: rgba(46, 73, 117, 0.6);

						.work_card_info_topimg {
							margin-right: 8rpx;
							width: 18.74rpx;
							height: 20rpx;
						}
					}

					.work_card_info_bot {
						margin-top: 4rpx;
						font-size: 24rpx;
						font-family: 'PingFang', 'PingFang';
						font-weight: 500;
						color: #2E4975;
					}
				}
			}

			.act1 {
				border-left: 8rpx solid #2D7CE6;
			}

			.act3 {
				border-left: 8rpx solid #DFDFDF;
			}
		}

		.botbtn {
			padding: 32rpx 32rpx 0 32rpx;
			margin-left: -32rpx;
			position: fixed;
			bottom: 0;
			width: 750rpx;
			height: 200rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -10rpx 16rpx 0rpx rgba(202, 202, 202, 0.25);
			border-radius: 40rpx 40rpx 0rpx 0rpx;

			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-family: 'PingFang', 'PingFang';
				font-weight: 800;
				color: #FFFFFF;
				width: 686rpx;
				height: 80rpx;
				background: linear-gradient(180deg, #74AFFF 0%, #2D7CE6 100%);
				border-radius: 104rpx 104rpx 104rpx 104rpx;
			}
		}
	}
</style>