orico-official-website/app/index/view/mobile/product/classify.html

{extend name="public/base" /}

{block name="style"}
<link rel="stylesheet" href="__CSS__/category.css">

<script type="text/javascript">
  (function (doc, win) {
        var docEl = doc.documentElement;
        var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';

        function setRootFontSize() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            var fontSize = clientWidth / 8.04; // 750px/7.5=100px，375px/7.5=50px
            // 直接修改内联样式，优先级最高
            docEl.setAttribute('style', 'font-size: ' + fontSize + 'px !important;');
        }

        setRootFontSize();
        win.addEventListener(resizeEvt, setRootFontSize);
        doc.addEventListener('DOMContentLoaded', setRootFontSize);
    })(document, window);
</script>




{/block}

{block name="main"}
<!-- 顶部返回栏（已完全按图纸修改） -->
<div class="top-box">
    <div class="top-bar">
        <div class="back">
            <image src="__IMAGES__/left.png"></image>
        </div>
        <div class="title">{$parent.name|default=''}</div>
    </div>
</div>
<div class="main">
    <!-- 左侧导航 -->
    {if condition="!empty($categorys)"}
    <ul class="sidebar">
        {volist name="categorys" id="category"}
        <li class="nav-item {eq name='$key' value='0'}active{/eq}" data-tab="tab{$category.id}">{$category.name}</li>
        {/volist}
        <li style="background: #fff;" class="li-bottom"></li>
    </ul>

    <!-- 右侧分区内容 -->
    <div class="right-content">
        {volist name="categorys" id="category"}
        <div class="tab-pane {eq name='$key' value='0'}active{/eq}" id="tab{$category.id}">
            {if condition="!empty($category.children)"}
            {volist name="$category.children" id="child"}
            <section class="sec-box">
                <div class="sec-header">
                    <div class="sec-title">{$child.name}</div>
                    <a class="sec-arrow" href="{:url('product/subcategory', ['id' => $child.id])}" target="_self">
                        <img src="__IMAGES__/y.png" alt="">
                    </a>
                </div>
                {if condition="!empty($child.products)"}
                <div class="scroll-box">
                    {volist name="$child.products" id="pro"}
                    <a class="card" href="{:url('product/detail', ['id' => $pro.id])}" style="background: #fff;">
                        <div class="card-img">
                            <img src="{$pro.cover_image}" alt="">
                        </div>
                        <div class="card-info">
                            <div class="card-name">{$pro.name}</div>
                            <div class="card-model">{$pro.spu}</div>
                        </div>
                    </a>
                    {/volist}
                </div>
                {/if}
            </section>
            {/volist}
            {/if}
        </div>
        {/volist}
    </div>
    {/if}
</div>
{/block}

{block name="script"}

<script>
    // 点击右侧箭头滚动
    function scrollNext (el)
    {
        const box = el.closest('section')?.querySelector('.scroll-box')
            || el.parentElement.nextElementSibling
        if (box) box.scrollBy({ left: 150, behavior: 'smooth' })
    }
    const back = document.querySelector('.back')
    // 左侧Tab切换
    const navItems = document.querySelectorAll('.nav-item')
    const tabPanes = document.querySelectorAll('.tab-pane')

    navItems.forEach(item =>
    {
        item.addEventListener('click', () =>
        {
            // 切换左侧激活状态
            navItems.forEach(i => i.classList.remove('active'))
            item.classList.add('active')
            // 切换右侧内容
            const target = item.dataset.tab
            tabPanes.forEach(p => p.classList.remove('active'))
            document.getElementById(target)?.classList.add('active')
        })
    })

    back.addEventListener('click',()=>{
        window.location.href = document.referrer;
    })
// 更新侧边栏相邻元素的圆角
function updateSidebarAdjacentRadius() {
    const sidebarItems = document.querySelectorAll('.sidebar li');
    
    // 先移除所有相邻类名
    sidebarItems.forEach(item => {
        item.classList.remove('active-prev', 'active-next');
    });
    
    // 找到当前激活的项
    let activeIndex = -1;
    sidebarItems.forEach((item, index) => {
        if (item.classList.contains('active')) {
            activeIndex = index;
        }
    });
    
    // 添加上一个和下一个的类名（使用requestAnimationFrame确保DOM更新）
    requestAnimationFrame(() => {
        if (activeIndex > 0) {
            sidebarItems[activeIndex - 1].classList.add('active-prev');
        }
        if (activeIndex < sidebarItems.length - 1) {
            sidebarItems[activeIndex + 1].classList.add('active-next');
        }
    });
}

// 绑定点击事件
document.querySelectorAll('.sidebar li').forEach(item => {
    item.addEventListener('click', function() {
        // 移除所有active
        document.querySelectorAll('.sidebar li').forEach(li => {
            li.classList.remove('active');
        });
        // 添加active
        this.classList.add('active');
        // 更新相邻圆角
        updateSidebarAdjacentRadius();
        
  
    });
});

// 页面初始化时调用
if (document.querySelector('.sidebar li.active')) {
    updateSidebarAdjacentRadius();
}


// 动态计算 li-bottom 的高度
function setLiBottomHeight() {
    const sidebar = document.querySelector('.sidebar');
    const liBottom = document.querySelector('.sidebar .li-bottom');
    const sidebarItems = document.querySelectorAll('.sidebar li:not(.li-bottom)');
    
    if (!sidebar || !liBottom || sidebarItems.length === 0) return;
    
    // 计算所有正常li的总高度
    let totalHeight = 0;
    sidebarItems.forEach(item => {
        totalHeight += item.offsetHeight;
    });
    
    // 获取sidebar的高度
    const sidebarHeight = sidebar.offsetHeight;
    
    // 计算剩余高度
    const remainingHeight = sidebarHeight - totalHeight;
    
    // 赋值给 li-bottom
    if (remainingHeight > 0) {
        liBottom.style.height = remainingHeight + 'px';
    } else {
        liBottom.style.height = '0px';
        liBottom.style.display = 'none';
    }
}

// 页面加载时执行
window.addEventListener('load', function() {
    setLiBottomHeight();
});

// 窗口大小改变时重新计算
window.addEventListener('resize', function() {
    console.log('切换了吗')
    setLiBottomHeight();
});

// 如果侧边栏内容有动态变化，使用 MutationObserver 监听
const observer = new MutationObserver(function() {
    setLiBottomHeight();
});

// 监听侧边栏变化
const sidebar = document.querySelector('.sidebar');
if (sidebar) {
    observer.observe(sidebar, { 
        childList: true, 
        subtree: true, 
        attributes: true 
    });
}
</script>
{/block}