information-system/application/views/mobile_first/shanghai-tour-list.php

<div class="filter-box">
    <div class="filter-left">
        <div class="filter-item">
            <div class="filter-nav">Category</div>
            <div class="filter-popup">
                <p class="popup-title">Tours</p>
                <ul  id="category-list">
                    <?php foreach ($lineTypeList as $ltItem) { ?>
                    <li><a href="javascript:;" data-id="<?php echo $ltItem->SYC_SN ?>"><?php echo $ltItem->SYC2_CodeDiscribe ?></a></li>
                    <?php } ?>
                </ul>
                <div class="popup-bottom">
                    <a href="javascript:;" class="clearbtn" id="clear-category"><strong>Clear</strong></a>                    
                </div>
            </div>
        </div>
        <div class="filter-item">
            <div class="filter-nav">Days</div>
            <div class="filter-popup">
                <p class="popup-title"></p>
                <ul id="days-list">
                    <li><a href="javascript:;" data-day="1">1-2 Days</a></li>
                    <li><a href="javascript:;" data-day="3-3">3 Days</a></li>
                    <li><a href="javascript:;" data-day="4-4">4 Days</a></li>
                    <li><a href="javascript:;" data-day="5-7">5-7 Days</a></li>
                    <li><a href="javascript:;" data-day="8-20">more than 7 days</a></li>
                </ul>
                <div class="popup-bottom">
                    <a href="javascript:;" class="clearbtn" id="clear-days"><strong>Clear</strong></a>                  
                </div>
            </div>
        </div>
        <div class="filter-item">
            <div class="filter-nav">Price</div>
            <div class="filter-popup">
                <p class="popup-title"></p>
                <ul id="price-list">
                    <li><a href="javascript:;" data-price="0-299">< $300</a></li>
                    <li><a href="javascript:;" data-price="300-500">$300-$500</a></li>
                    <li><a href="javascript:;" data-price="501-1000">$501-$1000</a></li>
                    <li><a href="javascript:;" data-price="1001-10000">> $1000</a></li>         
                </ul>
                <div class="popup-bottom">
                    <a href="javascript:;" class="clearbtn" id="clear-price"><strong>Clear</strong></a>          
                </div>
            </div>
        </div>
    </div>
    <div class="filter-right"><strong><span id="all-count">0</span> activities in Shanghai</strong></div>
</div>
<div class="flex-row4" id="js_tourlist">
    <div class="flex-col border-box"><a href="#" rel="nofollow"><span class="flag-box"></span><img alt="most classic china tour" class="img-responsive" src="http://data.chinatravel.com/images/homepage/600-450/guilin-landscape.jpg"></a>
        <div class="caption">
            <h3><a href="#">Suzhou and Tongli Water Town Tour from Shanghai</a></h3>
            <ul class="card-ul">
                <li class="card-day">15-Day</li>
                <li>Xi’an</li>
                <li>Guilin</li>
                <li>Yangshuo</li>
                <li>Shanghai</li>
            </ul>
            <div class="caption-btn">
                <p>From <span class="baseprice font24">US$3949</span></p>
                <p><a aria-label="button" class="btn-base" href="#" rel="nofollow">View More</a></p>
            </div>
        </div>
    </div>
</div>

