WenWuGuanJia/pages/teacher/detail.vue

<template>
	<view class="wrap">
		<u-navbar :autoBack="true" title="讲师" bgColor="rgba(255,255,255,255)" :placeholder="true" titleStyle="font-weight:bold;color:#121212"></u-navbar>
		<view class="user-view">
			<view class="b-avatar">
				<image :src="teacherData.avatar_url || '/static/imgs/user.png'" mode="aspectFill"></image>
			</view>
			<view class="b-info">
				<view class="s-name">{{ teacherData.name }}</view>
				<view class="s-title" v-if="teacherData.intro">{{ teacherData.intro }}</view>
			</view>
		</view>
		<view class="box">
			<!-- <view class="box-head">全部课程</view> -->
			<view class="box-main course-list">
				<course-item v-for="(item, index) in courseList" :key="index" :item="item"></course-item>
			</view>
		</view>
		<!-- 加载中 -->
		<load-more :loadingType="loadingType" :loadingText="loadingText"></load-more>
		<!-- 首页 -->
		<app-home></app-home>
	</view>
</template>

<script>
// import {
// 	getTeacherDetail,
// 	getCourseList
// } from '@/service/api/teacher.js'
import mixinsCommon from '@/mixins/common.js';
let that;
export default {
	mixins: [mixinsCommon],
	data() {
		return {
			teacherData: {},
			courseList: [],
			loadingType: 1,
			loadingText: ''
		};
	},
	onLoad(options) {
		that = this;
		this.teacherId = options.id;
		this.$api.getTeacherDetail({ id: this.teacherId }, function (res) {
			console.log('getTeacherDetail', res);
			if (res.code == 1) {
				that.loadingType = -1;
				that.teacherData = res.data;
				uni.setNavigationBarTitle({
					title: res.data.name
				});
			} else {
				that.loadingType = 3;
				// this.loadingText = err.data.msg || '加载失败';
			}
		});

		// getTeacherDetail(this.teacherId).then(([err, res]) => {
		// 	console.log('getTeacherDetail', err, res);
		// 	if (!err) {
		// 		this.loadingType = -1;
		// 		this.teacherData = res;
		// 		uni.setNavigationBarTitle({
		// 			title: res.name
		// 		});
		// 	} else {
		// 		this.loadingType = 3;
		// 		this.loadingText = err.data.msg || '加载失败';
		// 	}
		// });
		this.loadCourseList(true);
	},
	onReachBottom() {
		if (this.loadingType !== 1 && this.loadingType !== 2) {
			this.loadCourseList();
		}
	},
	methods: {
		loadCourseList(refresh) {
			console.log('loadCourseList', refresh);
			if (refresh) {
				this.page = 1;
				this.courseList = [];
			} else {
				this.page++;
			}
			this.loadingType = 1;
			this.loadingText = '';
			this.$api.getCourseList(
				{
					teacherId: that.teacherId,
					page: that.page,
					page_size: 10
				},
				function (res) {
					console.log(res, 6565);
					that.loadingType = -1;
					if (res.code == 1) {
						if (res.data.items.length > 0) {
							that.courseList = [...that.courseList, ...res.data.items];
						} else {
							that.loadingType = 2;
							if (that.page == 1) {
								that.loadingText = '暂无数据';
							}
							that.page--; // 重置分页
						}
					} else {
						that.loadingType = 3;
					}
				}
			);
			// getCourseList(this.teacherId, this.page, 10).then(([err, res]) => {
			// 	console.log('getCourseList', err, res);
			// 	this.loadingType = -1;
			// 	if (!err) {
			// 		if (res.items.length > 0) {
			// 			this.courseList = [...this.courseList, ...res.items];
			// 		} else {
			// 			this.loadingType = 2;
			// 			if (this.page == 1) {
			// 				this.loadingText = '暂无数据';
			// 			}
			// 			this.page--; // 重置分页
			// 		}
			// 	} else {
			// 		this.loadingType = 3;
			// 	}
			// });
		}
	}
};
</script>

<style>
.wrap {
	background: #fff;
}

.user-view {
	padding: 50upx 0 50upx 0;
	display: flex;
	align-items: center;
	flex-direction: column;
	z-index: 1;
	background: #eee;
}

.user-view .b-avatar {
	width: 180upx;
	height: 180upx;
}

.user-view .b-avatar image {
	width: 180upx;
	height: 180upx;
	border: 5upx solid #fff;
	border-radius: 50%;
}

.user-view .b-info {
	margin-top: 20upx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.user-view .b-info .s-name {
	margin-top: 20upx;
	font-weight: bold;
	font-size: 32upx;
	color: #333;
}

.user-view .b-info .s-title {
	margin-top: 10upx;
	font-size: 28upx;
	color: #666;
}

.box {
	background: #fff;
}

.box .box-head {
	padding: 0 30upx;
	text-align: center;
	height: 100upx;
	line-height: 100upx;
	font-size: 30upx;
	color: #333;
	border-top: 2upx solid #eee;
	border-bottom: 2upx solid #eee;
}

.course-list .course-item {
	border-bottom: 1upx solid #eee;
}

.course-list .course-item:last-child {
	border-bottom: none;
}
</style>