hgrrx-h5/pages/detail/detail.vue

<template>
	<view class="content">
		<view class="hflex acenter jbetween top">
			<image src="/static/image/index1/logo2.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" @click="toIndex">下載</view>
		</view>
		<view class="video">
			<view class="top_label hflex acenter jcenter">會員免費試看此課程，立即下載APP註冊</view>
			<video :src="pageData.course_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_box">
				{{intro}}
				<span class="text_blue1" v-if="show" @click="change">{{show_info?'收起':'更多'}}</span>
				<!-- <u-parse :content="intro" :class="show_info?'':'info'"></u-parse> -->
			</view>
			<!-- <view class="info">{{pageData.provider_record}}</view> -->
			<view class="hflex acenter ">
				<view class="text_style1">{{evaluate.evaluate_avg}}評分</view>
				<u-rate count="5" readonly 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.sale_num}}觀看</view>
			</view>
			<view class=" hflex aend" style="padding: 10rpx 0 0;">
				<view class="text_blue">HK $ <span class="price">{{pageData.price}}</span></view>
				<!-- <view class="price"></view> -->
				<view class="text_style1 line">HK ${{ Math.trunc(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" @click="buy">立即購買</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" :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.opener"></u-icon>
									<u-icon name="arrow-right" color="#000" size="18" v-else></u-icon>
								</view>
							</view>
							<view class="children" v-show="item.opener">
								<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;" v-if="pageData.section_num > 3">
						<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 dis">
				<u-read-more showHeight="400" :toggle="true" closeText="顯示更多" ref="uReadMore">
					<u-parse :content="pageData.detail" @load="load"></u-parse>
				</u-read-more>
				
				<!-- <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" :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" readonly 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_num == 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: '',
				show_info:false,
				intro: '',
				show: false
			}
		},
		onLoad(options) {
			that = this
			that.id = options.id
			// that.id = '280'
			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
						if(that.pageData.section_info.length >3) {
							that.pageData.section_info = that.pageData.section_info.slice(0,3)
						}
						for(var i=0;i<that.pageData.section_info.length;i++) {
							that.$set(that.pageData.section_info[i],'opener',false)
						}
						if(that.pageData.introduce.length>45) {
							that.intro = that.pageData.introduce.substring(0,45) + '... '
							that.show = true
						} else {
							that.intro = that.pageData.introduce
						}
					}
				})
			},
			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
						if(that.evaluate.evaluate_num > 3) {
							that.evaluate.evaluate_list = that.evaluate.evaluate_list.slice(0,3)
						}
					}
				})
			},
			toIndex() {
				$api.jump('/pages/index/index')
			},
			load() {
				this.$refs.uReadMore.init();
			},
			open(index) {
				if(that.pageData.section_info[index].opener) {
					that.pageData.section_info[index].opener = false
				} else {
					that.$set(that.pageData.section_info[index],'opener',true)
				}
			},
			change() {
				that.show_info = !that.show_info
				if(that.show_info) {
					that.intro = that.pageData.introduce
				} else {
					that.intro = that.pageData.introduce.substring(0,45) + '... '
				}
			},
			buy() {
				location.href="https://www.daydayu.com/index.html#/video-pay?id=" + that.id
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		.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: 68rpx;
				height: 68rpx;
			}
			.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_box {
				width: 100%;
				// height: 50rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;
				margin: 20rpx 0 16rpx;
			}
			.info {
				
				text-overflow: ellipsis;
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				box-orient: vertical;
				line-clamp: 2;
				-webkit-line-clamp: 2;
			}
			.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;
			}
			.text_blue1 {
				font-size: 28rpx;
				font-weight: 400;
				color: #5581FB;
				line-height: 40rpx;
			}
			.price {
				font-size: 56rpx;
				color: #5581FB;
				font-weight: 600;
				line-height: 50rpx;
			}
			.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;
			}
			.dis {
				.u-icon--right {
					display: none;
				}
			}
			.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;
			}
		}
		.u-read-more__toggle__text {
			width: 181rpx;
			height: 48rpx;
			border-radius: 8rpx;
			border: 2rpx solid #5581FB;
			font-size: 28rpx;
			font-weight: 400;
			color: #5581FB;
			line-height: 40rpx;
			margin: 48rpx 0 48rpx;
			display: flex;
			justify-content: center;
		}
		.u-text {
			justify-content: center !important;
		}
		
	}
</style>