pfhwyigou/frontend/web/js/housech/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();
    }
});


/* 商品轮播图（带缩略图的轮播效果） */
$(".banner").thumbnailImg({
    large_elem: ".large_box",
    small_elem: ".small_list",
    left_btn: ".left_btn",
    right_btn: ".right_btn"
});

})

// 楼盘首页  户型 ajax
$(function(){
    $('.y_lphxcent_list_h li').eq(0).click();
})


/*楼盘首页-楼盘户型*/
$('.y_lphxcent_list_h li').click(function(){
    $(this).addClass('on').siblings().removeClass('on');
    var type_id = $(this).attr('name');
    var hid = $(this).attr('hid');
    $.post('/housech/housetype',{hid:hid,type_id:type_id,csrf_token_f:csrfToken},function(data){
        var echodataUl = $('.y_lphxcent_list_ul ul');
        echodataUl.html('');
        var data = data.data;
        var html = '';
        $.each(data,function(key,val){
            html ='<li>';
            html+='<a href="/housech/type/'+hid+'/">';
            html+='<div class="y_tu">';
            html+='<p class="y_img"><img src="'+val.img+'" alt=""></p>';
            html+='<p class="y_hx">'+val.title+'</p>';
            html+='</div>';
            html+='<div class="y_text">';
            html+='<p class="y_js">'+val.indoor_info+'</p>';
            html+='<p class="y_jm">'+val.area+'</p>';
            html+='</div>';
            html+='</a>';
            html+='</li>';
            echodataUl.append(html);
        })
    })
});


/*楼盘首页-楼盘动态*/
$('.f_dynamic').click(function(){
    var  news = $('.f_lpdtpc_news');
    news.html('');
        var _hid = $(this).attr('name');
        $.post('/housech/dynamic',{hid:_hid,csrf_token_f:csrfToken},function (data) {
                    if(data.code == 200){
                        var _data = data.data;
                        $.each(_data,function (key,val) {
                            var html     = '<li class="c">';
                                        html    +='<div class="y_news_lx">'+val.news_name+'</div>';
                                        html    += '<div class="y_newscons">';
                                        html    += '<p class="y_title c"><a href="">'+val.subject+'</a><span>'+val.open_time+'</span></p>';
                                        html    += '<p class="y_text">'+val.abstract+'</p>\n';
                                        html    += ' </div>';
                                        html    += '</li>';
                            news.append(html);

                        })
                        var topCon = '<div class="y_dingyue"><a href="/housech/news/'+_hid+'"><i>+</i><span>更多动态</span></a></div>'
                        news.append(topCon);
                    }
        })

})


// 楼盘评测切换
$(function(){
    var sWidth = $("#y_slider_name").width();
    var len = $("#y_slider_name .y_silder_panel").length;
    var index = 0;
    var picTimer;
    
    var btn = "<a class='y_prev'></a><a class='y_next'></a>";
    $("#y_slider_name").append(btn);
    $("#y_slider_name .y_silder_nav li").css({"opacity":"0.8","filter":"alpha(opacity=80)"}).click(function() {                                                                     
        index = $("#y_slider_name .y_silder_nav li").index(this);
        showPics(index);
    }).eq(0).trigger("click");
    $("#y_slider_name .y_prev,#y_slider_name .y_next").css({"opacity":"0.1","filter":"alpha(opacity=30)"}).hover(function(){
        $(this).stop(true,false).animate({"opacity":"0.8","filter":"alpha(opacity=80)"},300);
    },function() {
        $(this).stop(true,false).animate({"opacity":"0.1","filter":"alpha(opacity=30)"},300);
    });
    // Prev
    $("#y_slider_name .y_prev").click(function() {
        index -= 1;
        if(index == -1) {index = len - 1;}
        showPics(index);
    });
    // Next
    $("#y_slider_name .y_next").click(function() {
        index += 1;
        if(index == len) {index = 0;}
        showPics(index);
    });
    // 
    $("#y_slider_name .y_silder_con").css("width",sWidth * (len));
    // showPics
    function showPics(index) {
        var nowLeft = -index*sWidth; 
        $("#y_slider_name .y_silder_con").stop(true,false).animate({"left":nowLeft},300);
        $("#y_slider_name .y_silder_nav li").removeClass("on").eq(index).addClass("on"); 
        $("#y_slider_name .y_silder_nav li").stop(true,false).animate({"opacity":"0.95"},300).eq(index).stop(true,false).animate({"opacity":"1"},300);
    }
});

