移动端添加

data/dao/DetailDao.go

@@ -247,11 +247,11 @@ func GetSkuByKey2(key string, pageNum, pageSize int) ([]domain.GoodsSku, int64,
 		return arr, count, nil
 	}
 
-	count, err := configs.Engine.Table("goods_sku s").
+	count, err := configs.Engine.Table("goods_sku s").Cols("s.id", "s.seo_title", "s.seo_keywords", "s.seo_description", "s.sku_image", "s.sku_name", "s.sort", "s.price", "s.historical_prices", "s.inventory_number", "s.commodity_area_id", "s.goods_id", "s.create_by", "s.create_time").
 		Join("left", "goods g", "s.goods_id = g.id").
 		Join("left", "(SELECT gt.tag as tag,g.id AS goods_id FROM goods g JOIN goods_tag gt ON FIND_IN_SET(gt.id, g.tag_ids)) AS t ", " g.id = t.goods_id").Desc("s.id").
 		Where("t.tag LIKE ? OR g.goods_name LIKE ? OR s.sku_name LIKE ?", sqlKey, sqlKey, sqlKey).
-		Limit(pageSize, (pageNum-1)*pageSize).FindAndCount(&arr)
+		GroupBy("s.id").Limit(pageSize, (pageNum-1)*pageSize).FindAndCount(&arr)
 	if err != nil {
 		fmt.Println("sql语句错误", err)
 		return nil, 0, err

file/resources/css/carousel.css

@@ -7,11 +7,10 @@
     div img{
         max-width: 100%;
     }
+    /*banner区域 end*/
     .carousel a {
         list-style: none;
-
     }
-
     .carousel li {
         list-style: none;
         display: flex;
@@ -55,6 +54,7 @@
     }
 
     .carousel #btn-left {
+        display: none;
         width: 30px;
         height: 69px;
         font-size: 30px;
@@ -80,6 +80,8 @@
     }
 
     .carousel #btn-right {
+
+        display: none;
         border-radius: 8px;
         user-select: none;
         width: 26px;

file/resources/css/category.css

@@ -0,0 +1,23 @@
+*{
+    font-family: -apple-system, blinkmacsystemfont, "Helvetica Neue", helvetica, segoe ui, arial, roboto, "PingFang SC", "miui", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
+}
+
+.category-page{
+    display: flex;
+    align-items: start;
+}
+.category-page-menu{
+    min-width: calc(100% / 5 + 2.02666666vw);
+    width: calc(100% / 5 + 2.02666666vw);
+    height: calc(100VH - 15.666VW - 60px);
+    background-color: #f0f0f0;
+}
+.category-menu-item{
+    width: 100%;
+    height: calc(10VH - 1.5666VW - 6px);
+    line-height: calc(10VH - 1.5666VW - 6px);
+    text-align: center;
+}
+.category-menu-item-select{
+    background-color: white;
+}

file/resources/css/home.css

@@ -2,14 +2,14 @@
 
     /*==============首页主题====================*/
     .card {
-        width: calc(100% - 30px);
-        margin: auto;
-        padding: 0 15px;
+        width: calc(100VW - 40px);
+        margin: 0 0;
+        padding: 0 20px;
         text-align: left;
     }
 
     .card .card-header {
-        margin: 20px 0 0 5px;
+        width: 100%;
         display: flex;
         line-height: 32px;
     }
@@ -20,7 +20,9 @@
         padding: 0;
         width: auto;
         margin: 0;
-        font-size: 24px;
+        font-size: 1.4em;
+        font-weight: bold;
+        color: #333333;
     }
 
     .card .card-header .cart-other {
@@ -37,21 +39,21 @@
         cursor: pointer;
         padding: 5px 15px;
         color: #666666;
-        font-size: 16px;
-        /*color: white;*/
-        /*background: #1475fa;*/
+        font-size: 1.2em;
     }
