添加桌面功能

vedio/components/player/player.vue

 <template>
-	<view class="container" v-show="showRewardAdPop">
-		<image @click="closeAdPop" style="width: 50rpx; height: 50rpx;margin-left:auto;margin-right: 30rpx;
+	<view>
+		<view class="container" v-show="showRewardAdPop">
+			<image @click="closeAdPop" style="width: 50rpx; height: 50rpx;margin-left:auto;margin-right: 30rpx;
 			margin-bottom: 30rpx;" src="https://mints-web.oss-cn-beijing.aliyuncs.com/images/ic_close_white.png"></image>
-		<view class="content">
-			<text class="title">恭喜你,获得免费看剧名额</text>
-			<text class="button" @click="showRewardAd">看广告免费解锁1集</text>
-			<text class="downtext">{{countDown}}s后自动进入广告,观看完成解锁第{{seq+1}}集剧情</text>
+			<view class="content">
+				<text class="title">恭喜你,获得免费看剧名额</text>
+				<text class="button" @click="showRewardAd">看广告免费解锁1集</text>
+				<text class="downtext">{{countDown}}s后自动进入广告,观看完成解锁第{{seq+1}}集剧情</text>
+			</view>
+		</view>
+
+		<view class="shortcut" v-show="showShortcutPop">
+			<image style="width: 70rpx;height: 70rpx;margin-left: 10rpx;" src="../../static/logo-about.png">
+			</image>
+			<view class="flex1" style="margin-left: 20rpx;">
+				<view style="font-size: 26rpx;">添加至桌面</view>
+				<view style="font-size: 20rpx;">下次看剧更方便</view>
+			</view>
+			<button @click="addShortcut" open-type="addShortcut" bindaddshortcut="eventHandler" style="font-size: 24rpx;background-color: crimson;border-radius: 5rpx;color: white;
+			padding: 0 12rpx;margin-left: 30rpx;">立即添加
+			</button>
+			<image @click="closeShortcutPop" style="width: 40rpx; height: 40rpx;" src="../../static/video/close.png">
+			</image>
 		</view>
 	</view>
 </template>
@@ -31,7 +47,9 @@
 				episodeId: "",
 				countDown: 3,
 				showRewardAdPop: false,
-				showAdForServer: false
+				showAdForServer: false,
+				showShortcutPop: false,
+				canShowShortcut: false,
 			};
 		},
 		async beforeCreate() {
@@ -63,6 +81,13 @@
 			pm.onTimeUpdate((e) => {
 				// 播放进度变化时触发，返回当前播放时间点及视频总时长，单位：秒(s)。event.detail = { currentTime, duration }。
 				console.log("触发播放进度变化onTimeUpdate回调:", e);
+
+				// 播放到第10秒且今天没有弹出 ，弹出加入桌面
+				if ((e.currentTime > 3) && this.canShowShortcut) {
+					this.showShortcutPop = true
+					this.canShowShortcut = false
+					this.setShowShortcut()
+				}
 			});
 			pm.onWaiting((e) => {
 				console.log("触发视频出现缓冲onWaiting回调:", e);
@@ -194,6 +219,8 @@
 			console.log("playerBeforeMount");
 		},
 		mounted() {
+			this.loadAdSwitch()
+			this.getShowShortcut()
 			console.log("playerMounted");
 		},
 		beforeUpdate() {
@@ -212,6 +239,22 @@
 			console.log("playerDestroyed ");
 		},
 		methods: {
+			eventHandler(e) {
+				this.showShortcutPop = false
+				if (e.detail.errNo) {
+					console.log("添加到桌面失败", e.detail);
+				} else {
+					console.log("添加到桌面成功");
+				}
+			},
+			closeShortcutPop() {
+				this.showShortcutPop = false
+				this.canShowShortcut = false
+				uni.setStorage({
+					key: 'close_shortcut',
+					data: "close"
+				});
+			},
 			cliPause() {
 				console.error(this.$props);
 				this.pm.setPlayStatus("pause");
@@ -407,12 +450,52 @@
 					}
 				});
 			},
+			getShowShortcut() {
+				let closeShortcut = uni.getStorageSync('close_shortcut')
+				if (closeShortcut) {
+					this.canShowShortcut = false
+					return
+				}
 
+				let shortcutTime = uni.getStorageSync('shortcut_time')
+				if (shortcutTime) {
+					this.canShowShortcut = !this.isToday(shortcutTime)
+				} else {
+					this.canShowShortcut = true
+				}
+			},
+			setShowShortcut() {
+				uni.setStorage({
+					key: 'shortcut_time',
+					data: Date.now()
+				});
+			},
+			isToday(timestamp) {
+				const today = new Date();
+				const todayStart = new Date(today.getFullYear(), today.getMonth(), today.getDate()).getTime();
+				return timestamp >= todayStart && timestamp < todayStart + 86400000; // 86400000 毫秒为一天
+			}
 		},
 	};
 </script>
 
 <style lang="scss">
+	.shortcut {
+		position: absolute;
+		top: 82%;
+		left: 40%;
+		transform: translate(-50%, -50%);
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		// justify-content: space-between;
+		width: 60%;
+		height: 90rpx;
+		padding: 0 20rpx;
+		background-color: whitesmoke;
+		border-radius: 10rpx;
+	}
+
 	.container {
 		position: absolute;
 		top: 50%;