huajucanyin/pages/lanhu_kechengxiangqingmulu/index.vue

<template>
	<view class="page flex-col" style="  position: relative;height: auto;background-color: #F8F6ED;">
		<view class="group_1 flex-col" style="  height: calc(100% - 50px);">

			<view class="section_2 flex-col" style="height: auto;">
				<view class="block_1 flex-col" style="border-radius: 0;">
					<view class="text-wrapper_1 flex-row">
						<text class="text_2">{{list.b.title}}</text>
					</view>
					<view class="text-wrapper_2 flex-row justify-between">
						<text class="text_3">￥{{list.b.price}}</text>
						<text class="text_4">已有{{list.b.num}}人学习</text>
					</view>
				</view>


				<video style="z-index: 3;" class="block_2 flex-col" :src="videoUrl" controls
					@timeupdate="handleTimeUpdate" @play="play" :poster="poster" object-fit="fill">

					<!-- 	<image class="block_2 flex-col" v-if="poster" :src="poster"
						style="width: 100%;height: 100%;z-index: 2;opacity: 0.5; pointer-events: none;" /> -->

				</video>


			</view>

			<view class="section_3 flex-col"
				style="height: auto;border-radius: 0;margin-top: 20rpx;padding-bottom: 20rpx;">
				<div class="tabs_1 flex-col" style="height: 70rpx;">
					<view class="text-wrapper_3 flex-row justify-between">
						<text style="height:50rpx;width:100rpx;text-align: center;" class="text_5"
							:class="{ active: activeTab === '介绍' }" @click="changeTab('介绍')">介绍</text>
						<text style="height:50rpx;width:100rpx;text-align: center;" class="text_6"
							:class="{ active: activeTab === '目录' }" @click="changeTab('目录')">目录</text>
					</view>
				</div>





				<view v-if="activeTab === '介绍'" style=";">
					<view style="margin-left: 5%;font-weight: 900;font-size:18px;">授课老师</view>

					<view style="margin-left: 3%;width: 94%;margin-top: 20rpx;margin-bottom: 20rpx;" @tap="go1()">
						<image :src="list.a.image"
							style="width: 120rpx;height: 120rpx;border-radius: 100px;float: left;" />
						<view style="float: left;margin-left: 20rpx;margin-top: 15rpx;">
							<view style="font-size: 16px;font-weight: 900;">{{list.a.name}}</view>
							<view style="font-size: 12px;margin-top: 10rpx;color: gray;">共计{{list.a.num}}课时</view>
						</view>

						<image src="/static/lanhu_kechengxiangqingmulu/4467bb13053bcc92fb9c10452b036fd7.png"
							style="width: 20rpx;height: 30rpx;margin-top:50rpx;float: right;" />
					</view>
					<view style="width: 100%;height: 20rpx;background-color: #F8F6ED;clear: both;"></view>
					<view
						style="margin-left: 5%;font-weight: 900;font-size:18px;margin-top: 20rpx;margin-bottom: 10rpx;">
						课程介绍</view>
					<rich-text :nodes="list.b.content" style="width: 95%;margin-left: 2.5%;"></rich-text>
					<!-- 	<view style="height:60rpx;padding-left: 5%;line-height: 50rpx;" v-for="(item, index) in list.c"
						:key="index">
						<view style="float: left;margin-top: -20rpx;font-size: 30px;font-weight: 999;color: darkgray;">.
						</view>
						<view style="float: left;color: darkgray;margin-left:5rpx;">{{item.unit_name}}</view>
					</view> -->

				</view>



				<view v-if="activeTab === '目录'" style="height: auto;padding-bottom: 200rpx;">
					<text class="text_7" style="">可免费试看视频/音频前60s</text>

					<view v-for="(item, index) in list.d" :key="index">

						<view class="box_2 flex-row" style="" @tap="hideElement(index)">
							<text class="text_8">{{item[0].title2}}</text>
							<image class="label_1" referrerpolicy="no-referrer"
								src="/static/lanhu_kechengxiangqingmulu/4fcce6f6b93750a3be24b81f9dbaa542.png" />
						</view>

						<view :id="index">
							<view class="box_3 flex-row" v-for="(item2, index2) in item" :key="index2">
								<image class="icon_2" @tap="bofang(item2.mp4)"
									src="/static/lanhu_kechengxiangqingmulu/35d5a4228d4ae5e616779e122f9cd5fa.png" />
								<text class="text_9">{{item2.title}}</text>
								<text class="text_10">{{item2.min}}</text>
							</view>
						</view>
					</view>


					<!-- 		<view class="cu-modal bottom-modal" :class="modalName == 'share' ? 'show' : ''" @tap="hideModal">
				<view class="cu-dialog" @tap.stop="">
					<wanl-share :scrollAnimation="scrollAnimation" :shareTitle="goodsData.title"
						:shareText="goodsData.description" :image="$wanlshop.oss(goodsData.image,50, 50)"
						:href="common.appConfig.domain + '/pages/product/goods?id='+ goodsData.id +'&QRtype=goods'"
						isReport @change="wanlShare" />
				</view>
			</view> -->



				</view>
				<!-- 	<view class="image-text_1 flex-row justify-between">
					<text class="text-group_1">查看全部</text>
					<image class="icon_4" referrerpolicy="no-referrer"
						src="/static/lanhu_kechengxiangqingmulu/32abf597bb1d6f7c108813a8fa472960.png" />
				</view> -->
			</view>

		</view>

		<view class="section_4 flex-row" style="margin: 0;position: fixed;
  bottom: 0; 
  left: 0; 
  width: 100%;
  height: 100rpx; 
  background-color: #f0f0f0;">
		<!-- 	<view class="image-text_2 flex-col justify-between" @tap="showModal('share')">
				<image class="icon_5" referrerpolicy="no-referrer"
					src="/static/lanhu_kechengxiangqingmulu/aa83c3ee47d3a2604d5b1d453e21d0d8.png" />
				<text class="text-group_2">分享</text>
			</view> -->
			
			<view class="image-text_3 flex-col justify-between" @tap="shoucang1">
				<image class="icon_6" v-if="!shoucang"
					src="/static/lanhu_kechengxiangqingmulu/02f3eef93d8ab189249aebc2d123e124.png" />
			
				<image class="icon_6" v-if="shoucang" src="/static/lanhu_kechengxiangqingmulu/22.png" />
			
				<text class="text-group_3" style="">收藏</text>
			</view>
			
			
			<view class="image-text_2 flex-col justify-between" @tap="showModal('share')">
				
			</view>

		


			<button class="button_1 flex-col" @tap="go(list.b.id)" v-if="list.buy == 0 && !is_buy">
				<text class="text_12">￥{{list.b.price}}</text>
			</button>


			<button class="button_1 flex-col" v-if="list.buy == 1 || is_buy">
				<text class="text_12">已购买</text>
			</button>

		</view>

	</view>

