<!DOCTYPE html>
<html lang="en">
<head>
    <:include file="./common/title.html" websiteName="商店首页 - ${website.websiteName}" keywords="${website.keywords}"
              description="${website.description}" favicon="${website.favicon}" shop="${shop}"/>
    <link rel="stylesheet" href="${ctxPath}/default/css/index.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/js/swiper/swiper-bundle.min.css"/>
    <style>
        .no-content {
            padding: 60px 0 55px;
            text-align: center;
            color: #999;
            border-radius: 5px;
        }

        .no-content .no-content-img {
            width: 150px;
            margin: 0 auto;
            display: block;
        }

        .no-content .user-no-contents {
            margin-bottom: 0;
            padding-bottom: 15px;
            text-align: center;
            font-size: 18px;
            color: #c8c8c8;
        }
    </style>
</head>
<body>

<!-- header -->
<:include file="./common/header.html" websiteName="${website.websiteName}"
          websiteLogo="${website.websiteLogo}"/>

<!-- goods-card -->
<div class="layui-container body-card" style="margin-bottom: 15px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md8">
            <div class="layui-card" style="border-radius: 5px; box-shadow: 0px 0px 2px rgb(98 124 153 / 10%);">
                <!-- Swiper -->
                <div class="swiper mySwiper">
                    <div class="swiper-wrapper">
                        <:for items="${carouselList}" var="item">
                            <div class="swiper-slide">
                                <a href="${item.link}" style="height: 100%; background-image: url(<:if test="${item.imageLogo == null || item.imageLogo == ''}">../default/images/carousel_logo.png</:if><:if test="${item.imageLogo != null || item.imageLogo != ''}">${item.imageLogo!}</:if>);">
                                    <div class="swiper-text">
                                        <h2>${item.title}</h2>
                                        <:if test="${item.summary != '' || item.summary != null}">
                                            <h3>${item.summary}</h3>
                                        </:if>
                                    </div>
                                </a>
                            </div>
                        </:for>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md4 user-widget-mobile">
            <div class="user-widget-content">
                <div class="widget-mission-header">
                    <div class="user-w-logon" style="padding: 35px 20px;">
                        <p class="user-w-logon-title b2-color" style="margin-bottom: 6px">欢迎访问${website.websiteName}个人小店</p>
                        <div>${shop.storeDetails}</div>
                    </div>
                    <div class="bd">
                        <dl style="position: relative; display: block; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1;">
                            <dt><img src="${ctxPath}/default/images/ship.svg"></dt>
                            <dd>自动发货</dd>
                        </dl>
                        <dl class="dd-box" style="position: relative; display: block; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1;">
                            <dt><img src="${ctxPath}/default/images/security.svg"></dt>
                            <dd>数据安全</dd>
                        </dl>
                        <dl class="dd-box" style="position: relative; display: block; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1;">
                            <dt><img src="${ctxPath}/default/images/demand.svg"></dt>
                            <dd>实时查询</dd>
                        </dl>
                    </div>
                </div>
                <div class="widget-mission-footer">
                    <a href="${ctxPath}/search">订单查询 <i class="layui-icon" style="transform: rotate(-0deg);">&#xe602;</i></a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- goods-card -->
