Merge branch '2025北京诚祥App' of https://gogs.mtavip.com/wangguoyu/uniProject into 2025北京诚祥App

components/videoPlay/videoPlay copy.vue

@@ -0,0 +1,255 @@
+<template>
+	<view>
+
+		<view ref="videoContent" id="wgy-player-test" :playAuth="playAuth" :change:playAuth="renderScript.receiveMsg"
+			:videoId="videoId" :change:videoId="renderScript.videoIdFun" :playCount="playCount"
+			:change:playCount="renderScript.playVideo" :status="hideFlag" :change:hideFlag="renderScript.hideFlagFun"
+			:seekTime="seekTime" :change:seekTime="renderScript.seekTimeFun" class="kecheng-video">
+			<zmm-watermark :watermark="watermark"></zmm-watermark>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "videoPlay",
+		data() {
+			return {
+				playAuth: "", //播放凭证
+				hideFlag: 'show',
+				videoId: "", //阿里云视频id
+				seekTime: '',
+				playCount: 0,
+				watermark: '<h5>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</h5><p style="color:red">我是我是p标签我是p标签p标签</p><br>'
+			};
+		},
+		onUnload() {
+			// 切换
+			this.hideFlag = 'hide'
+		},
+		onHide() {
+			this.hideFlag = 'hide'
+		},
+		methods: {
+			init(options) {
+				this.playAuth = options.playAuth;
+				this.videoId = options.videoId;
+				this.seekTime = options.seekTime;
+				this.setSeekTime(options.seekTime)
+				const isPlay = options.isPlay || false;
+				if (isPlay) {
+					this.playCount++
+				}
+			},
+			setSeekTime(seekTime) {
+				this.seekTime = '';
+				this.$nextTick(() => {
+					this.seekTime = seekTime;
+				})
+			},
+			handlePause() {
+				this.$emit('play-pause')
+			},
+			handlePlay() {
+				this.$emit('play-play')
+			},
+			playEnd() {
+				this.$emit('play-end')
+			},
+			handleTimeupdate(timer) {
+				this.$emit('play-timeupdate', timer)
+			}
+		}
+	}
+</script>
+
+<script module="renderScript" lang="renderjs">
+	export default {
+		data() {
+			return {
+				player: null,
+				playAuth: '',
+				videoId: '',
+			}
+		},
+		methods: {
+			playVideo() {
+				setTimeout(() => {
+					this.player && this.player.play()
+				}, 300);
+			},
+			receiveMsg(newValue, oldValue, ownerInstance, instance) {
+				if (newValue) {
+					this.playAuth = ''
+					this.playAuth = newValue
+					this.loadWebPlayerSDK()
+				}
+			},
+			videoIdFun(newValue, oldValue, ownerInstance, instance) {
+				if (newValue) {
+					this.videoId = ''
+					this.videoId = newValue
+				}
+			},
+			hideFlagFun(newValue, oldValue, ownerInstance, instance) {
+				if (this.player) {
+					this.player.pause()
+				}
+			},
+			seekTimeFun(newValue, oldValue, ownerInstance, instance) {
+				if (newValue) {
+					this.player && this.player.seek(newValue)
+					console.log('已设置时间', newValue)
+				}
+			},
+			playAli() {
+				let that = this
+				//配置播放器
+				if (!this.playAuth) {
+					return false;
+				}
+				let player = new Aliplayer({
+					id: "wgy-player-test",
+					vid: this.videoId,
+					playauth: this.playAuth,
+					extraInfo: {
+						poster: 'noposter'
+					},
+					skinLayout: [{
+							name: "bigPlayButton",
+							align: "blabs",
+							x: 30,
+							y: 80
+						},
+						{
+							name: "H5Loading",
+							align: "cc"
+						},
+						{
+							name: "controlBar",
+							align: "blabs",
+							x: 0,
+							y: 0,
+							children: [{
+									name: "progress",
+									align: "blabs",
+									x: 0,
+									y: 44
+								},
+								{
+									name: "playButton",
+									align: "tl",
+									x: 15,
+									y: 12
+								},
+								// {
+								// 	name: "fullScreenButton",
+								// 	align: "tr",
+								// 	x: 10,
+								// 	y: 12
+								// },
+								{
+									name: "timeDisplay",
+									align: "tr",
+									x: 10,
+									y: 5
+								}
+							]
+						}
+					],
+					qualitySort: "asc",
+					format: "mp4",
+					mediaType: "video",
+					encryptType: 1,
+					autoplay: false,
+					isLive: false,
+					rePlay: false,
+					playsinline: true,
+					webkitPlaysinline: true,
+					// 针对Android微信、QQ浏览器
+					x5_video_position: "top",
+					x5_type: "h5",
+					x5_fullscreen: false,
+					// 针对iOS微信
+					'iphone-playsinline': true,
+					// 防止iOS自动全屏播放
+					'ios-playsinline': true,
+					// 禁用双击全屏
+					disableDoubleClickFullscreen: true,
+					// 禁用快捷键全屏（F键）
+					hotkey: {
+						fullscreen: false // 禁用全屏快捷键
+					},
+					preload: false,
+					controlBarVisibility: "hover",
+					useH5Prism: true
+
+				}, function(player) {
+					console.log('ppp', player)
+				});
+				this.player = player;
+				player.on('canplay', function() {
+					player.tag.play();
+				});
+				player.on('ended', function() {
+					that.$ownerInstance.callMethod('playEnd', {
+						data: 'end'
+					})
+				});
+				player.on('pause', function() {
+					that.$ownerInstance.callMethod('handlePause')
+				});
+				player.on('play', function() {
+					that.$ownerInstance.callMethod('handlePlay')
+				});
+				player.on('timeupdate', function(time) {
+					that.$ownerInstance.callMethod('handleTimeupdate', time.target.childNodes[0].currentTime)
+				});
+
+
+			},
+			isHasScript() {
+				let scriptExists = false;
+				for (let script of document.scripts) {
+					if (script.src === 'https://g.alicdn.com/de/prismplayer/2.9.6/aliplayer-min.js') {
+						scriptExists = true;
+						break;
+					}
+				}
+				return scriptExists
+			},
+			loadWebPlayerSDK() {
+				if (this.player) {
+					this.player.dispose();
+				}
+				if (this.isHasScript()) {
+					this.playAli()
+					return;
+				}
+				return new Promise((resolve, reject) => {
+					const s_tag = document.createElement('script'); // 引入播放器js
+					s_tag.type = 'text/javascript';
+					s_tag.src = 'https://g.alicdn.com/de/prismplayer/2.9.6/aliplayer-min.js';
+					s_tag.charset = 'utf-8';
+					s_tag.onload = () => {
+						//	console.log(this.playAuth);
+						setTimeout(() => {
+							this.playAli()
+						}, 10);
+						resolve();
+					}
+					document.body.appendChild(s_tag);
+					const l_tag = document.createElement('link'); // 引入播放器css
+					l_tag.rel = 'stylesheet';
+					l_tag.href =
+						'https://g.alicdn.com/de/prismplayer/2.9.6/skins/default/aliplayer-min.css';
+					document.body.appendChild(l_tag);
+				});
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+
+</style>

pages/admin/Kecheng/study.vue

@@ -1,5 +1,6 @@
 <template>
 	<view class="kecheng-study-page">
+	<!-- 	  <zmm-watermark :watermark="watermark"></zmm-watermark> -->
 		<!-- <view class="icon-title-navBar-box">
 			<view @click="goUpPage" class="nav-bar-icon"></view>
 			<text class="nav-bar-title">{{name}}</text>
@@ -71,6 +72,7 @@
 				operId: '', // 课程
 				pageFrom:'',
 				name: '',
+				//    watermark: '<h5>我是h5标签我是h5标签我是h5标签我是h5标签</h5><p style="color:#f00">我是p标签</p><br>'
 			}
 		},
 		onLoad(options) {

uni_modules/zmm-watermark/changelog.md

@@ -0,0 +1,21 @@
+## 1.1.7（2025-08-10）
+更新说明
+## 1.1.6（2025-08-10）
+更新说明文档
+## 1.1.5（2024-06-16）
+修改兼容性，去除show字段，控制显示用v-if操作
+## 1.1.4（2024-06-15）
+column属性修复
+## 1.1.3（2024-06-02）
+新特征：
+支持nvue
+改动：
+移除maxWidth属性(单条水印最大宽度)
+新增column属性可设置水印列数
+新增fontSize属性可设置水印文字默认大小
+修改margin属性为20(水印之间上下间距)
+nvue下支持覆盖video等元素
+## 1.1.2（2022-01-12）
+调整为uni_modules目录规范
+## 1.0（2021-03-31）
+发布1.0版本

uni_modules/zmm-watermark/components/zmm-watermark/zmm-watermark.vue

@@ -0,0 +1,166 @@
+<template>
+	<view class="zmm-watermark">
+		<!-- 单个用于计算 -->
+		<view class="zmm-watermark-mold" ref="mold" id="mold">
+			<rich-text :style="moldStyle" :nodes="watermark"></rich-text>
+		</view>
+		<!-- 循环 -->
+		<view class="zmm-watermark-content" :style="{opacity:opacity}">
+			<rich-text :nodes="watermark" :style="itemStyle" v-for="(item,index) in forLength" :key="index"></rich-text>
+		</view>
+	</view>
+</template>
+
+<script>
+	// #ifdef APP-NVUE
+	const dom = weex.requireModule("dom");
+	// #endif
+
+	/**
+	 * zmm-watermark 页面水印组件
+	 * @description 页面水印组件 支持富文本、自动计算所需水印数量不卡顿、自定义旋转角度等
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=4587
+	 * @property {String} watermark 水印内容，支持html富文本
+	 * @property {String} color 水印文字默认颜色
+	 * @property {String} fontSize 水印文字默认大小
+	 * @property {Number} opacity 水印透明度
+	 * @property {Number} margin 水印之间上下间距
+	 * @property {Number} rotate 水印旋转角度
+	 * @property {Number} column 水印列数
+	 */
+	
+	export default {
+		data() {
+			return {
+				forLength: 0, //水印数量
+				watermarkArea: 0 //水印大小(像素)
+			};
+		},
+		props: {
+			watermark: {
+				type: String,
+				default: '水印文字'
+			},
+			color: {
+				type: String,
+				default: '#666'
+			},
+			fontSize: {
+				type: Number,
+				default: 16
+			},
+			opacity: {
+				type: Number,
+				default: 0.15
+			},
+			margin: {
+				type: Number,
+				default: 10
+			},
+			rotate: {
+				type: Number,
+				default: -21
+			},
+			column: {
+				type: Number,
+				default: 3
+			}
+		},
+		computed: {
+			// 单个水印
+			moldStyle() {
+				return `width:${this.itemWidth}px;text-align: center;font-size:${this.fontSize}px;`
+			},
+			// 循环水印
+			itemStyle() {
+				return `color:${this.color};font-size:${this.fontSize}px;margin:${this.margin}px;width:${this.itemWidth}px;transform:rotate(${this.rotate}deg);text-align: center;`
+			},
+			// 屏幕像素
+			screenArea() {
+				let height = uni.getSystemInfoSync().windowHeight + uni.getSystemInfoSync().windowTop
+				let width = uni.getSystemInfoSync().windowWidth
+				return Math.floor(height * width * 1.2)
+			},
+			// 单个水印最大长度
+			itemWidth() {
+				let windowWidth = uni.getSystemInfoSync().windowWidth
+				return Math.floor(windowWidth / this.column - this.margin * 2 - 20 / this.column)
+			}
+		},
+		watch: {
+			watermark: {
+				handler(v) {
+					if (v) {
+						this.countForLength();
+					}
+				},
+				deep: true
+			}
+		},
+		mounted() {
+			if (this.watermark) {
+				this.countForLength();
+			}
+		},
+		methods: {
+			countForLength() { //计算水印数量
+				// #ifndef APP-NVUE
+				const query = uni.createSelectorQuery().in(this);
+				query.select('#mold').boundingClientRect(data => {
+					let width = data.width ? data.width : this.itemWidth
+					let height = data.height ? data.height : 30
+					let itemWidth = width + this.margin * 2
+					let itemHeight = height + this.margin * 2
+					this.watermarkArea = Math.floor(itemWidth * itemHeight)
+					this.forLength = Math.floor(this.screenArea / this.watermarkArea)
+				}).exec();
+				// #endif
+				// #ifdef APP-NVUE
+				setTimeout(() => {
+					const result = dom.getComponentRect(this.$refs.mold, (option) => {
+						let size = option.size;
+						let itemWidth = size.width + this.margin * 2
+						let itemHeight = size.height + this.margin * 2
+						this.watermarkArea = Math.floor(itemWidth * itemHeight)
+						this.forLength = Math.floor(this.screenArea / this.watermarkArea)
+					});
+				}, 50);
+				// #endif
+			},
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	.zmm-watermark {
+		position: fixed;
+		overflow: hidden;
+		z-index: 999;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		/* #ifndef APP-NVUE */
+		pointer-events: none;
+		/* #endif */
+	}
+
+	.zmm-watermark-content {
+		position: fixed;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		overflow: hidden;
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		justify-content: space-around;
+	}
+
+	.zmm-watermark-mold {
+		position: fixed;
+		left: 0;
+		top: 0;
+		opacity: 0;
+	}
+</style>

uni_modules/zmm-watermark/package.json

@@ -0,0 +1,100 @@
+{
+  "id": "zmm-watermark",
+  "displayName": "zmm-watermark-通用水印组件",
+  "version": "1.1.7",
+  "description": "支持富文本、自动计算所需水印数量不卡顿、自定义旋转角度等",
+  "keywords": [
+    "",
+    "水印",
+    "水印组件",
+    "通用水印",
+    "自定义水印",
+    "富文本水印"
+],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.6.17",
+    "uni-app": "^4.07",
+    "uni-app-x": ""
+  },
+  "dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "插件不采集任何数据",
+      "permissions": "无"
+    },
+    "npmurl": "",
+    "type": "component-vue",
+    "darkmode": "x",
+    "i18n": "x",
+    "widescreen": "√"
+  },
+  "uni_modules": {
+    "platforms": {
+      "cloud": {
+        "tcb": "x",
+        "aliyun": "x",
+        "alipay": "x"
+      },
+      "client": {
+        "uni-app": {
+          "vue": {
+            "vue2": "√",
+            "vue3": "√"
+          },
+          "web": {
+            "safari": "√",
+            "chrome": "√"
+          },
+          "app": {
+            "vue": "√",
+            "nvue": "√",
+            "android": "√",
+            "ios": "√",
+            "harmony": "√"
+          },
+          "mp": {
+            "weixin": "√",
+            "alipay": "√",
+            "toutiao": "√",
+            "baidu": "√",
+            "kuaishou": "√",
+            "jd": "√",
+            "harmony": "√",
+            "qq": "√",
+            "lark": "√"
+          },
+          "quickapp": {
+            "huawei": "√",
+            "union": "√"
+          }
+        },
+        "uni-app-x": {
+          "web": {
+            "safari": "-",
+            "chrome": "-"
+          },
+          "app": {
+            "android": "-",
+            "ios": "-",
+            "harmony": "-"
+          },
+          "mp": {
+            "weixin": "-"
+          }
+        }
+      }
+    }
+  }
+}

uni_modules/zmm-watermark/readme.md

@@ -0,0 +1,48 @@
+#uniapp水印组件
+
+原理   
+循环标签
+
+作者   
+`zmm2113@qq.com`
+
+版本  
+> 兼容性支持：安卓、苹果、H5、微信小程序（其他平台未测试理论上支持）
+
+优势  
+> 支持富文本、自动计算所需水印数量不卡顿、自定义旋转角度等
+
+注意事项
+> 因为层级原因需要将组件需要放置到顶部
+
+一、使用示例
+```
+<template>
+	<view class="container">
+		<zmm-watermark :watermark="watermark"></zmm-watermark>
+	</view>
+</template>
+
+<script>
+	import img from '@/static/logo.png';
+	export default {
+		data() {
+			return {
+				watermark: '<h5>我是h5标签我是h5标签我是h5标签我是h5标签</h5><p style="color:#f00">我是p标签</p><br><img style="width:30px" src="' + img + '" />'
+				
+			}
+		}
+	}
+</script>
+```  
+二、配置(注意配置数据类型)
+
+配置|数据类型|默认参数|说明
+-|-|-|-
+watermark|String|"水印文字"|水印文字(支持html富文本)
+color|String|"#000000"|水印文字默认颜色
+fontSize|Number|16|水印文字大小
+opacity|Number|0.15|水印透明度
+margin|Number|20|水印之间上下间距
+rotate|Number|-21|水印旋转角度
+column|Number|3|水印列数