</template>
<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				videoUrl: '',
				poster: '',
				poster2: '',
				shoucang: '',
				modalName: '',
				url2: '',
				maxDuration: 2, // 最大播放时长，单位：秒
				pause: false, // 是否暂停视频播放
				list: '',
				is_buy: '',
				vip: '',
				list2: [],
				activeTab: "介绍",

				constants: {}
			};
		},
		onLoad(id) {
			if (id.is_buy == 1) {
				this.is_buy = 1;
			}
			this.id = id.id
			uni.setNavigationBarColor({
					backgroundColor: '#802931', // 背景颜色
					frontColor: '#ffffff' // 前景颜色（包括标题、返回图标等）
				}),
				this.getData()
			this.getVip()
		},

		computed: {
			...mapState(['user', 'statistics', 'common'])
		},
		methods: {
			shoucang1() {
				if (this.shoucang) {
					this.shoucang = ''
				} else {
					this.shoucang = 1
				}
				this.$api.get({
					url: '/wanlshop/data/shoucang',
					data: {
						id: this.id,
						type: 1
					},
					success: res => {

					}
				});
			},
			getVip() {
				if (this.user.id) {
					this.$api.get({
						url: '/wanlshop/data/getVip',
						data: {
							id: this.user.id
						},
						success: res => {
							this.vip = res
							console.log(4445, res)
						}
					});
				}
			},
			hideElement(id) {
				if (document.getElementById(id).style.display == 'none') {
					document.getElementById(id).style.display = '';
				} else {
					document.getElementById(id).style.display = 'none';
				}

			},

			// 弹出层
			showModal(name) {
				console.log(name)
				this.modalName = name;
			},
			// 关闭弹出层
			hideModal(name) {
				if (name) {
					this.showModal(name);
				} else {
					this.modalName = null;
				}
			},
			// 分享回调
			wanlShare(e) {
				if (e) {
					this.$wanlshop.auth(`/pages/user/complaint/complaint?id=${this.goodsData.id}&type=1`);
				} else {
					this.modalName = null;
				}
			},

			bofang(mp4) {
				// this.poster = this.poster2
				this.videoUrl = mp4
				this.url2 = mp4

				console.log(this.videoUrl)
			},
			handleTimeUpdate(event) {
				if (this.list.buy == 0 && !this.is_buy) {
					if (event.detail.currentTime > 60) {
						this.url2 = this.videoUrl
						this.videoUrl = ''
						this.$wanlshop.msg('试看60秒结束');
					}
				}

			},
			play(event) {
				//我的学习
				this.xuexi()
				this.videoUrl = this.url2
				this.poster = ''
			},
			go(id) {

				uni.navigateTo({
					url: '/pages/user/money/pay?groups=kecheng&&order_id=' + id
				});
			},
			go1() {
				uni.navigateTo({
					url: '/pages/lanhu_renmaixiangqing/index?id=' + this.list.a.id
				});
			},
			changeTab(tab) {
				this.activeTab = tab;
			},
			xuexi() {
				this.$api.get({
					url: '/wanlshop/data/xuexi',
					data: {
						id: this.id
					},
					success: res => {

					}
				});
			},
			getData() {
				this.$api.get({
					url: '/wanlshop/data/getDetail',
					data: {
						id: this.id
					},
					success: res => {
						console.log(44, res)
						this.list = res
						this.shoucang = this.list.e
						this.poster = this.list.b.cover
						this.poster2 = this.list.b.cover
						this.videoUrl = this.list.d[0][0].mp4
						this.url2 = this.list.d[0][0].mp4
					}
				});
			},
		}
	};
