caimei365-www/src/main/resources/static/js/mixins/cmSysMixins.js

// 统计数据
// 统计类型 1：首页banner；2：直播模块；3：最新活动；4：热门文章；5：新品橱窗；6：活动列表
var cmSysVitaMixins = function () {
    return {
        data() {
            return {
                browseTime: 0,  // 浏览时长初始值为 0
                clearTimeSet: null,
                cmSysParams:{
                    pagePath:'',//页面路径
                    accessDuration:0,//停留时间
                    pageType:'',//页面类型
                    pageLabel:'',//页面标签
                    userId:0,//用户Id
                    productId:0//商品Id
                }
            }

        },
        methods: {
            setTime() {
                //设置定时器
                let _self = this;
                const globalUserData = JSON.parse(localStorage.getItem('userInfo'));
                if(globalUserData){ this.cmSysParams.userId = globalUserData.userId * 1; }
                this.cmSysParams.pagePath = window.location.href;
                this.clearTimeSet = setInterval(() => {
                    _self.browseTime++;
                }, 1000);
            },
            userRecordStatistics(url,data) {// navigator.sendBeacon 方式  发送统计数据
                const blob = new Blob([JSON.stringify(data)], {
                    type: 'application/json; charset=UTF-8',
                });
                navigator.sendBeacon(url, blob);
            },
            beforeunloadHandler(e) {
                this.cmSysParams.accessDuration = this.browseTime*1000
                console.log(`页面路径:${this.cmSysParams.pagePath}`,`停留:${this.cmSysParams.accessDuration}s`,`标签:${this.cmSysParams.pageLabel}`)
                var NODE_ENV_BASE_URL = $("#coreServer").val();
                var url = `${NODE_ENV_BASE_URL}/user/record/StatisticsPc`
                this.userRecordStatistics(url,this.cmSysParams); // 上送后台接口，将浏览时长等信息传到后台，离开当前路由后调用
                clearInterval(this.clearTimeSet); // 离开页面后清除定时器
            },
            handleWindow(type){
                const isBrowser = isPC ? 1 : 0;
                const map = {
                    0: 'pagehide',
                    1: 'beforeunload',
                };
                const FunMap = {
                    0:window.addEventListener(map[isBrowser], e => this.beforeunloadHandler(e)), // 绑定
                    1:window.removeEventListener(map[isBrowser], e => this.beforeunloadHandler(e)) // 接触绑定
                }
                return FunMap[type];
            }
        },
        mounted() {
            // 页面加载完成后开始计时
            this.setTime();
            // 绑定窗口[监听]事件
            this.handleWindow(0)
        },
        destroyed() {
            // 解除窗口关闭[监听]事件
            this.handleWindow(1)
        }
    }
}();