i2-school-employee-uniapp/pages/message/classroom_item.vue

<template>
	<view class="u-flex-column">
		<!-- 日期 -->
		<view v-if="data.isSection" class="flex margin-sm align-center">
			<text class="lg text-red cuIcon-round"></text>
			<text class="margin-lr-sm text-lg text-bold"> {{ data.date }} </text>
		</view>
		<!-- 时间线 -->
		<view class="u-flex-column">
			<!-- 左侧时间线与图标 -->
			<view class="cu-timeline bg-normal">
				<view class="cu-item cuIcon-title bg-normal">
					<view class="flex align-center bg-normal">
						<text class="text-black text-bold"> {{ startTime + ' - ' + endTime }} </text>
					</view>
					<!-- 课程信息 -->
					<view class="lesson-item u-flex-column bg-white" :style="{ 'border-left': '5px solid ' + mainColor }">
						<!-- 课程状态 -->
						<view class="flex justify-between margin-sm">
							<view class="text-center round padding-lr-sm u-border-bottom" :style="{ 'background-color': mainColor }">
								<text class="text-red text-xs" v-if="!data.if_feedback"> {{ $t('feedback') }} </text>
							</view>
							<view class="lesson-status text-xs flex align-center" @click="classStatusDidClick">
								<view class="cuIcon-form sm"></view>
								<text> {{ data.if_feedback ? $t('Completed') : $t('Uncompleted') }} </text>
							</view>
						</view>
						<view class="margin-sm" @click="lessonItemOnTap">
							<view class="bg-gray" style="height: 1px;" />
							<view class="flex justify-between align-center">
								<text class="margin-xs">{{ data.class_number || '-' }}</text>
								<text class="margin-xs">{{ answerStatus }}</text>
							</view>
							<view class="flex justify-start align-center">
								<uni-icons type="location"></uni-icons>
								<text class="padding-lr-xs text-sm text-gray">{{ data.school_address || '-' }}</text>
							</view>
							<view class="bg-gray margin-tb-sm" style="height: 1px;" />
							<view class="margin-lr-sm flex justify-start align-start">
								<text class="text-gray text-sm"> 学员: </text>
								<view v-if="data.stu_list" class="flex flex-wrap" style="flex:1">
									<view class="margin-lr-sm" v-for="(item, index) in data.stu_list" :key="index">
										<text class="text-gray text-sm"> {{ item.stu_name }} </text>
									</view>
								</view>
								<text v-else class="text-gray text-sm margin-lr-sm">暂无学员</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import moment from 'moment';
export default {
	props: {
		data: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
		};
	},
	computed: {
		startTime() {
			return moment(this.data.start_time).format('hh:mm');
		},
		endTime() {
			return moment(this.data.end_time).format('hh:mm');
		},
		mainColor() {
			if (this.data.if_feedback) {
				return '#F7C405'
			} else {
				return '#FFD7D9';
			}
		},
		lessonStatus() {
			if (this.data.study_state == 45) return '未上课';
			if (this.data.study_state == 47) return '已上课';
			if (this.data.study_state == 686) return '已取消';
			return ''
		},
		answerStatus() {
			var total = (this.data.stu_list || []).length
			return `${this.$i18n.t('answered')}\(${this.data.finish_num}/${total}\)`
		}
		
	},
	onReady() {},
	mounted() {},
	methods: {
		lessonItemOnTap(){
			uni.navigateTo({
				url:`../lesson/lesson_detail?lessonId=${this.data.id}`
			})
		},
		classStatusDidClick() {
			console.log('classStatusDidClick')
		}
	}
};
</script>
<style lang="scss" scoped>
.bg-normal {
	background-color: $uni-bg-color-hover;
}
.lesson-item {
	width: auto;
	border-top: 1px solid #f1f1f1;
	margin: 5px;
	padding-bottom: 5px;
	border-radius: 5px;
	box-shadow: 3px 3px 0 0 #f1f1f1;
}
.lesson-top-box {
	display: flex;
	justify-content: space-between;
	margin: 10px;
}
.lesson-status {
	background-color: red;
	color: white;
	padding: 3px 5px;
	border-radius: 10px 2px 10px 2px;
}
</style>