上海站线路列表页

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

@@ -0,0 +1,192 @@
+<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>
+                    <a href="#" class="btn-base">See <span id="category-count">0</span> results</a>
+                </div>
+            </div>
+        </div>
+        <div class="filter-item">
+            <div class="filter-nav">Days</div>
+            <div class="filter-popup">
+                <p class="popup-title">Tours</p>
+                <ul id="days-list">
+                    <li><a href="javascript:;" data-day="1">1 Days</a></li>
+                    <li><a href="javascript:;" data-day="2-3">2-3 Days</a></li>
+                    <li><a href="javascript:;" data-day="4-6">4-6 Days</a></li>
+                    <li><a href="javascript:;" data-day="7-9">7-9 Days</a></li>
+                    <li><a href="javascript:;" data-day="10-20">10 or more Days</a></li>
+                </ul>
+                <div class="popup-bottom">
+                    <a href="javascript:;" class="clearbtn" id="clear-days"><strong>Clear</strong></a>
+                    <a href="#" class="btn-base">See <span id="days-count">0</span> results</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');
+    
+    // 为分类和天数添加点击事件
+    setupFilterList('category-list', 'clear-category', 'category-count');
+    setupFilterList('days-list', 'clear-days', 'days-count');
+
+    // 通用函数：设置筛选列表的点击和清除功能
+    function setupFilterList(listId, clearBtnId, countSpanId) {
+        const list = document.getElementById(listId);
+        const clearBtn = document.getElementById(clearBtnId);
+        const countSpan = document.getElementById(countSpanId);
+        
+        // 点击列表项
+        list.addEventListener('click', function(e) {
+            const target = e.target.closest('li');
+            if (target && e.target.tagName === 'A') {
+                target.classList.toggle('active');
+                updateSelectedCount();
+                filterAndDisplayTours();
+            }
+        });
+        
+        // 清除按钮
+        clearBtn.addEventListener('click', function() {
+            const activeItems = list.querySelectorAll('.active');
+            activeItems.forEach(item => {
+                item.classList.remove('active');
+            });
+            updateSelectedCount();
+            filterAndDisplayTours();
+        });
+        
+        // 更新选中数量
+        function updateSelectedCount() {
+            const count = list.querySelectorAll('.active').length;
+            countSpan.textContent = count;
+        }
+    }
+
+    // 筛选并显示旅游项目
+    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 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 => {
+                    if (range.includes('-')) {
+                        const [min, max] = range.split('-').map(Number);
+                        return tour.Days >= min && tour.Days <= max;
+                    }
+                    return tour.Days === Number(range);
+                });
+
+            return categoryMatch && dayMatch;
+        });
+
+        // 更新计数
+        document.getElementById('category-count').textContent = selectedCategories.length;
+        document.getElementById('days-count').textContent = selectedDayRanges.length;
+        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.split(',').map(city => city.trim());
+            
+            const tourHtml = `
+                <div class="flex-col border-box">
+                    <a href="${tour.url}" rel="nofollow">
+                        <span class="flag-box"></span>
+                        <img alt="${tour.title}" class="img-responsive" src="${tour.pic}">
+                    </a>
+                    <div class="caption">
+                        <h3><a href="${tour.url}">${tour.title}</a></h3>
+                        <ul class="card-ul">
+                            <li class="card-day">${tour.Days}-Day</li>
+                            ${cities.map(city => `<li>${city}</li>`).join('')}
+                        </ul>
+                        <div class="caption-btn">
+                            <p>From <span class="baseprice font24">${tour.price ? 'US$' + tour.price : 'Price on request'}</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>