水印 - 防止截屏

components/zmm-watermark/zmm-watermark.vue

@@ -0,0 +1,152 @@
+<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
+	export default {
+		data() {
+			return {
+				forLength: 0, //水印数量
+				watermarkArea: 0 //水印大小(像素)
+			};
+		},
+		props: {
+			watermark: { //水印文字(支持html富文本)
+				type: String,
+				default: '水印文字'
+			},
+			color: { //水印文字默认颜色
+				type: String,
+				default: '#666'
+			},
+			fontSize: { //水印文字大小
+				type: Number,
+				default: 16
+			},
+			opacity: { //水印透明度
+				type: Number,
+				default: 0.15
+			},
+			margin: { //水印之间上下间距
+				type: Number,
+				default: 40
+			},
+			rotate: { //水印旋转角度
+				type: Number,
+				default: -21
+			},
+			column: { //水印列数
+				type: Number,
+				default: 2
+			}
+		},
+		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)
+			}
+		},
+		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>

pageMy/reportDetail/reportDetail.vue

@@ -76,7 +76,7 @@
                       <view class="introduction-body-row">低至2000元/场专家、同业访谈</view>
                       <view class="introduction-body-row">1000元/场重点公司小范围交流</view>
                     </view>
-                    <view style="font-size:26rpx">欢迎联系买方研选，了解更多服务详情，获取试用体验</view>
+                    <view style="font-size: 26rpx">欢迎联系买方研选，了解更多服务详情，获取试用体验</view>
                   </view>
                 </view>
               </view>
@@ -136,6 +136,7 @@ export default {
             title: res.Data.Detail.IsSummary == 1 ? "纪要详情" : "报告详情",
           });
           this.haveAuth = res.Data.HasPermission;
+          this.haveAuth == 1 && this.setDisableCapture();
           this.isShowWriter = res.Data.IsShow;
           this.isSpecialArticle_report = res.Data.IsSpecialArticle;
           this.reportInfo = res.Data.Detail;
@@ -307,6 +308,19 @@ export default {
         });
       }
     },
+    setDisableCapture() {
+      wx.setVisualEffectOnCapture({
+        visualEffect: "hidden",
+        complete: (res) => {
+          console.log(res);
+        },
+      });
+    },
+    closeDisableCapture() {
+      wx.setVisualEffectOnCapture({
+        visualEffect: "none",
+      });
+    },
   },
   async onShow() {
     this.readTiem = 0;
@@ -355,6 +369,7 @@ export default {
         Source: "MOBILE",
       }).then((res) => {});
     }
+    this.closeDisableCapture()
   },
   onUnload() {
     if (this.id && this.id > 0) {
@@ -367,6 +382,7 @@ export default {
         Source: "MOBILE",
       }).then((res) => {});
     }
+    this.closeDisableCapture()
   },
 };
 </script>

pageMy/reportPage/reportPage.vue

@@ -266,6 +266,7 @@ export default {
             title: res.Data.Detail.IsSummary == 1 ? "纪要详情" : "报告详情",
           });
           this.haveAuth = res.Data.HasPermission;
+          this.haveAuth == 1 && this.setDisableCapture();
           this.isShowWriter = res.Data.IsShow;
           this.reportInfo = res.Data.Detail;
           if (!this.isUserBindingPhoneNumber) {
@@ -448,8 +449,7 @@ export default {
         url: "/pageMy/reportRevolve/reportRevolve",
         events: {
           // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
-          acceptDataFromOpenedPage: function (data) {
-          },
+          acceptDataFromOpenedPage: function (data) {},
         },
         success: function (res) {
           // 通过eventChannel向被打开页面传送数据
@@ -457,6 +457,20 @@ export default {
         },
       });
     },
+
+    setDisableCapture() {
+      wx.setVisualEffectOnCapture({
+        visualEffect: "hidden",
+        complete: (res) => {
+          console.log(res);
+        },
+      });
+    },
+    closeDisableCapture() {
+      wx.setVisualEffectOnCapture({
+        visualEffect: "none",
+      });
+    },
   },
   async onShow() {
     this.readTiem = 0;
@@ -502,6 +516,7 @@ export default {
         Source: "MOBILE",
       }).then((res) => {});
     }
+    this.closeDisableCapture();
   },
   onUnload() {
     if (this.id && this.id > 0) {
@@ -514,6 +529,7 @@ export default {
         Source: "MOBILE",
       }).then((res) => {});
     }
+    this.closeDisableCapture();
   },
 };
 </script>

pages-purchaser/noteAndViewpoint/noteAndViewpoint.vue

@@ -1,5 +1,6 @@
 <template>
   <view class="container note-and-viewpoint" v-if="detailDataForm.HasPermission == 1">
+    <zmm-watermark :watermark="watermarkText"></zmm-watermark>
     <view class="content-item">
       <view class="author-name">
         <view class="author-box">
@@ -128,6 +129,8 @@
 
 <script>
 import { purchaserApi, User } from "@/config/api";
+import zmmWatermark from "@/components/zmm-watermark/zmm-watermark.vue";
+let app = getApp();
 export default {
   data() {
     return {
@@ -135,8 +138,10 @@ export default {
       detailId: 0,
       readTiem: 0,
       setIntervalTiem: null,
+      watermarkText:''
     };
   },
+  components:{zmmWatermark},
   methods: {
     previewImageMediahandler(key) {
       uni.previewImage({
@@ -150,6 +155,9 @@ export default {
       });
       if (res.Ret === 200) {
         this.detailDataForm = res.Data;
+        this.detailDataForm.HasPermission == 1 && this.setDisableCapture();
+        this.watermarkText = `${this.$db.get("mobile")}`;
+        console.log( this.watermarkText,'this.detailDataForm');
         let str = this.detailDataForm.Type == 1 ? "笔记" : "观点";
         wx.setNavigationBarTitle({
           title: `${str}详情`,
@@ -271,6 +279,20 @@ export default {
             });
       }
     },
+
+    setDisableCapture() {
+      wx.setVisualEffectOnCapture({
+        visualEffect: "hidden",
+        complete: (res) => {
+          console.log(res);
+        },
+      });
+    },
+    closeDisableCapture() {
+      wx.setVisualEffectOnCapture({
+        visualEffect: "none",
+      });
+    },
   },
   onLoad(options) {
     this.detailId = Number(options.id) || 0;
@@ -293,6 +315,7 @@ export default {
         })
         .then((res) => {});
     }
+    this.closeDisableCapture()
   },
   onUnload() {
     if (this.detailId && this.detailId > 0 && this.detailDataForm.HasPermission == 1) {
@@ -305,6 +328,7 @@ export default {
         })
         .then((res) => {});
     }
+    this.closeDisableCapture()
   },
   /** 用户点击分享 */
   onShareAppMessage: function (res) {
@@ -318,6 +342,7 @@ export default {
 
 <style lang="scss" scope>
 .note-and-viewpoint {
+  position: relative;
   padding: 30rpx;
   background: $uni-bg-color;
   .content-item {

pages/index/index.vue

@@ -289,6 +289,7 @@ export default {
       const res = await Mine.getInfo();
       if (res.Ret === 200) {
         this.info = res.Data;
+        res.Data.Mobile && this.$db.set("mobile", res.Data.Mobile);
       }
     },
     // 晨会弹框显示