行业

茶与咖啡

生产具有独特风土和手工生产方法的高品质热饮的优质茶园和精品咖啡烘焙商。这些生产商将传统知识与现代技术相结合，创造展现地区特色、直接贸易道德和工艺卓越的复杂风味特征。

2 品牌

热饮传承

来自独特产地的精品茶和咖啡提供高利润率和忠诚的客户基础。这些生产商利用风土真实性、直接贸易关系和工艺卓越性在高端饮料市场竞争，消费者为质量和产地透明度支付显著溢价。

按位置探索品牌

全球南方品牌位置交互式地图。使用邻近搜索、查看区域集群并探索附近品牌。

website: feature.properties.website || '', tier: feature.properties.contentTier || 'basic' })); this.loading = false; // Update hero brand count const heroCount = document.getElementById('hero-brand-count'); if (heroCount) { const brandWord = this.brands.length === 1 ? '个品牌' : '品牌'; heroCount.innerHTML = this.brands.length + ' ' + brandWord; } console.log('Loaded ' + this.brands.length + ' brands for ' + taxonomyType + ': ' + termSlug); } catch (error) { console.error('Error loading brand data:', error); this.brands = []; this.loading = false; } // Initialize filters from URL parameters const params = new URLSearchParams(window.location.search); if (params.has('search')) this.search = params.get('search'); if (params.has('country')) this.country = params.get('country'); if (params.has('tier')) this.brandTier = params.get('tier'); if (params.has('website')) this.hasWebsite = params.get('website') === 'true'; // Watch for filter changes and update URL (debounced for search) let searchTimeout; this.$watch('search', () => { clearTimeout(searchTimeout); searchTimeout = setTimeout(() => this.updateURL(), 300); }); this.$watch('country', () => this.updateURL()); this.$watch('brandTier', () => this.updateURL()); this.$watch('hasWebsite', () => this.updateURL()); }, updateURL() { const params = new URLSearchParams(); if (this.search) params.set('search', this.search); if (this.country) params.set('country', this.country); if (this.brandTier) params.set('tier', this.brandTier); if (this.hasWebsite) params.set('website', 'true'); const newURL = params.toString() ? window.location.pathname + '?' + params.toString() : window.location.pathname; window.history.pushState({}, '', newURL); }, get activeFilterCount() { let count = 0; if (this.search) count++; if (this.country) count++; if (this.brandTier) count++; if (this.hasWebsite) count++; return count; }, get filteredBrands() { return this.brands.filter(brand => { const matchesSearch = !this.search || brand.name.toLowerCase().includes(this.search.toLowerCase()); const matchesCountry = !this.country || brand.countryCode === this.country; const matchesTier = !this.brandTier || brand.tier === this.brandTier; const matchesWebsite = !this.hasWebsite || brand.website; return matchesSearch && matchesCountry && matchesTier && matchesWebsite; }); }, get sortedBrands() { return [...this.filteredBrands].sort((a, b) => { let aVal, bVal; if (this.sortBy === 'founded') { aVal = a.founded || 0; bVal = b.founded || 0; } else if (this.sortBy === 'tier') { const tierOrder = { 'complete': 3, 'partial': 2, 'basic': 1 }; aVal = tierOrder[a.tier] || 0; bVal = tierOrder[b.tier] || 0; } else if (this.sortBy === 'country') { aVal = a.country || ''; bVal = b.country || ''; } else if (this.sortBy === 'city') { aVal = a.city || ''; bVal = b.city || ''; } else { aVal = a.name || ''; bVal = b.name || ''; } if (this.sortDirection === 'asc') { return aVal > bVal ? 1 : aVal < bVal ? -1 : 0; } else { return aVal < bVal ? 1 : aVal > bVal ? -1 : 0; } }); }, get visibleCount() { return this.filteredBrands.length; }, get uniqueCountries() { return [...new Set(this.brands.map(b => b.countryCode).filter(c => c))].sort(); }, getCountryName(code) { const countryNames = { 'ru': '俄罗斯', 'cn': '中国', 'mn': '蒙古', 'et': '埃塞俄比亚', 'in': '印度' }; return countryNames[code] || code.toUpperCase(); }, clearAllFilters() { this.search = ''; this.country = ''; this.brandTier = ''; this.hasWebsite = false; }, removeFilter(filterName) { if (filterName === 'search') this.search = ''; else if (filterName === 'country') this.country = ''; else if (filterName === 'tier') this.brandTier = ''; else if (filterName === 'website') this.hasWebsite = false; }, sortTable(column) { if (this.sortBy === column) { this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc'; } else { this.sortBy = column; this.sortDirection = (column === 'founded') ? 'desc' : 'asc'; } }, downloadCSV() { const headers = ['Brand', 'City', 'Country', 'Founded', 'Website', 'Tier']; let csv = headers.join(',') + '\n'; this.sortedBrands.forEach(brand => { const rowData = [ this.escapeCSV(brand.name), this.escapeCSV(brand.city || '—'), this.escapeCSV(brand.country || '—'), this.escapeCSV(brand.founded ? String(brand.founded) : '—'), this.escapeCSV(brand.website || '—'), this.escapeCSV(brand.tier) ]; csv += rowData.join(',') + '\n'; }); const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' }); const link = document.createElement('a'); const url = URL.createObjectURL(blob); const today = new Date().toISOString().split('T')[0]; let filename = 'tea-coffee-directory-' + today; if (this.activeFilterCount > 0) { filename += '-filtered'; } filename += '.csv'; link.setAttribute('href', url); link.setAttribute('download', filename); link.style.visibility = 'hidden'; document.body.appendChild(link); link.click(); document.body.removeChild(link); }, escapeCSV(str) { if (!str) return ''; const comma = String.fromCharCode(44); const quote = String.fromCharCode(34); const newline = String.fromCharCode(10); if (str.includes(comma) || str.includes(quote) || str.includes(newline)) { return quote + str.replace(new RegExp(quote, 'g'), quote + quote) + quote; } return str; } }" class="directory-table-container">