kkc-shop
/
kkc-go


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>易租租-分类</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/api/static/css/index.css">
    <link rel="stylesheet" href="/api/static/css/category.css">
</head>
<body>
{{template "NavigationBar.tmpl" .}}
<div class="category-page">
    <div class="category-page-menu">
        {{- range $index, $menu := .menus}}
        <div class="category-menu-item" data-value="{{$menu.id}}">{{$menu.typeName}}</div>
        {{- end}}
    </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]

        item.addEventListener("click", function () {
            for (let j = 0; j < categoryMenuItems.length; j++) {
                let cmi = categoryMenuItems[j]
                if (cmi !== item && cmi.classList.contains("category-menu-item-select")) {
                    cmi.className = "category-menu-item"
                }
            }
            this.className = "category-menu-item category-menu-item-select"
            var newUrl = window.location.origin + '/category/';
            history.pushState(null, null, newUrl + item.dataset.value);
            postCategoryData(item.dataset.value, 1, 30)

        })
        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>