kkc-shop
/
kkc-go


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351
							<!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" data-value="">
            <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


    function showOrNoneCPGD() {
        if (cpgd.style.display) {
            cpgd.style.display = ""
            cpd.style.display = "none"
            getSkuList()
        } else {
            cpgd.style.display = "none"
            cpd.style.display = ""
            console.log(666)
            let newUrl = window.location.protocol + '//' +window.location.href;
            let number = newUrl.lastIndexOf('/');
            newUrl = newUrl.substring(0, number)
            history.pushState(null, null, newUrl);
        }
    }

    function getSkuList() {
        if (nowGoodsId) {
            let newUrl = window.location.protocol + '//' +window.location.host + '/category/' + 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
                    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;
        }
        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 = '';
        if (data.list)
            // 遍历返回的商品列表
            data.list.forEach(function (item) {
                // 创建外层 div
                const skuDiv = document.createElement('div');
                skuDiv.classList.add('category-goods-detail-sku');
                skuDiv.dataset.value = item.id;
                // 左侧图片 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);

                //点击跳转事件
                skuDiv.addEventListener("click", function () {
                    window.location.href = "/detail?skuId="+skuDiv.dataset.value
                })


            });
    }

    // 调用函数，传入实际数据
    // postCategoryData(1, 1, 10);
    function initCategory() {
        let ele = null
        //获取路由
        let path = ""
        let host = window.location.host
        let href = window.location.href
        let number = href.indexOf(host)
        if (number === -1) {
            ele.click()
        } else {
            path = href.substring(number + host.length)
        }
        let strings = path.split("/");

        let sign = 0

        for (let i = 0; i < categoryMenuItems.length; i++) {
            let item = categoryMenuItems[i]
            if (strings[strings.length-1] && item.dataset.value===strings[strings.length-1]){
                item.classList.add("category-menu-item-select")
            }
            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"
                    }
                }
                item.className = "category-menu-item category-menu-item-select"

                let newUrl =window.location.protocol + '//' + window.location.host + '/category/';
                history.pushState(null, "", newUrl + item.dataset.value);
                postCategoryData(item.dataset.value, 1, 30)
            })
            if (i === 0) {
                ele = item
            }
        }
        let reg = /^[0-9]*$/
        for (let i = 0; i < strings.length; i++) {
            if (strings[i] === "category") {
                sign = 1
                if (i === strings.length - 1) {
                    let d = ele.getAttribute("data-value");
                    postCategoryData(d, 1, 30)
                    let newUrl = window.location.protocol + '//' +window.location.host+ '/category/' + '/' + d;
                    console.log("ddd",newUrl)
                    history.pushState(null, "", newUrl);
                }
                continue
            }
            if (sign === 1 && reg.test(strings[i])) {
                sign++
                postCategoryData(strings[i], 1, 30)
                continue
            }
            if (sign === 2 && reg.test(strings[i])) {
                sign++
                postCategoryGoodsData(strings[i])
                showOrNoneCPGD()
                break
            }
        }

    }

    initCategory()
</script>
</html>