#上拉加载与下拉刷新

$(function () {
    // 获取地址栏参数
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"),
            r = window.location.search.substr(1).match(reg);
        return r ? decodeURI(r[2]) : null;
    }

    // 初始化mescroll
    var mescroll = new MeScroll("mescroll", {
        up: {
            callback: getListData,
            noMoreSize: 4,
            // 没有数据时候的提示
            empty: {
                icon: "../res/img/mescroll-empty.png",
                btntext: "暂无数据",
                btnClick: function () {},
            },
            clearEmptyId: "dataList",
        },
    });

    /*初始化菜单*/
    var pdType = 0;
    $(".nav p").click(function () {
        var i = $(this).attr("i");
        if (pdType != i) {
            pdType = i;
            $(".nav .active").removeClass("active");
            $(this).addClass("active");
            mescroll.resetUpScroll();
        }
    });

    /* 链接跳转 */
    $("#dataList").on("click", "li", function (e) {
        // 通过事件委托实现获取每一个列表的数据，并实现跳转
        window.location.href = "index.html";
    });

    function getListData(page) {
        getListDataFromNet(
            pdType,
            page.num,
            page.size,
            function (data) {
                // 对请求的数据进行判断处理
                mescroll.endSuccess(data.length);
                setListData(data);
            },
            function () {
                mescroll.endErr();
            }
        );
    }

    // DOM拼接渲染
    function setListData(data) {
        var $dataList = $("#dataList");
        // 列表项字符串拼接
        for (var i = 0, str = ""; i < data.length; i++) {
            let pd = data[i];
            str +=
                '<li data-id="' +
                pd.id +
                '" data-url="' +
                pd.videoUrl +
                '"><img class="pd-img" src="' +
                pd.imgUrl +
                '"/><p class="pd-name">' +
                pd.videoName +
                '</p><p class="pd-price">' +
                pd.desc +
                '</p><p class="pd-sold">浏览量：' +
                pd.number +
                "</p></li>";
        }
        $dataList.append(str);
    }

    function getListDataFromNet(
        pdType,
        pageNum,
        pageSize,
        successCallback,
        errorCallback
    ) {
        const api = "api_url";
        // 定时器的作用是模拟网络延迟
        setTimeout(function () {
            $.ajax({
                type: "POST",
                url: api,
                data: {
                    pageIndex: pageNum, // pageNum默认值为1
                    type: pdType, // type类型
                },
                success: function (res) {
                    if (res.code) {
                        let data = res.data;
                        // 请求成功回调
                        successCallback(data);
                    } else {
                        // 请求失败提示
                        mescroll.endErr();
                    }
                },
                error: function (err) {
                    // 请求失败回调
                    mescroll.endErr();
                },
            });
        }, 500);
    }
});

// 全局引用
import infiniteScroll from "vue-infinite-scroll";
Vue.use(infiniteScroll);

// 局部引用
import infiniteScroll from "vue-infinite-scroll";
new Vue({
    directives: { infiniteScroll },
});