报告添加水印

src/views/hzyb/activity/reportDetail.vue

@@ -1,10 +1,11 @@
 <script setup>
-import { computed, ref, onMounted } from "vue";
+import { computed, ref, onMounted,nextTick } from "vue";
 import { apiGetReportDetail } from "@/api/hzyb/report.js";
 import { getWxConfig } from '@/api/hzyb/common.js'
 import { useRoute, useRouter } from "vue-router";
 import {ImagePreview } from 'vant'
 import LeaveMessage from '../components/leaveMessage/index.vue'
+import {useWaterMark} from '../hooks/watermark'
 const route = useRoute();
 const router=useRouter()
 document.title = "报告详情";
@@ -32,6 +33,20 @@ localStorage.setItem('hzyb-userId',route.query.userId)
 // }
 // setWxConfig()
 
+//水印盒子
+let waterMarkBox=ref('')
+
+// 获取用户信息
+import {apiUserInfo} from '@/api/hzyb/user'
+const getUserInfo=async ()=>{
+    const { code,data }=await apiUserInfo({Authorization: localStorage.getItem('hzyb-token')})
+    if(code===200){
+        nextTick(()=>{
+            useWaterMark(data.mobile,waterMarkBox)
+        })
+    }
+}
+
 let info = ref(null);
 let topBg=ref(null)
 let noAuth = ref(false);
@@ -66,6 +81,7 @@ const getDetail = async () => {
         topBg.value=temTopBg.default
 
         noAuth.value = false;
+        getUserInfo()
     } else if (res.code == 400) {
         noAuth.value = true;
     }
