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

import '../scss/index.scss'
import '../scss/page/scene1.scss'

import PhotoSphereViewer from 'photo-sphere-viewer'
import util from './until'

// import Pic from '../img/P3.jpg'
import location from '../img/location.png';
import glass from '../img/glass.png'; //望远镜
import eUrl from '../img/E.png';

var viewer = null
var huntFlag = false

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

// 进度相关
var progressNum = 0
var allStep = 5
var progressFlag = {
    'bear': false,
    'lynx': false,
    'road': false,
    'lookout': false,
    'fox': false
}

var mp4UrlMap = {

}

var huntV = {
    init() {
        this.initSnowView()
        this.handleReady()
        this.getVideoSource()
        this.handleNav()
    },
    initSnowView() {
        viewer = new PhotoSphereViewer({
            container: 'photosphere',
            panorama: 'http://hdzt.duowan.com/s/1806hunter/P3.jpg',
            // panorama: Pic,
            min_fov: 50,
            max_fov: 70,
            navbar: false,
            time_anim: false,
            markers: [
                // 野牛
                {
                    id: 'beer-polygon',
                    polygon_px: [
                        [4115, 1487], [4115, 1696], [4410, 1696],[4410, 1487]
                    ],
                    svgStyle: {
                        fill: 'rgba(255, 255, 255, 0)'
                    }
                },
                {
                    id: 'location-beer',
                    x: 4247,
                    y: 1514,
                    image: location,
                    width: 35,
                    height: 35,
                    anchor: 'bottom center',
                },
                // 野猪
                {
                    id: 'lynx-polygon',
                    polygon_px: [
                        [2160, 1696], [2160, 1834], [2324, 1834],[2324, 1696]
                    ],
                    svgStyle: {
                        fill: 'rgba(255, 255, 255, 0)'
                    }
                },
                {
                    id: 'location-lynx',
                    x: 2225,
                    y: 1726,
                    image: location,
                    width: 35,
                    height: 35,
                    anchor: 'bottom center',
                },
                // 狐狸
                {
                    id: 'fox-polygon',
                    polygon_px: [
                        [5394, 1470], [5394, 1706], [5614, 1706],[5614, 1470]
                    ],
                    svgStyle: {
                        fill: 'rgba(255, 255, 255, 0)'
                    }
                },
                {
                    id: 'location-fox',
                    x: 5546,
                    y: 1514,
                    image: location,
                    width: 35,
                    height: 35,
                    anchor: 'bottom center',
                },
                // 望远镜
                {
                    id: 'glass',
                    x: 310,
                    y: 1000,
                    image: glass,
                    width: 56,
                    height: 59,
                    anchor: 'bottom center',
                },
                // 铁路
                {
                    id: 'location-road',
                    x: 3506,
                    y: 1772,
                    image: location,
                    width: 35,
                    height: 35,
                    anchor: 'bottom center',
                },
            ]
        })
    },
    handleReady() {
        viewer.on('ready', function() {
            $('.loading-bg').hide()
            viewer.rotate({
                x: 0,
                y: 0
            });
            viewer.animate({
                x: 4194,
                y: 1562
            },2000);
        });

        viewer.on('position-updated', function(position) {
            let lgt = position.longitude
            let lat = position.latitude
            if(lgt < 1.07 && lat < 0.008 && !huntFlag) {
                huntFlag = true
                $('#hunter-suggest-modal').fadeIn()
                $('.nav').fadeIn()
            }
        })
    },
    getVideoSource() {
        let vids = ['8893041','8892081','8893039','8892073','8892091','8890691','8890693','8890695','8898389','8897805','8897807','8897809']
        var videoEls = {
            '8892073': 'lookup',
            '8892091': 'hunt',
            '8893041': 'aim',
            '8892081': 'shoot',
            '8893039': 'open',
            '8890691': 'book-lake',
            '8890693': 'book-taiga',
            '8890695': 'book-elden',
            '8898389': 'picVideo',
            '8897805': 'openB',
            '8897807': 'aimB',
            '8897809': 'shootB'
        }
        
        $.ajax({
            type: "GET",
            dataType: "json",
            url: `//video.duowan.com/jsapi/playPageVideoInfo/?vids=${vids.join(',')}`,
            success: function(data) {
                for(var i in data) {
                    let resouce = util.deCodeArg(data[i].c).all,
                        source = resouce.yuanhua || resouce[1300] || resouce[1000] || resouce[350]
                    let name = videoEls[i] 
                    mp4UrlMap[name] = source.src
                }
                document.getElementById('open-video').src = mp4UrlMap['open']
                document.getElementById('aim-video').src = mp4UrlMap['aim']
                document.getElementById('shoot-video').src = mp4UrlMap['shoot']

                document.getElementById('open-video-b').src = mp4UrlMap['openB']
                document.getElementById('aim-video-b').src = mp4UrlMap['aimB']
                document.getElementById('shoot-video-b').src = mp4UrlMap['shootB']

                document.getElementById('book-lake-video').src = mp4UrlMap['book-lake']
                document.getElementById('book-taiga-video').src = mp4UrlMap['book-taiga']
                document.getElementById('book-elden-video').src = mp4UrlMap['book-elden']

                huntC.lookoutClick()
                huntC.playVideo()
            }
        })
    },
    // 导航权限处理
    handleNav() {
        // 初始化加载时
        let permision = localStorage.getItem('hunter_permision')
        if(permision < 3) {
            window.location.href = indexPath
        }
        if(permision == 4) {
            progressFlag = {
                'bear': true,
                'lynx': true,
                'road': true,
                'lookout': true,
                'fox': true
            }
            $('#cur-progress').html(5)
        }
    }
}

