431 lines
9.4 KiB
Vue
431 lines
9.4 KiB
Vue
<template>
|
||
<view class="page-bg">
|
||
<Navigation :title_name="'教育中心'" :isReturn="3" :color="'#000000'" :bgc="'#FFFFFF'" :isCenter="true" />
|
||
<view class="ech" v-if="person.studentList[person.studentActive]">
|
||
<CurrItem v-if="person.studentList[person.studentActive]" :datas="person.studentList[person.studentActive]"
|
||
@changeStu="getChangeStu" :isChange="true" :listLength="person.studentList.length"
|
||
:bgIndex="person.studentActive" />
|
||
<view class="ech-list">
|
||
<view class="time-logo">
|
||
<view class="time-reserve" @tap="reverseSort">排序:按时间 <view class="time-icon"
|
||
:class="showTimeIcon?'dowm-time-icon':'up-time-icon'"></view>
|
||
</view>
|
||
</view>
|
||
<scroll-view @scrolltolower="lowerBottom" @refresherrefresh="getFresh" scroll-y="true"
|
||
class="scrollHeight">
|
||
<template v-if="person.data.list&&person.data.list.length>0">
|
||
<view class="ech-item" v-for="(rep,repIndex) in person.data.list" :key="repIndex">
|
||
<view class="ech-item-type"
|
||
:class="[rep.ExamType==='周考'?'ech-type-blue':rep.ExamType==='月考'?'ech-type-green':rep.ExamType==='期中'?'ech-type-purple':'ech-type-purple']">
|
||
{{rep.ExamType}}
|
||
</view>
|
||
<view class="left">
|
||
<view class="item-tit">{{rep.Name}}</view>
|
||
<view class="time">时间：{{rep.Time}}</view>
|
||
</view>
|
||
<view class="right" @click="lookReport(rep,repIndex)">查看<br />报告</view>
|
||
</view>
|
||
<view class="more_text" v-if="person.showMoreData">没有数据了...</view>
|
||
</template>
|
||
<template v-else>
|
||
<view class="empty_box">
|
||
<image src="@/static/null_icon.png" mode=""></image>
|
||
<text>暂无数据~</text>
|
||
</view>
|
||
</template>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
<view v-else class="empty_box">
|
||
<image src="@/static/null_icon.png" mode=""></image>
|
||
<text>暂无数据~</text>
|
||
</view>
|
||
<Popups :isShow="showChangeStudent" :bgColor="'#fff'">
|
||
<view class="dio-card">
|
||
<view class="stu-item" :class="[person.studentActive===stuIndex?'active-bg':'']"
|
||
v-for="(stu,stuIndex) in person.studentList" :key="stuIndex"
|
||
@click.stop="studentChange(stu,stuIndex)">
|
||
<image src="https://minio.23544.com:9010/data-center/gzh/Avatar.png" mode=""></image>
|
||
<view class="stu-name">{{stu.RealName}}</view>
|
||
</view>
|
||
</view>
|
||
</Popups>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
reactive
|
||
} from "vue";
|
||
import {
|
||
onLoad,
|
||
onShow
|
||
} from "@dcloudio/uni-app";
|
||
import Popups from "@/components/popups/index.vue";
|
||
import CurrItem from "@/components/currItem/index.vue";
|
||
import Navigation from '@/components/navigation/index.vue'
|
||
import {
|
||
getChangeStudent,
|
||
getBindStudentList,
|
||
getUserReportList
|
||
} from "@/api/exam-data";
|
||
import {
|
||
getUserInfo,
|
||
postRegister
|
||
} from "@/api/user";
|
||
|
||
let person = reactive({
|
||
showMoreData: false,
|
||
// 学生列表
|
||
studentActive: 0,
|
||
studentList: [],
|
||
// 报告列表
|
||
data: {
|
||
list: [],
|
||
pageIndex: 1,
|
||
pageSize: 10,
|
||
total: 0
|
||
}
|
||
})
|
||
|
||
// 刷新页面加载
|
||
onShow(() => {
|
||
person.data.pageIndex=1
|
||
person.data.list=[]
|
||
uni.pageScrollTo({
|
||
scrollTop: 0
|
||
});
|
||
GetBindStudentList()
|
||
if (person.data.pageIndex * person.data.pageSize >= person.data.total) return person.showMoreData = true
|
||
})
|
||
|
||
//点击时间排序的互动
|
||
const showTimeIcon = ref(false)
|
||
const reverseSort = () => {
|
||
showTimeIcon.value = !showTimeIcon.value
|
||
if (person.data.list && person.data.list.length > 0) {
|
||
if (showTimeIcon.value) {
|
||
// 降序
|
||
person.data.list = person.data.list.sort(dateData("Time", true))
|
||
} else {
|
||
// 升序
|
||
person.data.list = person.data.list.sort(dateData("Time", false))
|
||
}
|
||
}
|
||
}
|
||
// 时间排序
|
||
const dateData = (property, bol) => {
|
||
return function(a, b) {
|
||
let value1 = a[property];
|
||
let value2 = b[property];
|
||
if (bol) {
|
||
// 升序
|
||
return Date.parse(value1) - Date.parse(value2);
|
||
} else {
|
||
// 降序
|
||
return Date.parse(value2) - Date.parse(value1)
|
||
}
|
||
}
|
||
}
|
||
|
||
//关于弹窗出现和关闭
|
||
const showChangeStudent = ref(false)
|
||
const getChangeStu = () => {
|
||
showChangeStudent.value = !showChangeStudent.value
|
||
}
|
||
|
||
// 学生切换
|
||
const studentChange = (item, index) => {
|
||
person.studentActive = index
|
||
showChangeStudent.value = false
|
||
if (showChangeStudent.value === false) {
|
||
person.data.pageIndex = 1
|
||
person.data.list = []
|
||
person.data.total = 0
|
||
GetChangeStudent(item.Id)
|
||
}
|
||
}
|
||
|
||
//跳转查看报告
|
||
const lookReport = (item, index) => {
|
||
uni.navigateTo({
|
||
url: '/pages/examReport/index?examId=' + item.ExamId
|
||
})
|
||
}
|
||
|
||
//触底加载
|
||
const lowerBottom = () => {
|
||
// 判断是否还有下一页数据
|
||
if (person.data.pageIndex * person.data.pageSize >= person.data.total) return person.showMoreData = true
|
||
// 让页码值自增 +1
|
||
person.data.pageIndex += 1
|
||
// 重新获取列表数据
|
||
// 调接口
|
||
GetUserReportList()
|
||
}
|
||
// 下拉刷新
|
||
const getFresh = () => {}
|
||
|
||
// 获取切换学生
|
||
const GetChangeStudent = (Id) => {
|
||
getChangeStudent({
|
||
studentId: Id
|
||
}).then(res => {
|
||
let {
|
||
Code,
|
||
Data
|
||
} = res
|
||
if (Code === 200 && Data) {
|
||
GetUserReportList()
|
||
}
|
||
})
|
||
}
|
||
// 获取绑定的学生列表
|
||
const GetBindStudentList = () => {
|
||
getBindStudentList().then(res => {
|
||
let {
|
||
Code,
|
||
Data,
|
||
Message
|
||
} = res
|
||
if (Code === 200 && Data) {
|
||
person.studentList = Data
|
||
if (person.studentList && person.studentList.length > 0) {
|
||
GetChangeStudent(person.studentList[person.studentActive].Id)
|
||
}
|
||
} else {
|
||
uni.showToast({
|
||
title: Message,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
// 获取学生报告列表
|
||
const GetUserReportList = () => {
|
||
let obj = {
|
||
PageIndex: person.data.pageIndex,
|
||
PageSize: person.data.pageSize
|
||
}
|
||
getUserReportList(obj).then(res => {
|
||
let {
|
||
Code,
|
||
Data,
|
||
Message
|
||
} = res
|
||
if (Code === 200 && Data) {
|
||
setTimeout(() => {}, 200)
|
||
person.data.list = [...person.data.list, ...Data.Data]
|
||
person.data.total = Data.Total
|
||
} else {
|
||
uni.showToast({
|
||
title: Message,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page-bg {
|
||
height: calc(100vh - 4rpx);
|
||
overflow: hidden;
|
||
}
|
||
|
||
// 上拉分页
|
||
.scrollHeight {
|
||
height: calc(100vh - 550rpx);
|
||
|
||
.more_text {
|
||
margin: 20rpx 0;
|
||
color: #999;
|
||
font-size: 24rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.ech {
|
||
width: 100vw;
|
||
padding: 10px 20px 0 20px;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
}
|
||
|
||
.ech-card {
|
||
position: absolute;
|
||
z-index: 10;
|
||
}
|
||
|
||
.ech-list {
|
||
border-radius: 0 0 10px 10px;
|
||
background: #FFF;
|
||
box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.15);
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
padding-bottom: 20px;
|
||
margin-top: -15px;
|
||
|
||
.ech-item {
|
||
margin: 0 auto 10px auto;
|
||
width: 303px;
|
||
border-radius: 6px;
|
||
background: linear-gradient(180deg, rgba(228, 233, 255, 0.74) 0%, rgba(255, 255, 255, 0.49) 29.69%, rgba(128, 151, 255, 0.67) 100%);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding: 20px 10px 20px 10px;
|
||
position: relative;
|
||
|
||
.ech-item-type {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
padding: 2px 20px;
|
||
border-radius: 6px 0 10px 0;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.ech-type-blue {
|
||
color: #4F6FFF;
|
||
background: #E3E8FF;
|
||
}
|
||
|
||
.ech-type-green {
|
||
color: #00B6DE;
|
||
background: #C0F4FF;
|
||
}
|
||
|
||
.ech-type-purple {
|
||
color: #9361FF;
|
||
background: #E8DEFE;
|
||
}
|
||
|
||
.left {
|
||
width: 78%;
|
||
|
||
.item-tit {
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
color: #5B5B5B;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.78px;
|
||
}
|
||
|
||
.time {
|
||
margin-top: 7px;
|
||
height: 20px;
|
||
color: #5E5E5E !important;
|
||
font-size: 12px;
|
||
letter-spacing: 0.6px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.time-logo {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
margin: 10px 0;
|
||
|
||
.time-reserve {
|
||
margin-right: 20px;
|
||
height: 15px;
|
||
line-height: 15px;
|
||
color: #777;
|
||
font-size: 12px;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
line-height: normal;
|
||
letter-spacing: 0.6px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.time-icon {
|
||
margin-left: 5px;
|
||
width: 14px;
|
||
height: 14px;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.dowm-time-icon {
|
||
background: url('@/static/education/reverse.png');
|
||
}
|
||
|
||
.up-time-icon {
|
||
background: url('@/static/education/reverse_up.png');
|
||
}
|
||
|
||
.right {
|
||
width: 50px;
|
||
height: 54px;
|
||
background: #fff;
|
||
border-radius: 5px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #6B86FF;
|
||
font-family: PingFang SC;
|
||
font-size: 12px;
|
||
font-style: normal;
|
||
font-weight: 500;
|
||
line-height: normal;
|
||
letter-spacing: 0.72px;
|
||
}
|
||
|
||
.dio-card {
|
||
width: 202px;
|
||
height: 100%;
|
||
overflow: auto;
|
||
max-height: 250px;
|
||
|
||
&::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.stu-item {
|
||
width: 100%;
|
||
height: 91px;
|
||
border-radius: 8px;
|
||
margin-bottom: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #EFEFEF;
|
||
color: #0D0A0A;
|
||
|
||
image {
|
||
width: 68px;
|
||
height: 68px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.stu-name {
|
||
margin-left: 20px;
|
||
font-size: 16px;
|
||
letter-spacing: 0.9px;
|
||
width: 30%;
|
||
text-align: left;
|
||
}
|
||
}
|
||
|
||
.active-bg {
|
||
color: #FFF;
|
||
background: #6B86FF;
|
||
}
|
||
}
|
||
</style> |