pfhwyigou/frontend/web/overseas/js/lpindex/lpindex.js

$(function () {
// 房贷计算 下拉框
    $(".lst_box").on({
        mouseover: function () {
            $(this).children("i").addClass('cur')
            $(this).children(".lst_cun").show();
        },
        mouseout: function () {
            $(this).children("i").removeClass('cur')
            $(this).children(".lst_cun").hide();
        }
    });
})


// v2 轮播
$(document).ready(function(){                          
    var index=0;
    var length=$(".js_yv2_banner_image ul li").length;
    var i=1;
    
    //关键函数：通过控制i ，来显示图片
    function showImg(i){
        $(".js_yv2_banner_image ul li").eq(i).stop(true,true).fadeIn(800).siblings("li").hide();
        $(".js_small_list ul li").eq(i).addClass("on").siblings().removeClass("on");
        
        $('body .video_puic').find('video').trigger("pause");
        $('body .video_puic').find('video').removeClass('play');
        $('body .video_puic').find('video').addClass('pause');
    }
    
    function slideNext(){
        if(index >= 0 && index < length-1) {
                ++index;
                showImg(index);
        }else{
            showImg(0);
            index=0;
            aniPx=(length-5)*132+'px'; //所有图片数 - 可见图片数 * 每张的距离 = 最后一张滚动到第一张的距离
            $(".js_small_list ul li").animate({ "left": "+="+aniPx },200);
            i=1;
            return false;
        }
        if(i<0 || i>length-5) {return false;}                         
                $(".js_small_list ul li").animate({ "left": "-=132px" },200)
                i++;
    }
        
    function slideFront(){
        if(index >= 1 ) {
                --index;
                showImg(index);
        }
        if(i<2 || i>length+5) {return false;}
                $(".js_small_list ul li").animate({ "left": "+=132px" },200)
                i--;
    }   
    $(".js_yv2_banner_image ul li").eq(0).show();
    $(".js_small_list ul li").eq(0).addClass("on");
    $(".js_small_list ul").width((length*132)+'px')
    $(".js_left_btn").click(function(){
        slideFront();
    })
    $(".js_right_btn").click(function(){
        slideNext();
    })
    $(".js_small_list ul li").click(function(){
        index  =  $(".js_small_list ul li").index(this);
        showImg(index);
    }); 


    var randomX = 0;
    var randomY = 14;
    var randvalue = parseInt(Math.random() * (randomX - randomY + 1) + randomY);
    $('.yv2Home_zx_r em img').attr('src','/overseas/img/v2image/tx_ico'+randvalue+'.png');
    
})






// 楼盘首页  户型 ajax
$(function () {
    var typeId=$('.js_yv2_Homehx_nav a').eq(0).attr('data-type')
    var typeHid=$('.js_yv2_Homehx_nav a').eq(0).attr('data-hid')
    $('.js_yv2_Homehx_nav a').eq(0).addClass('on').siblings().removeAttr('on')
    typeList(typeId,typeHid)
    $('.js_yv2_Homehx_nav a').on('click',function(){
        typeId=$(this).attr('data-type')
        typeHid=$(this).attr('data-hid')
        $(this).addClass('on').siblings().removeClass('on');
        typeList(typeId,typeHid)
    })
})

function typeList(typeid,hid){
    $.post('/json/housetypeall', {hid: hid, type_id: typeid, csrf_token_f: csrfToken}, function (data) {
        var echodataUl = $('.js_yv2_Homehx_list ul');
        echodataUl.html('');
        var data = data.data;
        var html = '';
        $.each(data, function (key, val) {
            if(key<3){
                var randomX = 0;
                var randomY = 14;
                var randvalue = parseInt(Math.random() * (randomX - randomY + 1) + randomY);
                html += '<li>';
                html += '<div class="left_main">';
                html += '<a href="/house/typedetails/'+val.hid+'?daid='+key+'&type_id='+val.type_id+'">';
                html += '<div class="left_img">';
                html += '<img src="'+val.img+'" alt="">';
                if (val.type_id=='vr') {
                    html += '<div class="vvid_pic_ico vr-animation-forever"></div>';
                };
                html += '</div>';
                html += '<div class="right_text">';
                html += '<p class="hx_m">'+val.title+'</p>';
                html += '<p class="js_m">'+val.indoor_info+'</p>';
                html += '<p class="mj_m">(建筑面积) '+val.area+'</p>';
                html += '<p class="style_m">';
                html += '<i>户型方正</i>';
                html += '<i>南北通透</i>';
                html += '</p>';
                html += '</div>';
                html += '</a>';
                html += '</div>';
                html += '<div class="hx_hqbj">';
                html += '<a href="javascript:;" class="pic_jjtz" data-buttom="立即获取报价" data-title="户型报价" data-hid="'+val.hid+'" data-text="提交号码可获取户型报价、首付、月供 详细报价单。" data-source="128">';
                html += '<p class="ico"><img src="/overseas/img/v2image/tx_ico'+randvalue+'.png" alt=""></p>';
                html += '<p class="text_m">户型报价</p>';
                html += '</a>';
                html += '</div>';
                html += '</li>';
            }
        })
        echodataUl.html(html);
    })
}

