index.html
5.64 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Search - for Shoplazza</title>
<link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
<div class="page-container">
<!-- Header -->
<header class="top-header">
<div class="header-left">
<span class="logo">Product</span>
<span class="product-count" id="productCount">0 products found</span>
</div>
<div class="header-right">
<button class="fold-btn" onclick="toggleFilters()">Fold</button>
</div>
</header>
<!-- Search Bar -->
<div class="search-bar">
<div class="tenant-input-wrapper">
<label for="tenantInput">tenant ID:</label>
<input type="text" id="tenantInput" placeholder="请输入租户ID" value="1">
</div>
<input type="text" id="searchInput" placeholder="输入搜索关键词... (支持中文、英文、俄文)"
onkeypress="handleKeyPress(event)">
<button onclick="performSearch()" class="search-btn">Search</button>
</div>
<!-- Filter Section -->
<div class="filter-section" id="filterSection">
<!-- Category Filter (一级分类) -->
<div class="filter-row">
<div class="filter-label">Category:</div>
<div class="filter-tags" id="category1Tags"></div>
</div>
<!-- Color Filter -->
<div class="filter-row">
<div class="filter-label">Color:</div>
<div class="filter-tags" id="colorTags"></div>
</div>
<!-- Size Filter -->
<div class="filter-row">
<div class="filter-label">Size:</div>
<div class="filter-tags" id="sizeTags"></div>
</div>
<!-- Material Filter -->
<div class="filter-row">
<div class="filter-label">Material:</div>
<div class="filter-tags" id="materialTags"></div>
</div>
<!-- Dropdown Filters -->
<div class="filter-row">
<div class="filter-label">Others:</div>
<div class="filter-dropdowns">
<select id="priceFilter" onchange="handlePriceFilter(this.value)">
<option value="">Price</option>
<option value="0-50">0-50</option>
<option value="50-100">50-100</option>
<option value="100-200">100-200</option>
<option value="200+">200+</option>
</select>
<select id="timeFilter" onchange="handleTimeFilter(this.value)">
<option value="">Listing Time</option>
<option value="today">Today</option>
<option value="week">This Week</option>
<option value="month">This Month</option>
<option value="3months">Last 3 Months</option>
<option value="6months">Last 6 Months</option>
</select>
<button class="clear-filters-btn" onclick="clearAllFilters()" style="display: none;" id="clearFiltersBtn">Clear Filters</button>
</div>
</div>
</div>
<!-- Sort Section -->
<div class="sort-section">
<button class="sort-btn active" data-sort="" onclick="setSortByDefault()">By default</button>
<button class="sort-btn" data-sort="create_time">
By New Products
<span class="sort-arrows">
<span class="arrow-up" data-field="create_time" data-order="desc" onclick="sortByField('create_time', 'desc')">▲</span>
<span class="arrow-down" data-field="create_time" data-order="asc" onclick="sortByField('create_time', 'asc')">▼</span>
</span>
</button>
<button class="sort-btn" data-sort="min_price">
By Price
<span class="sort-arrows">
<span class="arrow-up" data-field="min_price" data-order="asc" onclick="sortByField('min_price', 'asc')">▲</span>
<span class="arrow-down" data-field="min_price" data-order="desc" onclick="sortByField('min_price', 'desc')">▼</span>
</span>
</button>
<div class="sort-right">
<select id="resultSize" onchange="performSearch()">
<option value="20">20 per page</option>
<option value="50" selected>50 per page</option>
<option value="100">50 per page</option>
<option value="200">50 per page</option>
</select>
</div>
</div>
<!-- Loading -->
<div id="loading" class="loading" style="display: none;">
<div class="spinner"></div>
<p>Loading...</p>
</div>
<!-- Product Grid -->
<div class="product-grid" id="productGrid"></div>
<!-- Pagination -->
<div class="pagination" id="pagination" style="display: none;"></div>
<!-- Debug Info -->
<details class="debug-info">
<summary>调试信息</summary>
<div id="debugInfo"></div>
</details>
</div>
<footer>
<p>SearchEngine © 2025 | API: <span id="apiUrl">Loading...</span></p>
</footer>
<script src="/static/js/app.js?v=3.2"></script>
</body>
</html>