medicine_app/pages/course/myCourse.vue

<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<z-nav-bar title="我的课程"></z-nav-bar>
		<view class="tabsBox" :class="[fixed ? 'fixed' : '' ]">
			<u-tabs v-if="tabList.length > 0" :class="['tabList']" @click="fatherClick" :current="curTagId"
				:activeStyle="activeStyle" :scrollable="scrollable" :list="tabList"
				itemStyle="padding-left: 15px; padding-right: 15px; height: 50px;"></u-tabs>
		</view>
		<view class="containerBg1">			
			<!-- <view class="containerBg"> -->
			<view class="newBox">
					<view class="item flexbox" v-for="(item, index) in MyCourseList.list" :key="index" @click="onPageJump('/pages/course/courseDetail',item.id)">
						<!-- <view class="imgcontainer" :style="{backgroundImage:surl(item.image)}"> -->
						<view class="imgcontainer">
							<image :src="item.image" mode="aspectFit"></image>
						</view>
						<view class="buyItems">
							<view class="txt555">
								{{item.title}}
							</view>
							<view class="jianjie" v-html="item.content">
			
							</view>
							<view class="tag-view">
								<uni-tag v-if="item.level != 0" style="margin-right: 10rpx;" :text="item.level == 1 ? '初级':'高级'" type="primary" size="small" />
								<uni-tag v-if="item.selective != 0 && item.selective == 1" style="margin-right: 10rpx;" text="必修" size="small" type="warning" />
								<uni-tag v-if="item.selective != 0 && item.selective == 2" style="margin-right: 10rpx;" text="选修" size="small" type="success" />
							</view>
							<view class="btn_box">
								<text>了解课程</text>
							</view>
						</view>
						
					</view>
				</view>
				<u-divider v-show="MyCourseList.status == 2" text="已加载全部"></u-divider>
				<u-divider v-show="MyCourseList.status == 3" text="暂无数据"></u-divider>
				<u-divider v-show="MyCourseList.status == 1" text="加载中..."></u-divider>
			</view>
			
			<view>
				<u-back-top :scroll-top="scrollTop" bottom="150" :customStyle='bgiStyle'
					:iconStyle="iconStyle"></u-back-top>
			</view>
			<!-- </view> -->
			<!-- 评论弹出 -->			
			<public-module></public-module>
			<z-navigation></z-navigation>
			<!-- <music-play :playData="playData"></music-play> -->
		</view>
	</view>
</template>

<script>
	// import musicPlay from '@/components/music.vue'
	import commentsList from '@/components/commentsList.vue'
	import emojiList1 from '../../bkhumor-emojiplus/emoji/biaoqin.js'
	import emotion from '@/bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue';
	import $http from '@/config/requestConfig.js';
	var clear;
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				curTagId:0,
				playData: {},				
				// fixed: false,
				bgiStyle: {
					background: '#fff'
				},
				iconStyle: {
					fontSize: '40rpx',
					fontWeight: 'bold',
					color: '#258feb',
				},				
				userMsg: {}, // 用户信息
				scrollTop: 0,
				activeStyle: {
					color: '#333',
					fontWeight: 'bold',
					transform: 'scale(1.2)',
					// backgroundColor: '#258feb'

				},
				scrollable: false,
				pageTitle: null,				
			fixed:false,
				tabList: [{id:1, name:'我的课程'},{id:2, name:'在学习'},{id:3, name:'已过期'}], // 目录列表
				curId: null,
				curIndex: 0,
				MyCourseList:{
					list:[],
					status:88,
					page:1,
					flag:false
				},
				LearningCourseList:{
					list:[],
					status:88,
					page:1,
					flag:false
				},
				ExpiredCourseList:{
					list:[],
					status:88,
					page:1,
					flag:false
				}
				
			};
		},
		//第一次加载
		onLoad(e) {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			this.windowWidth = uni.getSystemInfoSync().windowWidth;
			// this.pageTitle = e.title
			console.log(e, '传入分类id')
			this.getUserInfo()
			this.fatherClick()
			this.getMyCourseList()
			this.getLearningCourseList()
			this.getExpiredCourseList()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			if (this.scrollTop > 500) {
				this.fixed = true
			} else {
				this.fixed = false
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		//页面显示
		onShow() {
			// 隐藏原生的tabbar
			uni.hideTabBar();

		},
		onReachBottom() {
			console.log('触底');
			// if (this.status != 2) {
			// 	this.pPage++
			// 	this.getSayList()
			// }
		},
		components: {
			// musicPlay
			emotion,
			// commentsList

		},
		//方法
		methods: {
			fatherClick(){},
			getMyCourseList(){
				this.MyCourseList.status = 1
				if (!this.MyCourseList.flag) {
					console.log('正在执行，未完成')
					return
				}
				
				this.MyCourseList.flag = false
				$http.request({
						url: "medical/home/getMedicalCourseList",
						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
						data: {
							"id": id,
							"limit": 12,
							"page": this.MyCourseList.page
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						if (res.code == 0) {
							if (res.courses.records.length > 0) {
								var list = res.courses.records
								this.courseList = this.MyCourseList.list.concat(list)
								if (res.courses.pages > this.MyCourseList.page) {
									this.MyCourseList.status = 0
								} else {
									this.MyCourseList.status = 2
								}
							}		
							else {
				
								this.MyCourseList.status = 3 // 暂无数据
							}
							console.log('status', this.MyCourseList.status)
						}
						this.MyCourseList.flag = true
					}).catch(e => {
						console.log(e, '数据报错')
					});
			},
			getLearningCourseList(){},
			getExpiredCourseList(){},
			getUserInfo() {
				// 用户详情
				// if (this.userInfo.id != undefined) {
				this.$http
					.post('book/user/info/' + this.userInfo.id)
					.then(res => {
						this.userMsg = res.user
					});
				// }
			},
			
			// 跳转
			onPageJump(url,id) {
				uni.navigateTo({
					url: `${url}?id=${id}`
				});
			},
			
		},
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.tabsBox{background-color: #e4eefa;}
	.flexbox {
		display: flex;
	}

	.imgcontainer {
		background-color: $imgBg;
	}
</style>