作业渲染
This commit is contained in:
		
							parent
							
								
									9b8f9207a1
								
							
						
					
					
						commit
						6eb78d1025
					
				|  | @ -123,137 +123,85 @@ | |||
| 					<view class="iconfont icon-arow_down"></view> | ||||
| 				</view> | ||||
| 			</view> | ||||
| 			<view class="work_card"> | ||||
| 				<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 class="card_bigbox"> | ||||
| 				<view class="work_card" v-for="(item,index ) in works" :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> | ||||
| 					<view class="work_card_top_right"> | ||||
| 						进行中 | ||||
| 					</view> | ||||
| 				</view> | ||||
| 				<view class="work_card_cont_box"> | ||||
| 					<view class="work_card_cont"> | ||||
| 						<view class="work_card_cont_point"></view> | ||||
| 						<view class="work_card_cont_text"> | ||||
| 							IELTS 18-Test 2-Part 1 | ||||
| 						</view> | ||||
| 						<view class="work_card_cont_tag"> | ||||
| 							听力 | ||||
| 						<view class="work_card_top_right" :class="item.status == 1 ? 'act2' : ''"> | ||||
| 							进行中 | ||||
| 						</view> | ||||
| 					</view> | ||||
| 					<view class="work_card_cont"> | ||||
| 						<view class="work_card_cont_point"></view> | ||||
| 						<view class="work_card_cont_text"> | ||||
| 							IELTS 18-Test 2-Part 1 | ||||
| 					<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_tag"> | ||||
| 							听力 | ||||
| 						<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_cont"> | ||||
| 						<view class="work_card_cont_point"></view> | ||||
| 						<view class="work_card_cont_text"> | ||||
| 							IELTS 18-Test 2-Part 1 | ||||
| 					<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_cont_tag"> | ||||
| 							听力 | ||||
| 						<view class="work_card_info_bot"> | ||||
| 							{{item.des}} | ||||
| 						</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 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> | ||||
| 					<view class="work_card_info_bot"> | ||||
| 						最好在中午十二点之前完成交上作业,过期不候 | ||||
| 					</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 class="work_card_info_bot"> | ||||
| 							{{item.doneTime}} | ||||
| 							<!-- {{ formatTimestamp(item.createTime) }} --> | ||||
| 						</view> | ||||
| 						时间 | ||||
| 					</view> | ||||
| 
 | ||||
| 					<view class="work_card_info_bot"> | ||||
| 						02-12 12:00 | ||||
| 					</view> | ||||
| 				</view> | ||||
| 			</view> | ||||
| 			<view class="work_card" :class="isalready == true ? 'act1' : ''"> | ||||
| 				<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> | ||||
| 					<view class="work_card_top_right" :class="isalready == true ? 'act2' : ''"> | ||||
| 						进行中 | ||||
| 					</view> | ||||
| 				</view> | ||||
| 				<view class="work_card_cont_box"> | ||||
| 					<view class="work_card_cont"> | ||||
| 						<view class="work_card_cont_point"></view> | ||||
| 						<view class="work_card_cont_text"> | ||||
| 							IELTS 18-Test 2-Part 1 | ||||
| 						</view> | ||||
| 						<view class="work_card_cont_tag"> | ||||
| 							听力 | ||||
| 						</view> | ||||
| 					</view> | ||||
| 					<view class="work_card_cont"> | ||||
| 						<view class="work_card_cont_point"></view> | ||||
| 						<view class="work_card_cont_text"> | ||||
| 							IELTS 18-Test 2-Part 1 | ||||
| 						</view> | ||||
| 						<view class="work_card_cont_tag"> | ||||
| 							听力 | ||||
| 						</view> | ||||
| 					</view> | ||||
| 					<view class="work_card_cont"> | ||||
| 						<view class="work_card_cont_point"></view> | ||||
| 						<view class="work_card_cont_text"> | ||||
| 							IELTS 18-Test 2-Part 1 | ||||
| 						</view> | ||||
| 						<view class="work_card_cont_tag"> | ||||
| 							听力 | ||||
| 						</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"> | ||||
| 						最好在中午十二点之前完成交上作业,过期不候 | ||||
| 					</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"> | ||||
| 						02-12 12:00 | ||||
| 					</view> | ||||
| 				</view> | ||||
| 			</view> | ||||
|  | @ -289,7 +237,8 @@ | |||
| 				workinfo: {}, | ||||
| 				orgworkinfo: {}, | ||||
| 				beforyes: '', | ||||
| 				isup: '' | ||||
| 				isup: '', | ||||
| 				works:{} | ||||
| 				// https://file.langsi.online/yasiimg/web/static/uBHiWpVS8LQdX241DdjX | ||||
| 			} | ||||
| 		}, | ||||
|  | @ -302,6 +251,14 @@ | |||
| 		}, | ||||
| 
 | ||||
