MinNan/pages/user/learn.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="filter-box">
			<view class="b-item" v-for="(item, index) in groupList" :key="index" :class="{ 'f-active': index == groupIndex }" @click="onGroupSelect(index)">
				<view class="s-tit">{{ item.name }}</view>
			</view>
		</view>
		<view class="course-list" v-if="groupList[groupIndex].value === 'course' && recordList.length > 0">
			<view class="course-item" @click="onJumpDetail('course', item.course_id)" v-for="(item, index) in recordList" :key="index">
				<view class="b-cover">
					<image :src="item.course_data.cover_url" mode="aspectFill"></image>
				</view>
				<view class="b-main">
					<text class="b-title too-long">{{ item.course_data.name }}</text>
					<view class="b-percent">
						<view class="b-line">
							<view class="s-num" :style="'width:' + item.learn_percent + '%'"></view>
						</view>
						<view class="b-data">
							<view class="s-time">{{ item.course_data.total_length }}课时</view>
							<view class="s-percent">已学{{ item.learn_percent }}%</view>
						</view>
					</view>
					<view class="b-info">
						<view class="s-category">{{ item.course_data.category_name }}</view>
						<!-- <view class="s-option">
							<view class="iconfont icon-option"></view>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="schedule-list" v-if="groupList[groupIndex].value === 'schedule' && recordList.length > 0">
			<view class="schedule-item" @click="onJumpDetail('schedule', item.schedule_id)" v-for="(item, index) in recordList" :key="index">
				<view class="b-cover">
					<image :src="item.schedule_data.cover_url" mode="aspectFill"></image>
				</view>
				<view class="b-main">
					<text class="b-title too-long">{{ item.schedule_data.name }}</text>
					<view class="b-percent">
						<view class="b-line">
							<view class="s-num" :style="'width:' + item.learn_percent + '%'"></view>
						</view>
						<view class="b-data">
							<view class="s-time">{{ item.schedule_data.total_length }}课时</view>
							<view class="s-percent">已学{{ item.learn_percent }}%</view>
						</view>
					</view>
					<view class="b-info">
						<view class="s-category">{{ item.schedule_data.category_name }}</view>
						<!-- <view class="s-option">
							<view class="iconfont icon-option"></view>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<!-- 加载中 -->
		<load-more :loadingType="loadingType" :loadingText="loadingText" color="#888888"></load-more>
	</view>
</template>

<script>
// import { getMineCourseList } from '@/service/api/course.js';
// import { getMineScheduleList } from '@/service/api/schedule.js';
import Util from '@/common/util';
import mixinsCommon from '@/mixins/common.js';
export default {
	mixins: [mixinsCommon],
	data() {
		return {
			groupList: [
				{
					name: '我的课程',
					value: 'course'
				},
				{
					name: '我的培训',
					value: 'schedule'
				}
			],
			groupIndex: 0,
			recordList: [],
			hasLoad: false,
			refreshTime: 0,
			loadingType: 1,
			loadingText: ''
		};
	},
	onLoad(options) {
		if (!this.$store.state.learnType) {
			this.refreshTime = Util.getTimestamp();
			this.loadRecordList(true);
		}
	},
	onShow() {
		// switchTab时通过这种方式传参
		console.log('onShow', this.$store.state.learnType);
		const learnType = this.$store.state.learnType;
		if (learnType) {
			this.$store.commit('delLearnType');
			if (learnType === 'course') {
				this.groupIndex = 0;
			} else if (learnType === 'schedule') {
				this.groupIndex = 1;
			}
			this.loadRecordList(true);
		} else {
			if (this.hasLoad) {
				const timestamp = Util.getTimestamp();
				if (timestamp - this.refreshTime >= 5) {
					this.refreshTime = timestamp;
					this.loadRecordList(true);
				}
			}
		}
	},
	onReachBottom() {
		if (this.loadingType !== 1 && this.loadingType !== 2) {
			this.loadRecordList();
		}
	},
	methods: {
		loadRecordList(refresh) {
			if (this.isLogin) {
				if (this.groupList[this.groupIndex].value === 'course') {
					this.loadCourseList(refresh);
				} else if (this.groupList[this.groupIndex].value === 'schedule') {
					this.loadScheduleList(refresh);
				}
			} else {
				this.loadingType = 2;
				this.loadingText = '暂无数据，请先登录吧';
			}
		},
		loadCourseList(refresh) {
			console.log('loadCourseList', refresh);
			if (refresh) {
				this.page = 1;
				this.recordList = [];
			} else {
				this.page++;
			}
			this.loadingType = 1;
			this.loadingText = '';
			// this.$api.getMineCourseList({},function(res){

			// })
			// getMineCourseList(this.page, 10).then(([err, res]) => {
			// 	console.log('getMineCourseList', err, res);
			// 	this.loadingType = -1;
			// 	this.hasLoad = true;
			// 	if (!err) {
			// 		if (res.items.length > 0) {
			// 			this.recordList = [...this.recordList, ...res.items];
			// 		} else {
			// 			this.loadingType = 2;
			// 			if (this.page == 1) {
			// 				this.loadingText = '暂无记录，快去学习吧';
			// 			}
			// 			this.page--; // 重置分页
			// 		}
			// 	} else {
			// 		this.loadingType = 2;
			// 	}
			// });
		},
		loadScheduleList(refresh) {
			console.log('loadScheduleList', refresh);
			if (refresh) {
				this.page = 1;
				this.recordList = [];
			} else {
				this.page++;
			}
			this.loadingType = 1;
			this.loadingText = '';
			getMineScheduleList(this.page, 10).then(([err, res]) => {
				console.log('getMineScheduleList', err, res);
				this.loadingType = -1;
				this.hasLoad = true;
				if (!err) {
					if (res.items.length > 0) {
						this.recordList = [...this.recordList, ...res.items];
					} else {
						this.loadingType = 2;
						if (this.page == 1) {
							this.loadingText = '暂无记录，快去参加吧';
						}
						this.page--; // 重置分页
					}
				} else {
					this.loadingType = 2;
				}
			});
		},
		onGroupSelect(index) {
			this.groupIndex = index;
			this.loadRecordList(true);
		},
		onJumpDetail(type, id) {
			if (type === 'schedule') {
				uni.navigateTo({
					url: '/pages/schedule/detail?sid=' + id
				});
			} else if (type === 'course') {
				uni.navigateTo({
					url: '/pages/course/detail?cid=' + id
				});
			}
		}
	}
};
</script>

