sljiaxuanuser_uniapp/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="https://cdn.his.cdwjyyh.com/minapp/course_home.png" mode="aspectFill" @click="goHome()"></image>
		</view> -->
		<view class="kc_body" :style="{paddingTop: `calc(44px + ${statusBarHeight}px + 32rpx)`}">
			<view class="coursebox" @click="getLink(1)">
				<image class="coursebox-img" :src="configJson.coverImg||courseInfo.imgUrl" mode="aspectFill"></image>
				<view class="coursebox-title x-ac">
					<image class="star" src="https://cdn.his.cdwjyyh.com/minapp/course_star.png"></image>
					<view>{{courseInfo.title}}</view>
					<image class="star" src="https://cdn.his.cdwjyyh.com/minapp/course_star.png"></image>
				</view>
			</view>
			<view class="title">{{title}}</view>
			<view class="name x-ac" v-if="configJson.broadcastingEnable">
				<image class="" src="https://cdn.his.cdwjyyh.com/minapp/course_select_icon.png"></image>
				<text>播出主体：{{configJson.broadcasting || ''}}</text>
			</view>
			<view class="btn" @click="getLink(1)">点击开始观看</view>
			<view class="desc-box line">监督投诉电话：400-1881-959</view>
			<view class="desc-box x-baseline mt40" v-if="configJson.tvEnable">
				<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 v-else>
					<view v-for="(it,index) in defaultInfo.tv.split(',')">{{it}}</view>
				</view>
			</view>
			<view class="desc-box x-baseline mt20" v-if="configJson.networkEnable">
				<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 v-else>
					<view v-for="(it,index) in defaultInfo.network.split(',')">{{it}}</view>
				</view>
			</view>
			<view class="desc-box x-baseline mt20" v-if="configJson.unitEnable">
				<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 v-else>
					<view v-for="(it,index) in defaultInfo.unit.split(',')">{{it}}</view>
				</view>
			</view>
			<view class="desc-box x-baseline mt20" v-if="configJson.teamEnable">
				<view class="label-dot"></view>
				<text class="label">专家顾问团队：</text>
				<view v-if="configJson.team">
					<view v-for="(it,index) in configJson.team.split(',')">{{it}}</view>
				</view>
				<view v-else>
					<view v-for="(it,index) in defaultInfo.team.split(',')">{{it}}</view>
				</view>
			</view>
			<view class="desc-box x-baseline mt20" v-if="configJson.supportEnable">
				<view class="label-dot"></view>
				<text class="label">支持单位：</text>
				<view v-if="configJson.support">
					<view v-for="(it,index) in configJson.support.split(',')">{{it}}</view>
				</view>
				<view v-else>
					<view v-for="(it,index) in defaultInfo.support.split(',')">{{it}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getRealLink,getH5CourseByVideoId} from "@/api/course.js"
	export default {
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				title:'<<以下资料已审核>>',
				urlOption: {},
				videoId: '',
				courseInfo: {},
				loading: false,
				configJson: {
					broadcasting: '御君方互联网医院',
					coverImg: "",
					network: '芳华未来',
					support: '华夏文化促进会大健康养生文化专委会',
					team: '杜丁-副主任医师,于晓津-副主任医师,史士昊-主治医师,岳晓燕-主任医师,陈涛-执业医师,李俭-副主任医师',
					tv: '贵州广播电视台公共频道,大石桥综合频道',
					unit: '大石桥市融媒之声广播电视报刊,网络新传媒有限公司'
				},
				defaultInfo: {
					broadcasting: '御君方互联网医院',
					coverImg: "",
					network: '芳华未来',
					support: '华夏文化促进会大健康养生文化专委会',
					team: '杜丁-副主任医师,于晓津-副主任医师,史士昊-主治医师,岳晓燕-主任医师,陈涛-执业医师,李俭-副主任医师',
					tv: '贵州广播电视台公共频道,大石桥综合频道',
					unit: '大石桥市融媒之声广播电视报刊,网络新传媒有限公司'
				}
			}
		},
		onLoad(option) {
			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.sortLink){
				this.getLink()
			} else {
				uni.showToast({
					title: '链接地址有误',
					icon: 'none'
				});
			}
		},
		methods: {
			goHome() {
				if(getApp().globalData.appId == 'wx45cf09091aead547') {
					uni.switchTab({
						url: '/pages/home/index'
					})
				} else {
					uni.navigateToMiniProgram({
					  appId: 'wx45cf09091aead547',
					  path: '/pages/home/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) : this.defaultInfo
					uni.hideLoading()
				}).catch(() => {
					uni.hideLoading()
				})
			},
			getLink(type) {
				let that = this;
				if(this.loading) {
					return
				}
				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.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://cdn.his.cdwjyyh.com/minapp/kc_bg.png');
		// background-repeat: no-repeat;
		background-size: 100%;
	}
	.header-nav {
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		background-image: url('https://cdn.his.cdwjyyh.com/minapp/kc_bg.png');
		background-repeat: no-repeat;
		background-size: 100%;
		overflow: hidden;
	}
	.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;
			background: linear-gradient(269deg, #AE7F47, #CE9B5D);
			border-radius: 4rpx;
			display: inline-block;
			margin-top: 54rpx;
		}
		.line {
			padding: 42rpx 0 27rpx 0;
			border-bottom: 1rpx solid #B9884C;
			text-align: center;
		}
		.x-baseline {
			display: flex;
			align-items: baseline;
		}
		.desc-box {
			width: 100%;
			font-family: PingFang;
			font-weight: bold;
			font-size: 29rpx;
			color: #C9985B;
			background: linear-gradient(to right, #9B6B2F 0%, #C9985B 52%, #9B6B2F 98%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			.label {
				flex-shrink: 0;
			}
			.label-dot {
				width: 16rpx;
				height: 16rpx;
				background: #D3984F;
				border-radius: 50%;
				margin: 0 6rpx;
			}
		}
		.coursebox {
			background: #FFFFFF;
			box-shadow: 0rpx 7rpx 5rpx 0rpx rgba(193,148,93,0.29);
			border-radius: 29rpx;
			padding: 20rpx 20rpx 0 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			border: 4px solid rgba(255, 239, 208, 1);
			&-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;
				color: #9B6B2F;
				line-height: 51rpx;
				background: linear-gradient(0deg, #9B6B2F 0%, #C9985B 52.978515625%, #9B6B2F 98.291015625%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			.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;
			background: linear-gradient(0deg, #9B6B2F 0%, #C9985B 52.978515625%, #9B6B2F 98.291015625%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			image {
				height: 44rpx;
				width: 44rpx;
				margin-right: 10rpx;
			}
		}
		.btn {
			width: 660rpx;
			height: 81rpx;
			margin-top: 55rpx;
			background: linear-gradient(90deg, #9B6B2F 0%, #DDB37F 49%, #A57539 100%);
			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;
		}
	}
	@keyframes scaleAnimation {
	  0% {
	    transform: scale(1);
	  }
	  50% {
	    transform: scale(0.9);
	  }
	  100% {
	    transform: scale(1);
	  }
	}
</style>