<template>
  <view class="commonPageBox commonDetailPage">
    <z-nav-bar title="免费课程"></z-nav-bar>
	<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 class="list_item_study">了解课程</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 {
			dataList: [],  //列表数据
			statusNull: null,  //暂无数据显示
		}
	},
	onShow(){
		//免费课程
		this.getDataList();
	},
	onLoad() {
		
	},
	methods: {
		//免费课程数据
		getDataList(){
			uni.showLoading({
				title: '加载中'
			})
			this.$http.request({
				url: 'psyche/course/getFreeCourse',
				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;
					}
				}
			});
		},
		//跳转课程详情
		goToDetail(item) {
		  uni.navigateTo({
		    url: `/pages/curriculum/order/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;
}
.list_item{
	position: relative;
	background: #fff;
	box-shadow: 0px 0px 10px 0px #a7bbe4;
	padding: 30rpx 20rpx 70rpx;
	margin-bottom: 20rpx;
	display: flex;
	border-radius: 10rpx;
}
.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>