@@ -166,10 +182,11 @@ const goDetail=(e)=>{
 
         <template v-else>
             <div class="content-wrap" >
-                <div v-for="item in info.ResearchReportTypeContentList" :key="item.sort">
-                <h2 class="content-title">{{item.content_type?item.content_type:'核心观点'}}</h2>
-                <div v-html="item.content" class="content-text"></div>
-            </div>
+                <div class="water-mark-box" ref="waterMarkBox" style="position: absolute;width:100%;height:100%;z-index: 1;opacity: 0.1;"></div>
+                <div v-for="item in info.ResearchReportTypeContentList" :key="item.sort" style="position: relative;z-index: 5;">
+                    <h2 class="content-title">{{item.content_type?item.content_type:'核心观点'}}</h2>
+                    <div v-html="item.content" class="content-text"></div>
+                </div>
             </div>
 
             <!-- 留言点赞模块 -->
@@ -296,6 +313,7 @@ const goDetail=(e)=>{
     z-index: 2;
     padding: 40px 30px;
     line-height: 1.7;
+    overflow: hidden;
     :deep(a){
        word-wrap: break-word;
     }

src/views/hzyb/activity/reportWeekDetail.vue

@@ -1,15 +1,29 @@
 <script setup>
-import { computed, ref, onMounted,watch } from "vue";
+import { computed, ref, onMounted,watch,nextTick } from "vue";
 import { apiGetReportDetail, apiGetWeekReportDetail } from "@/api/hzyb/report.js";
 import { useRoute, useRouter,onBeforeRouteUpdate  } from "vue-router";
 import {ImagePreview } from 'vant'
 import LeaveMessage from '../components/leaveMessage/index.vue'
+import {useWaterMark} from '../hooks/watermark'
 const route = useRoute();
 const router=useRouter()
 document.title = "报告详情";
 localStorage.setItem('hzyb-token',route.query.token)
 localStorage.setItem('hzyb-userId',route.query.userId)
 
+//水印盒子
+let waterMarkBox=ref('')
+
+// 获取用户信息
+import {apiUserInfo} from '@/api/hzyb/user'
+const getUserInfo=async ()=>{
+    const { code,data }=await apiUserInfo({Authorization: localStorage.getItem('hzyb-token')})
+    if(code===200){
+        nextTick(()=>{
+            useWaterMark(data.mobile,waterMarkBox)
+        })
+    }
+}
 
 let info = ref(null);
 let topBg = ref(null)
@@ -32,6 +46,7 @@ const getDetail = async () => {
         topBg.value = temTopBg.default
         getList(res.data.research_report_type_info.research_report_id)
         noAuth.value = false;
+        getUserInfo()
     } else if (res.code == 400) {
         noAuth.value = true;
     }
@@ -122,6 +137,7 @@ onBeforeRouteUpdate(to => {
             <div class="box" @click="showTips"></div>
         </div>
         <div class="content-wrap">
+            <div class="water-mark-box" ref="waterMarkBox" style="position: absolute;width:100%;height:100%;z-index: 1;opacity: 0.1;"></div>
             <div class="top-box">
                 <h2>{{info.research_report_type_info.research_report_type_title}}</h2>
                 <span class="classify-box">
@@ -133,10 +149,10 @@ onBeforeRouteUpdate(to => {
                 v-for="item in info.research_report_type_content_list"
                 :key="item.sort"
             >
-                <h2 class="content-title">
+                <h2 class="content-title" style="position: relative;z-index: 5;">
                     {{ item.content_type ? item.content_type : "核心观点" }}
                 </h2>
-                <div v-html="item.content" class="content-text"></div>
+                <div v-html="item.content" class="content-text" style="position: relative;z-index: 5;"></div>
             </div>
         </div>
         <div class="footer-wrap">
@@ -169,6 +185,7 @@ onBeforeRouteUpdate(to => {
     <LeaveMessage
         :info="info"
         @like_change="giveOrCancelLike"
+        v-if="info"
     />
 
     <!-- 弹窗 -->
@@ -289,6 +306,7 @@ onBeforeRouteUpdate(to => {
     z-index: 2;
     padding: 40px 30px;
     line-height: 1.7;
+    overflow: hidden;
     :deep(a){
        word-wrap: break-word;
     }

src/views/hzyb/hooks/watermark.js

@@ -0,0 +1,24 @@
+/**
+ * 添加水印钩子
+ * @param text  水印文本
+ * @param target    要设置水印的元素
+ */
+
+
+export function useWaterMark(text,target) {
+    if(!target) return
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    ctx.font = "20px Arial";
+    ctx.rotate((-45 * Math.PI) / 200);
+    ctx.fillText(text, 30, 200);
+    ctx.fillText(text, -40, 100);
+
+    // 将canvas的内容转换为base64编码
+    const data = canvas.toDataURL("image/png");
+
+    console.log('水印背景图',data);
+
+    // 将容器的的背景图片设置为生成的base64图片,并平铺
+    target.value.style.background = "url(" + data + ") repeat";
+}

src/views/hzyb/report/ChapterDetail.vue

@@ -20,9 +20,10 @@
         </div>
         <img class="ppt-icon" v-if="hasPPt" @click="goPPtDetail" src="@/assets/hzyb/report/ppt-icon.png" alt="">
       </div>
-      <div class="rich-content">
+      <div class="rich-content" style="position: relative;">
+        <div style="width:100%;height:100%;position: absolute;opacity: 0.1;z-index: 1;" ref="richConBox"></div>
         <!-- <div v-html="info.report_chapter_item.content" v-if="info.auth_ok"></div> -->
-        <div v-if="info.auth_ok">
+        <div v-if="info.auth_ok" style="position: relative;z-index: 5;">
           <ul>
               <li v-for="item in realContent" :key="item" v-html="item"></li>
           </ul>
@@ -166,6 +167,15 @@ export default {
       }
     }
   },
+  watch: {
+    userInfo(n){
+      if(n){
+        this.$nextTick(()=>{
+          this.waterMark(n.mobile,this.$refs.richConBox)
+        })
+      }
+    }
+  },
   data() {
     return {
       showDisclaimers: false, //显示免责声明
@@ -336,6 +346,21 @@ export default {
       }
     },
 
+    //添加水印
+    waterMark(text,target){
+      if(!target) return
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      ctx.font = "20px Arial";
+      ctx.rotate((-45 * Math.PI) / 200);
+      ctx.fillText(text, 30, 200);
+      ctx.fillText(text, -40, 100);
+
+      // 将canvas的内容转换为base64编码
+      const data = canvas.toDataURL("image/png");
+      target.style.background = "url(" + data + ") repeat";
+    },
+
     /*内容分割*/
     splitContentHandle(content) {
         const arr = content.split('</p>');

src/views/hzyb/report/Detail.vue

@@ -66,9 +66,10 @@
                 <img class="ppt-icon" v-if="hasPPt" @click="goPPtDetail" src="@/assets/hzyb/report/ppt-icon.png" alt="">
             </div>
 
-            <div class="rich-content">
+            <div class="rich-content" style="position: relative;">
+                <div style="width:100%;height:100%;position: absolute;opacity: 0.1;z-index: 1;" ref="richConBox"></div>
                 <!-- <div v-html="info.report_info.content" v-if="info.auth_ok"></div> -->
-                <div v-if="info.auth_ok">
+                <div v-if="info.auth_ok" style="position: relative;z-index: 5;">
                     <ul>
                         <li v-for="item in realContent" :key="item" v-html="item"></li>
                     </ul>
@@ -309,6 +310,9 @@ export default {
 
                 if(res.data.auth_ok){
                     this.getReportPPtImg()
+                    this.$nextTick(()=>{
+                        this.waterMark(res.data.permission_check.customer_info.mobile,this.$refs.richConBox)
+                    })
                 }
 
                 // 处理报告标题数据
@@ -387,6 +391,21 @@ export default {
             }
         },
 
+        //添加水印
+        waterMark(text,target){
+            const canvas = document.createElement("canvas");
+            const ctx = canvas.getContext("2d");
+            ctx.font = "20px Arial";
+            ctx.rotate((-45 * Math.PI) / 200);
+            ctx.fillText(text, 30, 200);
+            ctx.fillText(text, -40, 100);
+
+            // 将canvas的内容转换为base64编码
+            const data = canvas.toDataURL("image/png");
+
+            target.style.background = "url(" + data + ") repeat";
+        },
+
         /*内容分割*/
         splitContentHandle(content) {
             const arr = content.split('</p>');