sz-kjsxy-wx-new/packages/mycourse/courseTxl.vue

<template>
	<view class="container">
		<image class="cbg" :src="base.imgHost('common_bg.png')"></image>
		<view class="wrap">
			<view v-if="teacher">
				<view class="teacher">
					<view>
						<image style="width:97rpx;height:97rpx;margin-right:30rpx" :src="base.imgHost('txl-teacher.png')"></image>
					</view>
					<view>
						<view class="teacher-name">
							<view style="display: flex;align-items: center;">
								<text>{{teacher.name}}</text>
								<text class="courseName">班主任</text>
							</view>
						</view>
						<view class="teacher-mobile">
							<image style="width:22rpx;height:22rpx;margin-right:20rpx" :src="base.imgHost('txl-phone.png')"></image>
							<view>{{teacher.mobile?teacher.mobile:''}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view v-if="teacher">
				<view class="teacher">
					<view>
						<image style="width:97rpx;height:97rpx;margin-right:30rpx" :src="base.imgHost('txl-student.png')"></image>
					</view>
					<view>
						<view class="teacher-name">
							<view style="display: flex;align-items: center;">
								<text>{{teacher.name}}</text>
								<text class="courseName">班主任</text>
							</view>
						</view>
						<view class="teacher-company">苏州朗业网络科技有限公司</view>
						<view class="teacher-mobile">
							<image style="width:22rpx;height:22rpx;margin-right:20rpx" :src="base.imgHost('txl-phone.png')"></image>
							<view>{{teacher.mobile?teacher.mobile:''}}</view>
						</view>
					</view>
				</view>
			</view> -->
			
			<view v-if="list.length>0">
				<nextIndexedXlist :dataList="list" :show-avatar="false">
				</nextIndexedXlist>
			</view>
			<view class="nodata" v-else>
				<u-empty mode="data"></u-empty>
			</view>
		</view>

	</view>
</template>

<script>
	import nextIndexedXlist from '@/components/next-indexed-xlist/components/next-indexed-xlist/next-indexed-xlist.vue';
	export default {
		components: {
			nextIndexedXlist
		},
		data() {
			return {

				list: [],
				teacher: null,
				studentList:[]
			}
		},
		onLoad(options) {
			this.getMyCourseTxl(options.id)
		},
		methods: {
			async getMyCourseTxl(id) {
				const res = await this.$u.api.courseUserList({
					course_id: id,
					type: 2
				})
				// res.list.map(item=>{
					
				// })
				this.list = res.list
				this.teacher = res.teacher
			},
		}

	}
</script>

<style scoped lang="scss">

	.container {
		padding: 30rpx 60rpx;
		width: 100%;
		height: 100vh;
		overflow: hidden;

		.cbg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
		}

		.wrap {
			position: relative;
			height:100%;
			overflow: scroll;
			// padding-top: 100rpx;

			.nodata {
				height: calc(100vh - 160rpx);
			}

			.teacher {
				width: 100%;
				background-color: #FFFFFF;
				box-sizing: border-box;
				padding-left: 24rpx;
				margin-bottom: 30rpx;
				padding: 30rpx;
				background-color: #fff;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				

				&-name {
					font-size: 32rpx;
					color: #333;
					margin-bottom: 10rpx;

					.courseName {
						color: #b89155;
						margin: 0 20rpx;
						font-size: 24rpx;
						border-radius: 0rpx 28rpx 28rpx 28rpx;
						color: #fff;
						padding:0rpx 15rpx;
						background: #b89155;
					}
				}

				&-mobile {
					display: flex;
					align-items: center;
					color:#666666;
					font-size: 28rpx;
					margin-bottom: 10rpx;
				}
				&-company{
					margin-bottom: 10rpx;
				}
			}

			// &-item {
			// 	margin: 30rpx 0;
			// 	padding: 30rpx;
			// 	background-color: #fff;
			// 	border-radius: 20rpx;

			// 	&>view {
			// 		margin-bottom: 10rpx;

			// 	}

			// 	&-name {
			// 		font-size: 32rpx;
			// 		color: #333;

			// 		.courseName {
			// 			color: #b89155;
			// 			margin: 0 10rpx;
			// 			font-size: 28rpx;
			// 		}
			// 	}
			// }
		}
	}
</style>