xingmingyi_applet/pagesA/catList/catli.vue

<template>
	<view class="container">
		<view class="conwarp">
			<view class="cl-one"><video id='myVideo' class="vidBox" @timeupdate="timeupdate" @play="play"
					initial-time="0" :src="selInfo.files" controls></video></view>
			<view class="dfsb">
				<view class="gdHead flex1">
					<view class="head">{{ selInfo.title }}</view>
					<view class="subtit dfsb textgrey fontssm flex1">{{ selInfo.desc }}
						<view @click="getSon()" class="promain fontsm dffs">{{showSon?'关闭':"展开更多"}}
							<u-icon class="icondoen" size="12" name='arrow-right-double'></u-icon>
						</view>
					</view>
				</view>
				<view @click.stop="downItem(selInfo)" class="down dffs">
					<u-icon name='download' color="#26565A"></u-icon>
					下载文档
				</view>
			</view>
			<view v-if="showSon" class="sonlist">
				<video-list flag="5" :list="sonList"></video-list>
				<view v-if="status1 !='nomore'" @click="getmore()" class="promain tips fontsm dffs"> 查看更多 <u-icon class="icon"
						name='arrow-down' size='14'></u-icon>
				</view>
			</view>
		</view>
		<view class="listBox">
			<view @click="selItem(item)" class="bb vidLi dfsb" v-for="(item, ind) in list" :key="ind">
				<view v-if="item.id!=selInfo.id" class="show">
				</view>
				<!-- <image class="imgbox" :src="item.img" mode=""></image> -->
				<view class="imgbox">
					<image :src="item.img" mode=""></image>
					<view class="look">{{ item.fen }} </view>
				</view>
				<view class="dffd flex1">
					<view class="title elli">{{ item.title }}</view>
					<view class="textgrey oneelli fontsm">{{ item.desc }}</view>
					<view class="auth dfsb">
						<text class="fontssm prosecond"> {{ item.is_pay==0?'免费':item.my_is_pay==0?'付费':'已购买' }}</text>
						<view @click.stop="downItem(item)" class="down dffs">
							<u-icon name='download' color="#26565A"></u-icon>
							下载文档
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="fixBox">
			<view @click="buyTips" v-if="totalInfo.my_is_pay==0" class="clickbtn promain">
				购买全部视频课程:￥{{totalInfo.is_vip==1?totalInfo.vip_price:totalInfo.price}}
			</view>
		</view>
		<y-modal ref='popup' title="提示" text='您确认付费购买此课程吗' @onConfirm='onConfirm'></y-modal>
	</view>