<style>
.wrap {
	padding-bottom: 150upx;
}

.filter-box {
	padding: 30upx 50upx 0 50upx;
	margin-bottom: 30upx;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.filter-box .b-item {
	margin: 0 40upx;
	height: 80upx;
	line-height: 80upx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30upx;
	padding-bottom: 6upx;
	position: relative;
}

.filter-box .b-item.f-active {
	padding-bottom: 0;
	border-bottom: 6upx solid #da5650;
}

.filter-box .b-item.f-active .s-tit {
	color: #da5650;
}

.filter-box .b-item .s-tit {
	color: #333;
}

.course-list .course-item {
	padding: 30upx;
	background: #fff;
	display: flex;
	align-items: center;
	border-bottom: 2upx solid #eee;
}

.course-list .course-item:last-child {
	border-bottom: none;
	margin-bottom: 0;
}

.course-list .course-item .b-cover {
	width: 140upx;
	height: 160upx;
}

.course-list .course-item .b-cover image {
	width: 100%;
	height: 100%;
}

.course-list .course-item .b-main {
	flex: 1;
	margin-left: 20upx;
}

.course-list .course-item .b-main .b-title {
	font-size: 30upx;
	color: #333;
	width: 530upx;
	display: inline-block;
}

.course-list .course-item .b-main .b-percent {
	margin-top: 10upx;
	display: flex;
	flex-direction: column;
}

.course-list .course-item .b-main .b-percent .b-line {
	position: relative;
	width: 100%;
	height: 20upx;
	background: #eee;
}

.course-list .course-item .b-main .b-percent .b-line .s-num {
	position: absolute;
	top: 0;
	left: 0;
	height: 20upx;
	background: rgba(218, 86, 80, 0.8);
}

.course-list .course-item .b-main .b-percent .b-data {
	margin-top: 10upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.course-list .course-item .b-main .b-percent .b-data .s-time {
	font-size: 26upx;
	color: #666;
}

.course-list .course-item .b-main .b-percent .b-data .s-percent {
	font-size: 24upx;
	color: #999;
}

.course-list .course-item .b-main .b-info {
	margin-top: 20upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.course-list .course-item .b-main .b-info .s-category {
	font-size: 24upx;
	color: #666;
}

.course-list .course-item .b-main .b-info .s-option {
	font-size: 32upx;
	color: #999;
}

.schedule-list .schedule-item {
	padding: 30upx;
	background: #fff;
	display: flex;
	align-items: center;
	border-bottom: 2upx solid #eee;
}

.schedule-list .schedule-item:last-child {
	border-bottom: none;
	margin-bottom: 0;
}

.schedule-list .schedule-item .b-cover {
	width: 140upx;
	height: 160upx;
}

.schedule-list .schedule-item .b-cover image {
	width: 100%;
	height: 100%;
}

.schedule-list .schedule-item .b-main {
	flex: 1;
	margin-left: 20upx;
}

.schedule-list .schedule-item .b-main .b-title {
	font-size: 30upx;
	color: #333;
	width: 530upx;
	display: inline-block;
}

.schedule-list .schedule-item .b-main .b-percent {
	margin-top: 10upx;
	display: flex;
	flex-direction: column;
}

.schedule-list .schedule-item .b-main .b-percent .b-line {
	position: relative;
	width: 100%;
	height: 20upx;
	background: #eee;
}

.schedule-list .schedule-item .b-main .b-percent .b-line .s-num {
	position: absolute;
	top: 0;
	left: 0;
	height: 20upx;
	background: rgba(218, 86, 80, 0.8);
}

.schedule-list .schedule-item .b-main .b-percent .b-data {
	margin-top: 10upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.schedule-list .schedule-item .b-main .b-percent .b-data .s-time {
	font-size: 26upx;
	color: #333;
}

.schedule-list .schedule-item .b-main .b-percent .b-data .s-percent {
	font-size: 24upx;
	color: #666;
}

.schedule-list .schedule-item .b-main .b-info {
	margin-top: 16upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.schedule-list .schedule-item .b-main .b-info .s-category {
	font-size: 24upx;
	color: #666;
}

.schedule-list .schedule-item .b-main .b-info .s-option {
	font-size: 32upx;
	color: #999;
}
</style>