taimed/pages/curriculum/index/index.vue

<template>
  <view class="commonPageBox commonDetailPage">
    <z-nav-bar title="我的课程" bgColor="#5188e5" fontColor="#fff"></z-nav-bar>
    <view class="cateList flexbox" :style="`top: ${45 + statusBarHeight}px;`">
    	<common-sticky itemStyle="width: 50%; height: 68rpx;font-size:24rpx;" :list="ordersTabs" label="name"
		:currentCateIndex="currentCateIndex" @handleselectCate="ordersTabCLi"></common-sticky>
	</view>	
	<view class="list_block">
		<view class="list_item" 
			v-for="(item, index) in dataList" :key="index" 
			v-if="dataList&&dataList.length>0"
			@click="goToDetail(item)"
			>
			<view class="list_item_image">
				<image v-if="item.image" :src="item.image" mode="aspectFit"></image>
				<text class="image_null" v-else>暂无封面图</text>
			</view>
			<view class="list_item_right">
				<view class="list_item_title">{{item.title}}</view>
				<view class="list_item_content" v-html="item.content"></view>
			</view>
		</view>
		<text v-if="statusNull" class="text_null">暂无数据</text>
	</view>
  </view>
</template>

<script>
import $http from "@/config/requestConfig.js";
export default {
	data(){
		return {
			ordersTabs: [{
					name: "我的课程",
					value: 0,
				},
				{
					name: "过期课程",
					value: 1,
				}
			],
			currentCateIndex: 0,
			dataList: [],  //列表数据
			timer: null,
			statusNull: null,  //暂无数据显示
			current: 1,
			limit: 10
		}
	},
	onShow(){
		
	},
	onLoad() {
		//我的课程
		this.getMyList();
	},
	methods: {
		//我的课程数据
		getMyList(){
			uni.showLoading({
				title: '加载中'
			})
			this.$http.request({
				url: 'taihumed/course/getMyCourseList',
				method: "POST",
				data: {
					current: this.current,
					limit: this.limit
				},
				header: {
					"Content-Type": "application/json",
				},
			})
			.then(res=> {
				if (res.code == 0) {
					uni.hideLoading();
					if(res.pageRes.records&&res.pageRes.records.length>0){
						this.dataList = res.pageRes.records;
					}else{
						this.dataList = [];
						this.statusNull =true;
					}
				}
			});
		},
		//过期课程数据
		getExpireList(){
			this.dataList = [];
			uni.showLoading({
				title: '加载中'
			})
			this.$http.request({
				url: 'taihumed/course/getCourseExpire',
				method: "POST",
				data: {},
				header: {
					"Content-Type": "application/json",
				},
			})
			.then(res => {
				if (res.code == 0) {
					uni.hideLoading();
					if(res.courseList&&res.courseList.length>0){
						this.dataList = res.courseList;
					}else{
						this.dataList = [];
						this.statusNull =true;
					}
				}
			});
		},
		//切换tab状态
		ordersTabCLi(data, index) {
			this.dataList = [];
			this.statusNull = null;
			this.currentCateIndex = index;
			if(index==0){
				this.getMyList();
			}else if(index==1){
				this.getExpireList();
			}
		},
		//跳转课程详情
		goToDetail(item) {
		  uni.navigateTo({
		    url: `/pages/curriculum/index?navTitle=${item.title}&title=${item.title}&id=${item.id}`,
		  });
		},
	},
}
</script>

<style lang="scss">
.commonPageBox{
	background: #eff5f8;
	height: 100vh;
}
.cateList {
	width: 100%;
}
.flexbox {
	position: fixed;
	left: 0;
	z-index: 9999;
}
.list_block{
	padding: 20rpx 20rpx 0;
	margin-top: 70rpx;
}
.list_item{
	position: relative;
	background: #fff;
	box-shadow: 0px 0px 10px 0px #a7bbe4;
	padding: 30rpx 20rpx 30rpx;
	margin-bottom: 20rpx;
	display: flex;
	border-radius: 10rpx;
}

.list_item_bt{
	padding: 30rpx 20rpx 70rpx;
}
.list_item_image,.image_null{
	width: 250rpx;
	height: 220rpx;
	background-color: rgba(125, 193, 240, 0.1);
	display: flex;
	justify-content: center;
	align-items: center;
}
.list_item_image image{
	width: 100%;
}
.list_item_right{
	margin-left: 30rpx;
	width: calc(100% - 250rpx);
}
.list_item_title{
	font-size: 30rpx;
	line-height: 36rpx;
	font-weight: bold;
	color: #333;
}
.list_item_content{
	margin-top: 15rpx;
	font-size: 26rpx;
	line-height: 36rpx;
	color: #999;
	max-height: 108rpx;
	overflow: hidden;
}
.list_item_study{
	line-height: 48rpx;
	position: absolute;
	right: 20rpx;
	bottom: 30rpx;
	background: #7dc1f0;
	color: #fff;
	border-radius: 40rpx;
	font-size: 24rpx;
	padding: 0 20rpx;
}
.list_item_study_out{
	line-height: 48rpx;
	position: absolute;
	right: 20rpx;
	bottom: 30rpx;
	background: #294a97;
	color: #fff;
	border-radius: 40rpx;
	font-size: 24rpx;
	padding: 0 20rpx;
}
.text_null{
	display: block;
	width: 100%;
	text-align: center;
	font-size: 26rpx;
	color: #999;
	margin: 150rpx 0;
}
.image_null{
	color: #999;
	font-size: 22rpx;
}
</style>