/* v2 新增 悬挂扫码  */
$('.js_honeganbi').on('click',function(){
    $('.js_yv2_saomaBox').hide();
})
var _liUrl=$('#yv2_saomaBox').attr('src');
var qrcode = new QRCode(document.getElementById('yv2_saomaBox'), {
    width : 122,  //设置宽高
    height : 122,
});
qrcode.makeCode(_liUrl);



/*-----------------------------------------百度地图-----------------------------------------------------------*/

// 楼盘首页地图
$(function () {
    //获取周边配套
    $('.y_lpmap_lsit ul li').on('click', function () {
        $(this).addClass('on').siblings().removeClass('on');
        var _data = $(this).find('span').text(); //选择中的内容

        var _longitude = $('#y_lpmap').attr('data-jwd'); //获取经纬度

        var pintx = _longitude.split(',')[0];
        var pinty = _longitude.split(',')[1];
        _longitude = new BMap.Point(pintx, pinty);
        doSearch(_data, _longitude);//调用地图弹窗

    })

});

// 百度地图API功能
var map = new BMap.Map("y_lpmap");
var _lTude = $('#y_lpmap').attr('data-jwd');         //获取经纬度
var _lJg = $('#y_lpmap').attr('data-jg');         //获取楼盘价格
var _lTitle = $('#y_lpmap').attr('data-title');         //获取楼盘标题

var pintx = _lTude.split(',')[0];
var pinty = _lTude.split(',')[1];
_lTude = new BMap.Point(pintx, pinty);

map.centerAndZoom(_lTude, 15);
map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用

// 复杂的自定义覆盖物
function ComplexCustomOverlay(_lTude, text, mouseoverText) {
    this._point = _lTude;
    this._text = text;
    this._overText = mouseoverText;
}

ComplexCustomOverlay.prototype = new BMap.Overlay();
ComplexCustomOverlay.prototype.initialize = function (map) {
    this._map = map;
    var div = this._div = document.createElement("div");
    div.style.position = "absolute";
    div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
    div.style.backgroundColor = "#EE5D5B";
    div.style.border = "1px solid #BC3B3A";
    div.style.color = "white";
    div.style.height = "12px";
    div.style.padding = "2px";
    div.style.lineHeight = "10px";
    div.style.whiteSpace = "nowrap";
    div.style.MozUserSelect = "none";
    div.style.fontSize = "12px"
    var span = this._span = document.createElement("span");
    div.appendChild(span);
    span.appendChild(document.createTextNode(this._text));
    var that = this;

    var arrow = this._arrow = document.createElement("div");
    arrow.style.background = "url(http://map.baidu.com/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat";
    arrow.style.position = "absolute";
    arrow.style.width = "11px";
    arrow.style.height = "10px";
    arrow.style.top = "16px";
    arrow.style.left = "10px";
    arrow.style.overflow = "hidden";
    div.appendChild(arrow);

    div.onmouseover = function () {
        this.style.backgroundColor = "#6BADCA";
        this.style.borderColor = "#3487ab";
        this.getElementsByTagName("span")[0].innerHTML = that._overText;
        arrow.style.backgroundPosition = "0px -20px";
    }

    div.onmouseout = function () {
        this.style.backgroundColor = "#EE5D5B";
        this.style.borderColor = "#BC3B3A";
        this.getElementsByTagName("span")[0].innerHTML = that._text;
        arrow.style.backgroundPosition = "0px 0px";
    }

    map.getPanes().labelPane.appendChild(div);

    return div;
}
ComplexCustomOverlay.prototype.draw = function () {
    var map = this._map;
    var pixel = map.pointToOverlayPixel(this._point);
    this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
    this._div.style.top = pixel.y - 30 + "px";
}
var txt = _lTitle, mouseoverTxt = txt + " " + _lJg;
var myCompOverlay = new ComplexCustomOverlay(_lTude, _lTitle, mouseoverTxt);

map.addOverlay(myCompOverlay);