var huntC = {
    init() {
        this.modalShow()
        util.bookClick()
        util.toolbarClick()
        util.shooting()
    },
    modalShow() {
        // 点击显示介绍弹窗
        $('.nav').find('.current').click(function() {
            $('#hunter-suggest-modal').fadeIn()
        })
        // 黑熊
        function beerModal() {
            if($('#hunter-beer-modal').css('display') == 'none') {
                $('.pub-modal').hide()
                $('#hunter-beer-modal').fadeIn()
                viewer.animate({
                    x: 4194,
                    y: 1562
                },600);
            }
            if(!progressFlag['bear']){
                progressFlag['bear'] = true
                $('#cur-progress').html(++progressNum)
                progressNum == allStep ? localStorage.setItem('hunter_permision', '4') : ''
                progressNum == allStep ? $('.complete-modal').fadeIn() : ''
            }
        }
        $(document).on('click', '#psv-marker-beer-polygon', function() {
            beerModal()
        })
        $(document).on('click', '#psv-marker-location-beer', function() {
            beerModal()
        })

        // lynx
        function lynxModal() {
            if($('#hunter-lynx-modal').css('display') == 'none') {
                $('.pub-modal').hide()
                $('#hunter-lynx-modal').fadeIn()
                viewer.animate({
                    x: 2231,
                    y: 1756
                },600);
            }
            if(!progressFlag['lynx']){
                progressFlag['lynx'] = true
                $('#cur-progress').html(++progressNum)
                progressNum == allStep ? localStorage.setItem('hunter_permision', '4') : ''
                progressNum == allStep ? $('.complete-modal').fadeIn() : ''
            }
        }
        $(document).on('click', '#psv-marker-lynx-polygon', function() {
            lynxModal()
        })
        $(document).on('click', '#psv-marker-location-lynx', function() {
            lynxModal()
        })

        // fox
        function foxModal() {
            if($('#hunter-fox-modal').css('display') == 'none') {
                $('.pub-modal').hide()
                $('#hunter-fox-modal').fadeIn()
                viewer.animate({
                    x: 5514,
                    y: 1598
                },600);
            }
            if(!progressFlag['fox']){
                progressFlag['fox'] = true
                $('#cur-progress').html(++progressNum)
                progressNum == allStep ? localStorage.setItem('hunter_permision', '4') : ''
                progressNum == allStep ? $('.complete-modal').fadeIn() : ''
            }
        }
        $(document).on('click', '#psv-marker-fox-polygon', function() {
            foxModal()
        })
        $(document).on('click', '#psv-marker-location-fox', function() {
            foxModal()
        })

        $(document).on('click', '#psv-marker-location-road', function() {
            if(!$('#p3-road-pic')[0]){
                var roadHtml =  ` <div class="mod-full-picture" id="p3-road-pic" style="display:none">
                                    <div class="pub-btn go-back">返回</div>
                                    <div class="full-pic-modal small-modal">
                                        <div class="top-bar">
                                            北欧森林
                                        </div>
                                        <div class="container clearfix">
                                            <p>虽然北欧人最喜欢到地中海度假，享受这里的阳光和沙滩。不过南欧的地中海人也是很羡慕北欧的人口稀少，森林密布的环境，那些难忘的原始森林，河流，湖泊，小动物等等。</p>
                                            <p>米兰·昆德拉说,生活在别处。倘若有一处,萃集了生活的美好,又何必另觅他乡? 冰岛的极光,瑞典的冰雪,目眩神驰的北欧风光里,最让人向往的还是森林里一口深呼吸带来的焕然一新。在这个世界上,还有什么比生命的健康活力更重。</p>
                                            <div class="eyes-btn"></div>
                                        </div>
                                    </div>
                                    <div class="fullscreen-video fullscreen-video-picture" style="display: none">
                                        <video id="picture-video" preload="metadata" width="100%">
                                            <source src="${mp4UrlMap['picVideo']}">
                                        </video>
                                        <div class="close-icon close-full-video"></div>
                                    </div>
                                </div>`
                $('body').append(roadHtml)
                util.bgMove($('.mod-full-picture'))
            }
            $('#p3-road-pic').fadeIn()
            if(!progressFlag['road']){
                progressFlag['road'] = true
                $('#cur-progress').html(++progressNum)
                progressNum == allStep ? localStorage.setItem('hunter_permision', '4') : ''
            }
        })

        $(document).on('click', '.eyes-btn', function() {
            $('.fullscreen-video-picture').show()
            var video = document.getElementById('picture-video')
            video.play()
            video.addEventListener("ended",function(){
                video.load()
                $('.fullscreen-video-picture').hide()
            })
        })

        // 完成任务提示弹窗
        $(document).on('click', '.go-back', function() {
            progressNum == allStep ? $('.complete-modal').fadeIn() : ''
        })

        $('.complete-success-btn').click(function() {
            $('.complete-modal').remove()
            $('.book-icon').trigger('click')
        })
    },
    playVideo() {
        $('#hunter-video-play').click(function() {
            if(!$('#hunter-video-suggest')[0]){
                var hunterVideoHtml = `<div class="video-wrapper pub-modal-mask" id="hunter-video-suggest">
                                        <div class="part-screen">
                                            <video controls autoplay id="hunter-video">
                                                <source src="${mp4UrlMap['hunt']}">
                                            </video>
                                            <div class="close-icon close-mask-icon"></div>
                                        </div>
                                    </div>`
                $('body').append(hunterVideoHtml)
            } else {
                $('#hunter-video-suggest').show()
                document.getElementById('hunter-video').play()
            }
        })
    },
    // 瞭望台
    lookoutClick() {
        var videoHtml = `<div class="fullscreen-video fullscreen-video-lookout">
                            <video id="lookout-video" autoplay width="100%">
                                <source src="${mp4UrlMap['lookup']}">
                            </video>
                            <div class="close-icon close-full-video"></div>
                        </div>` 
        $(document).on('click', '#psv-marker-glass', function() {
            if(!$('#lookout-hunt-pic')[0]){
                var lookOutHtml =  ` <div class="mod-full-picture" id="lookout-hunt-pic" style="display:none">
                                        <div class="pub-btn go-back">返回</div>
                                        <img class="e-tips" src="${eUrl}" alt="">
                                    </div>`
                $('body').append(lookOutHtml)
            }
            $('#lookout-hunt-pic').fadeIn()

            if(!progressFlag['lookout']){
                progressFlag['lookout'] = true
                $('#cur-progress').html(++progressNum)
                progressNum == allStep ? localStorage.setItem('hunter_permision', '4') : ''
            }
        })
        // 监听E键
        $(document).on('keyup', function(e) {
            var lookVideo = document.getElementById('lookout-video')
            var isShow = $('#lookout-hunt-pic').css('display') == 'none' ? false : true;
            if(isShow) {
                if(e.keyCode == 69) {
                    if(lookVideo) {
                            $('#lookout-hunt-pic').find('.fullscreen-video').fadeIn()
                            lookVideo.play()
                    } else{
                        $('#lookout-hunt-pic').append(videoHtml)
        
                        lookVideo = document.getElementById('lookout-video')
        
                        lookVideo.play()
                    } 
                    lookVideo.addEventListener("ended",function(){
                        lookVideo.load()
                        lookVideo.pause()
                        $('.fullscreen-video-lookout').hide()
                        $('#lookout-hunt-pic').hide()
                    })
                }

            }
        })
    },
}

util.animateModal()
util.handleModel()
huntV.init()
huntC.init()