数据处理

pages/Mystudent/addstu.vue

@@ -1,27 +1,33 @@
 <template>
 	<view class="searchpage">
-		<u-navbar title="搜索" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
+		<u-navbar title="添加学生" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
 			height='36'></u-navbar>
+			<u-toast ref="uToast" />
 		<view class="serchbox">
 			<view class="serchimg">
 				<image src="https://file.langsi.online/yasiimg/web/static/uVMACkynkipOxuTYDqm0">
 
 				</image>
 			</view>
-			<input type="text" placeholder="搜索相关内容..." class="input" placeholder-style="color:#C7CDD3 ">
+			<input type="text"
+				 v-model="searchKeyword"
+				 placeholder="搜索相关内容..."
+				 class="input"
+				 placeholder-style="color:#C7CDD3"
+				 @input="search()">
 		</view>
 		<view class="check_card">
-			<view class="check_card_stu" v-for="(item,index ) in stulist" :key="index">
+			<view class="check_card_stu " v-for="(item,index ) in stulist" :key="index" @click="toggleSelection(item)" :class="{ 'act1': item.isSelected }"> 
 				<view class="check_card_stu_info_left">
 					<view class="class_card_left">
-						<image src=" https://file.langsi.online/yasiimg/web/static/udWNTRG6GulmTtgPRQ49"></image>
+						<image :src="item.headImgUrl"></image>
 					</view>
 					<view class="class_card_right">
-						<view class="class_card_right_top">
+						<view class="class_card_right_top" v-html="highlightSearch(item.nickName)">
-							李斯丹妮
+							
 						</view>
 						<view class="class_card_right_bot">
-							ID：3324
+							ID：{{item.id}}
 						</view>
 					</view>
 				</view>
@@ -30,9 +36,14 @@
 			
 
 		</view>
-		<view class="zhanwei" style="width: 100%; height: 50rpx;">
+		<view class="zhanwei" style="width: 100%; height: 230rpx;">
 			
 		</view>
+		<view class="botbtn" @click="addstu()" v-show="selectedIds.length>0">
+			<view class="btn">
+				确定添加（{{selectedIds.length}}）
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -41,10 +52,13 @@
 		data() {
 			return {
 				bgc: {
-					backgroundColor: "#transparent",
+					backgroundColor: "#F6F9FC",
 				},
 				checkindex: 1,
-				stulist:[]
+				stulist:[],
+				searchKeyword:'',
+				orgstulist:[],
+				selectedIds: [],
 			}
 		},
 		onLoad(option) {
@@ -53,14 +67,81 @@
 			this.getallstu()
 		},
 		methods: {
+			addstu() {
+			let data = {
+				memberId: this.selectedIds[0],
+				// memberId: '1522',
+				roomId: this.classid
+			};
+			
+			this.$u.post(`https://api.admin-v2.langsi.online/admin-api/classroom/members/add`, data).then(res => {
+				if (res.code === 0) {
+					this.$refs.uToast.show({
+						title: '添加成功',
+						type: 'success',
+						position:'top'
+					})
+					this.selectedIds=[]
+					this.fuwei()
+				}else{
+					this.$refs.uToast.show({
+						title: '添加失败',
+						type: 'error',
+						position:'top'
+						
+					})
+					this.selectedIds=[]
+					this.fuwei()
+				}
+			});
+			},
+			 toggleSelection(item) {
+			    const selectedIndex = this.selectedIds.indexOf(item.id);
+			
+			    if (selectedIndex === -1) {
+			      // If not selected, add to the array and apply the 'act1' class
+			      this.selectedIds.push(item.id);
+			      item.isSelected = true;  // Add a property to the item to track selection
+			    } else {
+			      // If already selected, remove from the array and remove the 'act1' class
+			      this.selectedIds.splice(selectedIndex, 1);
+			      item.isSelected = false;
+			    }
+				console.log(this.selectedIds,'selectedIdsselectedIdsselectedIds');
+			  },
+			search() {
+			    // 根据关键字过滤 this.classlist
+			    if (this.searchKeyword !== '') {
+			        const filteredList = JSON.parse(JSON.stringify(this.orgstulist)).filter(item => {
+			            // 匹配 nickName 或者 id
+			            return item.nickName.includes(this.searchKeyword) || item.id.toString().includes(this.searchKeyword);
+			        });
+			        // 更新 this.classlist 为过滤后的列表
+			        this.stulist = filteredList;
+			    } else {
+			        this.fuwei();
+			    }
+			},
+			fuwei() {
+				
+				this.stulist = JSON.parse(JSON.stringify(this.orgstulist));
+			},
+			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;
+			  },
 			getallstu(){
 				this.$u.get(`https://api.admin-v2.langsi.online/admin-api/v2/ybs-user/page`).then(res => {
 				
 							
 					if (res.code == 0) {
 						this.stulist=res.data.list
-						// this.classlist = res.data.list
+						this.orgstulist = JSON.parse(JSON.stringify(res.data.list));
-						// this.isloding = false
+						
 							
 					}
 				})
@@ -203,5 +284,29 @@
 				border: 2rpx solid #2D7CE6;
 			}
 		}
+		.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>

pages/Mystudent/formstu.vue

@@ -20,9 +20,11 @@
 					</image>
 				</view>
 				<input type="text"
-					   placeholder="搜索相关内容..."
+					  v-model="searchKeyword"
-					   class="input"
+					  placeholder="搜索相关内容..."
-					   placeholder-style="color:#C7CDD3 ">
+					  class="input"
+					  placeholder-style="color:#C7CDD3"
+					  @input="search()">
 			</view>
 			
 		</view>