+
     .card .card-header .cart-other a:after {
         content: " >";
     }
 
     .card .card-des {
-        margin: 8px 0 0 5px;
+        margin: 5px 0 0 0;
         color: #666666;
-        font-size: 14px;
+        font-size: 1em;
     }
 
     .card .card-list {
+        width: calc(100VW - 40px);
         display: flex;
         align-items: center; /* 确保文本和图片顶部对齐 */
         justify-content: space-between;
@@ -62,9 +64,9 @@
     }
 
     .card .card-list .goods-info {
-        width: calc(33.3333% - 20px); /* 三个卡片平分宽度，留出间隙 */
-        margin-right: 10px;
-        margin-bottom: 20px;
+        width: calc(calc(100VW - 40px) / 3 - 20px); /* 三个卡片平分宽度，留出间隙 */
+        /*margin-right: 10px;*/
+        /*margin-bottom: 20px;*/
         text-align: center;
     }
 
@@ -77,11 +79,13 @@
     .card .card-list div:nth-child(3n) {
         margin-right: 0;
     }
+
     /* 统一图片容器的高度 */
     .goods-info .goods-img {
         /*width: 100%;*/
-        width: calc(33.3333VW - 20px);
-        height: calc(44.4444VW - 27px); /* 设定一个固定的高度 */
+        width: calc(33.33334VW - 33px);
+        height: calc(44.4444VW - 44px);
+        border-radius: calc(1VW);
         overflow: hidden; /* 超出部分隐藏 */
     }
 
@@ -102,7 +106,7 @@
     /*topic list item*/
     .goods-info {
         display: block;
-        margin-bottom: 30px;
+        margin-bottom: 12px;
     }
 
     .goods-info:hover {
@@ -110,7 +114,7 @@
     }
 
     .goods-info .goods-name {
-        font-size: 12px;
+        font-size: 1em;
         text-overflow: ellipsis;
         overflow: hidden;
         -webkit-line-clamp: 2;
@@ -150,6 +154,81 @@
         display: none;
     }
 
