zhangdehua
/
vape_shop


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <meta name='apple-touch-fullscreen' content='yes'>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta content="fullscreen=yes,preventMove=no" name="ML-Config">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="keywords" content="电子烟,关键字"/>
    <meta name="Description" content="网站描述"/>
    <title>订单列表</title>
    <link rel="stylesheet" href="/assets/index/css/common.css?t=21">
    <link rel="stylesheet" href="/assets/index/css/order.css?t=10">
</head>

<body>
<!-- 头部导航栏 -->
<header class="headerContainer" id="headerContainer">
    <!-- 顶部提示 -->
    <div class="warnContainer">
        <h4 class="warnText">WARNING: This product contains nicotine. Nicotine is an addictive chemical.</h4>
    </div>
    <!-- pc端头部 -->
    <div id="computerEndHeader">
        <a href="/index/index/index.html">
            <h1 class="computerLogo">
                <img src="/assets/index/asstes/icon/logo.png" alt="Free Shipping Vapes" title="Free Shipping Vapes">
            </h1>
        </a>
        <div class="headIconContainer">
            <!-- 购物车 -->
            <a href="/index/cart/shoppingCart.html">
                <div class="headIconItem shoppingCartIcon">
                    <img src="/assets/index/asstes/icon/shoppingCart.png" alt="shoppingCart" tabindex="shoppingCart">
                </div>
            </a>
            <!-- 收藏 -->
            <!--            <div class="headIconItem collectIcon">-->
            <!--                <img src="/assets/index/asstes/icon/collect.png" alt="collect" tabindex="collect">-->
            <!--            </div>-->
            <!-- 个人中心 -->
            <a href="/index/user/order.html">
                <div class="headIconItem userIcon">
                    <img src="/assets/index/asstes/icon/user.png" alt="user" tabindex="user">
                </div>
            </a>
        </div>
    </div>
    <!-- 移动端头部 -->
    <div id="mobileEndHeader">
        <div class="mobileEndHeaderConten">
            <a href="/index/index/index.html">
                <h1 class="mobileLogo">
                    <img src="/assets/index/asstes/icon/logo.png" alt="Free Shipping Vapes" title="Free Shipping Vapes">
                </h1>
            </a>
            <div class="mobileUserIconList">
                <div class="mobileUserIcon userIcon">
                    <img src="/assets/index/asstes/icon/user.png" alt="user" tabindex="user">
                </div>
            </div>
            <div class="mobileMenu">
                <p id="mobileMenuBot">
                    <span id="mobileMenuLink"></span>
                </p>
            </div>
        </div>
        <!-- 移动端菜单 -->
        <section class="mobileMenuFixed">
            <div class="mobileMenuItem">
                <a href="/index/index/index.html">
                    <h2 class="menuItemTitle">NEW VAPES</h2>
                </a>

            </div>
            <!--            <div class="mobileMenuItem">
                            <h2 class="menuItemTitle">DISPOSABLES</h2>
                        </div>-->
            <div class="mobileMenuItem">
                <a href="/index/cart/shoppingCart.html">
                    <h2 class="menuItemTitle shoppingCartIcon">Shopping Cart</h2>
                </a>

            </div>
            <!--            <div class="mobileMenuItem">-->
            <!--                <h2 class="menuItemTitle collectIcon">Collect</h2>-->
            <!--            </div>-->
            <div class="mobileMenuItem active">
                <a href="/index/user/order.html">
                    <h2 class="menuItemTitle userIcon">Personal</h2>
                </a>
            </div>
        </section>
    </div>
