dwweb-pc/2018专题/1806全景图专题-商务/js/until.js

var userDown = false //用户鼠标判断
var bgMove = false

var indexPath = $('body').attr('data-path')

var until = {
    // 浮层动画
    animateModal() {
        var w = document.body.offsetWidth/2;
        var h = document.body.offsetHeight/2;
        
        var modal = document.getElementsByClassName('animate-wrap');
        var $moveBg = $('.comment-page').find('.move-bg') //评论背景移动
        var $fullBg = $('.mod-full-picture')

        document.body.onmousedown = function (event) {
            userDown = true
        }
        document.body.onmouseup = function (event) {
            userDown = false
        }
        document.body.onmousemove = function (event) {
            var mx = event.clientX,
                my = event.clientY;
            if(userDown) {
                for (var i=0; i<modal.length; i++) {
                    modal[i].style.marginLeft=(w-mx)/60 +'px';
                    modal[i].style.marginTop=(h-my)/40 +'px';
                }
            }
            if(bgMove) {
                $moveBg.css({
                    'backgroundPositionX': (w-mx)/120,
                    'backgroundPositionY': (h-my)/80
                })
            }
            $fullBg.css({
                'backgroundPositionX': (w-mx)/100,
                'backgroundPositionY': (h-my)/60
            })
        }
    },
    bgMove($item) {
        var w = document.body.offsetWidth/2;
        var h = document.body.offsetHeight/2;
        document.body.onmousemove = function (event) {
            var mx = event.clientX,
                my = event.clientY;
 
            $item.css({
                'backgroundPositionX': (w-mx)/100,
                'backgroundPositionY': (h-my)/60
            })
        }
    },
    handleModel() {
        // 点击背景关闭弹窗
        $(document).on('click', '.pub-modal-mask', function() {
            until.pauseVideo()
            $(this).fadeOut()
        })
        $(document).on('click', '.part-screen', function(e) {
            return false
        })
        $(document).on('click', '.close-mask-icon', function() {
            until.pauseVideo()
            $(this).parents('.pub-modal-mask').fadeOut()
        })
        $(document).on('click', '.close-full-video', function() {
            until.pauseVideo()
            $(this).parents('.fullscreen-video').fadeOut()
        })
        $(document).on('click', '.close-icon', function() {
            $(this).parents('.pub-modal').fadeOut()
        })
        $(document).on('click', '.go-back', function() {
            $('.mod-full-picture').fadeOut()
        })
    },
    pauseVideo() {
       // video暂停播放
       var videoDom = document.getElementsByTagName('video')
       for(let i = 0; i < videoDom.length; i++) {
           videoDom[i].pause()
       }
    },
    decr(r) {
        var e = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@!~*-_.()'".split("");
        var n = [];
        var a = [];
        r.split("").reverse().forEach(function (r, t) {
            var o = e.indexOf(r);
            if (parseInt((t + 1) % 2) == 1) {
                a.push(o)
            } else {
                var p = parseInt(o - a[(t + 1) / 2 - 1]);
                n.push(e[p])
            }
        });
        var t = n.join("").replace(/@/g, "%");
        return decodeURIComponent(t)
    },
    /**
     * 解密数据
     */
    deCodeArg(target) {
        var srcMap = {};
        if (JSON.parse) {
            srcMap = JSON.parse(until.decr(target));
        } else {
            srcMap = eval('(' + until.decr(target) + ')');
        }
        return srcMap;
    },
    //立即预约
    bookClick() {
        function bookAnimate() {
            $('.book-modal-1').removeClass('fade-in').addClass('bounceInLeft')
            $('.book-modal-2').removeClass('fade-in').addClass('bounceInRight')
            $('.poster-wrapper').removeClass('fade-in').addClass('bounceInUp')
            $('.bear').removeClass('fade-in').addClass('bounceInLeft')
            $('.deer').removeClass('fade-in').addClass('bounceInRight')
        }

        $('.book-icon').click(function() {
            $('.page-comment').hide()
            $('.page-book').show()
            $('.mod-btn').removeClass('active')
            $('.book-btn').addClass('active')
            $('.comment-page').fadeIn()
            bookAnimate()

            bgMove= true
        })
        // 返回
        $('#book-gack-btn').click(function() {
            $('.comment-page').fadeOut()
            bgMove = false
        })
        
        // 切换评论页
        $('.book-header').find('.mod-btn').click(function() {
            var $this = $(this)
            $('.mod-btn').removeClass('active')
            $this.addClass('active')
            var tab = $this.attr('data-tab')
            if(tab == 'comment') {
                $('.page-book').hide()
                $('.page-comment').show()
            } else if(tab == 'book') {
                bookAnimate()
                $('.page-comment').hide()
                $('.page-book').show()
            }
        })
        
        // 预约成功
        var successModal = `<div class="progress-modal reset-modal book-success-modal" style="display: block;">
                                <p class="tips">预约成功！</p>
                                <div class="btn-wrap">
                                    <div class="btn success-btn book-success-btn">是</div>
                                </div>
                            </div>`
        $('.book-btn-bottom').click(function() {
            $('.comment-page').append(successModal)
        })
        $('.comment-page').on('click', '.book-success-btn', function() {
            $('.book-success-modal').remove()
        })

        // 视频播放
        $('.poster-lake').click(function() {
            $('.book-video').hide()
            $('#book-video-wrapper').show()
            $('#book-lake-video').show()
            document.getElementById('book-lake-video').play()
        })
        $('.poster-taiga').click(function() {
            $('.book-video').hide()
            $('#book-video-wrapper').show()
            $('#book-taiga-video').show()
            document.getElementById('book-taiga-video').play()
        })
        $('.poster-elden').click(function() {
            $('.book-video').hide()
            $('#book-video-wrapper').show()
            $('#book-elden-video').show()
            document.getElementById('book-elden-video').play()
        })
    },
    // 右上角工具栏
    toolbarClick() {
        // 暂停
        $('.toolbar-box').find('.bgm-icon').click(function() {
            var $this = $(this)
            var audio = document.getElementById('bgm-audio')
            if($this.hasClass('pause')) {
                audio.play()
                $this.removeClass('pause')
            } else {
                audio.pause()
                $this.addClass('pause')
            }
        })

        // 评论
        $('.toolbar-box').find('.comment-icon').click(function() {
            $('.comment-btn').trigger('click')
            $('.comment-page').fadeIn()
            bgMove = true
        })

        // 重置进度
        $('.toolbar-box').find('.reset-icon').click(function() {
           $('.reset-modal').fadeIn()
        })

        $('.yes-btn').click(function() {
            localStorage.removeItem('hunter_permision')
            localStorage.removeItem('entry')
            window.location.href = indexPath
        })

        $('.no-btn').click(function() {
            $('.reset-modal').fadeOut()
        })
    },
    //确认装备 
    shooting() {

        var step = 1 //步骤
        var openVideo = document.getElementById('open-video')
        var aimVideo = document.getElementById('aim-video')
        var shootVideo = document.getElementById('shoot-video')

        $('.start-equit-btn').click(function() {
            $('#equit-video-wrap').fadeIn()
            if(step == 3) {
                shootVideo.play()
            }
        })
        
        $('.close-equit-btn').click(function() {
            $('#equit-video-wrap').hide()
            $('.equit-success').hide()
            $('.open-jin-tips').show()
            $('#equit-modal').hide()
            $(openVideo).show()
            $(shootVideo).hide()
            openVideo.currentTime = 0
            aimVideo.currentTime = 0
            shootVideo.currentTime = 0
            step = 1
        })

        openVideo.addEventListener("ended",function(){
            if(step == 1) {
                $(openVideo).hide();
                $(aimVideo).show();
                $('.space-tips').show()
            }
            step ++
        })
        aimVideo.addEventListener("ended",function(){
            if(step == 2) {
                $(aimVideo).hide();
                $(shootVideo).show();
                $('.space-tips').hide();
                $('.open-qiang-tips').show()
            }
            step ++
        })
        shootVideo.addEventListener("ended",function(){
            $('.equit-success').fadeIn()
            document.getElementById('hunter-audio').play()
        })
        $(document).on('keyup', function(e) {
            var isShow = $('#equit-video-wrap').css('display') == 'none' ? false : true
            console.log(e.keyCode)
            if(isShow) {
                if(e.keyCode == 70 && step == 1){
                    $('.open-jin-tips').hide()
                    openVideo.play()
                }
                if(e.keyCode == 32 && step == 2){
                    $('.space-tips').show()
                    aimVideo.pause()
                }
                if(e.keyCode == 70 && step == 3){
                    $('.open-qiang-tips').hide()
                    shootVideo.play()
                }
            }
        })

        $(document).on('keydown', function(e) {
            if(e.keyCode == 32 && step == 2){
                $('.space-tips').hide()
                aimVideo.play()
            }
        })
    },
}

export default until