@@ -5,22 +5,131 @@
<!-- < view class = "" style = "background-color: #f4f7ff; min-height: calc(100vh - 200rpx);" > -- >
< view class = "mainContent" v-if = "thisClass.id" >
< view class = "className" >
< h3 > { { thisClass . title } } < / h3 >
< text class = "kaiban" v-if = "thisClass.state == '0' && isMonitor" > 开班 < / text >
< text class = "jieban" v-if = "thisClass.state == '1' && isMonitor" > 结班 < / text >
< h3 > { { thisClass . title } } < / h3 >
< text class = "kaiban" v-if = "thisClass.state == '0' && isMonitor || thisClass.state == '0' && isDirector " > 开班 < / text >
< text class = "jieban" v-if = "thisClass.state == '1' && isMonitor || thisClass.state == '1' && isDirector " > 结班 < / text >
< text class = "tuichu" v-if = "!isMonitor && !isDirector && isHave" @click="outClass" > 退出班级 < / text >
< / view >
< view class = "otherItems flex_box" >
< view > < text class = "ciyao" > 创建日期 < / text > < text
class = "mainTxt" > { { thisClass . createTime . substring ( 0 , 10 ) } } < / text > < / view >
class = "mainTxt" > { { thisClass . createTime . substring ( 0 , 10 ) } } < / text >
< / view >
< view > < text class = "ciyao" > 班级类型 < / text >
< text class = "mainTxt" v-if = "classModel.type == '0'" > 普通小班 < / text >
< text class = "mainTxt" v-if = "classModel.type == '1'" > 联合班 < / text >
< text class = "mainTxt" v-if = "classModel.type == '2'" > 精英班 < / text >
< / view >
< view > < text class = "ciyao" > 班级人数 < / text > < text class = "mainTxt" > { { thisClass . number } } 人 < / text > < / view >
< view > < text class = "ciyao" > 管理成员 < / text > < text class = "mainTxt" @click ="seeManager" > 点击查看 < / text > < / view >
< / view >
< view class = "" v-if = "thisClass.content != ''" >
< text class = "adminName" > 教学目标 / 班级简介 < / text >
< / view >
< rich-text
class = "banjiJianjie"
:nodes = "formatRichText(thisClass.content)"
> < / rich-text >
<!-- < view class = "banjiJianjie" v-html = "thisClass.content" > < / view > - - >
< view class = "mainBox" >
< view class = "" >
< u-tabs v-if = "tabList.length > 0" :class="['tabList']" @click="tabClick" :current="curTagIndex"
:activeStyle = "activeStyle" :scrollable = "scrollable" :list = "tabList"
itemStyle = "padding-left:10rpx; background-color:#fff; padding-right: 10rpx; height: 50px; font-size:26rpx" > < / u-tabs >
< / view >
<!-- 课程列表 -- >
< view class = "newBox" v-show = "courses.length > 0 && tabId == '0'" >
< view class = "item flexbox" v-for = "(item, index) in courses" :key="index" @click="onPageJump('/pages/course/courseDetail',item.id)" >
< ! - - < view class = "imgcontainer" :style = "{backgroundImage:surl(item.image)}" > -- >
< view class = "imgcontainer" >
< image :src = "item.image" mode = "aspectFit" > < / image >
< / view >
< view class = "buyItems" >
< view class = "txt555" >
{ { item . title } }
< / view >
< view class = "jianjie" v-html = "item.content" > < / view >
< / view >
< / view >
< / view >
< view class = "" v-show = "courses.length == 0 && tabId == '0'" >
< u -divider text = "暂无课程" > < / u-divider >
< / view >
<!-- 班内问答 -- >
< view class = "" v-if = " tabId == '1'" >
班内问答
< / view >
< ! - - 班内同学 - - >
< view class = "classMateBox" v-show = "students.length> 0 && tabId == '2'" >
< view class = "newBox" >
< view
: class = "['item','flexbox',
item.vip == '1' ? 'superVip' : '',
item.vip == '2' ? 'wumenVip' : '',
item.vip == '3' ? 'zmVip' : '']" v-for = "(item, index) in students" :key="index" >
< ! - - < view class = "imgcontainer" :style = "{backgroundImage:surl(item.image)}" > -- >
< view class = "classmateImg" >
< image v-if = "item.avatar != null && item.avatar != ''" :src="item.avatar" mode="aspectFit" > < / image >
< image v-else src = "/static/icon/morenAvavter.png" mode = "aspectFit" > < / image >
< / view >
< view class = "textItems flex_box" >
< text class = "txt555" v-if = "item.nickname != null && item.nickname != ''" >
{{ item.nickname }}
< template v-if = "isDirector || isMonitor" >
< text > ( { { item . tel } } ) < / text > < text @click ="removeStudent(item)" > 提出班级 < / text >
< / template >
< / text >
< text class = "txt555" v-else >
匿名用户
< / text >
< text class = "userType" v-if = "item.vip == '1'" > 超级VIP用户 < / text >
< text class = "userType" v-if = "item.vip == '2' " > 医学VIP用户 < / text >
< text class = "userType" v-if = "item.vip == '3' " > 国学VIP用户 < / text >
< / view >
< / view >
< / view >
< / view >
< view class = "" v-show = "students.length == 0 && tabId == '2'" >
< u -divider text = "暂无学员加入" > < / u-divider >
< / view >
<!-- 班内提交 -- >
< view class = "" v-if = " tabId == '3'" >
< view class = "flex_box tijiaoTitle" >
< text : class = "tijiaoTitleId == item.id ? 'active' :''" @click ="titleClick(item)" v-for = "(item, index) in tijiaoTitleList" :key="index" > {{ item.name }} < / text >
< / view >
< ! - - 班内任务 - - >
< view class = "" >
< uni-section class = "mb-10 nobg" title = "任务列表" type = "line" > < / uni-section >
< view > < / view >
< uni-section class = "mb-10 nobg" title = "提交的任务" type = "line" > < / uni-section >
< view class = "submitRecode" >
< / view >
< / view >
<!-- 医案 -- >
< view class = "" >
< / view >
<!-- 心得 -- >
< view class = "" >
< / view >
< / view >
< / view >
< / view >
< view class = "bottomBox" v-if = "!isHave && !isDirector && !isMonitor" >
< button type = "primary" @click ="addClass" > 一键加入班级 < / button >
< / view >
< ! - - 管理弹出 - - >
< u-popup key = "1" :show = "showMan" :round = "10" @close ="closeManager" >
< view class = "guanli" >
< h3 > 班内管理人员 < / h3 >
< view class = "item" >
< text class = "adminName" > 班长 : < / text >
< view class = "personbox" v-if = "admins.monitor.id" >
@@ -63,81 +172,7 @@
< text v-else > 暂未设置 < / text >
< / view >
< / view >
< view class = "" >
< text class = "adminName" > 教学目标 / 班级简介 < / text >
< / view >
< view class = "banjiJianjie" v-html = "thisClass.content" > < / view >
< view class = "mainBox" >
< view class = "" >
< u-tabs v-if = "tabList.length > 0" :class="['tabList']" @click="tabClick" :current="curTagIndex"
:activeStyle = "activeStyle" :scrollable = "scrollable" :list = "tabList"
itemStyle = "padding-left:10rpx; background-color:#fff; padding-right: 10rpx; height: 50px; font-size:26rpx" > < / u-tabs >
< / view >
<!-- 课程列表 -- >
< view class = "newBox" v-show = "courses.length > 0 && tabId == '0'" >
< view class = "item flexbox" v-for = "(item, index) in courses" :key="index" @click="onPageJump('/pages/course/courseDetail',item.id)" >
< ! - - < view class = "imgcontainer" :style = "{backgroundImage:surl(item.image)}" > -- >
< view class = "imgcontainer" >
< image :src = "item.image" mode = "aspectFit" > < / image >
< / view >
< view class = "buyItems" >
< view class = "txt555" >
{ { item . title } }
< / view >
< view class = "jianjie" v-html = "item.content" > < / view >
< / view >
< / view >
< / view >
< view class = "" v-show = "courses.length == 0 && tabId == '0'" >
< u -divider text = "暂无课程" > < / u-divider >
< / view >
<!-- 班内问答 -- >
< view class = "" v-if = " tabId == '1'" >
班内问答
< / view >
< ! - - 班内同学 - - >
< view class = "classMateBox" v-show = "students.length> 0 && tabId == '2'" >
< view class = "newBox" >
< view
: class = "['item','flexbox',
item.vip == '1' ? 'superVip' : '',
item.vip == '2' ? 'wumenVip' : '',
item.vip == '3' ? 'zmVip' : '']" v-for = "(item, index) in students" :key="index" >
< ! - - < view class = "imgcontainer" :style = "{backgroundImage:surl(item.image)}" > -- >
< view class = "classmateImg" >
< image v-if = "item.avatar != null && item.avatar != ''" :src="item.avatar" mode="aspectFit" > < / image >
< image v-else src = "/static/icon/morenAvavter.png" mode = "aspectFit" > < / image >
< / view >
< view class = "textItems flex_box" >
< text class = "txt555" v-if = "item.nickname != null && item.nickname != ''" >
{{ item.nickname }}
< / text >
< text class = "txt555" v-else >
匿名用户
< / text >
< text class = "userType" v-if = "item.vip == '1'" > 超级VIP用户 < / text >
< text class = "userType" v-if = "item.vip == '2' " > 医学VIP用户 < / text >
< text class = "userType" v-if = "item.vip == '3' " > 国学VIP用户 < / text >
< / view >
< / view >
< / view >
< / view >
< view class = "" v-show = "students.length == 0 && tabId == '2'" >
< u -divider text = "暂无学员加入" > < / u-divider >
< / view >
<!-- 班内提交 -- >
< view class = "" v-if = " tabId == '3'" >
班内提交
< / view >
< / view >
< / view >
< view class = "bottomBox" v-if = "!isHave && !isDirector && !isMonitor" >
< button type = "primary" size = "mini" @click ="addClass" > 一键加入班级 < / button >
< / view >
< / u -popup >
<!-- < / view > -- >
< z-navigation > < / z-navigation >
< / view >
@@ -195,25 +230,36 @@
isMonitor : false , // 是管理者
isDirector : false , // 是主任
isHave : false ,
showMan : false ,
tijiaoTitleList : [
{ name : '班内任务' , id : '0' } ,
{ name : '医案' , id : '1' } ,
{ name : '心得' , id : '2' } ,
] ,
tijiaoTitleId : '0'
}
} ,
onLoad ( e ) {
uni . hideTabBar ( ) ;
this . classId = e . id
this . getUserInfo ( )
this . getClassInfo ( )
if ( e . have == 'isNotHave') {
this . isHave = false // 未加入
} else if ( e . have == 'have' ) {
this . isHave = true // 已加入
}
// if(e.have == 'isNotHave'){
// this.isHave = false // 未加入
// }else if(e.have == 'have'){
// this.isHave = true // 已加入
// }
} ,
onShow ( ) {
this . getClassInfo ( )
} ,
computed : {
... mapState ( [ "userInfo" ] ) ,
} ,
methods : {
titleClick ( item ) {
this . tijiaoTitleId = item . id
} ,
getUserInfo ( ) {
// 获取个人信息
if ( this . userInfo . id != undefined ) {
@@ -239,6 +285,39 @@
console . log ( 'e' , e ) ;
this . tabId = e . id
} ,
formatRichText ( html ) {
if ( html == '' ) {
return
}
//控制图片大小
let newContent = html . replace ( /<img[^>]*>/gi , function ( match , capture ) {
match = match
. replace ( /style="[^"]+"/gi , "" )
. replace ( /style='[^']+'/gi , "" ) ;
match = match
. replace ( /width="[^"]+"/gi , "" )
. replace ( /width='[^']+'/gi , "" ) ;
match = match
. replace ( /height="[^"]+"/gi , "" )
. replace ( /height='[^']+'/gi , "" ) ;
return match ;
} ) ;
newContent = newContent . replace (
/style="[^"]+"/gi ,
function ( match , capture ) {
match = match
. replace ( /width:[^;]+;/gi , "max-width:100%;" )
. replace ( /width:[^;]+;/gi , "max-width:100%;" ) ;
return match ;
}
) ;
newContent = newContent . replace ( /<br[^>]*\/>/gi , "" ) ;
newContent = newContent . replace (
/\<img/gi ,
'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"'
) ;
return newContent ;
} ,
// 加入班级
addClass ( ) {
$http . request ( {
@@ -271,8 +350,16 @@
} )
} ) ;
} ,
// 显示班级成员
seeManager ( ) {
this . showMan = true
} ,
closeManager ( ) {
this . showMan = false
} ,
// 退出班级
outClass ( ) {
let that = this
uni . showModal ( {
title : '提示' ,
content : '您即将退出当前班级,是否继续?' ,
@@ -283,7 +370,7 @@
url : "common/class/quitClass" ,
method : "POST" ,
data : {
"classId" : this . classId ,
"classId" : that . classId ,
} ,
header : { //默认 无 说明:请求头
'Content-Type' : 'application/json'
@@ -291,13 +378,15 @@
} )
. then ( res => {
if ( res . code == 0 ) {
this . isHave = true
that . isHave = true
uni . showToast ( {
title : ` 退出成功! ` ,
icon : 'success'
} )
setTimeout ( ( ) => {
uni . navigateTo ( {
url : '/pages/miniClass/myClassList'
} )
} , 200 )
}
} ) . catch ( e => {
@@ -314,6 +403,10 @@
}
}
} ) ;
} ,
// 踢出班级
removeStudent ( item ) {
} ,
getClassInfo ( ) {
uni . showLoading ( {
@@ -332,6 +425,7 @@
. then ( res => {
this . refresh = false
if ( res . code == 0 ) {
this . isHave = res . result . isJoin
this . thisClass = res . result . class
this . admins . list = res . result . admins
this . admins . monitor = { }
@@ -387,8 +481,9 @@
@ import "@/style/mixin.scss" ;
. flexbox { display : flex ; }
. nobg { background - color : transparent ! important ; }
. bottomBox { position : fixed ; padding : 20 rpx 0 ; text - align : center ; bottom : 100 rpx ; left : 0 ; z - index : 2 ; width : 100 % ; background - color : # fff ;
button { width : 80 % ; }
button { width : 80 % ; margin : 0 auto ; border - radius : 40 rpx ; }
}
. mainContent {
color : # 333 ;
@@ -472,7 +567,8 @@
}
. otherItems {
// border: 1px solid #dadada;
padding : 20 rpx ; background - color : rgba ( 255 , 255 , 255 , .5 ) ;
padding : 20 rpx ;
// background-color: rgba(255, 255, 255, .5);
border - radius : 20 rpx ;
justify - content : space - between ;
margin : 20 rpx 0 ;
@@ -486,8 +582,13 @@
margin - bottom : 10 rpx ;
}
}
. tijiaoTitle { justify - content : space - between ;
text { display : block ; width : 30 % ; padding : 8 rpx 0 ; border - radius : 10 rpx ; text - align : center ; border : 1 px solid $themeColor ; color : $themeColor ; }
text . active { background - color : $themeColor ; color : # fff ; }
}
. guanli {
padding : 40 rpx ;
h3 { text - align : center ; margin - bottom : 20 rpx ; color : # 333 ; }
. item { color : # 333 ;
margin - bottom : 20 rpx ;