Files
medicine_app/pages/miniClass/MonitorClassList.vue
liuyuan 93eea53283 提交
2025-07-14 09:34:51 +08:00

762 lines
19 KiB
Vue
Raw Permalink 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>
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<z-nav-bar title="班级管理"></z-nav-bar>
<view class="containerBg">
<view class="subCate flex" v-if="subList1.length> 0">
<text :class="['item',subTabId == item.id ? 'active' : '']" v-for="(item, index) in subList1"
@click="curseClick(item)" :key="index">{{item.title}}</text>
</view>
<view class="" v-show="subTabId == 0">
<view class="" v-if="preClassList.length > 0">
<!-- 待开班 -->
<uni-section class="mb-10 nobg" title="待开班" type="line"></uni-section>
<view class="888">
<view class="newBox" v-if="preClassList.length > 0">
<view class="item flexbox" v-for="(item, index) in preClassList" :key="index"
@click="onPageJump('/pages/miniClass/classInfoMan',item)">
<!-- <view class="imgcontainer" :style="{backgroundImage:surl(item.image)}"> -->
<view class="imgcontainer" v-if="item.icon != ''">
<image :src="item.icon" mode="aspectFit"></image>
</view>
<view class="imgcontainer defaultImg" v-else>
<image src="@/static/my_04.png" mode="aspectFit"></image>
</view>
<view class="buyItems">
<view class="">
<text v-show="item.classModel.type == 0">普通班</text>
<text v-show="item.classModel.type == 1">联合班</text>
<text v-show="item.classModel.type == 2">精英班</text>
<text class="txt555" @click="onPageJump('/pages/miniClass/classInfoMan',item)">
{{item.title}}
</text>
</view>
<view class="jianjie">
目标学员人数{{item.number}}
</view>
<view class="jianjie">
班内职务{{item.roleName}}
</view>
<view class="btn_box">
<!-- <text @click="enterClass" v-show="item.state == '0'">一键加入</text> -->
<text class="seeInfo">进入班级</text>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="" v-if="learningClassList.length > 0">
<uni-section class="mb-10 nobg" title="学习中" type="line"></uni-section>
<view class="learnBox">
<view class="newBox" v-if="learningClassList.length > 0">
<view class="item flexbox" v-for="(item, index) in learningClassList" :key="index"
@click="onPageJump('/pages/miniClass/classInfoMan',item)">
<!-- <view class="imgcontainer" :style="{backgroundImage:surl(item.image)}"> -->
<view class="imgcontainer" v-if="item.icon != ''">
<image :src="item.icon" mode="aspectFit"></image>
</view>
<view class="imgcontainer defaultImg" v-else>
<image src="@/static/my_04.png" mode="aspectFit"></image>
</view>
<view class="buyItems">
<view class="">
<text v-show="item.classModel.type == 0">普通班</text>
<text v-show="item.classModel.type == 1">联合班</text>
<text v-show="item.classModel.type == 2">精英班</text>
<text class="txt555" @click="onPageJump('/pages/miniClass/classInfoMan',item)">
{{item.title}}
</text>
</view>
<view class="jianjie">
目标学员人数{{item.number}} <br/>
<text v-if="item.startTime&&item.studyEndTime">学习日期{{(item.startTime).split('T')[0]}}{{(item.studyEndTime).substring(0, 10)}}<br/></text>
<text v-if="item.examStartTime&&item.examEndTime">考试周日期{{item.examStartTime.substring(0, 10)}}{{(item.examEndTime).substring(0, 10)}}</text>
</view>
<view class="jianjie">
班内职务{{item.roleName}}
</view>
<view class="btn_box">
<text class="seeInfo">进入班级</text>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="" v-if="examingClassList.length > 0">
<uni-section class="mb-10 nobg" title="考试中" type="line"></uni-section>
<view class="learnBox">
<view class="newBox" v-if="examingClassList.length > 0">
<view class="item flexbox" v-for="(item, index) in examingClassList" :key="index"
@click="onPageJump('/pages/miniClass/classInfoMan',item)">
<!-- <view class="imgcontainer" :style="{backgroundImage:surl(item.image)}"> -->
<view class="imgcontainer" v-if="item.icon != ''">
<image :src="item.icon" mode="aspectFit"></image>
</view>
<view class="imgcontainer defaultImg" v-else>
<image src="@/static/my_04.png" mode="aspectFit"></image>
</view>
<view class="buyItems">
<view class="">
<text v-show="item.classModel.type == 0">普通班</text>
<text v-show="item.classModel.type == 1">联合班</text>
<text v-show="item.classModel.type == 2">精英班</text>
<text class="txt555" @click="onPageJump('/pages/miniClass/classInfoMan',item)">
{{item.title}}
</text>
</view>
<view class="jianjie">
目标学员人数{{item.number}} <br/>
<text v-if="item.startTime&&item.studyEndTime">学习日期{{(item.startTime).split('T')[0]}}{{(item.studyEndTime).substring(0, 10)}}<br/></text>
<text v-if="item.examStartTime&&item.examEndTime">考试周日期{{item.examStartTime.substring(0, 10)}}{{(item.examEndTime).substring(0, 10)}}</text>
</view>
<view class="jianjie">
班内职务{{item.roleName}}
</view>
<view class="btn_box">
<text class="seeInfo">进入班级</text>
</view>
</view>
</view>
</view>
</view>
</view>
<u-divider v-if="preClassList.length == 0 && learningClassList.length == 0 && examingClassList.length == 0" text="暂无数据"></u-divider>
</view>
<!-- 过期班级 -->
<view class="" v-show="subTabId == 2">
<view class="learnBox">
<view class="newBox" v-if="classList.length > 0">
<view class="item flexbox" v-for="(item, index) in classList" :key="index"
@click="onPageJump('/pages/miniClass/classInfoMan',item)">
<!-- <view class="imgcontainer" :style="{backgroundImage:surl(item.image)}"> -->
<view class="imgcontainer" v-if="item.icon != ''">
<image :src="item.icon" mode="aspectFit"></image>
</view>
<view class="imgcontainer defaultImg" v-else>
<image src="@/static/my_04.png" mode="aspectFit"></image>
</view>
<view class="buyItems">
<view class="">
<text v-show="item.classModel.type == 0">普通班</text>
<text v-show="item.classModel.type == 1">联合班</text>
<text v-show="item.classModel.type == 2">精英班</text>
<text class="txt555" @click="onPageJump('/pages/miniClass/classInfoMan',item)">
{{item.title}}
</text>
</view>
<view class="jianjie">
目标学员人数{{item.number}}
</view>
<view class="jianjie">
班内职务{{item.roleName}}
</view>
<view class="btn_box">
<!-- <text @click="enterClass" v-show="item.state == '0'">一键加入</text> -->
<text class="seeInfo">进入班级</text>
</view>
</view>
</view>
</view>
<u-divider v-else text="暂无数据"></u-divider>
</view>
<view>
<!-- <u-back-top scroll-top="100"></u-back-top> -->
<u-back-top :scroll-top="scrollTop" bottom="150" :customStyle='bgiStyle'
:iconStyle="iconStyle"></u-back-top>
</view>
</view>
</view>
<z-navigation></z-navigation>
</view>
</template>
<script>
import musicPlay from '@/components/music.vue'
import $http from '@/config/requestConfig.js';
var clear;
import {
mapState
} from 'vuex';
export default {
data() {
return {
playData: {},
addType: undefined, // 小班类型
range: [{
value: '0',
text: "普通小班",
name: "普通小班"
},
{
value: '1',
text: "联合班",
name: "普通小班"
},
{
value: '2',
text: "精英班",
name: "普通小班"
},
],
tagId: null,
pid: null,
fixed: false,
pupShow: false,
fatherTabId: null,
subTabId: null, //
bgiStyle: {
background: '#fff'
},
iconStyle: {
fontSize: '40rpx',
fontWeight: 'bold',
color: '#258feb',
},
scrollTop: 0,
activeStyle: {
color: '#333',
fontWeight: 'bold',
transform: 'scale(1.2)',
// backgroundColor: '#258feb'
},
subList1: [{
title: '进行中',
id: '0'
}, {
title: '已结班',
id: '2'
}],
subList: [{
title: '待开班',
id: '0'
}, {
title: '已开班',
id: '1'
}, {
title: '已结班',
id: '2'
}],
scrollable: false,
pageTitle: '',
tabList: [{
name: '普通小班',
id: '0'
}, {
name: '联合班',
id: '1'
}, {
name: '精英班',
id: '2'
}],
curTagId: 0,
classList: [], // 已结班
preClassList: [], // 待开班
learningClassList: [], // 在学习的班级
status: 3, // 0 不显示, 1 加载中2 加载全部完成3 暂无数据
page: 1,
flag: true, // 函数是否执行完
roleObj:{},
roleCode:undefined,
examingClassList:[]
};
},
//第一次加载
onLoad(e) {
// 隐藏原生的tabbar
uni.hideTabBar();
// this.tagId = e.id
this.curTagId = this.range[0].value
this.subTabId = this.subList[0].id
this.pageTitle = e.title
this.pid = e.pid
console.log(e, '传入分类id')
this.getUserRole()
// this.getData()
// this.getCateList(this.tagId)
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
if (this.scrollTop > 500) {
this.fixed = true
} else {
this.fixed = false
}
// console.log(this.scrollTop,'this.scrollTop')
},
async onPullDownRefresh() {
console.log('下拉刷新')
this.classList = await this.getData('1','2')
this.learningClassList = await this.getData('1','1')
this.preClassList = await this.getData('1','0')
this.examingClassList = await this.getData('1','3')
uni.stopPullDownRefresh()
},
onReachBottom() {
// if (this.status != 2 && this.flag) {
// this.page++
// this.getData(this.subTabId)
// }
console.log('触底加载', this.page)
},
computed: {
...mapState(['userInfo'])
},
//页面显示
async onShow() {
// 隐藏原生的tabbar
// uni.hideTabBar();
this.roleCode = await this.getUserRole()
console.log('this.roleCode----',this.roleCode);
this.classList = await this.getData('1','2')
this.learningClassList = await this.getData('1','1')
this.preClassList = await this.getData('1','0')
this.examingClassList = await this.getData('1','3')
// this.getLearingClassList()
},
components: {
// musicPlay
},
//方法
methods: {
// 加入班级
enterClass() {
},
selectChange(e) {
console.log("e:", e);
},
closePup() {
this.pupShow = false
},
surl(imageurl) {
return `url(${imageurl})`
},
async getUserRole(){
var code = undefined
await this.$http.post("common/class/getRoleType").then( (res) => {
this.roleObj = res.result
if(this.roleObj.isMonitor){
code = '1'
return
}else if(this.roleObj.isdMonitor){
code = '2'
return
}else if(this.roleObj.isLearn){
code = '3'
return
}else if(this.roleObj.isComment){
code = '4'
return
}else if(this.roleObj.isCount){
code = '5'
return
}
})
return code
},
goCreateClass() {
console.log('this.addType', this.addType);
if (this.addType != undefined) {
uni.navigateTo({
url: `/pages/miniClass/addClass?type=${this.addType}&name=add`
})
} else {
uni.showToast({
title: '请选择班级的类型',
icon: 'none'
})
return
}
},
fatherClick(e) {
console.log('点击', e)
this.page = 1
// var item = e
this.curTagId = e.id
this.subTabId = this.subList[0].id
this.getData(this.subTabId);
},
curseClick(item) {
this.subTabId = item.id
// this.classList = []
// this.page = 1
// this.getData(this.subTabId);
},
async getData(role,state) {
// if (!this.flag) {
// console.log('正在执行,未完成')
// return
// }
var _list = []
this.status = 1
// this.flag = false
// uni.showLoading({
// title: '正在加载'
// })
await $http.request({
url: "common/class/MyClassList",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data: {
"isCommittee": role,
"state": state, //小班状态0待开班1已开班2完成
"type": '' // 班类型 0小班 1联合班 2精英班
},
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
})
.then( async res => {
if (res.code == 0) {
if (res.result.length > 0) {
// this.classList = res.result
res.result.forEach(async item => {
item.roleName = ''
item.roleCode = []
if(item.role.length > 0){
var _roleList = item.role
_roleList = _roleList.map( item => {
return item.role
})
item.roleCode = _roleList
item.roleName = await this.getRoleName(_roleList)
console.log('res.result.roleName',res.result.roleName);
}
})
_list = res.result
} else {
// this.classList = []
_list = []
}
// this.flag = true
}
// uni.hideLoading()
}).catch(e => {
_list = []
// uni.hideLoading()
// this.flag = true
console.log(e, '数据报错')
// this.status = 3
uni.showToast({
title: `获取数据失败`,
icon: 'error'
})
});
return _list
},
async getRoleName(list) {
var _roleName = ''
// var _code = ''
await list.forEach(item => {
switch (item) {
case '66':
_roleName += '主任';
break;
case '0':
_roleName += ' 学员';
break;
case '1':
_roleName += ' 班长';
break;
case '2':
_roleName += ' 副班长';
break;
case '3':
_roleName += ' 学习委员';
break;
case '4':
_roleName += ' 评分员';
break;
case '5':
_roleName += ' 记分员';
break;
}
})
return _roleName
},
// 跳转
async onPageJump(url, val) {
// var isStudent = await this.getRealRole(id)
var _url = ''
console.log('item---',val);
var nn = 0
if(val.roleCode.length > 0){
val.roleCode.forEach(item=>{
if(item == '主任' || item == '副主任' || item == '1' || item == '2' ){
console.log('符合主任',url);
nn++
}
})
}
console.log('符合主任', _url);
if(nn > 0){
_url = url
}else{
_url = "/pages/miniClass/classInfoWork"
}
uni.navigateTo({
url: `${_url}?id=${val.id}`
});
},
// 获取真实的身份信息
async getRealRole(id) {
// console.log('this.thisClass.id', this.thisClass.id);
var _isStudent = undefined
await $http.request({
url: "common/class/getUserRole",
method: "POST",
data: {
"classId": id
},
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
})
.then((res) => {
uni.hideLoading()
// 如果单纯是学员的身份
if(res.result.length == 1 && res.result[0].role == 0){
console.log('只是学员身份');
_isStudent = true
}else{
_isStudent = false
}
})
return _isStudent
},
shuomingPage(url, id, pid) {
uni.navigateTo({
url: `${url}?id=${id}&pid=${pid}`
});
}
},
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
/deep/.uni-select__selector {
top: unset;
bottom: calc(100% + 12px);
}
/deep/.uni-select {
border: none;
}
/deep/.uni-select__input-text {
font-size: 14px;
color: #7f7f7f //修改为你的字体颜色
}
/deep/.uni-select__input-placeholder {
font-size: 14px;
color: #7f7f7f //修改为你的字体颜色
}
/deep/.uni-popper__arrow {
top: unset;
bottom: -6px;
transform: rotate(180deg);
}
/deep/.uni-popper__arrow::after {
top: 0
}
.nobg {
background-color: transparent !important;
}
.box6 {
.btnBox {
justify-content: center;
}
}
.containerBg {
min-height: calc(100vh - 120rpx);
// background-color: $containerColor;
background-color: #f6f6f8;
padding: 0 20rpx;
}
.curseSet {
margin-right: 20rpx;
font-size: 28rpx;
display: flex;
align-items: center;
}
.fixed {
position: fixed;
z-index: 1;
width: 100%;
background-color: #fff;
}
.newBox {
.item {
margin-bottom: 20rpx;
background-color: #fff;
border-radius: 20rpx;
@include ptop_bottm(10px);
@include pleft_right(10px);
@include mshadow(10px, 1) .imgcontainer {
display: block;
width: 240rpx;
margin-right: 20rpx;
// background-size: cover;
// background-position: center;
height: 200rpx;
// flex-grow: 1;
// @include ptop_bottm(10px);
overflow: hidden;
// @include pleft_right(10px);
image {
width: 100%;
height: 200rpx;
}
}
.btn_box {
text-align: right;
margin-top:20rpx;
text {
border-radius: 20rpx;
padding: 3px 5px;
@include theme("btn_bg");
font-size: 28rpx;
color: #fff;
}
.seeInfo {
background-color: #fff;
background-image: none;
border: 1px solid #666;
color: #333;
margin-left: 20rpx;
}
}
.jianjie {
line-height: 36rpx;
margin-top: 10rpx;
font-size: 24rpx;
color: #9c9c9c;
}
.txt555 {
font-size: 30rpx;
color: #000;
@include bov()
}
}
}
.subCate {
padding-top: 10px;
padding-bottom: 10px;
display: flex;
.item {
border: 1px solid #bfcad9;
display: inline-block;
text-align: center;
font-size: 26rpx;
background-color: #fff;
border-radius: 4px;
width: 100%;
color: #333;
margin-right: 16rpx;
padding: 14rpx 30rpx;
}
.item:last-child() {
margin-right: 0;
}
.item.active {
border-color: $themeColor;
background-color: $themeColor;
color: #fff;
}
}
.tabList {
text-align: center;
}
.flexbox {
display: flex;
}
.imgcontainer {
background-color: $imgBg;
}
.box {
// background-color: #fff;
min-height: calc(100vh - 270rpx);
}
.learnBox {
// background-color: #fff;
margin-top: 10px;
.learn {
flex-wrap: wrap;
justify-content: space-between;
margin-top: 20rpx;
.item {
width: 48%;
margin-bottom: 16px;
overflow: hidden;
image {
width: 100%;
height: 200rpx;
}
.txt555 {
display: block;
text-align: center;
height: 40rpx;
width: 100%;
line-height: 40rpx;
@include bov(1);
margin-top: 10rpx;
font-size: 24rpx;
}
}
}
}
.buyItems{
width: calc(100% - 240rpx);
}
</style>