</header>
<main id="main">
    <section class="pageContainer">
        <div class="pageMain">
            <!-- 页面菜单 -->
            <div class="navContainer" id="userNavContainer">
                <a href="/index/index/index.html">
                    <nav class="navItem">
                        <div class="navItemFlex">
                            <img src="/assets/index/asstes/icon/hm.png" alt="">
                            <h2 class="navTitle">Home</h2>
                        </div>
                    </nav>
                </a>
                <nav class="navItem">
                    <div class="navItemFlex">
                        <img src="/assets/index/asstes/icon/order.png" alt="">
                        <h2 class="navTitle">My orders</h2>
                    </div>
                    <div class="sunNavBox">
                        <a href="#">
                            <nav class="sunNavItem orderNavItem" id="unpaid" data-type="payment">
                                <h3 class="sunNavTitle">Unpaid</h3>
                            </nav>
                        </a>
                        <a href="#">
                            <nav class="sunNavItem orderNavItem" id="treat" data-type="delivery">
                                <h3 class="sunNavTitle">To be shipped</h3>
                            </nav>
                        </a>
                        <a href="#">
                            <nav class="sunNavItem orderNavItem" data-type="received">
                                <h3 class="sunNavTitle">Shipped</h3>
                            </nav>
                        </a>
                        <a href="#">
                            <nav class="sunNavItem orderNavItem" data-type="comment">
                                <h3 class="sunNavTitle">Received</h3>
                            </nav>
                        </a>
                    </div>
                </nav>
                <a href="/index/user/myScores.html">
                    <nav class="navItem">
                        <div class="navItemFlex">
                            <img src="/assets/index/asstes/icon/jf.png" alt="">
                            <h2 class="navTitle">My points</h2>
                        </div>
                    </nav>
                </a>
            </div>
            <div class="pageConten">
                <div class="orderContainer" id="orderContainer">
                    <!-- <div class="orderItem">
                        <h2 class="orderTitle">#某某电子烟</h2>
                        <p class="orderTime">创建时间:2019-07-03 12:00:00</p>
                    </div> -->
                </div>
                <div id="loadingIndicator">loading...</div>
            </div>
        </div>
    </section>
</main>

<!-- 底部 -->
<footer class="footerContainer" id="footerContainer">
    <section class="sectionContainer">
        <div class="elementorContainer">
            <div class="footerConter">
                <div class="leftText">
                    <p class="ltK">NEWALETTER</p>
                    <p class="ltV">Sign up for the Free Shipping Vapes</p>
                </div>
                <div class="footerInuptBox">
                    <img class="mailIcon" src="/assets/index/asstes/icon/mailIcon.png" alt="">
                    <input class="footerInupt" type="text">
                    <img class="arrowIcon" src="/assets/index/asstes/icon/arrowIcon.png" alt="">
                </div>
                <div class="footerIconContainer">
                    <div class="footerIconList">
                        <a href="#">
                            <div class="footerIconItem">
                                <img src="/assets/index/asstes/icon/whatsapp.png" alt="">
                            </div>
                        </a>
                        <a href="#">
                            <div class="footerIconItem">
                                <img src="/assets/index/asstes/icon/facebook.png" alt="">
                            </div>
                        </a>
                        <a href="#">
                            <div class="footerIconItem">
                                <img src="/assets/index/asstes/icon/instagram.png" alt="">
                            </div>
                        </a>
                    </div>
                    <div class="footerVlsaImg">
                        <a href="#">
                            <div class="footerVlsaItem">
                                <img src="https://img2.baidu.com/it/u=1367821108,121397947&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=500"
                                     alt="">
                            </div>
                        </a>
                        <a href="#">
                            <div class="footerVlsaItem">
                                <img src="https://img2.baidu.com/it/u=1367821108,121397947&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=500"
                                     alt="">
                            </div>
                        </a>
                        <a href="#">
                            <div class="footerVlsaItem">
                                <img src="https://img2.baidu.com/it/u=1367821108,121397947&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=500"
                                     alt="">
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="sectionContainer warningContainer">
        <div class="elementorContainer">
            <div class="warningBox">
                <p class="warningText">WARNING: Our products contain nicotine, a poisonous and addictive substance.
                    Our products are only intended for committed smokers of legal smoking age and not by
                    non-smokers, children, women who are pregnant or may become pregnant or any person with an
                    elevated risk of, or preexisting condition of, any medical condition which includes, but is not
                    limited to, heart disease, diabetes, high blood pressure or asthma. If you experience any side
                    effects or possible side effects, stop using the product immediately and consult a physician.
                    Product may be poisonous if orally ingested. Our products are not smoking cessation products and
                    have not been tested or guaranteed as such. Our products have not been evaluated by the Food and
                    Drug Administration nor is it intended to treat, prevent or cure any disease or condition. For
                    their protection, please keep out of reach of children and pets. Read our terms of use page
                    before purchasing our products.</p>
            </div>
        </div>
    </section>
</footer>
<a href="/cn">Freeimages.com</a>的图片