<script>

    
var TourData = <?php echo json_encode($tourListData, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP); ?>;    
// 如果$tourListData可能为null，可以添加默认值
TourData = TourData || [];

   
document.addEventListener('DOMContentLoaded', function() {
    // 获取DOM元素
    const tourListContainer = document.getElementById('js_tourlist');
    const allCountSpan = document.getElementById('all-count');
    
    // 初始化筛选器
    setupFilter('category-list', 'clear-category');
    setupFilter('days-list', 'clear-days');
    setupFilter('price-list', 'clear-price');

    // 通用函数：设置筛选列表的点击和清除功能
    function setupFilter(listId, clearBtnId) {
        const list = document.getElementById(listId);
        const clearBtn = document.getElementById(clearBtnId);
        
        if (!list || !clearBtn) return;
        
        // 点击列表项
        list.addEventListener('click', function(e) {
            const target = e.target.closest('li');
            if (target && e.target.tagName === 'A') {
                target.classList.toggle('active');
                filterAndDisplayTours();
            }
        });
        
        // 清除按钮
        clearBtn.addEventListener('click', function() {
            const activeItems = list.querySelectorAll('.active');
            activeItems.forEach(item => {
                item.classList.remove('active');
            });
            filterAndDisplayTours();
        });
    }

    // 筛选并显示旅游项目
    function filterAndDisplayTours() {
        // 获取选中的分类
        const selectedCategories = [];
        document.querySelectorAll('#category-list li.active a').forEach(a => {
            selectedCategories.push(a.getAttribute('data-id'));
        });

        // 获取选中的天数范围
        const selectedDayRanges = [];
        document.querySelectorAll('#days-list li.active a').forEach(a => {
            selectedDayRanges.push(a.getAttribute('data-day'));
        });

        // 获取选中的价格范围
        const selectedPriceRanges = [];
        document.querySelectorAll('#price-list li.active a').forEach(a => {
            selectedPriceRanges.push(a.getAttribute('data-price'));
        });

        // 筛选旅游数据
        const filteredTours = TourData.filter(tour => {
            // 检查分类
            const categoryMatch = selectedCategories.length === 0 || 
                (typeof tour.linetype === 'string' 
                    ? selectedCategories.some(cat => tour.linetype.split(',').includes(cat))
                    : selectedCategories.includes(tour.linetype.toString()));

            // 检查天数
            const dayMatch = selectedDayRanges.length === 0 || 
                selectedDayRanges.some(range => {
                    const [min, max] = range.split('-').map(Number);
                    return tour.Days >= min && tour.Days <= max;
                });

            // 检查价格
            const priceMatch = selectedPriceRanges.length === 0 || 
                selectedPriceRanges.some(range => {
                    const [min, max] = range.split('-').map(Number);
                    // 处理空价格或无效价格情况
                    if (tour.price === undefined || tour.price === null || tour.price === "") return false;
                    
                    // 转换价格为数字
                    const price = typeof tour.price === 'string' 
                        ? parseFloat(tour.price.replace(/[^0-9.]/g, ''))
                        : Number(tour.price);
                    
                    // 检查价格是否在范围内
                    return !isNaN(price) && price >= min && price <= max;
                });

            return categoryMatch && dayMatch && priceMatch;
        });

        // 更新总计数
        allCountSpan.textContent = filteredTours.length;

        // 显示筛选结果
        displayTours(filteredTours);
    }

    // 显示旅游项目
    function displayTours(tours) {
        // 清空现有内容
        tourListContainer.innerHTML = '';

        // 如果没有结果，显示提示
        if (tours.length === 0) {
            tourListContainer.innerHTML = '<div class="no-results">No tours found matching your criteria.</div>';
            return;
        }

        // 遍历并添加每个旅游项目
        tours.forEach(tour => {
            const cities = tour.PassCity ? tour.PassCity.split(',').map(city => city.trim()) : [];
            
            // 格式化价格显示 - 修改后的逻辑
            let priceDisplay = 'Price on request';
            if (tour.price !== undefined && tour.price !== null && tour.price !== "" && tour.price !== 0) {
                const priceNum = typeof tour.price === 'string' 
                    ? parseFloat(tour.price.replace(/[^0-9.]/g, ''))
                    : Number(tour.price);
                
                if (!isNaN(priceNum) && priceNum > 0) {
                    // 只显示整数部分
                    priceDisplay = 'US$' + Math.floor(priceNum).toLocaleString('en-US');
                }
            }
            
            const tourHtml = `
                <div class="flex-col border-box">
                    <a href="${tour.url || '#'}" rel="nofollow">
                        <span class="flag-box"></span>
                        <img alt="${tour.title || 'Tour image'}" class="img-responsive" src="${tour.pic || ''}">
                    </a>
                    <div class="caption">
                        <h3><a href="${tour.url || '#'}">${tour.title || 'Untitled Tour'}</a></h3>
                        <ul class="card-ul">
                            <li class="card-day">${tour.Days || 'N/A'}-Day</li>
                            ${cities.map(city => `<li>${city}</li>`).join('')}
                        </ul>
                        <div class="caption-btn">
                            <p>From <span class="baseprice font24">${priceDisplay}</span></p>
                            <p><a aria-label="button" class="btn-base" href="${tour.url || '#'}" rel="nofollow">View More</a></p>
                        </div>
                    </div>
                </div>
            `;
            
            tourListContainer.insertAdjacentHTML('beforeend', tourHtml);
        });
    }

    // 初始加载时显示所有旅游项目
    filterAndDisplayTours();
});
</script>