+    .gift-pack {
+        display: flex;
+        flex-direction: column;
+
+        padding: 20px;
+    }
+
+    .gift-pack h2 {
+        font-size: 1.4em;
+        padding-bottom: 10px;
+    }
+
+    .gift-pack-content {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        flex-wrap: wrap;
+    }
+
+    .content-item {
+        font-size: 1em;
+        width: calc(50% - 34px);
+
+        display: grid;
+        grid-template-rows: 1.6em 1.2em;
+        grid-template-columns: 25%  1fr;
+        margin: 5px;
+        padding: 12px;
+        border-radius: 5px;
+        gap: 5px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        background-color: #dddddd;
+    }
+
+    .content-item .content-item-title {
+        font-size: 1.2em;
+        font-weight: bolder;
+        color: #333333;
+        grid-row: 1;
+        grid-column: 2;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .content-item .content-item-remark {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: #555555;
+        grid-row: 2;
+        grid-column: 2;
+    }
+
+    .content-item .content-item-price {
+        display: none;
+    }
+
+    .content-item .content-item-img {
+        width: 100%;
+        height: 100%;
+        grid-column: 1 / span 1;
+        grid-row: 1 / span 2;
+        align-self: center;
+        justify-self: center;
+    }
+
+    .content-item .content-item-img img {
+        border-radius: 3px;
+        width: 100%;
+        height: 100%;
+    }
 }
 
 @media screen and (min-width: 768px) {
@@ -506,8 +585,8 @@
     }
 
     .goods-info .goods-img img {
-    height: 228px;
-    width: 170px;
+        height: 228px;
+        width: 170px;
     }
 
     .goods-info .goods-img img:hover {

file/resources/css/index.css

@@ -1,3 +1,4 @@
+
 * {
     margin: 0;
     padding: 0;
@@ -5,17 +6,30 @@
 }
 
 /*移动端*/
-@media screen and (min-width: 100px) and (max-width: 768px) {
+@media screen and (min-width: 10px) and (max-width: 768px) {
+    .bottom-bar {
+        display: none;
+    }
+
+    .mobile-bottom {
+        display: block;
+        color: #888888;
+        padding: 5px 10px;
+        background: #fafafa;
+        line-height: 40px;
+        text-align: center;
+    }
 
     .navigation-bar {
         display: flex;
         position: fixed;
         place-items: center;
         top: 0;
-        width: calc(100% - 5.33334vw);
+        width: calc(100% - 5.8666667vw);
+        height: calc(100VW / 10);
         z-index: 11;
         background-color: #000000;
-        padding: calc(0px + 2.66667vw) 3.2vw 2.66667vw calc(0px + 2.66667vw);
+        padding: 2.66667vw 3.2vw;
     }
 
     .nav-body {
@@ -40,6 +54,7 @@
 
     .nav-search {
         width: 80%;
+        height: 80%;
         margin: auto 0;
         display: flex;
         border: none;
@@ -49,7 +64,7 @@
     .nav-search form {
         width: 100%;
         display: flex;
-        min-height: 40px;
+        min-height: 15px;
     }
 
     .nav-search-div {
@@ -61,7 +76,7 @@
         height: 100%;
         width: calc(100%);
         padding: 0 0 0 15px;
-        font-size: 14px;
+        font-size: calc(100VW / 10 / 8 * 3);
         border: none;
         outline: none;
         border-radius: 5px 0 0 5px;
@@ -69,7 +84,7 @@
     }
 
     .search-btn {
-        width: 70px;
+        width: calc(100VW / 6);
         outline: none;
         margin: 0;
         border: none;
@@ -97,13 +112,64 @@
     }
 
     .nav-top {
-        padding-top: 80px;
+        padding-top: calc(10VW + 2.667vw * 2);
     }
 
     .home-suspension {
         display: none;
     }
 
+    .nav-user {
+        display: none;
+    }
+
+    .footer-interval {
+        height: 40px;
+    }
+
+    .footer-bar {
+        text-align: center;
+        display: flex;
+        position: fixed;
+        justify-content: space-evenly;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        min-height: 40px;
+        padding: 5px 0 0 0;
+        border-top: 1px solid #e8e8e8;
+        box-shadow: rgba(0, 0, 0, 0.1) 0 0 5px;
+        background-color: white;
+        z-index: 11;
+    }
+
+    .footer-item {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        margin: 5px 0;
+        padding: 0 10px;
+        border-radius: 5px;
+        background-color: rgba(0, 0, 0, 0);
+
+    }
+
+    .footer-item-img {
+        width: 5.666VW;
+        height: 5.666VW;
+    }
+
+    .footer-item-img img {
+        width: 100%;
+        height: 100%;
+    }
+
+    .footer-item-text {
+        font-size: 1em;
+        color: #666666;
+    }
+
 }
 
 @media screen and (min-width: 769px) {
@@ -117,6 +183,10 @@
         padding: 0;
     }
 
+    .footer-bar {
+        display: none;
+    }
+
     .navigation-bar {
         display: flex;
         position: fixed;
@@ -690,6 +760,9 @@
         z-index: -1;
     }
 
+    .mobile-bottom {
+        display: none;
+    }
 
     .bottom-bar {
         background: white;

file/resources/image/bar/home.svg

@@ -0,0 +1 @@
+<svg t="1728630195031" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2000" id="mx_n_1728630195032" width="32" height="32"><path d="M468.906667 57.941333a68.394667 68.394667 0 0 1 86.165333 0l399.936 322.624c30.058667 24.234667 35.136 68.693333 11.328 99.328a69.269333 69.269333 0 0 1-37.802667 24.768l-3.712 0.810667 0.021334 361.514667c0 59.370667-44.48 108.48-102.528 113.877333l-4.736 0.362667-4.949334 0.106666H211.370667c-59.84 0-109.056-47.808-112.106667-109.312l-0.106667-5.034666-0.021333-361.514667-2.453333-0.490667c-29.696-6.848-52.16-33.088-53.909334-64.96L42.666667 436.010667c0-21.610667 9.685333-42.026667 26.325333-55.466667z m46.72 50.026667a5.76 5.76 0 0 0-7.253334 0L108.864 431.146667a6.058667 6.058667 0 0 0-2.218667 4.693333c0 3.328 2.624 6.016 5.866667 6.016h18.816c17.536-0.021333 31.744 14.506667 31.744 32.405333v392.533334l0.064 3.392C164.437333 896.533333 185.792 917.333333 211.712 917.333333h599.765333l3.328-0.085333c25.770667-1.322667 46.101333-23.146667 46.101334-49.621333V474.282667c0-17.92 14.208-32.426667 31.744-32.426667h18.816c1.792 0 3.477333-0.832 4.608-2.261333a6.101333 6.101333 0 0 0-0.96-8.426667z m138.133333 564.693333a32 32 0 0 1-3.754667 45.098667C610.858667 750.890667 568.106667 768 522.666667 768c-45.44 0-88.192-17.109333-127.36-50.24a32 32 0 1 1 41.386666-48.853333C464.704 692.650667 493.056 704 522.666667 704c29.589333 0 57.941333-11.349333 85.973333-35.093333a32 32 0 0 1 45.12 3.754666z" fill="#aaaaaa" p-id="2001"></path></svg>

file/resources/image/bar/home_dark.svg

@@ -0,0 +1 @@
+<svg t="1728630195031" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2000" id="mx_n_1728630195032" width="32" height="32"><path d="M468.906667 57.941333a68.394667 68.394667 0 0 1 86.165333 0l399.936 322.624c30.058667 24.234667 35.136 68.693333 11.328 99.328a69.269333 69.269333 0 0 1-37.802667 24.768l-3.712 0.810667 0.021334 361.514667c0 59.370667-44.48 108.48-102.528 113.877333l-4.736 0.362667-4.949334 0.106666H211.370667c-59.84 0-109.056-47.808-112.106667-109.312l-0.106667-5.034666-0.021333-361.514667-2.453333-0.490667c-29.696-6.848-52.16-33.088-53.909334-64.96L42.666667 436.010667c0-21.610667 9.685333-42.026667 26.325333-55.466667z m46.72 50.026667a5.76 5.76 0 0 0-7.253334 0L108.864 431.146667a6.058667 6.058667 0 0 0-2.218667 4.693333c0 3.328 2.624 6.016 5.866667 6.016h18.816c17.536-0.021333 31.744 14.506667 31.744 32.405333v392.533334l0.064 3.392C164.437333 896.533333 185.792 917.333333 211.712 917.333333h599.765333l3.328-0.085333c25.770667-1.322667 46.101333-23.146667 46.101334-49.621333V474.282667c0-17.92 14.208-32.426667 31.744-32.426667h18.816c1.792 0 3.477333-0.832 4.608-2.261333a6.101333 6.101333 0 0 0-0.96-8.426667z m138.133333 564.693333a32 32 0 0 1-3.754667 45.098667C610.858667 750.890667 568.106667 768 522.666667 768c-45.44 0-88.192-17.109333-127.36-50.24a32 32 0 1 1 41.386666-48.853333C464.704 692.650667 493.056 704 522.666667 704c29.589333 0 57.941333-11.349333 85.973333-35.093333a32 32 0 0 1 45.12 3.754666z" fill="#666666" p-id="2001"></path></svg>

file/resources/image/bar/other.svg

@@ -0,0 +1 @@
+<svg t="1728630254081" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2359" width="32" height="32"><path d="M618.666667 288a32 32 0 0 1 0 64H320a32 32 0 0 1 0-64h298.666667zM704 480a32 32 0 0 1 0 64H320a32 32 0 0 1 0-64h384zM533.333333 672a32 32 0 0 1 0 64H320a32 32 0 0 1 0-64h213.333333z" fill="#aaaaaa" p-id="2360"></path><path d="M768 85.333333a128 128 0 0 1 128 128v597.333334a128 128 0 0 1-128 128H256a128 128 0 0 1-128-128V213.333333a128 128 0 0 1 128-128h512z m0 64H256a64 64 0 0 0-64 64v597.333334a64 64 0 0 0 64 64h512a64 64 0 0 0 64-64V213.333333a64 64 0 0 0-64-64z" fill="#aaaaaa" p-id="2361"></path></svg>

file/resources/image/bar/other_dark.svg

@@ -0,0 +1 @@
+<svg t="1728630254081" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2359" width="32" height="32"><path d="M618.666667 288a32 32 0 0 1 0 64H320a32 32 0 0 1 0-64h298.666667zM704 480a32 32 0 0 1 0 64H320a32 32 0 0 1 0-64h384zM533.333333 672a32 32 0 0 1 0 64H320a32 32 0 0 1 0-64h213.333333z" fill="#666666" p-id="2360"></path><path d="M768 85.333333a128 128 0 0 1 128 128v597.333334a128 128 0 0 1-128 128H256a128 128 0 0 1-128-128V213.333333a128 128 0 0 1 128-128h512z m0 64H256a64 64 0 0 0-64 64v597.333334a64 64 0 0 0 64 64h512a64 64 0 0 0 64-64V213.333333a64 64 0 0 0-64-64z" fill="#666666" p-id="2361"></path></svg>

file/resources/js/index.js

@@ -17,7 +17,7 @@ function ToTop() {
     })
 }
 
-//todo 首页轮播图
+/*//todo 首页轮播图
 window.onload = function () {
     var items = document.getElementsByClassName("item");
     var circles = document.getElementsByClassName("circle");
@@ -36,7 +36,7 @@ window.onload = function () {
         }
     }
 
-    /*只显示一个class*/
+    /!*只显示一个class*!/
     function move() {
         clearclass();
         items[index].className = "item active";
@@ -89,6 +89,113 @@ window.onload = function () {
             rightBtn.onclick();
         }, 1500)
     }
+}*/
+window.onload = function () {
+    var items = document.getElementsByClassName("item");
+    var circles = document.getElementsByClassName("circle");
+    var leftBtn = document.getElementById("btn-left");
+    var rightBtn = document.getElementById("btn-right");
+    var content = document.querySelector('.content');
+    var index = 0;
+    var timer = null;
+    var startX = 0; // 用于记录触摸起始点
+    var isDragging = false; // 标记是否正在滑动
+
+    // 清除class
+    var clearclass = function () {
+        for (let i = 0; i < items.length; i++) {
+            items[i].className = "item";
+            circles[i].className = "circle";
+            circles[i].setAttribute("num", i);
+        }
+    }
+
+    // 显示当前选中的图片和圆点
+    function move() {
+        clearclass();
+        items[index].className = "item active";
+        circles[index].className = "circle white";
+    }
+
+    // 点击右边按钮切换下一张图片
+    rightBtn.onclick = function () {
+        if (index === items.length - 1) {
+            index = 0;
+        } else {
+            index++;
+        }
+        move();
+    }
+
+    // 点击左边按钮切换上一张图片
+    leftBtn.onclick = function () {
+        if (index === 0) {
+            index = items.length - 1;
+        } else {
+            index--;
+        }
+        move();
+    }
+    //避免打开页面白屏
+    rightBtn.click()
+    leftBtn.click()
+
+    // 开始定时器，实现自动轮播
+    timer = setInterval(function () {
+        rightBtn.onclick();
+    }, 3000);
+
+    // 点击圆点时，跳转到对应图片
+    for (var i = 0; i < circles.length; i++) {
+        circles[i].addEventListener("click", function () {
+            var point_index = this.getAttribute("num");
+            index = point_index;
+            move();
+        });
+    }
+
+    // 鼠标移入清除定时器
+    content.onmouseover = function () {
+        clearInterval(timer);
+    }
+
+    // 鼠标移出重新开始定时器
+    content.onmouseleave = function () {
+        clearInterval(timer);
+        timer = setInterval(function () {
+            rightBtn.onclick();
+        }, 3000);
+    }
+
+    // 触摸事件：触摸开始
+    content.addEventListener('touchstart', function (e) {
+        startX = e.touches[0].clientX;
+        isDragging = true;
+        clearInterval(timer); // 触摸时暂停自动轮播
+    });
+
+    // 触摸事件：触摸移动
+    content.addEventListener('touchmove', function (e) {
+        if (!isDragging) return;
+        var currentX = e.touches[0].clientX;
+        var diffX = currentX - startX;
+
+        if (diffX > 50) { // 向右滑动
+            leftBtn.onclick(); // 切换到上一张
+            isDragging = false;
+        } else if (diffX < -50) { // 向左滑动
+            rightBtn.onclick(); // 切换到下一张
+            isDragging = false;
+        }
+    });
+
+    // 触摸事件：触摸结束
+    content.addEventListener('touchend', function () {
+        isDragging = false;
+        timer = setInterval(function () {
+            rightBtn.onclick();
+        }, 3000); // 重新开始自动轮播
+    });
 }
 
 var CardListElements = null
@@ -139,29 +246,6 @@ function TopicListShowLoad() {
 
 }
 
-// fetch('/api/order/submit', {
-//     method: 'POST',
-//     headers: {
-//         'Content-Type': 'application/json'
-//     },
-//     body: JSON.stringify(data)
-// })
-//     .then(response => response.json())
-//     .then(data => {
-//         console.log('Success:', data);
-//         alert("假装购买成功");
-//     })
-//     .catch((error) => {
-//         console.error('Error:', error);
-//         alert("购买失败");
-//     });
-
-
-
-
-
-
-
 
 
 

file/static/FooterBar.tmpl

@@ -0,0 +1,29 @@
+<div class="footer-interval"></div>
+<div class="footer-bar">
+    <div class="footer-item" data-value="/" {{if eq .footerType "home"}}style="background-color: rgba(0,0,0,0.05)"{{- end}}>
+        <div class="footer-item-img"><img src="/api/static/image/bar/home{{if eq .footerType "home"}}_dark{{- end}}.svg"/></div>
+        <div class="footer-item-text">首页</div>
+    </div>
+    <div class="footer-item" data-value="/category" {{if eq .footerType "category"}}style="background-color: rgba(0,0,0,0.05)"{{- end}}>
+        <div class="footer-item-img"><img src="/api/static/image/bar/other{{if eq .footerType "category"}}_dark{{- end}}.svg"/></div>
+        <div class="footer-item-text">分类</div>
+    </div>
+    <div class="footer-item" data-value="/user" {{if eq .footerType "user"}}style="background-color: rgba(0,0,0,0.05)"{{- end}}>
+        <div class="footer-item-img" ><img src="/api/static/image/bar/user{{if eq .footerType "user"}}_dark{{- end}}.svg"/></div>
+        <div class="footer-item-text">我的</div>
+    </div>
+</div>
+<script>
+    let footerItems = document.getElementsByClassName("footer-item");
+    for (let i = 0; i < footerItems.length; i++) {
+        let item = footerItems[i];
+        item.addEventListener("click", function () {
+            if (this.style.backgroundColor) {
+                return
+            }
+            this.style.backgroundColor = "rgba(0,0,0,0.05)";
+            setTimeout(() => this.style.backgroundColor = "", 300)
+            window.location.href = this.dataset.value
+        })
+    }
+</script>

file/static/NavigationBar.tmpl

@@ -1,4 +1,5 @@
 <script src="/api/static/js/handler.js"></script>
+<div class="nav-top"></div>
 <div class="navigation-bar">
     <div class="nav-body">
         <div class="nav-logo">

file/static/category.html

@@ -0,0 +1,45 @@
+<!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">{{.menus}}</div>
+</div>
+{{template "FooterBar.tmpl" .}}
+</body>
+<script>
+    let categoryMenuItems = document.getElementsByClassName("category-menu-item")
+    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 + "666");
+        })
+        if (i === 0){
+            item.click()
+        }
+    }
+
+</script>
+</html>

