jy/src/web/staticres/common-module/yearEndReport/js/index.js

function initSwiper() {
    var interleaveOffset = 0.5; //视差比值

    function playAnOfIndex(index, type = true, delay = 0) {
        setTimeout(function () {
            var tempNode = $('.swiper-container .slide-inner').eq(index).find('*[animate-name]')
            $(tempNode).each(function () {
                var anName = $(this).attr('animate-name')
                var anDelay = $(this).attr('animate-delay') || '200'
                if (type) {
                    $(this).addClass(anName)
                    $(this).css('animation-delay', anDelay + 'ms')
                } else {
                    tempNode.removeClass(anName)
                }
            })
        }, delay)
    }

    var swiperOptions = {
        loop: false,
        speed: 1000,
        grabCursor: true,
        watchSlidesProgress: true,
        mousewheelControl: false,
        direction: 'vertical',
        mousewheel: true,
        //设置宽度为全屏
        width: window.innerWidth,
        height: window.innerHeight,
        allowSlideNext: false,
        lazy: {
            loadPrevNext: true,
        },
        on: {
            init: function () {
                playAnOfIndex(0, true, 1000)
            },
            slideChangeTransitionStart: function () {
                var index = this.activeIndex
                playAnOfIndex(index, false)
            },
            slideChangeTransitionEnd: function () {
                var index = this.activeIndex
                playAnOfIndex(index)
            },
            slideChange: function () {
                var index = this.activeIndex
                playAnOfIndex(index)
            },
            progress: function () {
                for (var i = 0; i < this.slides.length; i++) {
                    var slideProgress = this.slides[i].progress;
                    var innerOffset = this.width * interleaveOffset;
                    var innerTranslate = slideProgress * innerOffset;
                    this.slides[i].querySelector(".slide-inner").style.transform =
                        "translate3d(0," + innerTranslate + "px, 0)";
                }
            },
            touchStart: function () {
                for (var i = 0; i < this.slides.length; i++) {
                    this.slides[i].style.transition = "";
                }
            },
            setTransition: function (speed) {
                for (var i = 0; i < this.slides.length; i++) {
                    this.slides[i].style.transition = speed + "ms";
                    this.slides[i].querySelector(".slide-inner").style.transition =
                        speed + "ms";
                }
            }
        }
    };

    var swiper = new Swiper(this.$refs.mySwiper, swiperOptions);
    this.$swiper = swiper
}

function initPlayMusic() {
    var isAutoPlayMusic = false
    var bgvid = document.getElementById("audio");
    var b_music = document.getElementById('music-control-box')
    var fullbox = document.querySelector('body');

    fullbox.addEventListener('touchstart', function () {
        if (isAutoPlayMusic) {
            isAutoPlayMusic = false
            bgvid.play()
            b_music.classList.add('run-music')
        }
    }, false);

    bgvid.addEventListener("playing", function () {
        b_music.style.display = 'block'
        b_music.classList.add('run-music')
    });
    bgvid.addEventListener("pause", function () {
        b_music.classList.remove('run-music')
    });
    b_music.addEventListener('click', function (e) {
        if (b_music.classList.contains('run-music')) {
            bgvid.pause()
            b_music.classList.remove('run-music')
        } else {
            bgvid.play()
            b_music.classList.add('run-music')
        }
    })
}

function dateTime(date, fmt) {
    if (fmt === void 0) {
        fmt = 'yyyy年MM月dd日 hh:mm';
    }

    // 时间戳转换
    if (!date) return '';
    var d = new Date(date);
    var o = {
        "M+": d.getMonth() + 1,
        //月份
        "d+": d.getDate(),
        //日
        "h+": d.getHours(),
        //小时
        "m+": d.getMinutes(),
        //分
        "s+": d.getSeconds() //秒

    }; // 根据y的长度来截取年

    if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (d.getFullYear() + "").substr(4 - RegExp.$1.length));
    }

    for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
    }

    return fmt;
}

const pageInfo = {
    // 用户信息
    user_name: '醉纸鸢',
    user_head: 'https://www.jianyu360.cn/images/auto.png',
    share_link: 'https://www.jianyu360.cn/images/auto.png',
    // 是否新用户
    is_new: false,
    // 注册时间 秒
    registration_time: 1644249599,
    // 距离今天的天数
    total_days: 100,
    // 近一年登录天数
    login_days: 50,
    // 深夜登录天数
    active_days: -1,
    // 最关注的项目名称
    focus_project: '最关注的项目名称',
    // 浏览信息次数
    view_total: 1000,
    // 搜索次数
    search_total: 999,
    // 企业/项目关注数量
    follow_total: -1,
    // 繁忙月份
    active_month: 7,
    // 行业发布数据条数
    industry_total: 99,
    // 体验新功能列表
    exp_list: ['大会员', '超级订阅', '数据导出', '行业解决方案'],
    // 结果页type
    result: 1
}

var vPage = new Vue({
    el: '.jy-report',
    delimiters: ['${', '}'],
    data: function () {
        return {
            pageInfo: pageInfo,
            showToastText: false,
            readPact: false
        }
    },
    created: function () {
        this.getPageInfo()
    },
    filters: {
        dateFormat: function (value) {
            return dateTime(value * 1000, 'yyyy年MM月dd日')
        }
    },
    mounted: function () {
        initPlayMusic()
        initSwiper.bind(this)()
    },
    methods: {
        goResult: function () {
            location.href = './yearEndReportResult'
        },
        getPageInfo: function () {
            var _this = this
            $.ajax({
                url: '/publicapply/active/yearEndReport',
                type: 'GET',
                success: function (res) {
                    console.log(res)
                },
                error: function () {
                    var res = {
                        "error_code": 0,
                        "error_msg": "",
                        "data": {
                            "user_name": "微信",
                            "user_head": "/upload/2021/03/26/2021032609182610879.jpg",
                            "registration_time": 1462779190,
                            "login_days": 108,
                            "active_days": 11,
                            "view_total": 175,
                            "search_total": 67,
                            "follow_total": 17,
                            "active_month": 11,
                            "industry_total": 680708,
                            "exp_list": [
                                "大会员",
                                "超级订阅"
                            ],
                            "focus_project": [
                                "计算机",
                                "信息技术"
                            ],
                            "total_days": 2076,
                            "is_new": false,
                            "result": 7,
                            "share_link": "https://web-wky.jydev.jianyu360.com/active/yearEndReport?from=share"
                        }
                    }
                    if (res && res.error_msg === '' && res.data) {
                        _this.pageInfo = res.data
                    }
                }
            })
        },
        changeReadPact: function () {
            if (this.$swiper.activeIndex === 0 && this.readPact) {
                return
            }
            this.$swiper.allowSlideNext = this.readPact
        },
        goStart: function () {
            if (!this.readPact) {
                return this.showToast('请先阅读并同意授权协议')
            }
            this.$swiper.allowSlideNext = this.readPact
            this.$swiper.slideNext()
        },
        showToast: function (str, delay = 1500) {
            this.showToastText = str
            setTimeout(() => {
                this.showToastText = false
            }, delay)
        }
    }
})