vape_shop/app/index/view/user/order.html

{extend name="base" /}
{block name="title"}MyOrders{/block}
{block name="styles"}
<link rel="stylesheet" href="/assets/index/css/order.css?t=10">
{/block}
{block name="mainArea"}
<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="ordersHead">
                <div class="ohInfo">Order Number</div>
                <div class="ohGoods">Goods Name</div>
                <div class="ohTime">Create Time</div>
            </div>
            <div class="orderContainer" id="orderContainer">
                <!-- <div class="orderItem">
                                            <div class="orderImg">
                                <img src="https://www.buranshao.com/Content/Img/iqos3duo.jpg" alt="">
                            </div>
                            <div class="orderInfo">
                    <h2 class="orderTitle">#某某电子烟</h2>
                    <p class="orderTime">创建时间:2019-07-03 12:00:00</p>
                     </div>
                </div> -->
            </div>
            <div id="loadingIndicator">loading...</div>
        </div>
    </div>
</section>
{/block}

{block name="scriptSrc"}
<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")
            }
        }

        initNavState()

        // 加载数据函数
        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}">
                            <div class="orderNoDiv">
                                 <p class="orderNo">${item.order_no}</p>
                            </div>
                            <div class="orderImg">
                                <img src="${item.goods[0].goods_image}" alt="">
                            </div>
                             <div class="orderInfo">
                                <h2 class="orderTitle">${item.goods[0].goods_name}</h2>
                                <p class="orderTime">${item.create_time}</p>
                            </div>
                        </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();
            }
        });

    })
</script>

{/block}