pfhwyigou/mobile/web/overseas/js/videolist/index.js

$(function(){

    // 导航
    new Swiper('.vnav-box', {
        autoplay: false,//可选选项，自动滑动
        slidesPerView: 'auto',
        spaceBetween: 10,
    })


/*
*   区域选择功能特效
*/
var wdata = new Object();
    wdata.cityID = 0;       //用于存放市县


//创建MeScroll对象,内部已默认开启下拉刷新,自动执行up.callback,刷新列表数据;
var mescroll = new MeScroll("mescroll", {
   up: {
       callback: getListData, //上拉回调,此处可简写; 相当于 callback: function (page, mescroll) { getListData(page); }
       isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
       clearEmptyId: "dataList", //相当于同时设置了clearId和empty.warpId; 简化写法;默认null; 注意vue中不能配置此项
       toTop:{ //配置回到顶部按钮
           src : "/js/videolist/dist/res/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
           offset : 100
       },
       lazyLoad: {
           use: true // 是否开启懒加载,默认false
       }
   }
});

// 市县选择
$('.video-nav').on('click','a',function(){
    var $that = $(this);
    wdata.cityID = $that.attr('data-cid');
    $that.addClass('on').siblings().removeClass('on');

    //重置列表数据
    mescroll.resetUpScroll();
    //隐藏回到顶部按钮
    mescroll.hideTopBtn();

})

$('.video-nav a').eq(0).click();

    
/*联网加载列表数据  page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
function getListData(page){
    //联网加载数据
    // getListDataFromNet(pdType, page.num, page.size, function(curPageData){
    getListDataFromNet(wdata.cityID, page.num, page.size, function(curPageData){

        //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
                    //必传参数(当前页的数据个数, 总数据量)
        mescroll.endBySize(curPageData.length, totalSize);
        
        //设置列表数据
        setListData(curPageData,page.num);
    }, function(){
        //联网失败的回调,隐藏下拉刷新和上拉加载的状态;
        mescroll.endErr();
    });
}

/*设置列表数据*/
function setListData(curPageData,page){
    var listDom=document.getElementById("dataList");
    for (var i = 0; i < curPageData.length; i++) {

        var pd=curPageData[i];
        var str ='<a href="/video/videodetails/'+pd.hid+'">';
            str +='<div class="video-list-img">';
            str +='<img src="'+pd.thumb+'" alt="">';
            str +='</div>';
            str +='<div class="video-list-font">';
            str +='<p class="video-list-title">'+pd.description.substring(0,18)+'...</p>';
            str +='<p class="video-list-label">';
            str +='<span>'+(pd.plays*1 + 1000)+'播放</span>';
            str +='<span data-id="1" data-type="1" class="like">'+(pd.thumbs_up*1 + 500)+'点赞</span>'; // 这里需要判断 type 值 添加 oin
            str +='</p>';
            str +='</div>';
            str +='</a>';
        
        var liDom=document.createElement("li");
        liDom.innerHTML=str;
        listDom.appendChild(liDom);
    }
}


    /*联网加载列表数据
 在您的实际项目中,请参考官方写法: http://www.mescroll.com/api.html#tagUpCallback
 请忽略getListDataFromNet的逻辑,这里仅仅是在本地模拟分页数据,本地演示用
 实际项目以您服务器接口返回的数据为准,无需本地处理分页.
 * */
function getListDataFromNet(cityId,pageNum,pageSize,successCallback,errorCallback) {
    //延时一秒,模拟联网
    setTimeout(function () {
        $.ajax({
            type: 'get',
            url: '/video/getvideo',
            // url: '../res/pdlist1.json?pdType='+pdType+'&num='+pageNum+'&size='+pageSize,
            data:{city:wdata.cityID,page:pageNum,limit:pageSize},
            dataType: 'json',
            success: function(data){
                var listData=[];
                totalSize= data.count;      //总条数

                $.each(data.data,function(k,v){
                    listData.push(v);
                })
                //回调
                successCallback(listData);
            },
            error: errorCallback
        });
    },1000)
}



// // 点赞特效 提交 id 及 1 代表点赞，2 代表取消
// var objo = new Object();
// $('#dataList').on('click','.like',function(){
//     var that = $(this);
//     if(that.hasClass('oin')){
//         that.removeClass('oin')
//     }else {
//         that.addClass('oin');
//     }
//     objo.id = that.attr('data-id')
//     objo.type = that.attr('data-type')

//     cityAjax(); // 提交点赞数据 
// })


// // 提交点赞数据 
// function cityAjax(){
//     $.ajax({
//         url:'/js/videolist/index.json',
//         dataType:"json",
//         type:'POST',
//         data:{id:objo.id,type:objo.type},
//         success:function(data){
//             if(data.code == 200){
//                console.log("提交成功！")
//             }
//         }
//     });
// }


// 视频搜索功能
$('.seek-btn').on('click',function(){
    var txt = $('.seek-txt').val();
    var li = '';
    $.ajax({
        type: 'post',
        url: '/video/search',
        data:{text:txt},
        dataType: 'json',
        success: function(data){
            $.each(data.data,function(k,v){
                li +='<li>';
                li +='<a href="/video/videodetails/'+v.hid+'">';
                li +='<div class="video-list-img">';
                li +='<img src="'+v.thumb+'" alt="">';
                li +='</div>';
                li +='<div class="video-list-font">';
                li +='<p class="video-list-title">'+v.description.substring(0,18)+'...</p>';
                li +='<p class="video-list-label">';
                li +='<span>'+(v.plays*1 + 1000)+'播放</span>';
                li +='<span data-id="1" data-type="1" class="like">'+(v.thumbs_up*1 + 500)+'点赞</span>'; // 这里需要判断 type 值 添加 oin
                li +='</p>';
                li +='</div>';
                li +='</a>';
                li +='</li>';
            })
            $('#dataList').html('');
            $('#dataList').append(li);
        }
    });
})

})