learning-system-mobile/pages/lecturer/certification/list.vue

<template>
       <view class="ranking-list-info">
			<u-toast ref="uToast"></u-toast>
			<!-- view class="back-icon">
				   <u-icon style="position: absolute;" name="arrow-left"></u-icon>
				   <text class="back-icon-title">讲师信息</text>
			</view> -->
			<view class="ranking-list-box">
				   <view class="main">
						   <view class="tip" v-if="lecturersList.length">请选择您要评分的讲师（共{{lecturersList.length}}位）</view>
						   <view class="lecturers">
							 <view  v-for="( itemes, index) in lecturersList" :key="itemes.id" class="lecturers_item" @click="gotoInfo(itemes)">
								   <view class="avatar">
									 <img  style="width: 144rpx;height: 144rpx;border-radius: 72rpx;" :src="itemes.avatar&&imageBaseUrl+itemes.avatar ||  (itemes.gender==2?'../../../static/images/lecturer/teacher-girl.png':(itemes.gender==1?'../../../static/images/lecturer/teacher.png':''))"></img>
								   </view>
								   <view class="information">
									 <view class="information_1">
										   <view class="name">{{ itemes.teacherName }}</view>
										   <view class="numbering">{{itemes.teacherNo}}</view>
									 </view>
									 <view class="information_2">{{itemes.orgName}}</view>
									 <view class="information_3">
										   <view class="posts">{{ itemes.positionName }}</view>
										   <!-- <view class="rank">{{ itemes.bandCode }}</view> -->
									 </view>
								   </view>
								   <view v-if="itemes.score && itemes.score<80" class="status" style="color: #FF4040">{{itemes.score}}分</view>
								   <view v-if="itemes.score && itemes.score>=80" class="status" style="color:#31AF0D">{{itemes.score}}分</view>
								   <view v-if="!itemes.score && examineResult==0" class="status" style="color:#409EFF">去评分</view>
								   <view v-if="!itemes.score && examineResult==1" class="status" style="color:#d9d9d9">已结束</view>
							 </view>
						   </view>
						   <u-empty  v-if="lecturersList.length == 0 && lecturersList!==''" mode="data" icon="http://cdn.uviewui.com/uview/empty/car.png"></u-empty>
				   </view>
			</view>
		</view>
</template>

<script>
		import config from '@/config/index.js'
       import apiLecturerCert from "@/api/lecturer/certification.js";
       export default {
               data() {
                       return {
                               lecturersList: '',
							   examineResult: '',
							   imageBaseUrl: config.fileUrl
                       }
               },
               onPullDownRefresh() {
                       
               },
               onReachBottom() {
                       
               },
               onLoad(options) {
						if(options.reviewId){
							this.reviewId = options.reviewId
							apiLecturerCert.lecturerCertificationList({
								   reviewId: this.reviewId
							}).then(res => {
								if (res.code == 200) {
									this.examineResult = res.data.examineResult
									this.lecturersList = res.data.list
								} else {
									this.lecturersList = []
									// this.$refs.uToast.show({message:res.msg,type:'error'});
								}
							});
						}
               },
               methods:{
                       gotoInfo(item){
							   if(this.examineResult==1&&!item.score){
								   this.$refs.uToast.show({message:"该评审已结束",type:'error'});
								   return
							   }
                               uni.navigateTo({
                                       url:'/pages/lecturer/certification/info?reviewId='+this.reviewId+'&teacherId='+item.id
                               })
                       }
               }
       }
</script>

<style scoped lang="scss">
.back-icon{
       background: #ffffff;
       background-position: 0 0;
       position: relative;
       height: 40px;
       display: flex;
       align-items: center;
}
.back-icon-title{
       flex: 1;
       text-align: center;
}
.main {
       height: calc(100vh - 60px);
       padding: 10px 13px 10px 16px;
       background: #ffffff;
       .tip {
         font-weight: 400;
         font-size: 16px;
         color: #666666;
         line-height: 22px;
         text-align: left;
         font-style: normal;
       }
       .lecturers{
         .lecturers_item{
               padding: 20rpx 0 10rpx;
               border-bottom: 1px solid rgba(83,83,83,0.06);
               width: 100%;
               display: flex;
			   align-items: center;
               .avatar{
                 margin-left: 9px;
                 margin-right: 21px;
                 img{
                       width: 72px;
                       height: 72px;
                       border-radius: 50%;
                 }
               }
               .information{
                 flex:1;
                 .information_1{
                       display: flex;
                       align-items: center;
                       .name{
                         font-weight: 600;
                         font-size: 16px;
                         color: #333333;
                         line-height: 22px;
                         text-align: left;
                         font-style: normal;
                       }
                       .numbering{
                         font-weight: 400;
                         font-size: 14px;
                         color: #333333;
                         line-height: 20px;
                         text-align: left;
                         font-style: normal;
                         margin-left: 9px;
                       }
                 }
                 .information_2{
                         display: -webkit-box;
                         -webkit-box-orient: vertical;
                         -webkit-line-clamp: 2;
                         overflow: hidden;
                         text-overflow: ellipsis;
                         white-space: normal;
                       font-weight: 400;
                       font-size: 14px;
                       color: #333333;
                       text-align: left;
                       font-style: normal;
                       margin-top: 5px;
					   line-height: 18px;
                 }
                 .information_3{
                       margin-top: 5px;
                       font-weight: 400;
                       font-size: 14px;
                       color: #666666;
                       line-height: 20px;
                       text-align: left;
                       font-style: normal;
                       align-items: center;
                       .posts{
                         margin-right: 20px;
                       }
                 }
               }
               .status{
                 width:50px ;
                 text-align: right;
               }
         }
       }
}
</style>