file/static/index.html

@@ -13,7 +13,7 @@
 
 </head>
 <body>
-<div class="nav-top"></div>
+
 {{template "NavigationBar.tmpl" .}}
 <div class="home">
     <div class="home-suspension">
@@ -208,17 +208,14 @@
             <div class="goods-info" index="{{$index}}" onclick="JumpRouter('/detail?skuId={{$sku.id}}')">
                 <!--      //获取图片-->
                 <div class="goods-img"><img src="{{ $sku.skuImage }}" alt=""></div>
-                <div class="goods-name">{{$sku.skuName }}
-                </div>
+                <div class="goods-name">{{$sku.skuName }}</div>
                 <div class="goods-price">{{ $sku.price }}</div>
-
                 {{if gt $sku.historicalPrices $sku.price}}
                 <div class="goods-price-od">
                     <span class="goods-original-price">￥{{ $sku.historicalPrices }}</span>
                     <span class="goods-discount-percentage">{{discalc $sku.historicalPrices $sku.price}}</span>
                 </div>
                 {{else}}
-                <br>
                 <div class="goods-price-od">
                     <span class="goods-original-price"></span>
                     <span class=""></span>
@@ -240,6 +237,10 @@
     {{end}}
 </div>
 {{template "BottomBar.tmpl" .}}
