gift.html 10.3 KB
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>礼品页</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1002144_2sqi5z7stwm.css">
    <link rel="stylesheet" type="text/css" href="css/dropload.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/gift.css">
    <script src="js/base.js"></script>
    <script src="js/jquery.min.js"></script>

</head>
<body>

<div class="container">
    <div class="home_container">
        <!--头部-->
        <div class="top_box">

        <div class="banner">
            <div class="banner_img">
                <img src="images/logo@2x.png" width="100%" height="100%">
            </div>
            <div class="banner_title">
                礼品申请
            </div>
        </div>

        <div class="menu">
            <div class="menu_item menu_sort first_sort">
                <b>综合排序</b>
            </div>
            <div class="menu_item  menu_price" >
               <b> 价格</b>
                <div class="icon icon_price"  >
                    <div class="iconfont icon-shangjiantou btn_top"></div>
                    <div class="iconfont icon-xiajiantou"></div>
                </div>
            </div>
            <div class="menu_item  menu_inventory">
                <b>库存</b>
                <div class="icon icon_inventory" >
                    <div class="iconfont icon-shangjiantou btn_top" ></div>
                    <div class="iconfont icon-xiajiantou" ></div>
                </div>
            </div>
        </div>

        </div>

        <!--产品列表-->
        <div class="index_item_a">
            <!--index  -->
            <div class="items">
                <div class="item">
                <div class="item_img">
                    <img src="images/pic01@2x.png" width="100%" onclick="btn_next()">
                </div>
                <div class="item_text">
                    <div class="item_text_intro">
                        小米AI音响mini小米AI音响mini小米AI音响mini小米AI音响mini小米AI音响mini
                    </div>
                    <div class="item_text_price">
                        <span>$  217.0</span>
                        <span>库存: 10</span>
                    </div>
                </div>
            </div>


            </div>

        </div>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/dropload.min.js"></script>
    <script type="text/javascript">

        //上拉加载
        $(document).ready(function () {
            // 页数
            var page = 0;
            // 每页展示10个
            var size = 3;
            $('.content').dropload({
                scrollArea: window,
                domUp: {
                    domClass: 'dropload-up',
                    domRefresh: '<div class="dropload-refresh">↓下拉刷新</div>',
                    domUpdate: '<div class="dropload-update">↑释放更新</div>',
                    domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
                },
                domDown: {
                    domClass: 'dropload-down',
                    domRefresh: '<div class="dropload-refresh">↑上拉加载更多</div>',
                    domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
                    domNoData: '<div class="dropload-noData">暂无数据</div>'
                },
                loadDownFn: function (me) {
                    page++;
                    // 拼接HTML
                    var result = '';
                    var s = "";
                    var show = "";
                    var list_compressor = "";
                    var list_answer = "";
                    $.ajax({
                        type: 'GET',
                        url: 'http://ons.me/tools/dropload/json.php?page=' + page + '&size=' + size,
                        dataType: 'json',
                        success: function (data) {
                            console.log(data);
                            var arrLen = data.length;
                            if (arrLen > 0) {
                                for (var i = 0; i < arrLen; i++) {
                                    result += '<div class="item">\n' +
                                        '                <div class="item_img">\n' +
                                        '                    <img src="images/pic01@2x.png" width="100%" onclick="btn_next()">\n' +
                                        '                </div>\n' +
                                        '                <div class="item_text">\n' +
                                        '                    <div class="item_text_intro">\n' +
                                        '                        小米AI音响mini\n' +
                                        '                    </div>\n' +
                                        '                    <div class="item_text_price">\n' +
                                        '                        <span>$  217.0</span>\n' +
                                        '                        <span>库存: 10</span>\n' +
                                        '                    </div>\n' +
                                        '                </div>\n' +
                                        '            </div>'


                                }
                                // 如果没有数据
                            } else {
                                // 锁定
                                me.lock();
                                // 无数据
                                me.noData();
                            }
                            // 为了测试,延迟1秒加载
                            setTimeout(function () {
                                // 插入数据到页面,放到最后面
                                $('.items').append(result);
                                // 每次数据插入,必须重置
                                me.resetload();
                            }, 500);
                        },
                        error: function (xhr, type) {
                            alert('Ajax error!');
                            // 即使加载出错,也得重置
                            me.resetload();
                        }
                    });
                },
                threshold: 50
            });

        })


        // $(".menu_item").click(function () {
        //     var index = $(this).index()
        //     console.log(index)
        //      $(this).addClass('menu_sort').siblings('.menu_item').removeClass('menu_sort')
        //      $('.index_item_a').eq(index).show().siblings("items").hide() //切换内容语法
        // })

        function btn_next() {
            window.location.href = "spxq.html";
        }

        //综合排序
        $('.first_sort').click(function () {
            num1 = 0;
            num = 0;
        })

        // 价格颜色切换
        var num1=0
        // $('.menu_price').click(function () {
        //     num1++;
        //     num=0;
        //     if (num1 == 1) {
        //         console.log(999)
        //         $(this).children(".icon_price").children(".icon-xiajiantou").removeClass("btn_top")
        //         $(this).children(".icon_price").children(".icon-shangjiantou").addClass("btn_top")
        //     } else {
        //         console.log(666)
        //         if ($(this).children(".icon_price").children(".icon-shangjiantou").attr("class") == 'iconfont icon-shangjiantou btn_top') {
        //             $(this).children(".icon_price").children(".icon-shangjiantou").removeClass("btn_top")
        //             $(this).children(".icon_price").children(".icon-xiajiantou").addClass("btn_top");

        //         }
        //         else if ($(this).children(".icon_price").children(".icon-xiajiantou").attr("class") == 'iconfont icon-xiajiantou btn_top') {
        //             console.log(666)
        //             $(this).children(".icon_price").children(".icon-xiajiantou").removeClass("btn_top")
        //             $(this).children(".icon_price").children(".icon-shangjiantou").addClass("btn_top")
        //         }
        //     }
        // })

        //库存颜色切换
        var num=0
        // $('.menu_inventory').click(function () {
        //     num++;
        //     num1=0;

        //     console.log(num)
        //     if(num==1){
        //         console.log(999)
        //         $(this).children(".icon_inventory").children(".icon-xiajiantou").removeClass("btn_top")
        //         $(this).children(".icon_inventory").children(".icon-shangjiantou").addClass("btn_top")
        //     }else{
        //         console.log(666)
        //         if($(this).children(".icon_inventory").children(".icon-shangjiantou").attr("class")=='iconfont icon-shangjiantou btn_top'){
        //             $(this).children(".icon_inventory").children(".icon-shangjiantou").removeClass("btn_top")
        //             $(this).children(".icon_inventory").children(".icon-xiajiantou").addClass("btn_top");

        //         }
        //         else if ($(this).children(".icon_inventory").children(".icon-xiajiantou").attr("class")=='iconfont icon-xiajiantou btn_top'){
        //             console.log(666)
        //             $(this).children(".icon_inventory").children(".icon-xiajiantou").removeClass("btn_top")
        //             $(this).children(".icon_inventory").children(".icon-shangjiantou").addClass("btn_top")
        //         }
        //     }


        //     console.log($(this).children(".icon_inventory").children(".icon-shangjiantou").attr("class"))
        //     console.log($(this).children(".icon_inventory").children(".icon-xiajiantou").attr("class"))

        // })

        $('.menu').on('click','.menu_item',function(){
        	var t = $(this);
        	var icon = t.find('.btn_top');
        	if(t.hasClass('menu_sort')){
        		icon.removeClass('btn_top').siblings().addClass('btn_top')
        	}else{
        		t.addClass('menu_sort').siblings().removeClass('menu_sort')
        	}
        })
    </script>
</body>
</html>