@@ -32,17 +34,17 @@
 		</view>
 
 		<view class="check_card" v-show="checkindex==1">
-			<view class="check_card_stu">
+			<view class="check_card_stu" v-for="(item,index ) in stulist" :key="index">
 				<view class="check_card_stu_info_left">
 					<view class="class_card_left">
-						<image src=" https://file.langsi.online/yasiimg/web/static/udWNTRG6GulmTtgPRQ49"></image>
+						<image :src="item.memberInfo.avatar"></image>
 					</view>
 					<view class="class_card_right">
-						<view class="class_card_right_top">
+						<view class="class_card_right_top"  v-html="highlightSearch(item.memberInfo.name)">
-							李斯丹妮
+						
 						</view>
 						<view class="class_card_right_bot">
-							ID：3324
+							ID：{{item.memberInfo.id}}
 						</view>
 					</view>
 				</view>
@@ -66,40 +68,7 @@
 						
 				</view>
 			</view>
-			<view class="check_card_stu ">
-				<view class="check_card_stu_info_left">
-					<view class="class_card_left">
-						<image src=" https://file.langsi.online/yasiimg/web/static/udWNTRG6GulmTtgPRQ49"></image>
-					</view>
-					<view class="class_card_right">
-						<view class="class_card_right_top">
-							李斯丹妮
-						</view>
-						<view class="class_card_right_bot">
-							ID：3324
-						</view>
-					</view>
-				</view>
-				<view class="check_card_stu_info_right">
-					<view class="class_info" >
-							<view class="class_info_top" >
-								平均成绩/分
-							</view>
-							<view class="class_info_bot" >
-								6
-							</view>
-						</view>
-					<view class="class_info" >
-							<view class="class_info_top" >
-								作业完成度
-							</view>
-							<view class="class_info_bot" >
-								80%
-							</view>
-						</view>
 			
-				</view>
-			</view>
 			
 		</view>
 		<!-- <view class="botbtn">
@@ -119,20 +88,54 @@ export default {
 				backgroundColor: "#F6F9FC",
 			},
 			checkindex: 1,
+			stulist:[],
+			searchKeyword:'',
+			orgstulist:[],
+			
 		}
 	},
 	onLoad(option) {
 		// this.classid=option.id
 		this.classid=15
+		
+	},
+	onShow() {
 		this.getclassteacher()
 	},
 	methods: {
+	
+		search() {
+		    // 根据关键字过滤 this.classlist
+		    if (this.searchKeyword !== '') {
+		        const filteredList = JSON.parse(JSON.stringify(this.orgstulist)).filter(item => {
+		            // 匹配 nickName 或者 id
+		            return item.memberInfo.name.includes(this.searchKeyword) || item.memberInfo.id.toString().includes(this.searchKeyword);
+		        });
+		        // 更新 this.classlist 为过滤后的列表
+		        this.stulist = filteredList;
+		    } else {
+		        this.fuwei();
+		    }
+		},
+		fuwei() {
+			
+			this.stulist = JSON.parse(JSON.stringify(this.orgstulist));
+		},
+		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;
+		  },
 		getclassteacher(){
 			this.$u.get(`https://api.admin-v2.langsi.online/admin-api/classroom/members/list?classId=${this.classid}`).then(res => {
 			
 						
 				if (res.code == 0) {
-					this.teacherlist=res.data.list
+					this.stulist=res.data
+					this.orgstulist = JSON.parse(JSON.stringify(res.data));
 					// this.classlist = res.data.list
 					// this.isloding = false
 						

pages_teacher/teacher_class/class_detail.vue

@@ -37,8 +37,11 @@
 						<text>班级成员</text>
 						<u-icon name="arrow-right" color="#646D7B" size="16"></u-icon>
 					</view>
-					<view class="view_images">
+					<view class="view_images"  >
-						<image :src="item1.url" mode="" v-for="(item1,index) in item.image"></image>
+						<image :src="item.memberInfo.avatar" mode=""  v-for="(item,index ) in classinfo.members" :key="index" v-if="index<=4"></image>
+						<view class="shenlue" v-if="classinfo.members.length>4">
+							{{classinfo.members.length}}
+						</view>
 					</view>
 				</view>
 			</view>
@@ -123,10 +126,10 @@
 		onLoad(option) {
 			// this.classid=option.id
 			this.classid=15
-			this.getclassinfo()
+			
 		},
 		onShow(){
-			
+			this.getclassinfo()
 		},
 		methods:{
 			getclassinfo() {
@@ -233,7 +236,7 @@
 			display: flex;
 			justify-content: space-evenly;
 			height: 160rpx;
-			background: linear-gradient(174deg, #FFF2E4 0%, #FFFFFF 100%);
+			background: linear-gradient(174deg, #FFF2E4 10%, #FFFFFF 100%);
 			border-radius: 20rpx 20rpx 20rpx 20rpx;
 			// padding: 60rpx;
 
@@ -258,16 +261,30 @@
 
 		.view_images {
 			display: flex;
-			justify-content: space-between;
+			// justify-content: space-between;
 			margin-top: 20rpx;
 			
 
 			image {
-			
+				margin-right: 16rpx;
 				width: 36rpx;
 				height: 36rpx;
 				
 			}
+			.shenlue{
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				background-color: #FFF2E4;
+				border-radius: 50%;
+				width: 36rpx;
+				height: 36rpx;
+				font-size: 20rpx;
+				font-family: PingFang SC, PingFang SC;
+				font-weight: 800;
+				color: #F18F21;
+				
+			}
 		}
 
 		.view_operation {