+<div class="mobile-bottom">
+    XX市XX区XX号XX经营部
+</div>
+{{template "FooterBar.tmpl" .}}
 </body>
 <script src="/api/static/js/index.js"></script>
 

router/TestRouter.go

@@ -2,6 +2,7 @@ package router
 
 import (
 	"demo/data/dao"
+	"demo/data/dao/manage"
 	"demo/data/domain"
 	"demo/share"
 	"demo/util/templatefunc"
@@ -26,6 +27,9 @@ func TestRouth(engine *gin.RouterGroup) {
 		PushRouter(user, "GET", "/detail", Detail)
 		PushRouter(user, "GET", "/search", SearchPage)
 		PushRouter(user, "GET", "/info/:infoName", InfoPage)
+
+		PushRouter(user, "GET", "/category/:category", CategoryPage)
+		PushRouter(user, "GET", "/category", CategoryPage)
 	}
 
 }
@@ -84,6 +88,7 @@ func Home(c *gin.Context) {
 		c.JSON(200, CreateResultError(401, err.Error()))
 		return
 	}
+	m["footerType"] = "home"
 	json.Unmarshal(d2m, &m)
 
 	c.HTML(http.StatusOK, "index.html", m)
@@ -184,7 +189,6 @@ func SearchPage(c *gin.Context) {
 	m["key"] = key
 	c.HTML(http.StatusOK, "search.html", m)
 }