//map展现结果的地图实例
//autoViewport检索结束后是否自动调整地图视野,false 不调整地图视野
var local = new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: true}});

//地址检索
function doSearch(Odata, Opoint) {
    var address = Odata;
    local.searchNearby(address, Opoint);
}


/*----------------------------------地图END--------------------------------------------*/

// 价格走势
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var dataText = $('.js_y_lptitle h2').text();
var dataYear = [];
var dataPrice = [];
var oid = $('.js_y_lptitle').attr('data-id');      //获取楼盘ID


$.ajax({
    type: 'POST',
    url: '/json/houseprice',
    data: {id: oid, csrf_token_f: csrfToken},
    async: false,
    dataType: 'json',
    success: function (data) {
        if (data.code == 200) {
            // console.log(data)
            var data = data.data;
            dataPrice = data.data;
            dataYear = data.categories;
        } else {
            $('.y_lptrend').hide();
        }

    }
})
// console.log(dataPrice)
// console.log(dataYear)

option = null;
option = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        // data:['碧桂园房价','陵水房价'],
        data: [dataText],        //楼盘名称
        right: '50px',
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: dataYear        //日期

    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value}元/㎡'
        }
    },
    series: [
        {
            name: dataText,      //楼盘名称
            type: 'line',
            data: dataPrice,     //价格
            color: ['#00aeff'],
            symbolSize: 8,
            itemStyle: {
                normal: {
                    color: '#00aeff',
                    borderColor: '#00aeff',
                }
            },
        }
        // {
        //     name:'碧桂园房价',
        //     type:'line',
        //     data:[4000, 6000, 7500, 9000, 12000, 1490, 20000],
        //     color:['#ffa800'],
        //     symbolSize:8, 
        //     itemStyle:{  
        //         normal:{  
        //             color:'#ffa800',  
        //             borderColor:'#ffa800',  
        //         }  
        //     },
        // }
    ]
};
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}


/*---------------------------------房价走趋 END-----------------------------------------*/


$(function () {
    var xc_leng = $('.y_lpphoto_list ul li').length;
    if (xc_leng <= 4) {
        $('.js_prev,.js_next').hide();
    }
})
document.addEventListener('DOMContentLoaded', function () {
    var multiSlides = document.querySelector('.js_multislides');

    lory(multiSlides, {
        // infinite: 1,  //设置循环分页
        slidesToScroll: 1
    });
});


//收藏本站
$(function () {
    $('.y_lpguanzhu a').on('click', function () {
        AddFavorite('我的网站', location.href);
        $(this).find('i img').attr('src', '/image/ico_10.png');
    })

})

function AddFavorite(title, url) {
    try {
        window.external.addFavorite(url, title);
    } catch (e) {
        try {
            window.sidebar.addPanel(title, url, "");
        } catch (e) {
            alert("抱歉，您所使用的浏览器无法完成此操作。\n\n加入收藏失败，请使用Ctrl+D进行添加");
        }
    }
}


// 楼盘首页 推荐同价位楼盘
$(function () {
    $('#y_lpdtpc_nav2 ul li').eq(0).click();

    //报名验证及提交的调用
    PublicAction.AjaxSend(
        {
            CORID: 'apply_submit', /*操作ID*/
        }
    );

    //报名验证及提交的调用
    PublicAction.AjaxSend(
        {
            CORID: 'js_homeButtom', /*操作ID*/
        }
    );

})

/*楼盘首页 推荐同价位楼盘*/
$('#y_lpdtpc_nav2 ul li').click(function () {
    $(this).addClass('on').siblings().removeClass('on');
    var dataid = $(this).attr('data-id');
    var type = $(this).attr('name');
    var valdata = $(this).attr('valdata');
    $.post('/json/tall', {type: type, csrf_token_f: csrfToken, content: valdata}, function (data) {
        var echodataUl = $('.y_lpdtpc_list ul');
        echodataUl.html('');
        var data = data.data;
        var html = '';
        $.each(data, function (key, val) {
            var pic = val.sale_price;
            pic = '<i style="color:#ccc;font-size:12px;display:inline-block;margin-right:5px;">参考价格</i>' + val.sale_price + val.price_unit;
            if (val.sale_price == 0 || val.sale_price == null || val.sale_price == '') {
                pic = '待定';
            }
            html = '<li>';
            html += '<div class="y_love_list_main">';
            html += '<div class="y_tu">';
            html += '<a target="_blank" href="/house/' + val.id + '"><img src="' + val.thumb + '" alt=""></a>';
            html += '</div>';
            html += '<div class="y_text">';
            html += '<h2><a target="_blank" href="/house/' + val.id + '">' + val.name + '</a><i>[' + val.city_name + ']</i></h2>';
            html += '<p class="y_pic">';
            html += '<span>' + pic + '</span>';
            html += '<i class="rq" style="color:#c2bfbf;font-size:12px;margin-top:2px;display: block;">有效期至：' + v3Time + '</i>';
            html += '</p>';
            html += '</div>';
            html += '</div>';
            html += '</li>';
            echodataUl.append(html);
        })
    })
});

