yishouyuancourseMall_user_app/pages_course/video.vue

<template>
	<view class="kc_bg">
		<view class="header-nav" :style="{height: `calc(44px + ${statusBarHeight}px)`,paddingTop: statusBarHeight + 'px'}">
			<image class="back_icon" :src="baseUrl+'/course/images/course_home.png'" mode="aspectFill" @click="goHome()"></image>
		</view>
		<view class="kc_body" :style="{paddingTop: `calc(44px + ${statusBarHeight}px + 32rpx)`}">
			<view class="coursebox-bg" :class="'coursebox-bg'+templateId">
				<view class="coursebox" @click="getLink(1)">
					<image class="coursebox-img" :src="configJson.coverImg||courseInfo.imgUrl" mode="aspectFill"></image>
					<view class="coursebox-title x-ac" :class="'text_clip'+templateId">
						<image class="star" :src="baseUrl+'/course/images/course_star.png'"></image>
						<view>{{courseInfo.title}}</view>
						<image class="star" :src="baseUrl+'/course/images/course_star.png'" style="transform: scaleX(-1);"></image>
					</view>
				</view>
			</view>
			<view class="btn" :class="'btn'+templateId" @click="getLink(1)">点击开始观看</view>
			<view class="title" :class="'title'+templateId">{{title}}</view>
			<view class="desc-box line" :class="'desc-box'+templateId+' line'+templateId" v-if="configJson.complaintPhone">监督投诉电话：{{configJson.complaintPhone}}</view>
			<view class="desc-box x-baseline mt40" :class="'desc-box'+templateId" v-if="configJson.tvEnable" @click="showImg(configJson.tvImg)">
				<view class="label-dot"></view>
				<text class="label">首播电视台：</text>
				<view v-if="configJson.tv">
					<view v-for="(it,index) in configJson.tv.split(',')">{{it}}</view>
				</view>
			</view>
			<view class="desc-box x-baseline mt20" :class="'desc-box'+templateId" v-if="configJson.unitEnable" @click="showImg(configJson.unitImg)">
				<view class="label-dot"></view>
				<text class="label">制作单位：</text>
				<view v-if="configJson.unit">
					<view v-for="(it,index) in configJson.unit.split(',')">{{it}}</view>
				</view>
			</view>
			<view class="desc-box x-baseline mt20" :class="'desc-box'+templateId" v-if="configJson.networkEnable" @click="showImg(configJson.networkImg)">
				<view class="label-dot"></view>
				<text class="label">网络播放平台：</text>
				<view v-if="configJson.network">
					<view v-for="(it,index) in configJson.network.split(',')">{{it}}</view>
				</view>
			</view>
			<view class="desc-box x-baseline mt20" :class="'desc-box'+templateId" v-if="configJson.compereEnable">
				<view class="label-dot"></view>
				<text class="label">主讲人姓名：</text>
				<view v-if="configJson.compere">
					<view v-for="(it,index) in configJson.compere.split(',')">{{it}}</view>
				</view>
			</view>
			<view class="desc-box x-baseline mt20" :class="'desc-box'+templateId" v-if="configJson.compereTitleEnable" @click="showImg(configJson.compereTitleImg)">
				<view class="label-dot"></view>
				<text class="label">主讲人名头：</text>
				<view v-if="configJson.compereTitle">
					<view>{{configJson.compereTitle}}</view>
				</view>
			</view>
		</view>
		<yk-screenRecord></yk-screenRecord>
	</view>
</template>