//报名

$('.y_dttx_inputr').on('click',function() {
    var data = '';
    yee.showings($('.y_dttx_input input[name="mobile"]').val(),$('.y_dttx_input input[name="name"]').val(),$('.y_dttx_input input[name="pid"]').val(),$('.y_dttx_input input[name="city"]').val(),$('.y_dttx_input input[name="type"]').val(),data);
})
$('.y_lpsub').on('click',function() {
    var data = '';
    yee.showings($('.y_lpind_addipunt input[name="mobile"]').val(),$('.y_lpind_addipunt input[name="name"]').val(),$('.y_lpind_addipunt input[name="pid"]').val(),$('.y_lpind_addipunt input[name="city"]').val(),$('.y_lpind_addipunt input[name="type"]').val(),data);
})


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

// 楼盘首页地图
$(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 = "18px";
  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 =  $('.y_lptitle span').text();
var dataYear = [];
var dataPrice = [];
var oid = $('.y_lptitle').attr('data-id');      //获取楼盘ID


$.ajax({
    type:'POST',
    url:'/housech/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:'m_form_button',                    /*操作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('/housech/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 = 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="/housech/'+val.id+'/"><img src="'+val.thumb+'" alt=""></a>';
            html+='</div>';
            html+='<div class="y_text">';
            html+='<h2><a target="_blank" href="/housech/'+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;">(参考有效期'+time_yxq+')</i>';
            html+='</p>';
            html+='</div>';
            html+='</div>';
            html+='</li>';
            echodataUl.append(html);
        })
    })
});

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



    listvideo();

    function listvideo(){
        $('.large_box ul').on('click','#video_m',function(){
            if ($(this).find('video').hasClass('pause')) {
                $(this).find('p').hide();
                $(this).find('i').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').on('click',function(){
    $('.large_box ul #video_m').find('p').show();
    $('.large_box ul #video_m').find('i').show();
    $('.large_box ul #video_m video').trigger("pause");
    $('.large_box ul #video_m video').removeClass('play');
    $('.large_box ul #video_m video').addClass('pause');
})



tab('.countR_box ul li','.bus_tab_box','data-id');//楼盘首页 计算结果
// 选项卡
function tab (name1,name2,name3){;
    $(name1).on('click',function(){
        $(name2).hide();
        var Idoption = $(this).attr(name3);
        $(name2+'['+name3+''+'='+ Idoption +']').show();
        $(this).addClass('on').siblings().removeClass('on');
    })
    $(name1).eq(0).addClass('on');
    $(name2).eq(0).show();
}

//楼盘首页 楼盘列表 >> 查看地图
    $('a.y_idckdt').on('click',function(){
        var lpjwd=$(this).attr('data-jwd');
        var lptitle=$(this).attr('data-title');
        var _pointx = lpjwd.split(',')[0];
        var _pointy = lpjwd.split(',')[1];
        if (lpjwd !=='') {
            window.open('/map/details#lat='+_pointy+'&lng='+_pointx+'&zoom=13&title='+lptitle+'');
        }else{
            /*调用方法*/
            var M = {};
            if(M.dialog1){
                return M.dialog1.show();
            }
            M.dialog1 = jqueryAlert({
                'content' : '暂无相关经纬度数据',
                'closeTime' : 2000,
            })
            $than.removeAttr('disabled');
            ControlSwitch = false;                  //开关为false
            return false;
        };
        
    })