添加激励视频解锁剧集

vedio/components/ad-popup/ad-popup.vue

+<template>
+	<view>
+		<uni-popup type="center" ref="adPop" :maskClick="false" :isMaskClick="false">
+			<view class="container">
+
+				<!-- <view class="ad-view">
+					<ad :unit-id="adUnitId" @load="onload" @close="onclose" @error="onerror"></ad>
+				</view> -->
+
+				<view class="content">
+					<text class="title">恭喜你,获得免费看剧名额</text>
+					<text class="button" @click="handleClose">看视频免费解锁1集</text>
+					<text class="downtext">{{countDown+'s后自动进入广告页面解锁后续'}}</text>
+				</view>
+			</view>
+		</uni-popup>
+	</view>
+</template>
+
+<script>
+	import {
+		EXPRESS_ID
+	} from "@/utils/adConstant.js"
+
+	export default {
+		name: 'adPopup',
+		props: {
+			show: {
+				type: Boolean,
+				default: false,
+			},
+		},
+		data() {
+			return {
+				adUnitId: EXPRESS_ID,
+				countDown: 0,
+			};
+		},
+		methods: {
+			handleShow() {
+				this.$refs.adPop.open('center');
+				this.startCountdown()
+			},
+			startCountdown() {
+				let that = this;
+
+				var countDownSeconds = 10
+				const timer = setInterval(() => {
+					if (countDownSeconds > 0) {
+						that.countDown = countDownSeconds
+						countDownSeconds--
+					} else {
+						clearInterval(timer)
+						that.handleClose()
+					}
+				}, 1000)
+			},
+			handleClose() {
+				this.$refs.adPop.close('center');
+				this.$emit('close');
+			},
+			onload(e) {
+				console.log("onload");
+			},
+			onclose(e) {
+				console.log("onclose: " + e.detail);
+			},
+			onerror(e) {
+				console.log("onerror: " + e.detail.errCode + " message:: " + e.detail.errMsg);
+			}
+		},
+		watch: {
+			show: {
+				handler: function(newVal, oldVal) {
+					if (newVal) {
+						this.handleShow();
+					}
+				},
+				immediate: true
+			}
+		}
+	};
+</script>
+
+<style lang="scss">
+	.container {
+		width: 600rpx;
+		height: 800rpx;
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	.ad-view {
+		width: 600rpx;
+		border-radius: 20rpx;
+		// background-color: white;
+		margin-bottom: 10px;
+	}
+
+	.content {
+		border-radius: 20rpx;
+		background-color: white;
+		display: flex;
+		width: 600rpx;
+		padding: 30rpx 0;
+		flex-direction: column;
+		align-items: center;
+
+		.title {
+			color: black;
+			font-size: 40rpx;
+			font-weight: bold;
+			margin-bottom: 30rpx;
+		}
+
+		.button {
+			margin: 20rpx 20rpx;
+			border-radius: 10rpx;
+			background-color: orange;
+			color: white;
+			font-size: 36rpx;
+		}
+	}
+</style>
\ No newline at end of file

vedio/components/coin-popup/coin-popup.vue

@@ -19,7 +19,7 @@
 					<scroll-view scroll-y>
 						<view style="display: flex;flex-direction: column;align-items: flex-end;">
 							<view style="display: flex;flex-direction: row;">
-								<view @click="handleAgree" style="margin-top: 10rpx;margin-right: 10rpx;">付费须知></view>
+								<view @click="handleAgree" style="margin-top: 12rpx;margin-right: 10rpx;">付费须知></view>
 								<image @click="handleClose"
 									style="width: 30rpx;height: 30rpx;display: flex;align-items: right;margin-top: 20rpx;margin-right: 20rpx;margin-bottom: 10rpx;"
 									src="@/static/index/ic_quit_white.png"></image>

vedio/pagesC/ttvideo/ttVideoDetail.vue

@@ -66,18 +66,24 @@
 		<episodePopup ref="episodePopup" @selectVideo="selectThisVideo" :windowWidth="windowWidth"
 			:windowHeight="windowHeight" :tabIndex="tabIndex" :tabs="tabs" :subList="subList" :originList="originList"
 			:originIndex="originIndex" />
-		<coin-popup :show="showCoinPop" :point="data.point" :vedioId="data.vedioId" @close="showCoinPop = false"
+		<coin-popup :show="showCoinPop" :point="data.point" :vedioId="data.vedioId" @close="coinPopupClose"
 			@paySuccess="paySuccess" />
+		<ad-popup :show="showAdPop" @close="adPopupClose" />
 	</view>
 </template>
 
 <script>
+	import {
+		REWARD_ID
+	} from "@/utils/adConstant.js"
+
 	import common from '@/mixins/common';
 
 	import {
 		getSubList
 	} from "@/utils/utils.js"
 
+	import adPopup from '@/components/ad-popup/ad-popup.vue';
 	import coinPopup from '@/components/coin-popup/coin-popup.vue';
 	import episodePopup from '@/components/episode-popup/episode-popup.vue';
 
@@ -96,6 +102,7 @@
 		components: {
 			coinPopup,
 			episodePopup,
+			adPopup,
 			ttVideoPlayer
 		},
 		data() {
@@ -121,6 +128,7 @@
 				subList: [],
 				showTap: false,
 				showCoinPop: false,
+				showAdPop: false,
 				vipBackPage: '',
 				canUseTTPlayer: true,
 			};
@@ -141,42 +149,9 @@
 			this.ttuop = 64
 			// #endif
 
-
 			this.getData()
+			this.preloadAd()
 
-			// 创建实例
-			this.ad = tt.createRewardedVideoAd({
-				adUnitId: "5owlrx99qby0ephhco",
-			});
-
-			// 监听错误
-			this.ad.onError((err) => {
-				tt.hideLoading();
-				switch (err.errCode) {
-					case 1004:
-						// 无合适的广告
-						break;
-					default:
-						// 更多请参考错误码文档
-				}
-			});
-
-			// 监听视频播放完成
-			this.ad.onClose((data) => {
-				tt.hideLoading();
-				if (data.isEnded) {
-					console.log("观看了", data.count, "个视频");
-				} else {
-					console.log("未观看完视频");
-				}
-			});
-
-			// do other thing
-			// 卸载 close 事件监听
-			this.ad.offClose(closeHandler);
-
-			// 预加载资源
-			this.ad.load();
 		},
 		onShow() {
 			// 从VIP页面返回关闭弹框
@@ -469,8 +444,8 @@
 				this.isqp = e.detail.show
 			},
 			collect(vedioId, index) {
-				tt.showLoading();
-				this.ad.show();
+				this.showAdPop = true
+				return
 
 				this.data.collect = 1
 				// 收藏
@@ -514,6 +489,115 @@
 					}) => {}
 				});
 			},
