From 76008bc03a45062660e6ce6fdd656fd8c63273e0 Mon Sep 17 00:00:00 2001
From: taoxu <2622874537@qq.com>
Date: Thu, 7 Dec 2023 16:59:19 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
pages/Mystudent/addstu.vue | 131 +++++++++++++++++--
pages/Mystudent/formstu.vue | 89 +++++++------
pages_teacher/teacher_class/class_detail.vue | 31 ++++-
3 files changed, 188 insertions(+), 63 deletions(-)
diff --git a/pages/Mystudent/addstu.vue b/pages/Mystudent/addstu.vue
index 215860d..89d0a64 100644
--- a/pages/Mystudent/addstu.vue
+++ b/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.isloding = false
+ this.stulist=res.data.list
+ this.orgstulist = JSON.parse(JSON.stringify(res.data.list));
+
}
})
@@ -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>
\ No newline at end of file
diff --git a/pages/Mystudent/formstu.vue b/pages/Mystudent/formstu.vue
index 8a385f5..e174b40 100644
--- a/pages/Mystudent/formstu.vue
+++ b/pages/Mystudent/formstu.vue
@@ -20,9 +20,11 @@
</image>
</view>
<input type="text"
- placeholder="搜索相关内容..."
- class="input"
- placeholder-style="color:#C7CDD3 ">
+ v-model="searchKeyword"
+ placeholder="搜索相关内容..."
+ class="input"
+ placeholder-style="color:#C7CDD3"
+ @input="search()">
</view>
</view>
@@ -32,51 +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
- </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 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
+ ID：{{item.memberInfo.id}}
</view>
</view>
</view>
@@ -101,6 +69,7 @@
</view>
</view>
+
</view>
<!-- <view class="botbtn">
<view class="btn">
@@ -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
diff --git a/pages_teacher/teacher_class/class_detail.vue b/pages_teacher/teacher_class/class_detail.vue
index b8409a8..2c5fd91 100644
--- a/pages_teacher/teacher_class/class_detail.vue
+++ b/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">
- <image :src="item1.url" mode="" v-for="(item1,index) in item.image"></image>
+ <view class="view_images" >
+ <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 {