<script>
	import ykScreenRecord from '@/components/yk-screenRecord/yk-screenRecord';
	import {getRealLink,getH5CourseByVideoId} from "@/api/courseAuto.js"
	export default {
		components: {
			ykScreenRecord
		},
		data() {
			return {
				templateId:1,
				baseUrl:getApp().globalData.courseImg,
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				title:'<<以下资料已审核>>',
				urlOption: {},
				videoId: '',
				courseInfo: {},
				loading: false,
				configJson: {
					broadcasting: '',
					coverImg: "",
					network: '',
					compereTitle: '',
					compere: '',
					tv: '',
					unit: '',
					complaintPhone:''
				},
				isshowImg: 0
			}
		},
		onLoad(option) {
			if (!option.course) {
				const keys = decodeURIComponent(Object.keys(option)[0]);
				this.urlOption = JSON.parse(keys.split('course=')[1])
			} else {
				this.urlOption = option.course ? JSON.parse(decodeURIComponent(option.course)) : {}
			}
			console.log("this.urlOption==",this.urlOption,option)
			this.videoId = this.urlOption.videoId || ''
			this.sortLink = this.urlOption.link || ''
			if (this.videoId) {
				this.getH5CourseByVideo()
			}
		},
		onShow() {
			if(this.isshowImg==1) return
			if(this.sortLink){
				this.getLink()
			} else {
				uni.showToast({
					title: '链接地址有误',
					icon: 'none'
				});
			}
		},
		methods: {
			showImg(img) {
				 //预览图片
				 this.isshowImg = 1
				 uni.previewImage({
				 	urls: [img],
				 	current: 0
				 });
			},
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			getH5CourseByVideo() {
				uni.showLoading({
					title: '加载中'
				})
				getH5CourseByVideoId({
					videoId: this.videoId
				}).then(res => {
					this.courseInfo = res.data || {}
					this.configJson = res.data&&res.data.configJson ? JSON.parse(res.data.configJson) : {};
					console.log(this.configJson)
					uni.hideLoading()
				}).catch(() => {
					uni.hideLoading()
				})
			},
			getLink(type) {
				let that = this;
				if(this.loading) {
					return
				}
				this.isshowImg = type==1?0:this.isshowImg
				uni.showLoading({
					title: '加载中'
				})
				this.loading = true
				getRealLink({sortLink:this.sortLink}).then(res=>{
					uni.hideLoading()
					this.loading = false
					if(res.code == 200) {
						if(type==1) {
							uni.navigateTo({
								url: '/pages_course/videoDetail?course='+ JSON.stringify(this.urlOption)
							})
						}
					} else {
						uni.hideLoading()
						uni.showToast({
							title: '课程已过期或链接无效',
							icon: 'none'
						});
					}
				}).catch(err=>{
					uni.hideLoading()
					this.loading = false
					uni.showToast({
						title: '发生错误，请稍后再试',
						icon: 'none'
					});
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.mt20 {
		margin-top: 20rpx;
	}
	.mt40 {
		margin-top: 40rpx;
	}
	.kc_bg {
		min-height: 100vh;
		background-image: url('https://ysy-1329817240.cos.ap-guangzhou.myqcloud.com/course/images/kc_bg.png');
		background-size: 100%;
		background-color: #fff;
	}
	.header-nav {
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		background-image: url('https://ysy-1329817240.cos.ap-guangzhou.myqcloud.com/course/images/kc_bg.png');
		background-repeat: no-repeat;
		background-size: 100%;
		background-position: top;
		overflow: hidden;
		background-color: #fff;
		z-index: 9999;
	}
	.back_icon {
		height: 70rpx;
		width: 70rpx;
		padding-left: 28rpx;
	}
	.kc_body {
		padding:36rpx 36rpx 120rpx 36rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.title {
			font-family: Source Han Sans CN;
			font-weight: 500;
			font-size: 38rpx;
			color: #FFFFFF;
			padding: 10rpx 60rpx;
			border-radius: 4rpx;
			display: inline-block;
			margin-top: 54rpx;
		}
		.line {
			padding: 42rpx 0 27rpx 0;
			text-align: center;
		}
		.x-baseline {
			display: flex;
			align-items: baseline;
		}
		.desc-box {
			width: 100%;
			font-family: PingFang;
			font-weight: bold;
			font-size: 29rpx;
			.label {
				flex-shrink: 0;
			}
			.label-dot {
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				margin: 0 6rpx;
			}
		}
		.coursebox-bg {
			position: relative;
			padding: 4rpx;
			border-radius: 29rpx;
			overflow: hidden;
		}
		.coursebox {
			position: relative;
			z-index: 2;
			background: #FFFFFF;
			border-radius: 29rpx;
			padding: 20rpx 20rpx 0 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			&-img {
				height: 362rpx;
				width: 633rpx;
				border-radius: 16rpx;
			}
			&-title {
				text-align: center;
				margin: 40rpx 0;
				font-family: Source Han Sans CN;
				font-weight: bold;
				font-size: 45rpx;
				line-height: 51rpx;
			}
			.star {
				flex-shrink: 0;
				height: 48rpx;
				width: 48rpx;
				margin: 0 15rpx;
			}
		}
		.name {
			margin-top: 28rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #9B6B2F;
			line-height: 40rpx;
			image {
				height: 44rpx;
				width: 44rpx;
				margin-right: 10rpx;
			}
		}
		.btn {
			width: 660rpx;
			height: 81rpx;
			margin-top: 55rpx;
			border-radius: 40rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			font-size: 42rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			will-change: transform;
			animation: scaleAnimation 1s ease infinite;
		}
	}
	$themes: (
		1: (light: #6AB99E, main: #409076, color1: #DCF2E0, color2: #94BFA9, shadow:rgba(68, 148, 121, 0.29)),
	);

	@mixin text-gradient($c1, $c2) {
		color: $c1;
		background: linear-gradient(to right, $c1 0%, $c2 52%, $c1 98%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	@mixin radial-btn($c1, $c2) {
		background: radial-gradient(circle at center, $c1 0%, $c2 100%);
	}
	@mixin card-box($main, $color1, $color2,$shadow) {
		background: linear-gradient(to bottom, $color1 0%, $color2 52%, $shadow 98%);
		box-shadow: 0rpx 4rpx 17rpx 0rpx $shadow;
	}

	/* ===== 3. 一次性生成 6 套皮肤 ===== */
	@each $key, $map in $themes {
		.title#{$key} {
			@include radial-btn(map-get($map, light), map-get($map, main));
		}
		.line#{$key} {
			border-bottom: 1rpx solid map-get($map, main);
		}
		.desc-box#{$key}, .text_clip#{$key} {
			@include text-gradient(map-get($map, main), map-get($map, light));
			.label-dot { background: map-get($map, main); }
		}
		.coursebox-bg#{$key} {
			@include card-box(map-get($map, main), map-get($map, color1), map-get($map, color2),map-get($map, shadow));
		}
		.btn#{$key} {
			@include radial-btn(map-get($map, light), map-get($map, main));
		}
	}
	@keyframes scaleAnimation {
	  0% {
	    transform: scale(1);
	  }
	  50% {
	    transform: scale(0.9);
	  }
	  100% {
	    transform: scale(1);
	  }
	}
</style>