hgrrx-h5/pages/detail/detail.vue

<template>
	<view class="content">
		<view class="hflex acenter jbetween top">
			<image src="/static/image/index1/logo.png" class="logo"></image>
			<view class="vflex">
				<view class="top_title">線上課程,直播,活動,求職,補習,一應俱全</view>
				<view class="top_title2">「Day Day U」APP開啟更多功能</view>
			</view>
			<view class="top_btn hflex acenter jcenter">下載</view>
		</view>
		<view class="video">
			<view class="top_label hflex acenter jcenter">會員免費試看此課程，立即下載APP註冊</view>
			<video :src="pageData.video"></video>
		</view>
		<view class="box">
			<view class="box_title">{{pageData.title}}<span class="title_text">線上課程</span></view>
			<view class="hflex acenter">
				<image class="avatar" :src="pageData.headimg"></image>
				<view class="user_name">{{pageData.name}}</view>
			</view>
			<!-- <view class="info">{{pageData.intro}}</view> -->
			<view class="hflex acenter ">
				<view class="text_style1">{{evaluate.evaluate_avg}}評分</view>
				<u-rate count="5" v-model="evaluate.evaluate_avg" active-color="#f7b500"></u-rate>
				<!-- <image src="/static/image/index1/watch.png" style="margin: 0 1rpx 0 2rpx;width: 32rpx;height: 32rpx;"></image>
				<view class="text_style1">{{pageData.target_num}}觀看</view> -->
			</view>
			<view class=" hflex aend">
				<view class="text_blue">HK $ </view>
				<view class="price">{{pageData.price}}</view>
				<view class="text_style1 line">HK ${{pageData.original_price}}</view>
				<view class="text_style1" style="font-size: 28rpx;padding-left: 20rpx;"> {{pageData.discount}}折扣</view>
			</view>
			<view class="hflex acenter jcenter buy_btn">立即購買</view>
			<view class="list">
				<view class="title" style="padding: 32rpx 0;">你將學會</view>
				<view class="vflex">
					<block v-for="(item,index) in pageData.synopsis" :key="index">
						<view class="hflex acenter" style="padding: 0 0 24rpx;"> 
							<image src="/static/image/index1/checked.png" class="checked"></image>
							<view class="checked_text">{{item}}</view>
						</view>
					</block>
				</view>
			</view>
			<view class="title" style="padding: 48rpx 0 32rpx;">此課程包括</view>
			<view class="hflex acenter fwrap" style="padding: 0 24rpx;">
				<block v-for="(item,index) in pageData.include" :key="index">
					<view class="text_style2">{{item}}</view>
				</block>
			</view>
			<view class="course_content">
				<view class="course_top hflex acenter jbetween">
					<view class="course_title">課程內容</view>
					<view class="title_right">{{pageData.section_num}}章節·{{pageData.classroom_num}}單元·總長{{pageData.duration}}分鐘</view>
				</view>
				<view class="course_list">
					<block v-for="(item,index) in pageData.section_info.slice(0,3)" :key="index">
						<view class="list_item">
							<view class="hflex acenter jbetween">
								<view class="item_left">{{item.section_name}}</view>
								<view class="hflex acenter" @click="open(index)">
									<!-- <view class="item_right">長度·{{item.length}}分鐘</view> -->
									<u-icon name="arrow-down" color="#000" size="18" v-if="item.open"></u-icon>
									<u-icon name="arrow-right" color="#000" size="18" v-else></u-icon>
								</view>
							</view>
							<view class="children" v-show="item.open">
								<block v-for="(item2,index2) in item.element_info" :key="index2">
									<view class="hflex acenter jbetween" style="padding: 15rpx 0pt 0pt;">
										<view class="hflex acenter">
											<image src="/static/image/index1/task.png" class="stop" v-if="item2.job_name !== ''"></image>
											<image src="/static/image/index1/stop.png" class="stop"></image>
											<view class="label">單元{{index2 + 1}}-{{item2.element_name}}</view>
											<view class="label" v-if="item2.job_name !== ''">作業1-{{item2.job_name}}</view>
										</view>
										<view class="item_right">{{item2.time}}分鐘</view>
									</view>
								</block>
							</view>
						</view>
					</block>
					<view class="hflex acenter jcenter" style="padding-top: 32rpx;">
						<view class="hflex acenter jcenter list_btn">還有{{pageData.section_num - 3}}章節</view>
					</view>
				</view>
				
			</view>
			<view class="title" style="padding: 48rpx 0 32rpx;">課程要求和說明</view>
			<view class="vflex">
				<u-parse :content="pageData.detail"></u-parse>
				<!-- <view class="hflex acenter jcenter">
					<view class="show_btn hflex acenter jcenter">顯示更多</view>
				</view> -->
			</view>
			<view class="course_content">
				<view class="course_top hflex acenter jbetween">
					<view class="hflex acenter">
						<u-icon name="star-fill" color="#f7b500" size="21"></u-icon>
						<view class="score_text">{{evaluate.evaluate_avg}}</view>
						<view class="score_text" style="font-size: 24rpx;">課程評分</view>
					</view>
				</view>
				<view class="course_list">
					<block v-for="(item,index) in evaluate.evaluate_list.slice(0,3)" :key="index">
						<view class="list_item hflex acenter">
							<image :src="item.headimg" class="item_avatar"></image>
							<view class="img_right">
								<view class="hflex acenter">
									<view class="item_name2">{{item.name}}</view>
									<u-rate count="5" v-model="item.content" active-color="#f7b500"></u-rate>
								</view>
								<view class="text_content">{{item.content}}</view>
							</view>
						</view>
					</block>
					<view class="hflex acenter jcenter" style="padding-top: 32rpx;">
						<view class="hflex acenter jcenter list_btn">{{evaluate.evaluate_list.length == 0? '暫無評分' : '顯示更多'}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom vflex acenter jcenter">
			<image :src="bottom.img1" class="bottom_img"></image>
			
		</view>
		<view class="footer hflex acenter jcenter">
			<image :src="bottom.img2" class="bottom_left"></image>
			<image :src="bottom.img3" class="bottom_right"></image>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				pageData: {
					
				},
				bottom: {
					img1: '/static/image/index1/bottom_img1.png',
					img2: '/static/image/index1/bottom_img2.png',
					img3: '/static/image/index1/bottom_img3.png',
				},
				evaluate:'',
				id: ''
			}
		},
		onLoad(options) {
			that = this
			that.id = options.id
			that.getData()
			that.getEvaluate()
		},
		methods: {
			getData() {
				$api.req({
					url: '/api/Online_course/course_detail',
					data: {
						id: that.id
					}
				}, function(res) {
					if(res.code == 1) {
						that.pageData = res.data
					}
				})
			},
			getEvaluate() {
				$api.req({
					url: '/api/Online_course/evaluate_list',
					data: {
						page: 1,
						page_size: 3,
						course_id: that.id
					}
				}, function(res) {
					if(res.code == 1) {
						that.evaluate = res.data
					}
				})
			},
			open(index) {
				if(that.pageData.section_info[index].open) {
					that.pageData.section_info[index].open = false
				} else {
					that.$set(that.pageData.section_info[index],'open',true)
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		.top {
			width: 100%;
			height: 120rpx;
			background: #FFFFFF;
			box-shadow: 0px 6rpx 12rpx 0px rgba(0,0,0,0.16);
			box-sizing: border-box;
			padding: 20rpx;
			.logo {
				width: 112rpx;
				height: 77rpx;
			}
			.top_title {
				font-size: 26rpx;
				font-weight: 500;
				color: #333333;
				line-height: 30rpx;
			}
			.top_title2 {
				font-size: 26rpx;
				font-weight: 400;
				color: #999999;
				line-height: 30rpx;
				padding-top: 4rpx;
			}
			.top_btn {
				width: 114rpx;
				height: 46rpx;
				background: #231E7F;
				border-radius: 36rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
		.video {
			width: 100%;
			height: 478rpx;
			.top_label {
				width: 100%;
				height: 56rpx;
				background: #231E7F;
				font-size: 26rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 37rpx;
				letter-spacing: 1rpx;
			}
			uni-video {
				width: 100%;
				height: 422rpx;
			}
		}
		.box {
			box-sizing: border-box;
			padding: 0 48rpx;
			width: 100%;
			.box_title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333333;
				padding: 36rpx 0 32rpx;
				line-height: 45rpx;
			}
			.title_text {
				// width: 120rpx;
				height: 36rpx;
				padding: 0 20rpx;
				background: #55C3B9;
				border-radius: 24rpx 0px 24rpx 0px;
				font-size: 20rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 36rpx;
				text-align: center;
				float: right;
				margin-top: 10rpx;
			}
			.avatar {
				width: 78rpx;
				height: 78rpx;
				margin: 0 12rpx 0 0;
				border-radius: 50%;
			}
			.user_name {
				font-size: 34rpx;
				font-weight: 600;
				color: #333333;
				line-height: 48rpx;
			}
			.info {
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;
				padding: 20rpx 0 16rpx;
			}
			.text_style1 {
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				line-height: 33rpx;
			}
			.line {
				font-size: 28rpx;
				padding-left: 20rpx;
				text-decoration: line-through;
			}
			.text_blue {
				font-size: 36rpx;
				font-weight: 600;
				color: #5581FB;
				line-height: 50rpx;
			}
			.price {
				font-size: 56rpx;
				color: #5581FB;
				font-weight: 600;
			}
			.buy_btn {
				width: 246rpx;
				height: 68rpx;
				background: #5581FB;
				border-radius: 40rpx;
				margin: 25rpx auto 72rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 28rpx;
				letter-spacing: 1rpx;
			}
			.title {
				font-size: 32rpx;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 36rpx;
				text-align: center;
				background: linear-gradient(180deg, #4AC1FD 0%, #B259FA 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			.list {
				width: 644rpx;
				border-radius: 16rpx;
				border: 2rpx solid #5581FB;
				box-sizing: border-box;
				padding: 0 24rpx;
				
				.checked {
					padding-right: 8rpx;
					width: 29rpx;
					height: 24rpx;
				}
				.checked_text {
					font-size: 28rpx;
					font-weight: 400;
					color: #666666;
					line-height: 28rpx;
				}
			}
			.text_style2 {
				width: 45%;
				padding-left: 22rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
				line-height: 28rpx;
				padding-bottom: 26rpx;
				position: relative;
			}
			.text_style2::before {
				content: "";
				position: absolute;
				left: 0;
				top: 8rpx;
				width: 12rpx;
				height: 12rpx;
				border: 2rpx solid #9E6DFB;
				border-radius: 50%;
			}
			.show_btn {
				width: 181rpx;
				height: 48rpx;
				border-radius: 8rpx;
				border: 2rpx solid #5581FB;
				font-size: 28rpx;
				font-weight: 400;
				color: #5581FB;
				line-height: 40rpx;
				margin: 0 0 48rpx;
			}
			.course_content {
				position: relative;
				.course_top {
					width: 100%;
					height: 120rpx;
					background: #5581FB;
					border-radius: 16px;
					box-sizing: border-box;
					padding: 20rpx 48rpx;
					// position: absolute;
					// left: 0;
					// bottom: 466rpx;
					.course_title {
						font-size: 32rpx;
						font-weight: 600;
						color: #FFFFFF;
						line-height: 36rpx;
					}
					.title_right {
						font-size: 20rpx;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 28rpx;
					}
					.score_text {
						font-size: 36rpx;
						font-weight: 600;
						color: #FFFFFF;
						line-height: 50rpx;
					}
				}
				.course_list {
					
					width: 100%;
					background: #F5F8FF;
					border-radius: 16rpx;
					box-sizing: border-box;
					padding: 44rpx;
					.list_item {
						width: 100%;
						box-sizing: border-box;
						padding: 31rpx 0;
						border-bottom: 1rpx solid #9476FB;
						.item_left {
							font-size: 28rpx;
							font-weight: 600;
							color: #341D70;
							line-height: 40rpx;
						}
						.item_right {
							font-size: 20rpx;
							font-weight: 400;
							color: #666666;
							line-height: 28rpx;
						}
						.label {
							font-size: 26rpx;
							font-weight: 400;
							color: #333333;
							line-height: 37rpx;
						}
						.stop {
							width: 24rpx;
							height: 24rpx;
							margin-right: 12rpx;
						}
						.item_avatar {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
						}
						.img_right {
							margin: 0 0 0 20rpx;
							.item_name2 {
								font-size: 28rpx;
								font-weight: 600;
								color: #333333;
								line-height: 40rpx;
								padding-right: 60rpx;
							}
							.item_content {
								font-size: 26rpx;
								font-weight: 400;
								color: #666666;
								line-height: 37rpx;
							}
						}
					}
					.list_item:nth-last-child(1) {
						border: none;
					}
					
				}
				.list_btn {
					width: 222rpx;
					height: 48rpx;
					background: #5581FB;
					border-radius: 8rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 40rpx;
				}
			}
		}
		.bottom {
			width: 100%;
			padding: 40rpx 0 0;
			.bottom_img {
				width: 316rpx;
				height: 368rpx;
				margin-bottom: 48rpx;
			}
			
		}
		.footer {
			width: 100%;
			height: 262rpx;
			background: url('/static/image/index1/footer_bg.png') no-repeat;
			background-size: 100%;
			.bottom_left {
				width: 216rpx;
				height: 64rpx;
				margin-right: 56rpx;
			}
			.bottom_right {
				width: 216rpx;
				height: 64rpx;
			}
		}
	}
</style>