</script>
<style lang='css'>
	@import '../common/common.css';
	@import './assets/style/index.rpx.css';

	.active {

		border-bottom: 3px solid #802931;
	}

	toast,
	uni-toast {
		z-index: 9999;
	}

	.cu-custom .cu-bar .search-form {
		background-color: #fff;
	}

	.cu-custom .cu-bar {
		background-color: #f3f3f3;
	}

	.cu-custom .bar-bg {
		background-color: rgba(243, 243, 243, 0.96);
	}

	.cu-custom .cu-bar {
		z-index: 99;
	}

	/* #ifdef MP */
	.cu-custom .cu-bar .search-form {
		margin: 0 0 0 25rpx;
	}

	/* #endif */

	.cu-custom .cu-bar .nav .cu-item {
		line-height: 70rpx;
		height: 70rpx;
	}

	.swiper-box {
		position: relative;
		width: 100%;
		height: 100vw;
	}

	.swiper-box swiper {
		width: 100%;
		height: 100vw;
	}

	.swiper-box swiper swiper-item image {
		width: 100%;
		height: 100vw;
	}

	.swiper-box .indicator {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 25upx;
		height: 40upx;
		border-radius: 40upx;
		font-size: 22upx;
		position: absolute;
		bottom: 20upx;
		right: 20upx;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.2);
	}
</style>