</template>
<script>
	import {
		mixin
	} from './mixin.js'
	import videoList from '@/pages/index/components/wordlist.vue';

	export default {
		components: {
			videoList
		},
		mixins: [mixin],
		data() {
			return {
				cat_id: 0, //二级分类cat_id 
				list: [], //返回列表
				selInfo: {}, //选中视频
				totalInfo: {}, //总数居
				page: 1,
				limit: 6,
				status: 'loadmore',
				page1: 1,
				limit1: 6,
				status1: 'loadmore',
				showSon: false,
				sonList: [],
			};
		},
		onPullDownRefresh() {
			this.page = 1;
			this.list = [];
			this.loadData();
			setTimeout(res => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			if (this.status == 'nomore') return;
			this.status = 'loading';
			this.page = ++this.page;
			this.loadData();
		},
		onLoad(option) {
			this.cat_id = option.cat_id || '';
			this.loadData();
		},

		onReady: function(res) {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		methods: {
			getmore() {
				this.status1 = 'loading';
				this.page1 = ++this.page1;
				this.getsonList();
			},
			// 获取文档
			getSon() {
				if (this.showSon) {
					this.showSon = !this.showSon 
					return
				}
				this.showSon = !this.showSon
				this.page1=1;
				this.status1='loading'
				this.sonList=[];
				this.getsonList()
			},
			getsonList() {
				let url = 'new_cate/getVideoFiles';
				this.$api
					.request(url, {
						video_id: this.selInfo.id,
						page: this.page1,
						limit: this.limit1
					})
					.then(data => {
						if (data.code == '200') {
							this.sonList = this.sonList.concat(data.data);
							if (data.data.length < this.limit1) {
								this.status1 = 'nomore';
							}
						} else {
							this.$api.toast(data.msg);
						}
					});
			},
			// 提示购买
			buyTips(item) {
				this.buyId = this.totalInfo.id;
				this.$refs['popup'].open();
			},
			timeupdate(e) {
				console.log(parseInt(e.detail.currentTime));
				// is_pay  0 免费  1 付费  my_is_pay 0 未购买  1 已购买
				if (this.selInfo.is_pay != 0 && this.selInfo.my_is_pay != 1) {
					// is_vip/是否是会员:  0=否  1=是   see_time 可试看时长:  秒
					if (parseInt(e.detail.currentTime) >= parseInt(this.selInfo.see_time)) {
						this.$api.toast('请购买后观看完整视频');
						setTimeout(res => {
							// #ifdef MP-WEIXIN
							this.videoContext.stop();
							// #endif
							// #ifndef MP-WEIXIN
							this.videoContext.pause();
							// #endif
							this.videoContext.seek(0);
						}, 800);
					}
				}
			},
			play(e) {
				let url = 'index/setSee';
				this.$api
					.request(url, {
						id: this.selInfo.id
					})
					.then(res => {
						if (res.code != '200') {
							this.$api.toast(res.msg);
						}
					});
			},
			// 下载
			downItem(item) {
				// "is_pay": 0, //是否免费:  0=是(直接看)  1=付费(没购买的需要判断试看时长停止播放,  购买过得不需要)
				// "my_is_pay": 1 //是否已购买:  0=否   1=是
				if (item.is_pay == 1 && item.my_is_pay == 0) {
					this.$api.toast('请先购买')
				} else {
					uni.navigateTo({
						url: '/pagesA/catList/downlist?video_id=' + item.id
					})
				}
			},
			//选中
			selItem(item) {
				this.showSon = false;
				this.page1 = 1;
				this.sonList = [];
				this.selInfo = item;
			},
			async loadData() {
				let url = 'new_cate/getVideoList';
				this.$api
					.request(url, {
						id: this.cat_id,
						page: this.page,
						limit: this.limit
					})
					.then(res => {
						if (res.code == '200') {
							this.totalInfo = res.data.info;
							if (!this.selInfo.title) {
								this.selInfo = res.data.list[0]
							}
							console.log(!this.selInfo);
							this.list = this.list.concat(res.data.list);
							if (res.data.list.length < this.pagnum) {
								this.status = 'nomore';
							}
						} else {
							this.$api.toast(res.msg);
						}
					});
			},

			//去支付购买
			toPay() {
				uni.navigateTo({
					url: '/pages/pay/payVid?item=' + JSON.stringify(this.selInfo)
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		padding-bottom: 100rpx;

		.conwarp {
			background-color: #fff;
			padding: 0rpx 30rpx 10rpx;
			border-radius: 16rpx;
			margin-bottom: 20rpx;

			.gdHead {
				line-height: 58rpx;
				margin: 16rpx 0;

				.head {
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 600;
					color: #333333;
					line-height: 48rpx;
				}

				/deep/ .u-icon--right {
					transform: rotate(90deg);
				}
			}

			.cl-one {
				.vidBox {
					margin-top: 30rpx;
					width: 690rpx;
					height: 335rpx;
				}
			}
		}

		.down {
			padding: 0 15rpx;
			// width: 147rpx;
			height: 64rpx;
			text-align: center;
			line-height: 64rpx;
			background: rgba(205, 222, 222, 0.39);
			color: #26565A;
			font-size: 26rpx;
			border-radius: 34rpx;
		}

		.vidLi {
			position: relative;
			width: 100%;
			padding: 27rpx;
			background-color: #fff;

			.show {
				position: absolute;
				width: 100%;
				height: 100%;
				background-color: #000;
				opacity: 0.5;
				z-index: 999;
			}

			&:nth-of-type(2n) {
				margin-right: 0;
			}

			// .imgbox {
			// 	width: 250rpx;
			// 	height: 180rpx;
			// }
			.imgbox {
				width: 250rpx;
				height: 180rpx;
				margin-right: 18rpx;
				border-radius: 10rpx;
				position: relative;

				image {
					width: 250rpx;
					height: 180rpx;
					border-radius: 10rpx;
				}

				.look {
					position: absolute;
					bottom: 15rpx;
					right: 19rpx;
					background: rgba(#000, 0.3);
					border-radius: 18rpx;
					font-size: 20rpx;
					line-height: 28rpx;
					padding: 5rpx 14rpx;
					color: #ffffff;
					display: inline-block;
				}
			}

			.title {
				font-size: 28rpx;
				line-height: 40rpx;
				margin-bottom: 12rpx;
			}

			.auth {
				margin-top: 15rpx;
				width: 100%;
			}

		}

		.bgg {
			background: #ececec;
		}

		.clickbtn {
			margin: 0 30rpx;
			background: rgba(205, 222, 222, 0.39);
		}

		.sonlist {
			padding: 10rpx 30rpx;
			.tips{
				padding-top: 20rpx;
				width: 100%;
				justify-content: center;
			}
		}


	}
</style>