【银保app】添加水印公共js并调用获取代理人信息接口

src/assets/js/utils/warterMark.js

@@ -0,0 +1,54 @@
+// warterMark.js
+'use strict'
+
+let watermark = {}
+
+let setWatermark = (str, str1) => {
+  let id = '1.23452384164.123412415'
+
+  if (document.getElementById(id) !== null) {
+    document.body.removeChild(document.getElementById(id))
+  }
+
+  let can = document.createElement('canvas')// 创建一个画布
+  can.width = 350 // 设置宽度
+  can.height = 150 // 高度
+
+  let cans = can.getContext('2d')
+  cans.rotate(-25 * Math.PI / 180) // 水印旋转角度    0 水平
+  cans.font = '14px Vedana'  // 字体大小
+  cans.fillStyle = '#000' // 水印的颜色
+  cans.textAlign = 'left' // 设置文本内容的当前对齐方式
+  cans.textBaseline = 'Middle' // 设置在绘制文本时使用的当前文本基线
+  cans.globalAlpha = 0.1 // 透明度
+  cans.fillText(str, can.width / 4.5, can.height / 1) // 在画布上绘制填色的文本（输出的文本，开始绘制文本的X坐标位置，开始绘制文本的Y坐标位置）
+  cans.fillText(str1, can.width / 3, can.height / 2.5) // 根据需求可添加多行水印，在方法中添加str1
+
+  let div = document.createElement('div')
+  div.id = id
+  div.style.pointerEvents = 'none'
+  div.style.top = '100px'
+  div.style.left = '0px'
+  div.style.position = 'fixed'
+  div.style.zIndex = '100000'
+  div.style.width = document.documentElement.clientWidth - 30 + 'px'
+  div.style.height = document.documentElement.clientHeight + 'px'
+  div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
+  document.body.appendChild(div)
+  return id
+}
+
+// 该方法只允许调用一次
+watermark.set = (str,str1) => {
+  let id = setWatermark(str,str1)
+  setInterval(() => {
+    if (document.getElementById(id) === null) {
+      id = setWatermark(str,str1)
+    }
+  }, 500)
+  window.onresize = () => {
+    setWatermark(str,str1)
+  }
+}
+
+export default watermark

src/views/YB_APP/policyDetail.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="public_container">
-    <div style="height: 100%; width: 96%; background-color: white; margin: 2vh auto; overflow: hidden; border-radius: 12px">
+    <div class="listContent">
       <van-cell-group inset>
         <van-cell title="产品名称" :value="ybOrderDTOList.riskName" />
         <van-cell title="保单号" :value="ybOrderDTOList.riskCode" />
@@ -20,34 +20,43 @@
 </template>
 
 <script>
-
 import { YBpolicyDetail } from '@/api/YB_APP/index'
+import warterMark from "@/assets/js/utils/warterMark.js"
+import { getAgentInfo } from '@/api/ebiz/my/my.js'
 export default {
   name: 'policyDetail',
   components: {},
   data() {
     return {
-      ybOrderDTOList:'',
-      policyNo:'',
+      ybOrderDTOList: '',
+      policyNo: ''
     }
   },
   mounted() {
+    this.getAgentInfo()
     this.policyNo = this.$route.query.policyNo
-    console.log(this.policyNo,'avc')
+    console.log(this.policyNo, 'avc')
     this.YBpolicyDetail()
   },
   methods: {
-    YBpolicyDetail(){
+    getAgentInfo(){
+      getAgentInfo({}).then(res=>{
+        if(res.result == 0){
+          console.log('123')
+          warterMark.set(res.name+res.jobNo,"")
+        }
+      })
+    },
+    YBpolicyDetail() {
       let params = {
-        policyNo : this.policyNo
+        policyNo: this.policyNo
       }
-      console.log('我是log');
-      YBpolicyDetail(params).then(res => {
-        console.log(res,'我是res')
+      console.log('我是log')
+      YBpolicyDetail(params).then((res) => {
+        console.log(res, '我是res')
         if (res.result == 0) {
           this.ybOrderDTOList = res.content.ybOrderDTO
           console.log(this.ybOrderDTOList, '请求成功的res')
-
         }
       })
     }
@@ -60,13 +69,20 @@ export default {
   height: 100vh;
   width: 100vw;
 }
-/deep/ .van-cell__title{
-  color:#0a0808;
+/deep/ .van-cell__title {
+  color: #0a0808;
   max-width: 30%;
 }
-/deep/ .van-cell__value{
+/deep/ .van-cell__value {
   color: #777676;
   // text-align: left;
 }
-// /deep/ .van-cell-group > 
+// /deep/ .van-cell-group >
+.listContent {
+  width: 96%;
+  background-color: white;
+  margin: 12px auto;
+  overflow: hidden;
+  border-radius: 12px;
+}
 </style>

src/views/YB_APP/policyList.vue

@@ -5,6 +5,7 @@
       <van-search shape="round" v-model="findValue" placeholder="请输入保单号" />
       <button class="searchButton" @click="keywordSearch(findValue)">搜索</button>
     </div>
+    <!-- <div style="width:100%;height:1000px;background:rgba(0, 0, 0, 0.2);"></div> -->
       
       <!-- 右侧搜索按钮 -->
      
@@ -120,6 +121,8 @@ import { Button, Search } from 'vant'
 import { ref } from 'vue'
 import utils from '@/assets/js/utils/date-utils'
 import { YBpolicyListAgent } from '@/api/YB_APP/index'
+import warterMark from "@/assets/js/utils/warterMark.js"
+import { getAgentInfo } from '@/api/ebiz/my/my.js'
 
 export default {
   name: 'policyList',
@@ -182,6 +185,8 @@ export default {
     }, 500)
   },
   mounted() {
+    this.getAgentInfo()
+    
     this.YBpolicyListAgent()
     // 筛选按钮的点击事件
     window.appCallBack = this.appCallBack
@@ -190,6 +195,14 @@ export default {
   },
 
   methods: {
+    getAgentInfo(){
+      getAgentInfo({}).then(res=>{
+        if(res.result == 0){
+          console.log('123')
+          warterMark.set(res.name+res.jobNo,"")
+        }
+      })
+    },
     appCallBack(data, flag) {
       // 筛选按钮的点击事件
       this.showSideBar = true