smartmeter-app/pages/Mystudent/student.vue
2023-12-06 16:56:25 +08:00

891 lines
20 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="view_body">
<u-navbar :is-back="false"
title='班级'
title-color="#2E4975"
:border-bottom="false"
:background="bgc"
id="navbar">
</u-navbar>
<view class="nocont"
v-show="shownocont">
<view class="nocont_tip">
<view class="nocont_tip_img">
<image src="https://file.langsi.online/yasiimg/web/static/uVcz1RzZi6US2NKa0ssl"></image>
</view>
<view class="nocont_tip_txt">暂无学生快去添加吧</view>
</view>
<view class="nocont_button">
添加学生
</view>
</view>
<view class="student_page"
v-show="shownocont == false">
<view class="student_page_top">
<view class="search_box">
<view class="check_search">
{{ checkindex == 1 ? '班级' : '学生' }}
<!-- <view class="iconfont icon-arow_down"></view> -->
</view>
<view class="serchbox">
<view class="serchimg">
<image src="https://file.langsi.online/yasiimg/web/static/uVMACkynkipOxuTYDqm0"
mode="scaleToFill">
</image>
</view>
<input type="text"
v-model="searchKeyword"
placeholder="搜索相关内容..."
class="input"
placeholder-style="color:#C7CDD3"
@input="search()">
</view>
</view>
<view class="info_box">
<view class="info_cont"
style="width:90rpx ;">
<view class="info_cont_top">
学生人数
</view>
<view class="info_cont_bot">
21
</view>
</view>
<view class="info_cont">
<view class="info_cont_top">
平均成绩/分
</view>
<view class="info_cont_bot">
21
</view>
</view>
<view class="info_cont">
<view class="info_cont_top">
作业完成度
</view>
<view class="info_cont_bot">
80%
</view>
</view>
</view>
<view class="chekbox">
<view class="check"
:class="checkindex == 1 ? 'act1' : ''"
@click="checkindex = 1">
班级
</view>
<view class="check"
:class="checkindex == 0 ? 'act1' : ''"
@click="checkindex = 0">
学生
</view>
<view class="add">
+ 添加
</view>
</view>
</view>
<view class="class_box"
v-if="checkindex == 1">
<view class="class_box_top">
<view @click="changeclass()"
class="class_box_top_cont">
班级人数
<view class="iconfont icon-arow_down"></view>
<view class="dropdown_box"
v-show="classnum">
<view class="dropdown_item"
:class="classnumindex == 0 ? 'act2' : ''"
@click="chengclassnumindex(0)">
降序
</view>
<view class="dropdown_item"
:class="classnumindex == 1 ? 'act2' : ''"
@click="chengclassnumindex(1)">
升序
</view>
</view>
</view>
<view @click="changetext()"
class="class_box_top_cont">
标签文字
<view class="iconfont icon-arow_down"></view>
<view class="dropdown_box"
v-show="showtext">
<view class="dropdown_item"
:class="textindex == 1 ? 'act2' : ''"
@click="chengetextindex(1)">
听力
</view>
<view class="dropdown_item"
:class="textindex == 2 ? 'act2' : ''"
@click="chengetextindex(2)">
阅读
</view>
<view class="dropdown_item"
:class="textindex == 3 ? 'act2' : ''"
@click="chengetextindex(3)">
写作
</view>
<view class="dropdown_item"
:class="textindex == 4 ? 'act2' : ''"
@click="chengetextindex(4)">
口语
</view>
</view>
</view>
<!-- 下拉框内容 -->
</view>
<view class="class_card"
v-for="(item, index) in classlist"
v-if="isloding == false"
:key="index" @click="toclassdetal(item)">
<view class="class_card_top">
<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">
{{ item.name }}
</view>
<view class="class_card_right_bot"
v-show="item.classify == 1">
听力
</view>
<view class="class_card_right_bot"
v-show="item.classify == 2">
阅读
</view>
<view class="class_card_right_bot"
v-show="item.classify == 3">
写作
</view>
<view class="class_card_right_bot"
v-show="item.classify == 4">
口语
</view>
</view>
</view>
<view class="class_infobox">
<view class="class_info"
style="width:80rpx ;">
<view class="class_info_top">
班级人数
</view>
<view class="class_info_bot">
{{ item.totalMembers }}
</view>
</view>
<view class="class_info">
<view class="class_info_top">
平均成绩/分
</view>
<view class="class_info_bot">
{{ item.avgScore }}
</view>
</view>
<view class="class_info">
<view class="class_info_top">
作业完成度
</view>
<view class="class_info_bot">
{{ item.workCompletionDegree }}%
</view>
</view>
</view>
</view>
<view style="width: 100%;height: 50rpx;">
</view>
</view>
</view>
<view class="overlay"
v-if="false">
<view class="addstudent"
v-show="false">
<view class="close">
<image src="https://file.langsi.online/yasiimg/web/static/uSzPsPoFgoVwcsl7pJ89"></image>
</view>
<view class="addstudent_tit">
添加学生
</view>
<view class="addstudent_input_box">
<view class="addstudent_input_tit">
学员名称
</view>
<view class="addstudent_input">
<input type="text"
placeholder="搜索相关内容..."
class="input"
placeholder-style="color:#C7CDD3;font-size: 24rpx; ">
</view>
</view>
<view class="addstudent_input_box">
<view class="addstudent_input_tit">
学员ID
</view>
<view class="addstudent_input">
<input type="text"
placeholder="搜索相关内容..."
class="input"
placeholder-style="color:#C7CDD3;font-size: 24rpx; ">
</view>
</view>
<view class="addbtn">
添加
</view>
</view>
<view class="addtip"
v-show="false">
<view class="logo">
<image src="https://file.langsi.online/yasiimg/web/static/uxsaoHOpSUoxnX7lU3Fe"></image>
</view>
<view class="close">
<image src="https://file.langsi.online/yasiimg/web/static/uSzPsPoFgoVwcsl7pJ89"></image>
</view>
已添加成功
</view>
</view>
<indexlist v-show="checkindex == 0" />
</view>
</template>
<script>
import indexlist from "../compoents/indexList.vue"
export default {
components: {
indexlist
},
data() {
return {
shownocont: false,
bgc: {
backgroundColor: "#F6F9FC",
},
checkindex: 1,
isDropdownOpen: true,
classlist: {},
isloding: true,
changeclasslist: {},
classnum: false,
classnumindex: -1,
showtext: false,
textindex: 0,
searchKeyword: '',
}
},
onLoad(option) {
this.getclassList()
},
methods: {
toclassdetal(item) {
console.log('点击了'); // 确保这一行输出
uni.navigateTo({
url: "/pages_teacher/teacher_class/class_detail?id=" + item.id
}).then(res => {
console.log('跳转成功', res);
}).catch(err => {
console.error('跳转失败', err);
});
},
search() {
// 根据关键字过滤 this.classlist
if(this.searchKeyword!=''){
const filteredList = JSON.parse(JSON.stringify(this.changeclasslist)).filter(item => item.name.includes(this.searchKeyword));
// 更新 this.classlist 为过滤后的列表
this.classlist = filteredList;
}else{
this.fuwei()
}
},
calculatePercentage(value1, value2) {
if (value2 === 0) {
console.log("value2 is zero, cannot calculate percentage");
return '0%'; // 或者返回其他默认值
}
return ((value1 / value2) * 100).toFixed(0) + '%';
},
changeclass() {
this.classnum = !this.classnum
},
chengclassnumindex(num) {
if (num == this.classnumindex) {
this.classnumindex = -1
} else {
this.classnumindex = num
}
if (this.classnumindex == 0) {
this.classlist.sort((a, b) => b.totalMembers - a.totalMembers);
}
if (this.classnumindex == 1) {
// 升序排列 classlist 数组,根据 totalMembers 属性
this.classlist.sort((a, b) => a.totalMembers - b.totalMembers);
}
if (this.classnumindex == -1) {
this.fuwei()
}
},
fuwei() {
console.log(this.classlist, 'this.classlist');
console.log(this.changeclasslist, 'this.changeclasslist');
this.classlist = JSON.parse(JSON.stringify(this.changeclasslist));
},
changetext() {
this.showtext = !this.showtext
},
chengetextindex(num) {
if (num == this.textindex) {
this.textindex = 0
} else {
this.textindex = num
}
if (this.textindex !== 0 || this.classnumindex === 1) {
this.classlist.sort((a, b) => {
if (this.textindex !== 0 && a.classify === this.textindex) {
return -1; // 将匹配的项放在前面
}
if (this.textindex !== 0 && b.classify === this.textindex) {
return 1; // 将匹配的项放在前面
}
if (this.classnumindex === 0) {
return b.totalMembers - a.totalMembers; // 对 totalMembers 进行降序排列
}
if (this.classnumindex === 1) {
return a.totalMembers - b.totalMembers; // 对 totalMembers 进行升序排列
}
return 0; // 保持原有顺序
});
} else {
console.log('调用了');
this.fuwei();
}
},
getclassList() {
this.$u.get("https://api.admin-v2.langsi.online/admin-api/classroom/page").then(res => {
console.log(res, '返回成功');
if (res.code === 0) {
this.classlist = res.data.list;
this.changeclasslist = JSON.parse(JSON.stringify(this.classlist));
this.isloding = false;
}
});
},
getstuList() {
this.$u.get("https://api.admin-v2.langsi.online/admin-api/classroom/page").then(res => {
console.log(res, '返回成功');
if (res.code == 0) {
this.classlist = res.data.list
this.isloding = false
}
})
}
}
}
</script>
<style lang="scss" >
.view_body {
width: 750rpx;
background: #F6F9FC;
.nocont {
margin-top: 340rpx;
margin-left: 216rpx;
.nocont_tip {
margin-left: 28rpx;
width: 264rpx;
display: flex;
flex-wrap: wrap;
justify-content: center;
.nocont_tip_img {
width: 213.36rpx;
height: 220rpx;
}
.nocont_tip_txt {
font-size: 24rpx;
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
color: #0E3B77
}
}
.nocont_button {
margin-top: 100rpx;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 320rpx;
height: 80rpx;
background: #2E7CE6;
border-radius: 20rpx 20rpx 20rpx 20rpx;
font-size: 24rpx;
font-family: 'PingFang', 'PingFang';
font-weight: 800;
color: #FFFFFF;
}
}
.student_page {
.student_page_top {
padding: 32rpx;
.search_box {
width: 686rpx;
height: 88rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
display: flex;
flex-wrap: nowrap;
.check_search {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
width: 148rpx;
height: 88rpx;
background: #FFF2E4;
border-radius: 20rpx 0rpx 0rpx 20rpx;
font-size: 28rpx;
font-family: 'PingFang', 'PingFang';
font-weight: 500;
color: #F39852;
.icon-arow_down {
margin-left: 8rpx;
font-size: 20rpx;
}
}
.serchbox {
// padding: 0 32rpx;
display: flex;
flex-wrap: nowrap;
// margin-top: 30rpx;
align-items: center;
justify-content: space-between;
width: 538rpx;
height: 88rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
.serchimg {
margin-left: 32rpx;
width: 32rpx;
height: 32rpx;
}
.input {
// margin-left: 24rpx;
width: 452rpx;
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;
}
}
}
.info_box {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-around;
margin-top: 20rpx;
width: 686rpx;
height: 128rpx;
background: linear-gradient(179deg, rgba(255, 237, 223, 0.65) 0%, #FFFFFF 100%);
border-radius: 18rpx 18rpx 18rpx 18rpx;
.info_cont {
width: 110rpx;
display: flex;
justify-content: center;
flex-wrap: wrap;
.info_cont_top {
font-size: 20rpx;
font-family: 'PingFang', 'PingFang';
font-weight: 500;
color: rgba(7, 47, 90, 0.5);
line-height: 24rpx;
}
.info_cont_bot {
margin-top: 12rpx;
font-size: 28rpx;
font-family: 'PingFang', 'PingFang';
font-weight: 800;
color: #2D7CE6;
}
}
}
.chekbox {
margin-top: 32rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
.check {
margin-right: 84rpx;
font-size: 28rpx;
font-family: 'PingFang', 'PingFang';
font-weight: 500;
color: rgba(7, 47, 90, 0.6);
}
.act1 {
font-size: 32rpx;
font-family: 'PingFang', 'PingFang';
font-weight: 800;
color: #2D7CE6;
}
.add {
margin-left: auto;
display: flex;
align-items: center;
justify-content: center;
width: 138rpx;
height: 52rpx;
background: #FFF2E4;
border-radius: 26rpx 26rpx 26rpx 26rpx;
font-size: 24rpx;
font-family: 'PingFang', 'PingFang';
font-weight: 500;
color: #F18F21;
}
}
}
.class_box {
padding: 0 32rpx;
display: flex;
flex-wrap: wrap;
.class_box_top {
width: 100%;
display: flex;
flex-wrap: nowrap;
align-items: center;
// justify-content: space-around;
.class_box_top_cont {
position: relative;
margin-right: 12rpx;
display: flex;
flex-wrap: nowrap;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
padding: 14rpx 30rpx;
font-size: 20rpx;
font-family: 'PingFang', 'PingFang';
font-weight: 500;
color: rgba(7, 47, 90, 0.6);
.icon-arow_down {
margin-left: 8rpx;
font-size: 18rpx;
}
.dropdown_box {
left: 0;
top: 100%;
position: absolute;
width: 160rpx;
// height: 204rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.25);
border-radius: 20rpx 20rpx 20rpx 20rpx;
.dropdown_item:last-child {
border-bottom: 0rpx solid #FFFFFF;
}
.dropdown_item {
padding: 20rpx 40rpx;
font-size: 20rpx;
font-family: 'PingFang', 'PingFang';
font-weight: 500;
color: rgba(46, 73, 117, 0.6);
border-bottom: 2rpx solid #F3F3F3;
}
.act2 {
color: #2D7CE6;
}
}
}
}
.class_card {
margin-top: 20rpx;
width: 686rpx;
height: 296rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
padding: 32rpx;
.class_card_top {
display: flex;
flex-wrap: nowrap;
align-items: center;
.class_card_left {
width: 84rpx;
height: 84rpx;
}
.class_card_right {
margin-left: 12rpx;
display: flex;
flex-wrap: wrap;
.class_card_right_top {
width: 100%;
font-size: 32rpx;
font-family: 'PingFang', 'PingFang';
font-weight: bold;
color: #072F5A;
}
.class_card_right_bot {
margin-top: 8rpx;
background: #EBF3FF;
border-radius: 4rpx 4rpx 4rpx 4rpx;
padding: 10rpx 20rpx;
font-size: 20rpx;
font-family: 'PingFang', 'PingFang';
font-weight: 500;
color: #2D7CE6;
}
}
}
.class_infobox {
margin-top: 20rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-around;
width: 622rpx;
height: 128rpx;
background: #F9F9F9;
border-radius: 20rpx 20rpx 20rpx 20rpx;
.class_info {
width: 110rpx;
display: flex;
flex-wrap: wrap;
justify-content: center;
.class_info_top {
font-size: 20rpx;
font-family: 'PingFang', 'PingFang';
font-weight: 500;
color: rgba(7, 47, 90, 0.5);
}
.class_info_bot {
margin-top: 12rpx;
font-size: 28rpx;
font-family: 'PingFang', 'PingFang';
font-weight: 800;
color: #2D7CE6;
}
}
}
}
}
}
.overlay {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 100; // 设置遮罩层在上方
.addstudent {
position: relative;
padding: 40rpx;
width: 600rpx;
height: 632rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
.close {
top: 20rpx;
right: 20rpx;
position: absolute;
width: 20rpx;
height: 20rpx;
}
.addstudent_tit {
width: 100%;
text-align: center;
font-size: 36rpx;
font-family: 'PingFang';
font-weight: 800;
color: #2E4975;
line-height: 36rpx;
}
.addstudent_input_box {
margin-top: 40rpx;
.addstudent_input_tit {
font-size: 28rpx;
font-family: 'PingFang';
font-weight: 500;
color: #2E4975;
}
.addstudent_input {
margin-top: 16rpx;
width: 520rpx;
height: 80rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
border: 2rpx solid #DDE2EE;
.input {
// margin-left: 24rpx;
width: 520rpx;
height: 80rpx;
// 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-left: 32rpx;
box-sizing: border-box;
}
}
}
.addbtn {
display: flex;
align-items: center;
justify-content: center;
margin-top: 76rpx;
width: 520rpx;
height: 88rpx;
background: #2D7CE6;
border-radius: 20rpx 20rpx 20rpx 20rpx;
font-size: 28rpx;
font-family: 'PingFang';
font-weight: 500;
color: #FFFFFF;
}
}
.addtip {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 440rpx;
height: 138rpx;
font-size: 32rpx;
font-family: 'PingFang', 'PingFang';
font-weight: 800;
color: #2D7CE6;
background: linear-gradient(180deg, #C2DCFF 0%, #FFFFFF 100%);
border-radius: 20rpx 20rpx 20rpx 20rpx;
.logo {
position: absolute;
width: 182rpx;
height: 244rpx;
top: -244rpx;
left: 130rpx;
}
.close {
position: absolute;
top: 10rpx;
right: 20rpx;
width: 20rpx;
height: 20rpx;
}
}
}
}</style>