441 lines
9.5 KiB
Vue
441 lines
9.5 KiB
Vue
<template>
|
||
<view class="view_body">
|
||
<u-navbar :is-back="true" title='班级详情' title-color="#2E4975" :border-bottom="false" :background="true" id="navbar">
|
||
</u-navbar>
|
||
<view class="view_botton" v-if="loading==false">
|
||
<view class="view_spoken">
|
||
<view>
|
||
<image src="https://file.langsi.online/yasiimg/web/static/uXJ24nLEqmCb0FkFpmfy" mode=""></image>
|
||
</view>
|
||
<view class="view_span">
|
||
<text>{{classinfo.name}}</text>
|
||
<!-- <view>基础班</view> -->
|
||
<view v-show="classinfo.classify == 1">
|
||
听力
|
||
</view>
|
||
<view v-show="classinfo.classify == 2">
|
||
阅读
|
||
</view>
|
||
<view v-show="classinfo.classify == 3">
|
||
写作
|
||
</view>
|
||
<view v-show="classinfo.classify == 4">
|
||
口语
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="view_yellowBotton" @click="toaddwork()">
|
||
安排作业
|
||
</view>
|
||
</view>
|
||
<view class="view_zy" v-if="loading==false">
|
||
|
||
|
||
<view class="view_left" @click="tostu()">
|
||
<view class="veiw_left2">
|
||
<view class="view_class">
|
||
<text>班级成员</text>
|
||
<u-icon name="arrow-right" color="#646D7B" size="16"></u-icon>
|
||
</view>
|
||
<view class="view_images" >
|
||
<image :src="item.memberInfo.avatar" mode="" v-for="(item,index ) in classinfo.members" :key="index" v-if="index<=4"></image>
|
||
<view class="shenlue" v-if="classinfo.members.length>4">
|
||
{{classinfo.members.length}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="view_left" @click="toteacher()" >
|
||
<view class="veiw_left2">
|
||
<view class="view_class">
|
||
<text>带班老师</text>
|
||
<u-icon name="arrow-right" color="#646D7B" size="16"></u-icon>
|
||
</view>
|
||
<view class="view_images" >
|
||
<image src="https://file.langsi.online/user/img/headimg.png" mode="" v-for="(item,index ) in classinfo.teachers" :key="index" v-if="index<=4"></image>
|
||
<view class="shenlue" v-if="classinfo.teachers.length>4">
|
||
{{classinfo.teachers.length}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="view_operation">
|
||
<view class="view_class" >
|
||
<text>作业安排</text>
|
||
<u-icon name="arrow-right" color="#646D7B" size="16"></u-icon>
|
||
</view>
|
||
<view class="view_no" v-if="workinfo.length<1" @click.stop="toaddwork()">
|
||
暂未安排作业哦!<text class="organization">去安排</text>
|
||
</view>
|
||
<view class="view_show" v-if="workinfo.length>0" @click.stop="toworkdetail()">
|
||
<view class="view_crossbar" v-for="(item,index) in operation" :key="index">
|
||
<image :src="item.image" mode=""></image>
|
||
<text>{{item.title}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="view_footer">
|
||
<view>
|
||
<text>作业提交记录</text>
|
||
<view class="view_icon">
|
||
七天内<u-icon name="arrow-down"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="view_image">
|
||
<view></view>
|
||
<text class="text">暂无学习记录，快去安排作业吧！</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
|
||
data() {
|
||
|
||
return {
|
||
isShow: true,
|
||
bgc: {
|
||
backgroundColor: "#F6F9FC",
|
||
},
|
||
operation:[
|
||
{
|
||
image:'https://file.langsi.online/yasiimg/web/static/ukPnTLkhCKU5zhbM7SMu',
|
||
title:'课后作业'
|
||
},
|
||
{
|
||
image:'https://file.langsi.online/yasiimg/web/static/udltPEywiuFFxqFMSFJE',
|
||
title:'单科模考'
|
||
},
|
||
{
|
||
image:'https://file.langsi.online/yasiimg/web/static/uT04VQSSNlabXp1bhXSG',
|
||
title:'写作作业'
|
||
},
|
||
{
|
||
image:'https://file.langsi.online/yasiimg/web/static/uBWxObS2WAFtu2BIIx9l',
|
||
title:'五一作业'
|
||
},
|
||
{
|
||
image:'https://file.langsi.online/yasiimg/web/static/uo08OdTA2zsojWQEap69',
|
||
title:'更多'
|
||
}
|
||
|
||
],
|
||
classid:0,
|
||
classinfo:{},
|
||
workinfo:{},
|
||
loading:true
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.classid=option.id
|
||
// this.classid=15
|
||
|
||
},
|
||
onShow(){
|
||
this.getclassinfo()
|
||
this.getworkinfo()
|
||
},
|
||
methods:{
|
||
toaddwork(){
|
||
let classinofs=[
|
||
{
|
||
name:this.classinfo.name,
|
||
avatar:this.classinfo.avatar,
|
||
id:this.classinfo.id,
|
||
|
||
}
|
||
]
|
||
uni.navigateTo({
|
||
url: "/pages_teacher/teacher_teachers/teacher_addOperation?classinfo=" + encodeURIComponent(JSON.stringify(classinofs))
|
||
}).then(res => {
|
||
|
||
}).catch(err => {
|
||
|
||
});
|
||
},
|
||
toworkdetail(){
|
||
let classinofs=this.classid
|
||
console.log('跳转作业详情');
|
||
uni.navigateTo({
|
||
url: "/pages/Mystudent/arrange_work?classId=" +classinofs
|
||
}).then(res => {
|
||
|
||
}).catch(err => {
|
||
|
||
});
|
||
},
|
||
getclassinfo() {
|
||
this.$u.get(`https://api.admin-v2.langsi.online/admin-api/classroom/detail?id=${this.classid}`).then(res => {
|
||
|
||
|
||
if (res.code == 0) {
|
||
this.classinfo=res.data
|
||
// this.classlist = res.data.list
|
||
// this.isloding = false
|
||
this.loading=false
|
||
|
||
|
||
}
|
||
})
|
||
},
|
||
getworkinfo() {
|
||
this.$u.get(`https://api.admin-v2.langsi.online/admin-api/classroom/work-record/list?classId=${this.classid}`).then(res => {
|
||
|
||
|
||
if (res.code == 0) {
|
||
this.workinfo=res.data
|
||
// this.classlist = res.data.list
|
||
// this.isloding = false
|
||
|
||
}
|
||
})
|
||
},
|
||
toteacher(){
|
||
|
||
uni.navigateTo({
|
||
url: "/pages/Mystudent/Formteacher?id=" + this.classinfo.id
|
||
}).then(res => {
|
||
|
||
}).catch(err => {
|
||
|
||
});
|
||
|
||
},
|
||
tostu(){
|
||
|
||
uni.navigateTo({
|
||
url: "/pages/Mystudent/formstu?id=" + this.classinfo.id
|
||
}).then(res => {
|
||
|
||
}).catch(err => {
|
||
|
||
});
|
||
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.view_body {
|
||
height: 100vh;
|
||
background: linear-gradient(183deg, #F0F6FF 0%, #FAFAFA 100%);
|
||
padding: 0 32rpx;
|
||
|
||
.view_botton {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 124rpx;
|
||
background: #fff;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
padding: 24rpx;
|
||
|
||
.view_spoken {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.view_span {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-left: 16rpx;
|
||
}
|
||
|
||
.view_span text:nth-child(1) {
|
||
height: 32rpx;
|
||
font-size: 32rpx;
|
||
font-family: 'PingFang';
|
||
font-weight: bold;
|
||
color: #072F5A;
|
||
line-height: 32rpx;
|
||
|
||
}
|
||
|
||
.view_span view {
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
text-align: center;
|
||
ling-height: 40rpx;
|
||
background: #EBF3FF;
|
||
margin-top: 10rpx;
|
||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||
font-size: 20rpx;
|
||
color: #2D7CE6;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
image {
|
||
width: 76rpx;
|
||
height: 76rpx;
|
||
}
|
||
}
|
||
|
||
.view_zy {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin: 20rpx 0;
|
||
}
|
||
|
||
.view_left {
|
||
width: 333rpx;
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
height: 160rpx;
|
||
background: linear-gradient(174deg, #FFF2E4 10%, #FFFFFF 100%);
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
// padding: 60rpx;
|
||
|
||
}
|
||
.veiw_left2{
|
||
width: 333rpx;
|
||
padding: 24rpx;
|
||
}
|
||
|
||
.view_class {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.view_class text {
|
||
width: 128rpx;
|
||
font-size: 32rpx;
|
||
font-family: 'PingFang';
|
||
font-weight: 800;
|
||
color: #2E4975;
|
||
}
|
||
|
||
.view_images {
|
||
display: flex;
|
||
// justify-content: space-between;
|
||
margin-top: 20rpx;
|
||
|
||
|
||
image {
|
||
margin-right: 16rpx;
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
|
||
}
|
||
.shenlue{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: #FFF2E4;
|
||
border-radius: 50%;
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
font-size: 20rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
color: #F18F21;
|
||
|
||
}
|
||
}
|
||
|
||
.view_operation {
|
||
width: 686rpx;
|
||
height: 196rpx;
|
||
background: linear-gradient(170deg, #FFF2E4 0%, #FFFFFF 100%);
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
padding: 24rpx;
|
||
text-align: center;
|
||
|
||
.view_no {
|
||
font-size: 28rpx;
|
||
font-family: 'PingFang';
|
||
font-weight: 500;
|
||
color: #627698;
|
||
margin: 40rpx 0rpx;
|
||
|
||
}
|
||
.view_no .organization{
|
||
font-size: 28rpx;
|
||
font-family: 'PingFang';
|
||
font-weight: 500;
|
||
color: #2D7CE6;
|
||
border-bottom: 2px solid #2D7CE6;
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
.view_show{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin: 25rpx 0rpx;
|
||
}
|
||
.view_crossbar{
|
||
width: 80rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
font-size: 20rpx;
|
||
font-family: 'PingFang';
|
||
font-weight: 500;
|
||
color: #F39852;
|
||
|
||
|
||
}
|
||
.view_crossbar image {
|
||
width: 40rpx;
|
||
height: 35rpx;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
}
|
||
.view_footer view {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin: 20rpx 0rpx;
|
||
text {
|
||
font-size: 32rpx;
|
||
font-family: 'PingFang';
|
||
font-weight: 800;
|
||
color: #2E4975;
|
||
}
|
||
}
|
||
.view_image{
|
||
display:flex;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
height: 300rpx;
|
||
view {
|
||
width: 100%;
|
||
height: 500rpx;
|
||
background: url('https://file.langsi.online/yasiimg/web/static/ulqScWZvBYd22CW5uV0H') no-repeat center;
|
||
background-size: 30%;
|
||
}
|
||
|
||
|
||
|
||
.text {
|
||
font-size: 24rpx;
|
||
font-family: Microsoft YaHei, Microsoft YaHei;
|
||
font-weight: 400;
|
||
color: #0E3B77;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
}
|
||
.view_icon{
|
||
font-size: 24rpx;
|
||
font-family: 'PingFang';
|
||
font-weight: 500;
|
||
color: rgba(7,47,90,0.6);
|
||
}
|
||
.view_yellowBotton{
|
||
padding: 20rpx 50rpx;
|
||
background: #F39852;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
font-size: 24rpx;
|
||
font-family: 'PingFang';
|
||
font-weight: 800;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
</style>
|