|
|
@@ -16,12 +16,52 @@
|
|
|
<div class="category-menu-item" data-value="{{$menu.id}}">{{$menu.typeName}}</div>
|
|
|
{{- end}}
|
|
|
</div>
|
|
|
- <div class="category-page-body">{{.menus}}</div>
|
|
|
+ <div class="category-page-body" id="category-page-body">
|
|
|
+ <div class="category-page-item" data-value="1">
|
|
|
+ <div class="category-page-item-image">
|
|
|
+ <img src="" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="category-page-item-name"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<!--商品详情-->
|
|
|
+<div class="category-page-goods-detail" id="category-page-goods-detail" style="display: none">
|
|
|
+ <div class="category-goods-detail-header">
|
|
|
+ <div class="header-return" id="category-goods-detail-header-return"></div>
|
|
|
+ <div class="header-title">一个朴实无华的标题 一个朴实无华的标题一个朴实无华的标题</div>
|
|
|
+ </div>
|
|
|
+ <div class="category-goods-detail-header-interval"></div>
|
|
|
+ <div class="category-goods-detail-handler">
|
|
|
+ <div class="cgdh-tab-item cgdh-tab-item-selected">按销量由高到低</div>
|
|
|
+ <div class="cgdh-tab-item">按价格由高到低</div>
|
|
|
+ <div class="cgdh-tab-item">按价格由低到高</div>
|
|
|
+ </div>
|
|
|
+ <div class="category-goods-detail-skus" id="category-goods-detail-skus">
|
|
|
+ <div class="category-goods-detail-sku">
|
|
|
+ <div class="cgds-left-img">
|
|
|
+ <img src=""/>
|
|
|
+ </div>
|
|
|
+ <div class="cgds-right-detail">
|
|
|
+ <div class="cgds-right-detail-name">steam充值卡</div>
|
|
|
+ <div class="cgds-right-detail-salesnum">销量：233</div>
|
|
|
+ <div class="cgds-right-detail-price">
|
|
|
+ <div class="cgds-right-detail-price-now">2199</div>
|
|
|
+ <div class="cgds-right-detail-price-history">2666</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
{{template "FooterBar.tmpl" .}}
|
|
|
</body>
|
|
|
<script>
|
|
|
let categoryMenuItems = document.getElementsByClassName("category-menu-item")
|
|
|
+ let cpd = document.getElementById("category-page-body");
|
|
|
+ let cpgd = document.getElementById("category-page-goods-detail");
|
|
|
+ let categoryData = null
|
|
|
+ let categoryGoodsData = null
|
|
|
+ let nowGoodsId = null
|
|
|
for (let i = 0; i < categoryMenuItems.length; i++) {
|
|
|
let item = categoryMenuItems[i]
|
|
|
|
|
|
@@ -34,12 +74,224 @@
|
|
|
}
|
|
|
this.className = "category-menu-item category-menu-item-select"
|
|
|
var newUrl = window.location.origin + '/category/';
|
|
|
- history.pushState(null, null, newUrl + "666");
|
|
|
+ history.pushState(null, null, newUrl + item.dataset.value);
|
|
|
+ postCategoryData(item.dataset.value, 1, 30)
|
|
|
+
|
|
|
})
|
|
|
- if (i === 0){
|
|
|
+ if (i === 0) {
|
|
|
item.click()
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ function showOrNoneCPGD() {
|
|
|
+ if (cpgd.style.display) {
|
|
|
+ cpgd.style.display = ""
|
|
|
+ cpd.style.display = "none"
|
|
|
+ getSkuList()
|
|
|
+ } else {
|
|
|
+ cpgd.style.display = "none"
|
|
|
+ cpd.style.display = ""
|
|
|
+ var newUrl = window.location + '/' + nowGoodsId;
|
|
|
+ let number = newUrl.lastIndexOf('/');
|
|
|
+ newUrl = newUrl.substring(0, number)
|
|
|
+ history.pushState(null, null, newUrl);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function getSkuList() {
|
|
|
+ var newUrl = window.location + '/' + nowGoodsId;
|
|
|
+ history.pushState(null, null, newUrl);
|
|
|
+ postCategoryGoodsData(nowGoodsId)
|
|
|
+ }
|
|
|
+
|
|
|
+ document.getElementById("category-goods-detail-header-return").addEventListener("click", function () {
|
|
|
+ showOrNoneCPGD()
|
|
|
+ })
|
|
|
+
|
|
|
+ function postCategoryData(typeId, pageNum, pageSize) {
|
|
|
+ // 创建 XMLHttpRequest 对象
|
|
|
+ var xhr = new XMLHttpRequest();
|
|
|
+
|
|
|
+ // 设置请求方法和 URL
|
|
|
+ xhr.open("POST", "/category", true);
|
|
|
+
|
|
|
+ // 设置请求头，告知服务器数据的类型为 JSON
|
|
|
+ xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
|
|
|
+ // 定义请求完成后的回调函数
|
|
|
+ xhr.onreadystatechange = function () {
|
|
|
+ // 检查请求是否完成且成功
|
|
|
+ if (xhr.readyState === 4 && xhr.status === 200) {
|
|
|
+ try {
|
|
|
+ // 解析服务器返回的 JSON 数据
|
|
|
+ var response = JSON.parse(xhr.responseText);
|
|
|
+ categoryData = response.data
|
|
|
+ // 在此处理返回的数据对象
|
|
|
+ addItemsToPage(categoryData)
|
|
|
+ } catch (e) {
|
|
|
+ console.error("解析响应时出错:", e);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 创建请求发送的数据对象
|
|
|
+ var data = {
|
|
|
+ typeId: typeId,
|
|
|
+ pageNum: pageNum,
|
|
|
+ pageSize: pageSize
|
|
|
+ };
|
|
|
+
|
|
|
+ // 将数据对象转换为 JSON 字符串并发送
|
|
|
+ xhr.send(JSON.stringify(data));
|
|
|
+ }
|
|
|
+
|
|
|
+ function postCategoryGoodsData(goodsId) {
|
|
|
+ // 创建 XMLHttpRequest 对象
|
|
|
+ var xhr = new XMLHttpRequest();
|
|
|
+
|
|
|
+ // 设置请求方法和 URL
|
|
|
+ xhr.open("POST", "/category/goods", true);
|
|
|
+
|
|
|
+ // 设置请求头，告知服务器数据的类型为 JSON
|
|
|
+ xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
|
|
|
+ // 定义请求完成后的回调函数
|
|
|
+ xhr.onreadystatechange = function () {
|
|
|
+ // 检查请求是否完成且成功
|
|
|
+ if (xhr.readyState === 4 && xhr.status === 200) {
|
|
|
+ try {
|
|
|
+ // 解析服务器返回的 JSON 数据
|
|
|
+ var response = JSON.parse(xhr.responseText);
|
|
|
+ categoryGoodsData = response.data
|
|
|
+ console.log(categoryGoodsData)
|
|
|
+ generateGoodsStructure(categoryGoodsData)
|
|
|
+ // 在此处理返回的数据对象
|
|
|
+ } catch (e) {
|
|
|
+ console.error("解析响应时出错:", e);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 创建请求发送的数据对象
|
|
|
+ var data = {
|
|
|
+ goodsId: goodsId,
|
|
|
+ };
|
|
|
+
|
|
|
+ // 将数据对象转换为 JSON 字符串并发送
|
|
|
+ xhr.send(JSON.stringify(data));
|
|
|
+ }
|
|
|
+
|
|
|
+ // 这个函数用于生成 HTML 结构并添加到页面中
|
|
|
+ function addItemsToPage() {
|
|
|
+ // 选择页面中 class 为 "first" 的 div
|
|
|
+ let container = document.getElementById("category-page-body")
|
|
|
+ container.innerHTML = ""
|
|
|
+ if (!container) {
|
|
|
+ console.error("未找到 .first 容器");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ console.log(categoryData)
|
|
|
+ for (let i = 0; i < categoryData.list.length; i++) {
|
|
|
+ let item = categoryData.list[i]
|
|
|
+ // 创建外层 div
|
|
|
+ var itemDiv = document.createElement("div");
|
|
|
+ itemDiv.classList.add("category-page-item");
|
|
|
+ itemDiv.setAttribute("data-value", item.id);
|
|
|
+
|
|
|
+ // 创建图片 div，并设置背景图（如果有）
|
|
|
+ var imageDiv = document.createElement("div");
|
|
|
+ imageDiv.classList.add("category-page-item-image");
|
|
|
+ let img = document.createElement("img");
|
|
|
+ if (item.image) {
|
|
|
+ img.src = item.image
|
|
|
+ } else {
|
|
|
+ img.src = "/api/static/image/def_image.png"
|
|
|
+ }
|
|
|
+ imageDiv.appendChild(img)
|
|
|
+
|
|
|
+ // 创建名称 div，并设置文本
|
|
|
+ var nameDiv = document.createElement("div");
|
|
|
+ nameDiv.classList.add("category-page-item-name");
|
|
|
+ nameDiv.textContent = item.name;
|
|
|
+
|
|
|
+ itemDiv.addEventListener("click", function () {
|
|
|
+ nowGoodsId = item.id
|
|
|
+ showOrNoneCPGD()
|
|
|
+ })
|
|
|
+
|
|
|
+ // 将图片和名称 div 添加到外层 div
|
|
|
+ itemDiv.appendChild(imageDiv);
|
|
|
+ itemDiv.appendChild(nameDiv);
|
|
|
+
|
|
|
+ // 将生成的 item div 添加到 .first 容器中
|
|
|
+ container.appendChild(itemDiv);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function generateGoodsStructure(data) {
|
|
|
+ const container = document.getElementById('category-goods-detail-skus');
|
|
|
+
|
|
|
+ // 清空容器，确保不会重复添加
|
|
|
+ container.innerHTML = '';
|
|
|
+
|
|
|
+ // 遍历返回的商品列表
|
|
|
+ data.list.forEach(function (item) {
|
|
|
+ // 创建外层 div
|
|
|
+ const skuDiv = document.createElement('div');
|
|
|
+ skuDiv.classList.add('category-goods-detail-sku');
|
|
|
+
|
|
|
+ // 左侧图片 div
|
|
|
+ const leftImgDiv = document.createElement('div');
|
|
|
+ leftImgDiv.classList.add('cgds-left-img');
|
|
|
+ const imgElement = document.createElement('img');
|
|
|
+ imgElement.src = item.skuImage; // 设置图片地址
|
|
|
+ leftImgDiv.appendChild(imgElement);
|
|
|
+
|
|
|
+ // 右侧详细信息 div
|
|
|
+ const rightDetailDiv = document.createElement('div');
|
|
|
+ rightDetailDiv.classList.add('cgds-right-detail');
|
|
|
+
|
|
|
+ // 名称 div
|
|
|
+ const nameDiv = document.createElement('div');
|
|
|
+ nameDiv.classList.add('cgds-right-detail-name');
|
|
|
+ nameDiv.textContent = item.skuName; // 设置商品名称
|
|
|
+
|
|
|
+ // 销量 div
|
|
|
+ const salesNumDiv = document.createElement('div');
|
|
|
+ salesNumDiv.classList.add('cgds-right-detail-salesnum');
|
|
|
+ salesNumDiv.textContent = `销量：${item.inventoryNumber}`; // 设置库存信息
|
|
|
+
|
|
|
+ // 价格 div
|
|
|
+ const priceDiv = document.createElement('div');
|
|
|
+ priceDiv.classList.add('cgds-right-detail-price');
|
|
|
+
|
|
|
+ const priceNowDiv = document.createElement('div');
|
|
|
+ priceNowDiv.classList.add('cgds-right-detail-price-now');
|
|
|
+ priceNowDiv.textContent = item.price; // 当前价格
|
|
|
+
|
|
|
+ const priceHistoryDiv = document.createElement('div');
|
|
|
+ priceHistoryDiv.classList.add('cgds-right-detail-price-history');
|
|
|
+ priceHistoryDiv.textContent = item.historicalPrices; // 历史价格
|
|
|
+
|
|
|
+ // 将价格 divs 添加到价格容器
|
|
|
+ priceDiv.appendChild(priceNowDiv);
|
|
|
+ priceDiv.appendChild(priceHistoryDiv);
|
|
|
+
|
|
|
+ // 将名称、销量、价格 div 添加到右侧详细信息 div
|
|
|
+ rightDetailDiv.appendChild(nameDiv);
|
|
|
+ rightDetailDiv.appendChild(salesNumDiv);
|
|
|
+ rightDetailDiv.appendChild(priceDiv);
|
|
|
+
|
|
|
+ // 将左侧图片和右侧详细信息 div 添加到外层 sku div
|
|
|
+ skuDiv.appendChild(leftImgDiv);
|
|
|
+ skuDiv.appendChild(rightDetailDiv);
|
|
|
+
|
|
|
+ // 将生成的 sku div 添加到页面容器中
|
|
|
+ container.appendChild(skuDiv);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 调用函数，传入实际数据
|
|
|
+ postCategoryData(1, 1, 10);
|
|
|
+
|
|
|
+
|
|
|
</script>
|
|
|
</html>
|
