暂存
This commit is contained in:
@fawn-nine
463
pages/miniClass/studentsInClass.vue
Normal file
463
pages/miniClass/studentsInClass.vue
Normal file
@@ -0,0 +1,463 @@
|
||||
<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; }
|
||||
.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>
|
||||
Reference in New Issue
Block a user