-
 func GetUserId(c *gin.Context) int64 {
 	header := c.GetHeader("auth-sign")
 	if header == "" {
@@ -197,3 +201,31 @@ func GetUserId(c *gin.Context) int64 {
 	i, err := strconv.ParseInt(claims["iss"].(string), 10, 32)
 	return i
 }
+func CategoryPage(c *gin.Context) {
+	data := share.GetJsonAnyParam(c)
+	categoryPath := c.Param("category")
+	category, _ := data("category")
+	if categoryPath != "" {
+		category = categoryPath
+	}
+	pageNum, _ := data("pageNum")
+	pageSize, _ := data("pageSize")
+	m := make(map[string]interface{})
+	m["category"] = category
+	m["pageNum"] = pageNum
+	m["pageSize"] = pageSize
+	m["pageSize"] = pageSize
+	list, err := manage.GetGoodsTypeList(domain.GoodsType{}, 1, 99999)
+	if err != nil {
+		c.JSON(200, CreateResultError(401, "未查询到结果"))
+		return
+	}
+	m["footerType"] = "category"
+	m["menus"] = list.List
+
+	d, err := json.Marshal(m)
+	var dm = make(map[string]interface{})
+	json.Unmarshal(d, &dm)
+
+	c.HTML(http.StatusOK, "category.html", dm)
+}