master

分支 (1)

管理

管理

master

operator-web
/
category.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="robots" content="noindex, follow" />
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
    <link rel="stylesheet" href="css/vendor.min.css">
    <link rel="stylesheet" href="css/plugins.min.css">
    <link rel="stylesheet" href="css/style.min.css">
    <script src="js/jquery/jquery.min.js"></script>
    <style>
        html{
            height: 100%;
            overflow-y: hidden;
        }
        body{
            height: 100%;
            overflow-y: auto;
        }
    </style>
</head>
<body>
<div class="main-wrapper">
    <main class="main-content">
        <div class="shop-area section-space-y-axis-100" style="padding-top: 30px;">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="product-topbar">
                            <ul>
                                <li class="product-view-wrap">
                                    <ul class="nav" role="tablist">
                                        <li class="grid-view" role="presentation">
                                            <a class="active" id="grid-view-tab" data-bs-toggle="tab" href="#grid-view" role="tab" aria-selected="true">
                                                <i class="fa fa-th"></i>
                                            </a>
                                        </li>
                                        <li class="list-view" role="presentation">
                                            <a id="list-view-tab" data-bs-toggle="tab" href="#list-view" role="tab" aria-selected="true">
                                                <i class="fa fa-th-list"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="page-count">
                                    <span id="count">0</span> Product Found of <span>100</span>
                                </li>
                                <li class="short">
                                    <select class="nice-select wide rounded-0">
                                        <option value="1">Sort by Default</option>
                                        <option value="2">Sort by Popularity</option>
                                        <option value="3">Sort by Rated</option>
                                        <option value="4">Sort by Latest</option>
                                        <option value="5">Sort by High Price</option>
                                        <option value="6">Sort by Low Price</option>
                                    </select>
                                </li>
                            </ul>
                        </div>
                        <div class="tab-content text-charcoal pt-8" style="padding-top: 0 !important;">
                            <div class="tab-pane fade show active" id="grid-view" role="tabpanel" aria-labelledby="grid-view-tab">
                                <div class="product-grid-view row">

                                </div>
                            </div>
                            <div class="tab-pane fade" id="list-view" role="tabpanel" aria-labelledby="list-view-tab">
                                <div class="product-list-view row">

                                </div>
                            </div>
                        </div>
<!--                        <div class="pagination-area pt-10">-->
<!--                            <nav aria-label="Page navigation example">-->
<!--                                <ul class="pagination justify-content-center">-->
<!--                                    <li class="page-item">-->
<!--                                        <a class="page-link" href="#" aria-label="Previous">-->
<!--                                            <span class="fa fa-chevron-left"></span>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                    <li class="page-item active"><a class="page-link" href="#">1</a></li>-->
<!--                                    <li class="page-item"><a class="page-link" href="#">2</a></li>-->
<!--                                    <li class="page-item">-->
<!--                                        <a class="page-link" href="#" aria-label="Next">-->
<!--                                            <span class="fa fa-chevron-right"></span>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                </ul>-->
<!--                            </nav>-->
<!--                        </div>-->
                    </div>
                </div>
            </div>
        </div>
    </main>
    <div class="footer-area">
        <div class="footer-bottom py-3" data-bg-color="#1EB9EE">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="copyright">
                            <span class="copyright-text text-white">Copyright &copy; 2023.LAO Asia Unicom All rights reserved.</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <a class="scroll-to-top" href="">
        <i class="fa fa-chevron-up"></i>
    </a>
</div>
<script src="layui/layui.js"></script>
<script src="js/config.js"></script>
<script src="js/token.js"></script>
<script src="js/vendor.min.js"></script>
<script src="js/plugins.min.js"></script>
<script src="js/jquery.i18n.min.js"></script>
<script src="js/multi_lang_config.js"></script>

</body>
<script>

    var layer = layui.layer;
    var form = layui.form;

    var moduleName = "shop";
    var defaultLang = layui.data('langTab').langType;
    initLangConfig({
        defaultLang:defaultLang,
        filePath: "js/i18n/"+moduleName+"/",
        module:moduleName,
        base:"js/"
    })
    var i18np = null;
    function changeLang(lang) {
        defaultLang = lang;
        reloadI18n({
            defaultLang:lang,
            filePath: "js/i18n/"+moduleName+"/",
            module:moduleName,
        })
        i18np.loadProperties(moduleName);
    }

    layui.config({base: 'js/'})
        // 继承treetable.js插件
        .extend({i18np: 'i18n'}).use([ 'i18np','jquery'], function () {
        i18np = layui.i18np;
        i18np.loadProperties(moduleName);
    });

    var goodsList = [];
    function toUrl(i) {
        window.location.href = "single-product.html?gid="+goodsList[i].id;
    }

    // 查询指定类型的商品
    var gtype=GetQueryString("type");    // 获取地址栏的参数
    var requestUrl = '';
    if(gtype==null || gtype==undefined || gtype==''){
        requestUrl='webapi/goods/getGoodsByPage'
    }else{
        requestUrl='webapi/goods/getGoodByType';
    }
    $.ajax({
        url: HOST + requestUrl,
        data:{gType:gtype,limit:100},
        success: function (res) {
            goodsList = res.data;
            $("#count").html(res.count);
            if (res.code == 200 & res.data.length > 0) {
                let grid_s = '';
                let list_s="";
                for (let i = 0; i < res.data.length; i++) {
                    grid_s+=`<div class="col-lg-3 col-sm-6" style="margin-top: 20px;">
                                        <div class="product-item" onclick="toUrl(${i})">
                                            <div class="product-img img-zoom-effect">
                                                <a>
                                                    <img class="img-full" src="${res.data[i].picture}" alt="Product Images">
                                                </a>
                                            </div>
                                            <div class="product-content">
                                                <a class="product-name">${res.data[i].nameEn}</a>
                                                <div class="price-box pb-1">
                                                    <span class="new-price">$${res.data[i].price}</span>
                                                </div>
                                                <div style="font-size: 14px;font-weight: 400;color: white;margin-top: 6px;cursor: pointer;">
                                                    <div style="border-radius: 5px;background-color: #033772;height: 50px;line-height: 50px;color: white;">ADD TO CART</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>`;
                    list_s+=`<div class="col-12 pt-6">
                                        <div class="product-item" onclick="toUrl(${i})">
                                            <div class="product-img img-zoom-effect">
                                                <a>
                                                    <img class="img-full" src="${res.data[i].picture}" alt="Product Images">
                                                </a>
                                            </div>
                                            <div class="product-content align-self-center">
                                                <a class="product-name pb-2">${res.data[i].nameEn}</a>
                                                <div class="price-box pb-1">
                                                    <span class="new-price">$${res.data[i].price}</span>
                                                </div>
                                                <div style="font-size: 14px;font-weight: 400;color: white;margin-top: 16px;cursor: pointer;">
                                                    <div style="border-radius: 5px;background-color: #033772;height: 40px;line-height: 40px;color: white;width: 160px;text-align: center;">ADD TO CART</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>`
                }
                $("#grid-view .product-grid-view").html("");
                $("#grid-view .product-grid-view").html(grid_s);
                $("#list-view .product-list-view").html("");
                $("#list-view .product-list-view").html(list_s);
            }
        }
    })
</script>

</html>