<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<z-nav-bar :title="pageTitle"></z-nav-bar>
		<view class="learnBox box" v-if="courseList.length > 0">
			<view class="learn flexbox shiting">
				<view class="item" v-for="(item, index) in courseList" :key="index">
					<view class="imgcontainer">
						<image :src="item.image" mode="aspectFit"></image>
					</view>
					<view class="buyItems flexbox">
						<view class="txt555">
							{{item.title}}
						</view>
						<!-- <view class="buybtn" @click="onPageJump()">
							<span>购买</span>
						</view> -->
					</view>
		
				</view>
			</view>	
					<u-divider text="已加载全部"></u-divider>
					<u-divider text="暂无数据"></u-divider>
					<u-divider text="加载中..."></u-divider>
		</view>
		
		<public-module></public-module>
		<z-navigation></z-navigation>
		<music-play :playData="playData"></music-play>
	</view>
</template>

<script>
	import musicPlay from '@/components/music.vue'
	import $http from '@/config/requestConfig.js';
	var clear;
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				playData: {},
				tagId: null,
				pageTitle: '',
				courseList: []
			};
		},
		//第一次加载
		onLoad(e) {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			this.tagId = e.id
			this.pageTitle = e.title
			console.log(e, '传入分类id')
		},
		computed: {
			...mapState(['userInfo'])
		},
		//页面显示
		onShow() {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			this.getData();

		},
		components: {
			musicPlay
		},
		//方法
		methods: {
			getData() {
				$http.request({
						url: "medical/home/getMarketCourseList",
						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
						data: {
							"id": this.tagId,
							"limit": 12,
							"page": 1
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						if (res.code == 0) {
							if (res.courseList.records.length > 0) {
								this.courseList = res.courseList.records
							} else {
								this.courseList = []
							}
						}

					});
			}
		},
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';
	.flexbox{display: flex; }
	.imgcontainer {
		background-color: $imgBg;
	}
	.box {
		background-color: #fff;
		@include pleft_right(10px);
		min-height: calc(100vh - 270rpx);
	}

	.learnBox {
		background-color: #fff;
		margin-top: 10px;
		@include ptop_bottm(10px);
		@include pleft_right(10px);
	
		.learn { flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 20rpx; 
	
			.item {
				width: 48%;margin-bottom: 16px;
	
				overflow: hidden;
	
				image {
					width: 100%;
					height: 200rpx;
				}
	
				.txt555 { display: block; text-align: center;
					height: 40rpx; width: 100%;
					line-height: 40rpx;
					@include bov(1);
					margin-top: 10rpx;
					font-size: 24rpx;
	
				}
	
			}
		}
	}
</style>