<div class="layui-container body-card" style="margin-bottom: 15px;">
    <:for items="${productListDTOList}" var="item">
        <div class="layui-card" style="border-radius: 5px; box-shadow: 0px 0px 2px rgb(98 124 153 / 10%);">
            <div class="layui-card-header" style="border-bottom: 1px solid transparent;">
                ${item.title}
                <span class="el-tag el-tag--light pull-right" style="top: 10px; position: relative; font-weight: lighter; height: 26px; padding: 0 8px; line-height: 24px;">
                    商品数量 ${item.productNum} 个
                </span>
            </div>
        </div>
        <:if test="${item.productDTOList != null}">
            <div class="layui-row layui-col-space15" style="padding: 1px 0; margin-bottom: 7px;">
                <:for items="${item.productDTOList}" var="item">
                    <div class="layui-col-xs6 layui-col-sm4 layui-col-md3 zlian-animation">
                        <div class="item-in box b2-radius">
                            <div class="post-module-thumb">
                                <a href="${ctxPath}/product/${item.link}" rel="nofollow" class="thumb-link">
                                    <picture class="picture">
                                        <img src="<:if test="${item.indexLogo == null || item.indexLogo == ''}">../default/images/commodity.svg</:if><:if test="${item.indexLogo != null || item.indexLogo != ''}">${item.indexLogo}</:if>" class="post-thumb lazy">
                                    </picture>
                                </a>
                            </div>
                            <div class="post-info">
                                <h2>
                                    <a href="${ctxPath}/product/${item.link}">${item.name}</a>
                                </h2>
                                <div class="post-list-meta-box">
                                    <div class="post-list-cat b2-radius">
                                        <span style="color: #F56C6C; font-size: 15px">¥ ${item.price}</span>
                                    </div>
                                </div>
                                <div class="list-footer">
                                    <a href="${ctxPath}/product/${item.link}" class="post-list-meta-avatar">
                                        <span>库存: ${item.cardMember}</span>
                                    </a>
                                    <span>
                                        <:if test="${item.isCoupon >= 1}"><span style="color: #67C23A">券</span></:if>
                                        <:if test="${item.restricts >= 1}"><span style="color: #F56C6C">限购</span></:if>
                                        <:if test="${item.isWholesale == 1}"><span style="color: #E6A23C">折扣</span></:if>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="product-tag">
                            <:if test="${item.shipType == 0}">
                                <span class="el-tag el-tag&#45;&#45;light">自动发货</span>
                            </:if>
                            <:if test="${item.shipType == 1}">
                                <span class="el-tag el-tag&#45;&#45;success el-tag&#45;&#45;danger">手动发货</span>
                            </:if>
                        </div>
                        <:if test="${item.cardMember == 0}">
                            <div class="ribbon-two ribbon-two-danger"><span>售罄</span></div>
                        </:if>
                    </div>
                </:for>
            </div>
        </:if>
        <:if test="${item.productDTOList == []}">
            <div id="ew-datagrid-page-goodsList" class="ew-datagrid-loadmore datagrid-page-goodsList ew-more-end" style="margin-top: 0px;">
                <div>
                    <span class="ew-icon-loading">
                        <i class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop"></i>
                    </span>
                    <span class="ew-loadmore-text">没有更多商品了~</span>
                </div>
            </div>
        </:if>
    </:for>
</div>

<!-- footer -->
<:include file="./common/footer.html" websiteName="${website.websiteName}" beianIcp="${website.beianIcp}" shop="${shop}"/>
<!-- footer -->
<:include file="./common/footer-menu-home.html"/>
<!-- js部分 -->
<:include file="./common/js.html"/>
<script type="text/javascript" src="${ctxPath}/assets/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="${ctxPath}/assets/js/jquery.cookie.js"></script>
<script type="text/javascript" src="${ctxPath}/assets/js/swiper/swiper-bundle.min.js"></script>
<script>
    layui.use(['layer', 'form'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var shopSettingsJson = JSON.parse(JSON.stringify(${shopSettings!}));
        if (shopSettingsJson.isWindow == 1) {
            if ($.cookie("isWindow") != 'yes') {
                //示范一个公告层
                layer.open({
                    type: 1,
                    title: '站点公告',
                    closeBtn: false,
                    area: '300px;',
                    shade: 0.4,
                    id: 'LAY_layuipro',
                    btn: ['我知道啦'],
                    btnAlign: 'c',
                    moveType: 1,
                    content: '<div style="padding: 20px; font-size: 16px; font-family: Content-font, Roboto, sans-serif; font-weight: 400;">' + shopSettingsJson.windowText + '</div>',
                    success: function (layero) {
                        var btn = layero.find('.layui-layer-btn');
                        btn.click(function () {
                            /*var date = new Date();
                            date.setTime(date.getTime() + (5 * 1000));*/
                            $.cookie('isWindow', 'yes', {expires: 1});
                        })
                    }
                });
            }
        }

        var swiper = new Swiper(".mySwiper", {
            pagination: {
                el: ".swiper-pagination",
            },
            autoplay:true
        });

    });
</script>
</body>
</html>