| 		methods: { | ||||
| 			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; | ||||
| 			}, | ||||
| 			getinfo() { | ||||
| 				this.$u.get( | ||||
| 					`https://api.admin-v2.langsi.online/admin-api/classroom/work-record/statistics?memberId=${this.id}` | ||||
|  | @ -327,6 +284,20 @@ | |||
| 
 | ||||
| 					} | ||||
| 				}) | ||||
| 				this.$u.get( | ||||
| 					`https://api.admin-v2.langsi.online/admin-api/classroom/work-member/list?memberId=${501}` | ||||
| 				).then(res => { | ||||
| 				 | ||||
| 				 | ||||
| 					if (res.code == 0) { | ||||
| 						this.works = res.data | ||||
| 						 | ||||
| 				 | ||||
| 						// this.classlist = res.data.list | ||||
| 						// this.isloding = false | ||||
| 				 | ||||
| 					} | ||||
| 				}) | ||||
| 			}, | ||||
| 			async initChart() { | ||||
| 				let _this = this | ||||
|  | @ -851,130 +822,147 @@ | |||
| 				} | ||||
| 			} | ||||
| 
 | ||||
| 			.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%; | ||||
| 			.card_bigbox { | ||||
| 				.work_card { | ||||
| 					margin-top: 20rpx; | ||||
| 					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; | ||||
| 						} | ||||
| 					} | ||||
| 
 | ||||
| 					.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; | ||||
| 					flex-wrap: wrap; | ||||
| 					width: 686rpx; | ||||
| 					padding: 32rpx; | ||||
| 					background: #FFFFFF; | ||||
| 					border-radius: 20rpx 20rpx 20rpx 20rpx; | ||||
| 
 | ||||
| 					.work_card_cont:last-child { | ||||
| 						margin-bottom: 0; | ||||
| 					} | ||||
| 
 | ||||
| 					.work_card_cont { | ||||
| 						margin-bottom: 24rpx; | ||||
| 			 | ||||
| 					border-left: 8rpx solid #F18F21; | ||||
| 			 | ||||
| 					.work_card_top { | ||||
| 						width: 100%; | ||||
| 						display: flex; | ||||
| 						flex-wrap: nowrap; | ||||
| 						align-items: center; | ||||
| 
 | ||||
| 						.work_card_cont_point { | ||||
| 							width: 8rpx; | ||||
| 							height: 8rpx; | ||||
| 							background: #2E4975; | ||||
| 							border-radius: 50%; | ||||
| 						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_cont_text { | ||||
| 							margin-left: 20rpx; | ||||
| 			 | ||||
| 						.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; | ||||
| 						} | ||||
| 
 | ||||
| 						.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; | ||||
| 
 | ||||
| 					.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; | ||||
| 				} | ||||
| 			} | ||||
| 
 | ||||
| 			 | ||||
| 			.act1 { | ||||
| 				border-left: 8rpx solid #2D7CE6; | ||||
| 			} | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue
	
	Block a user