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

{extend name="base" /}
{block name="title"}MyPoints{/block}
{block name="styles"}
<link rel="stylesheet" href="/assets/index/css/integral.css">
{/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="treat" data-type="treat">
                            <h3 class="sunNavTitle">To be shipped</h3>
                        </nav>
                    </a>
                    <a href="#">
                        <nav class="sunNavItem orderNavItem" data-type="shipped">
                            <h3 class="sunNavTitle">Shipped</h3>
                        </nav>
                    </a>
                    <a href="#">
                        <nav class="sunNavItem orderNavItem" data-type="take">
                            <h3 class="sunNavTitle">Received</h3>
                        </nav>
                    </a>
                </div>
            </nav>
            <nav class="navItem">
                <div class="navItemFlex active">
                    <img src="/assets/index/asstes/icon/jf.png" alt="">
                    <h2 class="navTitle">My points</h2>
                </div>
            </nav>
        </div>
        <div class="pageConten">
            <div class="totalIntBox">
                <p class="tiTile">My Points：</p>
                <p class="tiNumber">{$user['points']}</p>
            </div>
            <div class="intContainer" id="intContainer">

            </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;

        // 加载数据函数
        function loadData() {
            if (isLoading) {
                return;
            }
            isLoading = true;
            // 显示加载指示器
            $('#loadingIndicator').show();
            //调试后记得去除这段代码
            $.ajax({
                url: '/index/user/pointsLogs',
                type: 'GET',
                data: {
                    page: page,
                    per_page: itemsPerPage
                },
                success: function (response) {
                    // 处理成功响应
                    const data = response.data.list.data;

                    // 在页面中添加数据
                    const container = $('#intContainer');
                    data.forEach(function (item) {
                        container.append(`
                    <div class="intItem">
                            <div class="intValItem">
                                <div class="valKey">
                                    <p class="vTitle">Score</p>
                                    <p class="symbol">：</p>
                                </div>
                                <p class="valVal">${item.value}</p>
                            </div>
                            <div class="intValItem">
                                <div class="valKey">
                                    <p class="vTitle">Created At</p>
                                    <p class="symbol">：</p>
                                </div>
                                <p class="valVal">${item.create_time}</p>
                            </div>
                            <div class="intValItem">
                                <div class="valKey">
                                    <p class="vTitle">Description</p>
                                    <p class="symbol">：</p>
                                </div>
                                <p class="valVal">
                                    ${item.describe}
                                </p>
                            </div>
                        </div>`);
                    });
                    // 更新当前页数
                    page++;
                    // 隐藏加载指示器
                    $('#loadingIndicator').hide();
                    isLoading = false;
                },
                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?dataType=${type}`)
        });

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