mgm-daylight-mcrm-mobile-ios/store/watermark.js

/**
 * uniapp全局水印插件（支持排除特定页面）
 */
import store from '@/store/index.js'
export default {
  install(app, options = {}) {
    // 默认配置
    const defaultOptions = {
      defaultContent: 'Cannot get user data',
      width: 170, // 水印宽度
      height: 170, // 水印高度
      fontSize: 16, // 字体大小
      color: 'rgba(0, 0, 0,0.1)', // 水印字体颜色及透明度
      rotate: -30, // 旋转角度
      zIndex: 9999, // 在哪一层
      salesSupportPaths: ['/salessupport/todoList/todoList','/pages/playerDetail/playerDetail'],
    };
    
    const opts = { ...defaultOptions, ...options };
    let watermarkEl = null;
    let currentContent = '';
    
    // 获取当前页面路径
    function getCurrentPagePath() {
      const pages = getCurrentPages();
      if (pages.length) {
        const currentPage = pages[pages.length - 1];
        return `/${currentPage.route}`;
      }
      return '';
    }
    
    // 检查是否为SaleSupport相关页面
    function isSalesSupportPathsPage() {
      const currentPath = getCurrentPagePath();
      //console.log('[Watermark] Checking path:', currentPath);
      //console.log('[Watermark] Configured paths:', opts.salesSupportPaths);
      const isMatch = opts.salesSupportPaths.some(path => {
        const matches = currentPath.includes(path);
        //console.log('[Watermark] Path check:', currentPath, 'includes', path, '=', matches);
        return matches;
      });
      //console.log('[Watermark] Final match result:', isMatch);
      return isMatch;
    }
    
    // 创建水印元素
    function createWatermark(content) {
      // #ifdef H5
      const canvas = document.createElement('canvas');
      canvas.width = opts.width;
      canvas.height = opts.height;
      
      const ctx = canvas.getContext('2d');
      ctx.rotate(opts.rotate * Math.PI / 180);
      ctx.font = `${opts.fontSize}px sans-serif`;
      ctx.fillStyle = opts.color;
      ctx.textAlign = 'left';
      ctx.textBaseline = 'middle';
      ctx.fillText(content, canvas.width / 10, canvas.height / 2);
      
      return canvas.toDataURL('image/png');
      // #endif
      
      // #ifdef APP-PLUS
      // App端使用CSS方式创建水印
      return `data:image/svg+xml;base64,${btoa(`
        <svg xmlns="http://www.w3.org/2000/svg" width="${opts.width}" height="${opts.height}">
          <text x="50%" y="50%" 
                font-family="sans-serif" 
                font-size="${opts.fontSize}" 
                fill="${opts.color}" 
                text-anchor="middle" 
                dominant-baseline="middle"
                transform="rotate(${opts.rotate} ${opts.width/2} ${opts.height/2})">
            ${content}
          </text>
        </svg>
      `)}`;
      // #endif
    }
    
    // 更新水印
    function updateWatermark(force = false) {
      //console.log('[Watermark] updateWatermark called, force:', force);
      //console.log('[Watermark] Current page path:', getCurrentPagePath());
      //console.log('[Watermark] Is sales support page:', isSalesSupportPathsPage());
		
      if (!isSalesSupportPathsPage()) {
        // #ifdef H5
        if (watermarkEl) {
          watermarkEl.style.display = 'none';
          //console.log('[Watermark] Hidden watermark (not sales support page)');
        }
        // #endif
        
        // #ifdef APP-PLUS
        // App端通过事件通知隐藏水印
        uni.$emit('watermark-hide');
        //console.log('[Watermark] Sent watermark-hide event for App');
        // #endif
        return;
      }
      
      // #ifdef H5
      // H5端使用DOM方式
      const userData = uni.getStorageSync('userData');
      //console.log('[Watermark] User data:', userData);
      
      const h5Content = !isSalesSupportPathsPage() 
        ? opts.defaultContent 
        : (userData && userData.userName && userData.userId ? userData.userId + userData.userName : opts.defaultContent);
        
      //console.log('[Watermark] H5 content:', h5Content);
      //console.log('[Watermark] Current content:', currentContent);
      
      if (!watermarkEl) {
        //console.log('[Watermark] Creating watermark element for H5');
        watermarkEl = document.createElement('div');
        watermarkEl.className = 'global-watermark';
        watermarkEl.style.cssText = `
          position: fixed;
          top: 50px;
          left: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
          z-index: ${opts.zIndex};
		  font-weight: bold;
        `;
        document.body.appendChild(watermarkEl);
      } else {
        watermarkEl.style.display = 'block';
        //console.log('[Watermark] Showing existing watermark element for H5');
      }
      
      if (h5Content !== currentContent || force) {
        currentContent = h5Content;
        const watermarkUrl = createWatermark(h5Content);
        //console.log('[Watermark] Generated watermark URL for H5:', watermarkUrl.substring(0, 100) + '...');
        watermarkEl.style.backgroundImage = `url("${watermarkUrl}")`;
        //console.log('[Watermark] Applied watermark to H5 element');
      }
      // #endif
      
      // #ifdef APP-PLUS
      // App端水印显示逻辑
      const currentPath = getCurrentPagePath();
      if (currentPath.includes('/todoList/todoList')||currentPath.includes('/playerDetail/playerDetail')) {
        //console.log('[Watermark] Path matches todoList, checking user data');
        
        const userData = uni.getStorageSync('userData');
        //console.log('[Watermark] User data:', userData);
        
        // 组合用户名和用户ID作为水印内容
        const appContent = userData && userData.userName && userData.userId 
          ? `${userData.userName} ${userData.userId}`
          : opts.defaultContent;
        
        //console.log('[Watermark] App content:', appContent);
        //console.log('[Watermark] Current content:', currentContent);
        
        // 总是更新内容并发送事件
        currentContent = appContent;
        //console.log('[Watermark] Sending watermark-show event for App with content:', appContent);
        uni.$emit('watermark-show', appContent);
        //console.log('[Watermark] Event sent successfully');
      }
      // #endif
    }
    
    // 初始化路由监听
    function initRouteWatcher() {
      // 轮询检查页面变化
      let lastPagesLength = 0;
      setInterval(() => {
        const pages = getCurrentPages();
        if (pages.length !== lastPagesLength) {
          lastPagesLength = pages.length;
          updateWatermark();
        }
      }, 300);
    }
    
    // 全局混入
    app.mixin({
      onLoad() {
        this.$nextTick(updateWatermark);
      },
      onShow() {
        updateWatermark();
      },
      mounted() {
        // 监听用户状态变化
        this.userWatcher = store?.watch(
          (state) => state.user?.name,
          () => updateWatermark()
        );
      },
      beforeUnmount() {
        // 清理监听器
        if (this.userWatcher) {
          this.userWatcher();
        }
      }
    });
    
    // 初始化
    initRouteWatcher();
    setTimeout(updateWatermark, 100);
  }
};