+			preloadAd() {
+				// 创建实例
+				this.ad = tt.createRewardedVideoAd({
+					adUnitId: REWARD_ID,
+				});
+
+				// 监听错误
+				this.ad.onError((err) => {
+					tt.hideLoading();
+
+					uni.showToast({
+						title: "网络太火爆了，请稍候重试"
+					})
+					switch (err.errCode) {
+						case 1004:
+							// 无合适的广告
+							break;
+						default:
+							// 更多请参考错误码文档
+					}
+				});
+
+				let that = this
+				// 监听视频播放完成
+				this.ad.onClose((data) => {
+					tt.hideLoading();
+					if (data.isEnded) {
+						uni.showToast({
+							title: "正在为您解锁剧集"
+						})
+						that.adUnlock(that.originIndex, '')
+					} else {
+						uni.showToast({
+							title: "未观看完整视频"
+						})
+					}
+				});
+
+				// do other thing
+				// 卸载 close 事件监听
+				// this.ad.offClose(closeHandler);
+
+				// 预加载资源
+				this.ad.load();
+			},
+			coinPopupClose() {
+				this.showCoinPop = false
+				this.showAdPop = true
+			},
+			adPopupClose() {
+				this.showAdPop = false
+				this.playRewardVideo()
+			},
+			playRewardVideo() {
+				// 播放激励视频
+				tt.showLoading();
+				this.ad.show();
+			},
+			adUnlock(num, ecpm) {
+				let that = this
+				this.post({
+					url: '/vedio/unlockByAd',
+					data: {
+						adSource: 'csj',
+						vedioId: this.data.vedioId,
+						num: (num + 1),
+						ecpm: ecpm
+					},
+					showLoading: false,
+					success: ({
+						data
+					}) => {
+						uni.showToast({
+							title: data.msg,
+							icon: 'none'
+						})
+						if (data.code == 200) {
+							that.originList[that.originIndex].lock = false
+							setTimeout(() => {
+								tt.createVideoContext('' + that.originList[that.originIndex]
+										.vedioIndex,
+										that)
+									.play();
+								that.commitVideo()
+							}, 500)
+						} else if (data.code == 301) {
+							that.originList[that.originIndex].lock = false
+							setTimeout(() => {
+								tt.createVideoContext('' + that.originList[that.originIndex]
+										.vedioIndex,
+										that)
+									.play();
+								that.commitVideo()
+							}, 500)
+						} else if (data.code == 302) {
+							that.originList[that.originIndex].lock = false
+							setTimeout(() => {
+								tt.createVideoContext('' + that.originList[that.originIndex]
+										.vedioIndex,
+										that)
+									.play();
+								that.commitVideo()
+							}, 500)
+						} else if (data.code == 303) {
+							that.showPayDialog()
+						}
+					}
+				});
+			},
 		},
 	};
 </script>

vedio/utils/adConstant.js

+
+export const EXPRESS_ID = 'q1031ievmv1z3j28gs'
+export const REWARD_ID = 'm1qtdoeeqq9txgahk4'
\ No newline at end of file