// $('.w-commonality .rq').html('（参考有效期：'+htmltime+'）'); //有效期   调用方法在public.js


listvideo();

function listvideo() {
    $('.js_yv2_banner_image ul').on('click', '.video_puic', function () {
        if ($(this).find('video').hasClass('pause')) {
            $(this).find('p.video_puic_img').hide();
            $(this).find('p.video_puic_ico').hide();
            $(this).find('video').trigger("play");
            $(this).find('video').removeClass('pause');
            $(this).find('video').addClass('play');
        } else {
            $(this).find('video').trigger("pause");
            $(this).find('video').removeClass('play');
            $(this).find('video').addClass('pause');
        }
    })
}

$('.small_list ul li,.small_box .left_btn,.small_box .right_btn').on('click', function () {
    $('.js_yv2_banner_image ul .video_puic').find('p.video_puic_img').show();
    $('.js_yv2_banner_image ul .video_puic').find('p.video_puic_ico').show();
    $('.js_yv2_banner_image ul .video_puic video').trigger("pause");
    $('.js_yv2_banner_image ul .video_puic video').removeClass('play');
    $('.js_yv2_banner_image ul .video_puic video').addClass('pause');
})






//视频播放js
$(function(){
/*-----------------------------------音频--------------------------------------------*/ 
    // 音频播放
    var audio = document.getElementById("lplive_vid");
    var btn = document.getElementById("lplive");
    var musitime= 0;
    var cubicle = "true";
    
    if (btn) {
        btn.onclick = function () {
            var domeid=$('#sxbmdata').attr('data-id')
            if (domeid!='' && domeid!=null ) {
                $('#sxbmdata').attr('data-type','false')
                $('#lplive').attr('data-boole','false')
                $('.m_videobj').hide();
                $('.m_video_img').hide();
                $('#lplive_vid').show();
                audio.play();
            }else{
                $('#sxbmdata').attr('data-type','true')
                $('#lplive').attr('data-boole','true')
                $('.m_videobj').hide();
                $('.m_video_img').hide();
                if(musitime >= 600 && cubicle == "true"){
                    AudioWind_live();    //视频报名窗口
                    return false;
                }
                audio.play();
                watchMusicTime_vid()
            }
        }
    };
    // // 获取全部语音
    $('.y_reduced2_bg , .y_reduced2_gb a').on('click',function(){
        $('.y_reduced2').hide();
        $('.m_form_button2').removeClass('wcontrol')
        $('.y_reduced2_bg').hide();

        $('.m_videobj').show();
        $('.m_video_img').show();
        $('#lplive_vid').show();
    })

    // // 语音讲房报名窗口
    function AudioWind_live(){
        $('.y_reduced2').show();
        $('.y_reduced2_bg').show();
        audio.pause()
    }

    //监听音乐实时播放的时间
    function watchMusicTime_vid(){
        console.log(1)
        let _this = this;
        //监听播放时间
        // let musicDom = document.getElementsByTagName('audio')[0];//获取Audio的DOM节点
        let musicDom = audio;//获取Audio的DOM节点

        //使用事件监听方式捕捉事件
        musicDom.addEventListener("timeupdate",function(){//监听音频播放的实时时间事件

            cubicle = $('#lplive').attr('data-boole');     //2019-11-20  把获取报名成功后，可以继续播放的状态放置这里
            
            // console.log(musicDom.duration)//播放时间
            let timeDisplay;
            //用秒数来显示当前播放进度
            timeDisplay = Math.floor(musicDom.currentTime);//获取实时时间
            musitime = timeDisplay;
            // console.log(timeDisplay)

            // 处理 10秒内试听
            // console.log(cubicle)
            if(timeDisplay >= 600 && cubicle == "true"){
                audio.pause();
                AudioWind_live();    //视频报名窗口
            }
            //处理时间
            //分钟
            let minute = timeDisplay / 60;
            let minutes = parseInt(minute);
            if (minutes < 10) {
                minutes = "0" + minutes;
            }
            //秒
            let second = timeDisplay % 60;
            let seconds = Math.round(second);
            if (seconds < 10) {
                seconds = "0" + seconds;
            }
            let shun= minutes+":"+seconds;//将实时时间存储到vuex中
            // console.log(shun)
            // console.log(_this.$store.state.realMusicTime);
        },false);
    }

    /*-------------------------------------------------------------------------------*/   
// 获取验证码 

    var urlstr = window.location.href;
    var matchdata = urlstr.match(/\.com(\/\w+)/)[1];

    var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;//手机号正则 
    var count = 60; //间隔函数，1秒执行
    var InterValObj1; //timer变量，控制时间
    var curCount1;//当前剩余秒数

    $('#btnSendCode1').on('click',function(){
        sendMessage1();
    })

    // 提交
    $('.m_reduced_r2 #buttom_m').on('click',function(){
        var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;//手机号正则
        var phone    = $.trim($('#phone1').val());
        var code    = $.trim($('#code').val());
        if (!phoneReg.test(phone)) {
            // alert(" 请输入有效的手机号码");
            $('.zhanghao b.hint-text').show();
            $('#phone1').addClass('on');
            return false;
        }else{
            $('.zhanghao b.hint-text').hide();
            $('#phone1').removeClass('on');
        }
        if (code!='') {
            $('.mima b.hint-text').hide();
            $('#code').removeClass('on');
        }else{
            // alert(data.msg);
            $('.mima b.hint-text').show();
            $('#code').addClass('on');
            return false;
        }
        // alert(password);
        $.ajax({
            type: "POST",
            url: matchdata+"/public/checkcode",
            data: {mobile:phone,code:code,csrf_token_f: csrfToken},
            dataType: "json",
            success:function(data){
                if(data.code == 200) {
                    // loginAlert('报名成功！',2000)
                    $('.y_reduced2').hide();
                    $('.y_reduced2_bg').hide();   
                    $('#sxbmdata').attr('data-type','false');
                    $('#sxbmdata').attr('data-id',phone);
                    $('#lplive').attr('data-boole','false');
                    $('.m_videobj').hide();
                    $('#lplive_vid').show();
                    $('.m_video_img').hide();
                    audio.play();
                    $('.m_reduced_r2 .buttom_m2').click();
                }else{
                    loginAlert(data.msg,2000)
                    return false;
                }
            }
        });
        PublicAction.AjaxSend(
            {
                CORID:'buttom_m2',                  /*操作ID*/
            }
        );
        
    })
    /*第一*/
    function sendMessage1() {
        curCount1 = count;               
        var phone = $.trim($('#phone1').val());
        if (!phoneReg.test(phone)) {
            $('.zhanghao b.hint-text').show();
            $('#phone1').addClass('on');
            return false;
        }else{
            $('.zhanghao b.hint-text').hide();
            $('#phone1').removeClass('on');
        }
        //设置button效果，开始计时
        $("#btnSendCode1").attr("disabled", "true");
        $("#btnSendCode1").val( '('+ curCount1 + ")秒再获取");
        InterValObj1 = window.setInterval(SetRemainTime1, 1000); //启动计时器，1秒执行一次
        //向后台发送处理数据
        $.ajax({
            type: "POST",
            url: matchdata+"/public/sendcode",
            data: {mobilephone:phone,csrf_token_f: csrfToken},
            dataType: "json",
            success:function(data){
                // console.log(data.code);
                if(data.code == 200){
                    //短信成功弹窗
                    loginAlert(data.msg,2000)
                    $('.mima b.hint-text').hide();
                    $('#code').removeClass('on');
                }else{
                    loginAlert(data.msg+',请重新发送！',2000)
                    curCount1 = 0;
                    window.clearInterval(InterValObj1);//停止计时器
                    $("#btnSendCode1").removeAttr("disabled");//启用按钮
                    $("#btnSendCode1").val("重新发送");
                    $('.mima b.hint-text').show();
                    $('#code').addClass('on');
                    return false;
                }
            }
        });
    }
    function SetRemainTime1() {
        if (curCount1 == 0) {                
            window.clearInterval(InterValObj1);//停止计时器
            $("#btnSendCode1").removeAttr("disabled");//启用按钮
            $("#btnSendCode1").val("重新发送");
            $("#btnSendCode1").css('color','#2DB1FB')
        }else {
            curCount1--;
            $("#btnSendCode1").val( '('+ curCount1 + ")秒再获取");
            $("#btnSendCode1").css('color','#999')
        }
    }


    function loginAlert(txt,time){
        /*调用方法*/
        var M = {};
        if(M.dialog1){
            return M.dialog1.show();
        }
        M.dialog1 = jqueryAlert({
            'content' : txt,                //txt 提示内容
            'closeTime' : time,
        })
    }
})