<template>
	<!-- 课程介绍 -->
	<view class="course_intro">
		<!-- 课程名称 -->
		
		<view class="intro_title">{{ title }}</view>
		<!-- banner -->
		<view class="intro_banner">
			<view class="banner_box">
				<image :src="item.image" mode=""></image>
				<!-- 分享 -->
				<view class="intro_share layout_row" >
					<image src="../../static/fenxiang_icon@2x.png" mode="widthFix"></image>
					分享
					<button open-type="share"></button>
				</view>
			</view>
		</view>
		
		
		
		<!-- 课程介绍 -->
		<view class="course_des">
			<!-- 标题 -->
			<view class="descrip_title">课程介绍</view>
			<!-- 介绍内容 -->
			<view class="intro" v-html="item.content">
				
			</view>
			
			<view class="contentimg">
				<image :src="item.image" mode=""></image>
			</view>
		</view>
		<!-- 进入课程 按钮 -->
		<view class="join_box">
			<view class="join_course" @click="toDetail()">进入课程</view>
		</view>
		<!-- 返回首页 -->
		<view class="back_index column_center" @click="toIndex">
			<image src="../../static/shouye_icon@2x.png" mode=""></image>
			首页
		</view>
	</view>
</template>

<script>
import app from "../../App.vue";
export default {
	data() {
		return {
			title: '【深潜挑战】 21天',
			content:"",
			courseid:'',
			item:'',
		};
	},
	methods: {
		// 介绍内容 后台的富文本数据
		onEditorReady() {
			let t = this;
			uni.createSelectorQuery()
				.select('#editorDetail')
				.context(res => {
					this.editorCtx = res.context;
					let content = {
						html: t.content
					};
					this.editorCtx.setContents(content); //设置富文本编辑器的内容
				})
				.exec();
		},
		
		// 进入课程
		toDetail(){
			let token=uni.getStorageSync("token")
			if(token==''){
				uni.showToast({
					title:'请先登录',
					icon:'none'
				})
				
				setTimeout(function(){
					uni.navigateTo({
						url:'/pages/index/index'
					})
				},1500)
			}else{
				uni.navigateTo({
					url:"/pages/course/courseDetail?id="+this.item.id
				})
			}
			
		},
		// 返回首页
		toIndex(){
			uni.navigateBack({
				delta:2
			})
		},
	},
	
	onShareAppMessage(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			console.log(res.target);
		}
		return {
			title: '自定义分享标题',
			path: '/pages/test/test?id=123'
		};
	},
	onLoad(options){
		var item=wx.getStorageSync("item");
		// item=JSON.parse(item);
		console.log(item)
		
		
		
		
		 // var itemname=JSON.parse(options.item);
		 // console.log(item)
		  this.item=item
		
		
		
	},
	
	onShareAppMessage: function (res) {
	    var that = this;
	   
	   
	        // 来自页面内转发按钮
	        return {
	          title: '分享',
	          path: "/pages/course/courseIntro?id="+that.item.id
	          
	        }
	      
	  }
	
};
</script>

<style lang="scss">
	.intro{
		width:686rpx;
		color:#06121E;
		font-size: 24rpx;
		margin:28rpx auto 0;
	}
.course_intro {
	.intro_title {
		font-weight: 600;
		color: #000;
		font-size: 36upx;
		padding: 20upx 0;
		text-align: center;
	}
	// banner
	.intro_banner {
		background-color: #fafbfd;
		padding: 42upx 32upx;
		.banner_box {
			width: 100%;
			height: 248upx;
			position: relative;
			image {
				border-radius: 20upx;
			}
			// 分享
			.intro_share {
				position: absolute;
				width: 122upx;
				height: 50upx;
				background-color: #06121e;
				opacity: 0.54;
				border-radius: 40upx 0 0 40upx;
				top: 42upx;
				right: 0;
				color: #fff;
				font-size: 24upx;
				image {
					width: 24upx;
					margin: 0 8upx 0 22upx;
				}
				button{
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 3;
					opacity: 0;
				}
			}
		}
	}
	// 课程介绍
	.course_des{
		padding: 50upx 32upx;
		// 标题
		.descrip_title{
			position: relative;
			margin-left: 24upx;
			color: #595959;
			font-size: 36upx;
			margin-bottom: 28upx;
			&::after{
				content: '';
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: -24upx;
				width: 12upx;
				height: 30upx;
				background-color: #EE8B27;
				
				
			}
		}
	}
	// 进入课程
	.join_box{
		width: 100%;
		position: fixed;
		bottom: 0;
		left:0;
		background: #fff;
		padding-bottom: 32rpx;
		.join_course{
			margin: 0 32upx;
			height: 96upx;
			background-color: #EE8B27;
			overflow-block: #fff;
			text-align: center;
			line-height: 96upx;
			border-radius: 48upx;
			box-shadow:0px 6px 6px rgba(238,139,39,0.16);
			font-size: 28upx;
			margin-top: 60upx;
			color: #fff;
		}
	}
	// 返回首页
	.back_index{
		width:80upx;
		height:80upx;
		background:rgba(0,0,0,1);
		border-radius:50%;
		opacity:0.63;
		position: fixed;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		text-align: center;
		color: #fff;
		font-size: 20upx;
		image{
			width: 32upx;
			height: 32upx;
			margin: 0 auto 4upx;
		}
	}
}
</style>