464 lines
12 KiB
Vue
464 lines
12 KiB
Vue
<template>
|
||
<view style="min-height: calc(100vh - 120rpx); background-color: #ebf2f5; padding: 20rpx;">
|
||
<z-nav-bar title="班内学员"></z-nav-bar>
|
||
<public-module></public-module>
|
||
<view class="classMateBox" v-show="students.length> 0">
|
||
<view class="tips ">
|
||
<view class="flex_box">
|
||
<view class="item flex_box">
|
||
<span class=""></span><text>普通用户</text>
|
||
</view>
|
||
<view class="item flex_box">
|
||
<span class="superVip"></span><text>超级VIP</text>
|
||
</view>
|
||
<view class="item flex_box">
|
||
<span class="wumenVip"></span><text>医学VIP</text>
|
||
</view>
|
||
<view class="item flex_box">
|
||
<span class="zmVip"></span><text>国学VIP</text>
|
||
</view>
|
||
</view>
|
||
<view class="goumaiTips flex_box">
|
||
<view class="item flex_box">
|
||
<span class="redBorder">
|
||
<!-- <uni-icons type="shop" size="24" color="#999"></uni-icons> -->
|
||
</span>
|
||
<text>购买部分课程或未购买</text>
|
||
</view>
|
||
<view class="item flex_box">
|
||
<span class="greenBorder">
|
||
<!-- <uni-icons type="shop-filled" size="24" color="#55aa00"></uni-icons> -->
|
||
</span>
|
||
<text>购买全套课程</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="studentsNumber">
|
||
学员总数：【{{students.length}}】人
|
||
</view>
|
||
<view class="newBox studentsList flex_box">
|
||
|
||
<view :class="['item',
|
||
item.student.vip == '1' ? 'superVip' : '',
|
||
item.student.vip == '2' ? 'wumenVip' : '',
|
||
item.student.vip == '3' ? 'zmVip' : '',
|
||
item.buyState == '会员 ' ? 'greenBorder' : '',
|
||
item.buyState != '会员 ' ? 'redBorder' : ''
|
||
]" v-for="(item, index) in students" :key="index" @click="clickItem(item)" >
|
||
<view class="flex_box">
|
||
<view class="classmateImg">
|
||
<image v-if="item.student.avatar != null && item.student.avatar != ''"
|
||
:src="item.student.avatar" mode="aspectFit"></image>
|
||
<image v-else src="/static/icon/morenAvavter.png" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="textItems flex_box">
|
||
<text class="nick"
|
||
v-if="item.student.nickname != null && item.student.nickname != ''">
|
||
{{item.student.nickname}}
|
||
</text>
|
||
<text class="nick" v-else>
|
||
匿名用户
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="">
|
||
<template v-if="isDirector || isMonitor">
|
||
<text>（{{item.student.tel}}）</text>
|
||
<text @click="outClass(item.student.id)"
|
||
class="outBtn">踢出班级</text>
|
||
</template>
|
||
</view>
|
||
<view class="courseBuyOrNo" v-if="item.buyState !='会员 ' ">
|
||
<view class="">
|
||
<text>{{ item.buyState }}</text>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="" v-show="students.length == 0">
|
||
<u-divider text="暂无学员加入"></u-divider>
|
||
</view>
|
||
<u-popup key="1" v-if="showEditBlank" :show="showEditBlank" :round="10" @close="closePup" ref="">
|
||
<view class="upopBox" style="">
|
||
<h3 style="margin-bottom: 20rpx;">{{thisStudent.student.nickname != null && thisStudent.student.nickname != '' ? thisStudent.student.nickname : "匿名用户"}}</h3>
|
||
<view class="item">
|
||
<text><b>身份信息：</b></text>
|
||
<text v-if="thisStudent.student.vip == '0'">普通用户</text>
|
||
<text v-if="thisStudent.student.vip == '1'">超级VIP</text>
|
||
<text v-if="thisStudent.student.vip == '2'">医学VIP</text>
|
||
<text v-if="thisStudent.student.vip == '3'">国学VIP</text>
|
||
</view>
|
||
<view class="item">
|
||
<text><b>电话：</b>{{thisStudent.student.tel}}</text>
|
||
</view>
|
||
<view class="item">
|
||
<b>课程购买情况：</b><br/>{{thisStudent.buyState}}
|
||
</view>
|
||
<view class="btnBox">
|
||
<text @click="outClass(thisStudent.student.id)"
|
||
class="outBtn">踢出班级</text>
|
||
</view>
|
||
</view>
|
||
|
||
</u-popup>
|
||
<z-navigation></z-navigation>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import $http from '@/config/requestConfig.js';
|
||
import {
|
||
mapState
|
||
} from "vuex";
|
||
export default {
|
||
data() {
|
||
return {
|
||
showEditBlank:false,
|
||
students:[],
|
||
thisClass:{},
|
||
isDirector:false,
|
||
isMonitor:false,
|
||
userMes:{},
|
||
roleCode:undefined,
|
||
thisStudent:{},
|
||
roleCode:undefined
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
e.id ? this.getClassInfo(e.id) : ''
|
||
this.roleCode = e.type
|
||
|
||
},
|
||
onShow() {
|
||
this.getUserInfo()
|
||
},
|
||
computed: {
|
||
...mapState(["userInfo"]),
|
||
getRoleName() {
|
||
var _roleName = ''
|
||
switch (this.roleCode) {
|
||
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
|
||
},
|
||
},
|
||
methods: {
|
||
// 退出班级 // 踢出班级
|
||
outClass(userId) {
|
||
this.closePup()
|
||
let that = this
|
||
// var _useId = undefined
|
||
var _txt = '即将踢出该学员，是否继续？'
|
||
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: `${_txt}`,
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
// console.log('用户点击确定');
|
||
$http.request({
|
||
url: "common/class/quitClass",
|
||
method: "POST",
|
||
data: {
|
||
"classId": that.thisClass.id,
|
||
"userId": userId
|
||
},
|
||
header: { //默认 无 说明：请求头
|
||
'Content-Type': 'application/json'
|
||
},
|
||
})
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
that.isHave = true
|
||
uni.showToast({
|
||
title: `操作成功！`,
|
||
icon: 'success'
|
||
})
|
||
}
|
||
}).catch(e => {
|
||
console.log(e, '数据报错')
|
||
// this.status = 3
|
||
uni.showToast({
|
||
title: `退出失败`,
|
||
icon: 'error'
|
||
})
|
||
});
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消');
|
||
return
|
||
}
|
||
}
|
||
});
|
||
},
|
||
closePup(){
|
||
this.showEditBlank = false
|
||
},
|
||
// 获取真实的身份信息
|
||
getRealRole() {
|
||
$http.request({
|
||
url: "common/class/getUserRole",
|
||
method: "POST",
|
||
data: {
|
||
"classId": this.thisClass.id
|
||
},
|
||
header: { //默认 无 说明：请求头
|
||
'Content-Type': 'application/json'
|
||
},
|
||
})
|
||
.then((res) => {
|
||
console.log('res获取身份信息', res);
|
||
}).catch(e => {
|
||
uni.showToast({
|
||
title: '获取身份信息失败',
|
||
icon: 'error'
|
||
})
|
||
});
|
||
},
|
||
getUserInfo() {
|
||
// 获取个人信息
|
||
if (this.userInfo.id != undefined) {
|
||
this.$http.post("common/user/getUserInfo").then((res) => {
|
||
this.userMes = res.result;
|
||
this.isMonitor = res.isMonitor
|
||
this.isDirector = res.isDirector
|
||
if (this.isDirector) {
|
||
this.roleCode = '66'
|
||
} else if (this.isMonitor) {
|
||
this.getRealRole()
|
||
} else {
|
||
|
||
}
|
||
}).catch(e => {
|
||
uni.showToast({
|
||
title: '获取用户信息失败',
|
||
icon: 'none'
|
||
})
|
||
});
|
||
}
|
||
},
|
||
clickItem(item){
|
||
console.log('item',item);
|
||
this.thisStudent = item
|
||
this.showEditBlank = true
|
||
},
|
||
getClassInfo(id) {
|
||
uni.showLoading({
|
||
title: '正在加载'
|
||
})
|
||
$http.request({
|
||
url: "common/class/getClassInfo",
|
||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||
data: {
|
||
"classId": id // 班类型 0小班 1联合班 2精英班
|
||
},
|
||
header: { //默认 无 说明：请求头
|
||
'Content-Type': 'application/json'
|
||
},
|
||
})
|
||
.then(res => {
|
||
this.refresh = false
|
||
if (res.code == 0) {
|
||
|
||
this.thisClass = res.result.class
|
||
this.students = res.result.students
|
||
|
||
|
||
}
|
||
uni.hideLoading()
|
||
}).catch(e => {
|
||
uni.hideLoading()
|
||
console.log(e, '数据报错')
|
||
// this.status = 3
|
||
uni.showToast({
|
||
title: '获取班级信息失败',
|
||
icon: 'none'
|
||
})
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '@/style/mixin.scss';
|
||
.upopBox{padding: 40rpx; max-height: 80vh; overflow-y:scroll; color: #666;
|
||
.item{padding: 10rpx 0; border-bottom: 1px solid #eee;}
|
||
}
|
||
.redBorder{ border: 1px solid #ff8f8f !important;}
|
||
.greenBorder{border: 1px solid #55aa00 !important;}
|
||
.studentsNumber{color: #666; font-size: 28rpx; margin: 20rpx 0; display: block;}
|
||
.studentsList{ background-color: rgba(255, 255, 255, .8); padding: 10rpx; border-radius: 10rpx; flex-wrap: wrap; justify-content: space-around;
|
||
.item{width: 32% !important; font-size: 26rpx; padding: 6rpx !important;}
|
||
}
|
||
.btnBox{margin-top: 10rpx; text-align: center;}
|
||
.outBtn {
|
||
padding: 6rpx 10rpx;
|
||
display: inline-block;
|
||
border-radius: 10rpx;
|
||
color: red;
|
||
border: 1px solid red;
|
||
font-size: 26rpx;
|
||
}
|
||
.goumaiTips{
|
||
margin-top: 20rpx;
|
||
.item{align-items: center;}
|
||
// span{border: none !important; background-color: transparent !important; margin-right: 20rpx !important;}
|
||
}
|
||
.newBox {
|
||
|
||
.item {
|
||
|
||
margin-bottom: 20rpx;
|
||
background-color: #fff;
|
||
border-radius: 10rpx;
|
||
@include ptop_bottm(10px);
|
||
@include pleft_right(10px);
|
||
|
||
// @include mshadow(10px, 1)
|
||
.imgcontainer {
|
||
display: block;
|
||
width: 80rpx;
|
||
margin-right: 20rpx;
|
||
// background-size: cover;
|
||
// background-position: center;
|
||
height: 120rpx;
|
||
flex-grow: 1;
|
||
// @include ptop_bottm(10px);
|
||
overflow: hidden;
|
||
|
||
// @include pleft_right(10px);
|
||
image {
|
||
width: 100%;
|
||
height: 120rpx;
|
||
}
|
||
}
|
||
|
||
.btn_box {
|
||
text-align: right;
|
||
|
||
text {
|
||
border-radius: 20rpx;
|
||
padding: 3px 5px;
|
||
@include theme("btn_bg");
|
||
font-size: 28rpx;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.buyItems {
|
||
width: 60%;
|
||
|
||
text{
|
||
display:block; width: 100%; background-color: red;
|
||
font-size: 26rpx;
|
||
color: #000;
|
||
@include toe()}
|
||
}
|
||
|
||
.jianjie {
|
||
line-height: 30rpx;
|
||
height: 60rpx;
|
||
overflow: hidden;
|
||
overflow: hidden !important;
|
||
margin-top: 10rpx;
|
||
font-size: 24rpx;
|
||
@include bov();
|
||
color: #9c9c9c;
|
||
}
|
||
|
||
.txt555 {
|
||
display:block; width: 100%;
|
||
font-size: 26rpx;
|
||
color: #000;
|
||
@include toe()
|
||
}
|
||
}
|
||
}
|
||
.tips{ font-size: 24rpx; color: #666; margin: 20rpx 0; margin-bottom: 30rpx;
|
||
|
||
.item{align-items: center;}
|
||
|
||
span{display: inline-block; margin-right: 10rpx; border-radius: 4rpx;; width: 30rpx; height: 30rpx; background-color: #fff; border: 1px solid #999;}
|
||
}
|
||
.classMateBox {
|
||
.zmVip {
|
||
background-image: linear-gradient(-60deg, #53966a 0%, #e1feef 50%, #e1feef 100%);
|
||
}
|
||
|
||
.wumenVip {
|
||
background-image: linear-gradient(-60deg, #578df0 0%, #f1f4fd 50%, #f1f4fd 100%);
|
||
}
|
||
|
||
.superVip {
|
||
background-image: linear-gradient(-60deg, #965af0 0%, #fdf0ed 50%, #fdf0ed 100%);
|
||
}
|
||
|
||
.item {
|
||
width: 100%;
|
||
position: relative;
|
||
|
||
.textItems { overflow: hidden;
|
||
width: 100%;
|
||
align-items: center;
|
||
.nick{ display: block;
|
||
@include toe();
|
||
}
|
||
.outBtn {
|
||
padding: 6rpx 10rpx;
|
||
display: inline-block;
|
||
border-radius: 10rpx;
|
||
color: $themeColor;
|
||
border: 1px solid $themeColor;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
// .txt555 {
|
||
// font-size: 28rpx;
|
||
// color: #333;
|
||
// }
|
||
|
||
.userType {
|
||
position: absolute;
|
||
font-size: 26rpx;
|
||
right: 30rpx;
|
||
top: 8rpx;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.classmateImg {
|
||
width: 40rpx;
|
||
margin-right: 20rpx;
|
||
height: 40rpx;
|
||
border-radius: 100rpx;
|
||
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
</style>
|