<!-- 年龄提示层 -->
<section class="maskContainer">
    <div class="ageReminderBox">
        <img class="ageReminderBack"
             src="https://img1.baidu.com/it/u=3449617615,1431463931&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1709485200&t=489bafcac7c5bebed91cf50c14356269"
             alt="">
        <div class="ageReminderInfo">
            <h3>ARE YOU OF LEAAL SMOKIND AGE?</h3>
            <div class="ageReminderButBox">
                <div class="ageRBut ageReminderNo"><span>NO</span></div>
                <div class="ageRBut ageReminderYes"><span>Yes, I am 21+</span></div>
            </div>
        </div>
    </div>
</section>
</body>
<script src="/assets/index/js/jquery-1.12.0.js"></script>
<script src="/assets/index/js/flexible.js"></script>
<script src="/assets/index/js/public.js?t=11"></script>
<script src="/assets/index/js/swiper.js?t=6"></script>
<script src="/assets/index/js/jquery.lazyload.js"></script>
<script>
    $(document).ready(function () {
        //触屏事件 || 点击事件
        const tap = "ontouchstart" in window ? "touchstart" : "click";
        //页码
        let page = 1;
        //页数
        let itemsPerPage = 20;
        //加载中
        let isLoading = false;
        //订单类型
        let orderType = ""

        //初始化菜单选中状态
        function initNavState() {
            const url = window.location.href;
            const searchParams = new URLSearchParams(new URL(url).search);
            orderType = searchParams.get("orderType");
            // 初始加载第一页数据
            loadData(orderType);
            //订单中心菜单列表
            const orderNavItemList = $(".orderNavItem")
            //是否存在匹配项
            let exist = false
            if (orderNavItemList) {
                orderNavItemList.each(function (index, element) {
                    const type = $(this).attr('data-type');
                    if (type === orderType) {
                        $(this).addClass("active")
                        exist = true
                    }
                })
            }
            //如果未匹配中默认选中待发货
            if (!exist) {
                $('#treat').addClass("active")
            }
        }

        // 加载数据函数
        function loadData(orderType) {
            if (isLoading) {
                return;
            }
            isLoading = true;
            // 显示加载指示器
            $('#loadingIndicator').show();
            //调试后记得去除这段代码
            if (!orderType) {
                orderType = "delivery"
            }
            $.ajax({
                url: '/index/order/list?dataType=' + orderType,
                type: 'GET',
                data: {
                    page: page,
                    per_page: itemsPerPage
                },
                success: function (response) {
                    // 处理成功响应
                    const data = response.data.list.data;
                    console.log('.xxx', data)
                    // 在页面中添加数据
                    const container = $('#orderContainer');
                    data.forEach(function (item) {
                        console.log(item)
                        container.append(`
                        <div class="orderItem" data-id="${item.order_id}">
                                <h2 class="orderTitle">${item.goods[0].goods_name}(${item.order_no})</h2>
                                <p class="orderTime">Created at:${item.create_time}</p>
                            </div> `);
                    });
                    // 更新当前页数
                    page++;
                    // 隐藏加载指示器
                    $('#loadingIndicator').hide();
                    isLoading = false;
                    //事件委托给父级
                    container.on(tap, '.orderItem', function () {
                        const id = $(this).attr('data-id');
                        window.location.href = `/index/user/orderDetails.html?orderId=${id}&orderType=${orderType}`
                    });
                },
                error: function () {
                    // 处理错误情况
                    console.log('请求数据失败');
                    // 隐藏加载指示器
                    $('#loadingIndicator').hide();
                    isLoading = false;
                }
            });
        }

        //菜单切换
        $(".orderNavItem").on(tap, function () {
            const type = $(this).attr('data-type');
            window.location.replace(`/index/user/order.html?orderType=${type}`)
        });

        //订单点击进入详情
        $(".orderItem").on(tap, function () {
            const id = $(this).attr('id');
            window.location.href = `/index/user/orderDetails.html?orderId=${id}&orderType=${orderType}`
        });

        // 监听页面滚动事件
        $(window).on('scroll', function () {
            const scrollBottom = $(window).height() + $(window).scrollTop();
            if (scrollBottom + 20 >= $(document).height()) {
                loadData();
            }
        });

        initNavState()
    })
</script>

</html>