goods_list.html 21.1 KB

原文件审查历史永久链接

<!DOCTYPE html>
<html lang="zh">
{include file="public/head"/}
<!--swiper引入-->
<link rel="stylesheet" href="__CDN__/assets/store/js/Swiper-3.4.2/css/swiper.min.css">
<script type="text/javascript" src="__CDN__/assets/store/js/Swiper-3.4.2/js/swiper.min.js"></script>
<!--分页插件引入-->
<script type="text/javascript" src="__CDN__/assets/store/js/pagination/js/pagination.min.js"></script>
<link rel="stylesheet" href="__CDN__/assets/store/js/pagination/css/pagination.css">
<style>
    .content{
        width: 100%;
        font-size: 0;
        background: rgba(249,249,249,1);
    }
    .content .bannerBox{
        position: relative;
        width: 100%;
        height: 540px;
        background: #1e9fff;
        margin-bottom: 20px;
    }

    /*轮播图样式*/
    .content .bannerBox .swiper-pagination-bullet{
        background: rgba(255,255,255,1);
        opacity: 1;
    }
    .content .bannerBox .swiper-pagination-bullet-active{
        background: rgba(61,68,77,1);
    }

    /*悬浮导航一级样式*/
    .content .bannerBox .suspensionNavBox{
        position: absolute;
        width: 284px;
        height: 540px;
        top: 0;
        left: 360px;
        z-index: 9;
        background: rgba(255,255,255,1);
        opacity: 0.9;
        overflow: scroll;
    }
    .content .bannerBox .suspensionNavBox ul{
        width: 100%;
        height: 100%;
    }
    .content .bannerBox .suspensionNavBox ul li{
        list-style-type: none;
        width: 100%;
        /*height: 75px;*/
        padding: 14px 12px;
        cursor: pointer;
        border-top: 1px solid rgba(238,238,238,1);
    }
    .content .bannerBox .suspensionNavBox ul li .typeBox p{
        display: inline-block;
        height: 22px;
        margin-bottom: 5px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 22px;
        color: rgba(61,68,77,1);
    }
    .content .bannerBox .suspensionNavBox ul li .typeBox .selectTypeName{
        color: #009F8E;
    }
    .content .bannerBox .suspensionNavBox ul li .typeBox .arrow{
        float: right;
    }
    .content .bannerBox .suspensionNavBox ul li .typeDetailBox{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .content .bannerBox .suspensionNavBox ul li .typeDetailBox p{
        display: inline-block;
        height: 20px;
        margin-right: 15px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 20px;
    }
    .content .bannerBox .suspensionNavBox ul li .typeDetailBox p a{
        color: rgba(140,145,152,1);
    }
    /*悬浮导航二级样式*/
    .content .bannerBox .secondLevelBox{
        display: none;
        position: absolute;
        width: 455px;
        height: 540px;
        top: 0;
        left: 644px;
        z-index: 9;
        background: rgba(249,249,249,1);
        opacity: 0.9;
    }
    .content .bannerBox .secondLevelBox #secondLevelTitle{
        width: 100%;
        height: 62px;
        line-height: 62px;
        text-align: center;
        border-bottom: 1px solid rgba(238,238,238,1);
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(0,159,142,1)
    }
    .content .bannerBox .secondLevelBox #secondLevelList{
        width: 100%;
        height: 478px;
        overflow: auto;
    }
    .content .bannerBox .secondLevelBox #secondLevelList li{
        list-style-type: none;
        cursor: pointer;
        width: 100px;
        height: 42px;
        line-height: 42px;
        text-align: center;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(6,18,30,1);
        float: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-left: 10px;
    }
    .content .bannerBox .secondLevelBox #secondLevelList li a{
        color: rgba(6,18,30,1);
    }

    /*产品热卖部分样式*/
    .content .bestSellersBox{
        width: 100%;
        /*height: 1063px;*/
        background: rgba(255,255,255,1);
    }
    .content .bestSellersBox .bestSellersMain{
        width: 1200px;
        margin: 0 auto;
    }
    .content .bestSellersBox .bestSellersMain .titleBox{
        width: 1200px;
        height: 62px;
        line-height: 62px;
    }
    .content .bestSellersBox .bestSellersMain .titleBox span:first-child{
        display: inline-block;
        float: left;
        width: 6px;
        height: 20px;
        margin-top: 21px;
        background: rgba(0,159,142,1);
        border-radius: 2px;
    }
    .content .bestSellersBox .bestSellersMain .titleBox span:nth-child(2){
        height: 22px;
        line-height: 22px;
        float: left;
        margin-top: 20px;
        padding-left: 12px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(0,159,142,1);
    }
    .content .bestSellersBox .bestSellersMain .titleBox .moreBtn{
        float: right;
        height: 62px;
        line-height: 62px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(140,145,152,1);
    }
    .content .bestSellersBox .bestSellersMain .bestSellersList{
        width: 100%;
        padding: 0 19px 0 29px;
        margin-bottom: 20px;
    }
    .content .bestSellersBox .bestSellersMain .bestSellersList .commodityBox{
        position: relative;
        display: inline-block;
        width: 182px;
        /*height: 301px;*/
        margin-right: 10px;
    }
    .content .bestSellersBox .bestSellersMain .bestSellersList .commodityBox a .insurance_icon{
        position: absolute;
        top: 0;
        right: 0;
    }
    .content .bestSellersBox .bestSellersMain .bestSellersList .commodityBox .imgBox{
        position: relative;
    }
    .content .bestSellersBox .bestSellersMain .bestSellersList .commodityBox .imgBox img{
        width: 182px;
        height: 182px;
    }
    .content .bestSellersBox .bestSellersMain .bestSellersList .commodityBox .imgBox span{
        display: block;
        position: absolute;
        top: 152px;
        width: 100%;
        height: 30px;
        padding: 0 12px;
        background: rgba(0,0,0,0.5);
        border-radius: 0 0 4px 4px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 30px;
        color: rgba(0,159,142,1);
    }
    .content .bestSellersBox .bestSellersMain .bestSellersList .commodityBox .commodityPrice{
        width: 100%;
        height: 33px;
        line-height: 40px;
        margin: 0;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 600;
        color: rgba(255,49,0,1);
    }
    .content .bestSellersBox .bestSellersMain .bestSellersList .commodityBox .commodityName{
        width: 100%;
        /*height: 42px;*/
        line-height: 21px;
        margin: 0 0 4px 0;
        text-align: left;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(6,18,30,1);
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .content .bestSellersBox .bestSellersMain .bestSellersList .commodityBox .labelBox span{
        display: inline-block;
        width: 70px;
        height: 21px;
        margin-right: 6px;
        background: rgba(244,244,244,1);
        border-radius: 2px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 21px;
        text-align: center;
        color: rgba(0,0,0,1);
        opacity: 0.85;
    }
    .content .bestSellersBox .bestSellersMain .pagingBox{
        width: 100%;
        height: 35px;
        text-align: center;
        font-size: 14px;
        font-family: PingFangSC-Regular;
        line-height: 22px;
        color: rgba(0,0,0,1);
    }
</style>
<style>
    /*分页样式重写*/
    .paginationMyOrder{
        margin: 40px 120px;
    }
    #paginationGoodsCollect,#paginationStoreCollect{
        padding: 20px 0 40px 240px;
    }
    .whj_jqueryPaginationCss-1 .whj_border{
        font-size:14px;
        font-family:PingFangSC-Regular;
        color:rgba(0,0,0,0.65);
        /*opacity:0.65;*/
        border:1px solid rgba(0,0,0,0.15);
    }
    .whj_jqueryPaginationCss-1 .whj_padding{
        margin: 0 4px;
        width:32px;
        height:32px;
        line-height: 32px;
        text-align: center;
        border-radius:4px;
        padding: 0;
    }

    .whj_jqueryPaginationCss-1 .whj_checked{
        color: #fff;
        border: 0;
        background:rgba(0,159,142,1);
        box-shadow:0px 6px 12px rgba(0,0,0,0.04);
    }
    .whj_jqueryPaginationCss-1 .whj_padding:hover{
        color: #fff;
        border: 0;
        background:rgba(0,159,142,1);
        box-shadow:0px 6px 12px rgba(0,0,0,0.04);
    }
    .whj_jqueryPaginationCss-1 select:hover{
        color: #fff;
    }
    .whj_jqueryPaginationCss-1 select{
        height:32px;
        line-height: 32px;
        text-align: center;
        border-radius:4px;
        margin: 0 4px 0 12px;
        width:88px;
        color:rgba(0,0,0,0.65)!important;
        padding: 0 10px;
        /*background: url("../images/selectIcon.png") no-repeat  no-repeat 60px 8px !important;*/
    }

    .whj_jqueryPaginationCss-1 .whj_color{
        background: transparent!important;
        font-size:14px;
        font-family:PingFangSC-Regular;
        color:rgba(0,0,0,0.65)!important;
    }
    .whj_jqueryPaginationCss-1 input{
        margin: 0 4px;
        width:48px;
        height:32px;
        border:1px solid rgba(0,0,0,0.15)!important;
        border-radius:4px!important;
    }
</style>
<body>
{include file="public/header"/}
<!--主要内容-->
<div class="content">
    {include file="public/nav"}
    <!--轮播图-->
    <div class="bannerBox">
        <div id="banner-container" class="swiper-container">
            <div class="swiper-wrapper">
                {foreach name="$slide" item="s"}
                <div class="swiper-slide" style="height: auto;
    min-height: 540px;"><img src="{$s.thumbnail}" alt="img" style="width: 100%;height:100%"></div>
                {/foreach}
            </div>
            <!--分页器。如果放置在swiper-container外面，需要自定义样式。-->
            <div class="swiper-pagination"></div>
        </div>

        <!--悬浮导航一级-->
        <div class="suspensionNavBox">
            <ul>
                {foreach name="$goodstype_one" item="g_o"}
                <li onmouseenter="openSecondLevelMenu(this)" >
                    <div class="typeBox">
                        <p class="typeName">{$g_o.name}</p>
                        <p class="arrow"><img src="__CDN__/assets/store/images/rightArrow.png" alt="img"></p>
                    </div>
                    <div class="typeDetailBox">
                        {foreach name="$g_o.goodstype_two" item="g_t"}
                        <p><a href="{:url('index/goods/goods_list',array('category_id'=>$g_t.id))}">{$g_t.name}</a></p>
                        {/foreach}
                    </div>
                </li>
                {/foreach}
            </ul>
        </div>
        <!--悬浮导航二级-->
        <div class="secondLevelBox" onmouseleave="closeSecondLevelMenu()">
            <p id="secondLevelTitle">
                低压配电
            </p>
            <ul id="secondLevelList">
                <li>机械设备</li>
                <li>机床设备</li>
            </ul>
        </div>
    </div>

    <!--产品热卖部分-->
    <div class="bestSellersBox">
        <div class="bestSellersMain">
            <div class="titleBox">
                <span></span>
                <span>采购中心 {notempty name="$category"}> {$category.name}{/notempty}</span>
            </div>
            <div class="bestSellersList goods_dom">
                <!--<div class="commodityBox">
                    <a href="commodityDetail.html?commodityId=1">
                        <div class="imgBox">
                            <img src="__CDN__/assets/store/images/commodity.png" alt="img">
                            <span>新世纪店铺</span>
                        </div>
                        <p class="commodityPrice">¥6000.00</p>
                        <p class="commodityName">优势AAA电阻电容二极管商品名称商品名称名称</p>
                        <div class="labelBox">
                            <span>厂家直销</span>
                            <span>一级代理</span>
                        </div>
                        <img class="insurance_icon" src="__CDN__/assets/store/images/insurance_icon.png" alt="img">
                    </a>
                </div>-->
            </div>
            <div class="without" style="height: 100px;text-align: center;font-size: 16px;line-height: 100px;display: none;">暂无更多</div>
            <div class="pagingBox">
                <div class="paginationMyOrder" id="paginationAllOrder">
                    <div class="whj_jqueryPaginationCss-1 "></div>
                </div>
            </div>
        </div>
    </div>
</div>
{include file="public/footer"/}
{include file="public/js"/}
<script>
    var category_id = '{notempty name="$category"}{$category.id}{/notempty}';
    $(function () {
        initBanner();//初始化轮播图
        initLocation();//获取定位信息
    });

    //定位当前位置
    function initLocation(){
        // 百度地图API功能
        var map = new BMap.Map("allmap");
        var point = new BMap.Point(116.331398,39.897445);
        map.centerAndZoom(point,12);
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                var mk = new BMap.Marker(r.point);
                map.addOverlay(mk);
                map.panTo(r.point);
                //省份名称转换为id
                $.ajax({
                    url:"{:url('index/sundry/get_province_id')}",
                    type:"POST",
                    data:{"province_name":r.address.province},
                    async:false,
                    success:function(res){
                        if(res.code == 1){
                            province_id = res.data.province_id;
                            lng = r.point.lng;
                            lat = r.point.lat;
                            //初始化产品热卖
                            initGoodsList();
                        }else{
                            toast(res.msg);
                        }
                    },
                    error:function(res){
                        toast('与服务器断开连接');
                    }
                });
            } else {
                toast('failed'+this.getStatus());
            }
        },{enableHighAccuracy: true})
    }

    //加载轮播图
    function initBanner() {
        var mySwiper = new Swiper('#banner-container', {
            autoplay: 5000,//可选选项，自动滑动
            pagination : '.swiper-pagination'
        })
    }

    //初始化商品列表
    function initGoodsList(page = 1, pageNum = 18){
        $.ajax({
            url:"{:url('index/goods/get_all')}",
            type:"POST",
            data:{"province_id":province_id,"page":page,"pageNum":pageNum,'paginate':1,'category_id':category_id},
            success:function(res){
                console.log(res);
                if(res.code == 1) {
                    if (res.data.length == 0) {
                        $('.without').show();
                        return false;
                    }
                    var goods_html = "";
                    $(res.data.data).each(function (key1, vo) {
                        var property = "";
                        $(vo.property).each(function (key2, p) {
                            property += "<span>" + p + "</span>";
                        });
                        var insurance = "";
                        if (vo.insurance == '1') {
                            insurance = "<img class=\"insurance_icon\" src=\"__CDN__/assets/store/images/insurance_icon.png\" alt=\"img\">";
                        }
                        var str = "<div class=\"commodityBox\">\n" +
                            "                    <a href=\"{:url('index/goods/detail',array('goods_id'=>'GOODS_ID'))}\">\n" +
                            "                        <div class=\"imgBox\">\n" +
                            "                            <img src=\"" + vo.thumbnail + "\" alt=\"img\">\n" +
                            "                            <span>" + vo.store_name + "</span>\n" +
                            "                        </div>\n" +
                            "                        <p class=\"commodityPrice\">¥" + vo.price + "</p>\n" +
                            "                        <p class=\"commodityName\">" + vo.goodsname + "</p>\n" +
                            "                        <div class=\"labelBox\">\n" +
                            "                            " + property + "\n" +
                            "                        </div>\n" +
                            "                        " + insurance + "\n" +
                            "                    </a>\n" +
                            "                </div>";
                        goods_html += str.replace("GOODS_ID", vo.id);
                    });
                    $('.goods_dom').html(goods_html);
                    //初始化分页
                    var totalPage = Math.ceil(res.data.total / pageNum);
                    initPaging(res.data.total, res.data.current_page, totalPage, pageNum);
                }
            },
            error:function(res){
                toast('与服务器断开连接');
            }
        });
    }

    //初始化分页
    function initPaging(totalSize = 0, current_page = 1, totalPage = 0, pageNum, showPageNum = 5) {
        $("#paginationAllOrder").whjPaging({
            //每页显示数据条数
            pageNum: pageNum,
            //当前页
            current_page: current_page,
            //可选，总条数
            totalSize: totalSize,
            //可选，总页数
            totalPage: totalPage,
            //可选，展示页码数量，默认5个页码数量
            showPageNum: showPageNum,
            //可选，css设置，可设置值：css-1，css-2，css-3，css-4，css-5，默认css-1，可自定义样式
            css: 'css-1',
            //可选，上一页按钮展示文本，默认显示文本为上一页
            previousPage: "<span class=\"glyphicon glyphicon-menu-left\" aria-hidden=\"true\" style='opacity:0.65;font-size:12px;'></span>",
            //可选，下一页按钮展示文本，默认显示文本为下一页
            nextPage: "<span class=\"glyphicon glyphicon-menu-right\" aria-hidden=\"true\" style='opacity:0.65;font-size:12px;'></span>",
            //可选，是否展示刷新，默认true
            isShowRefresh: false,
            //可选，是否展示首页与尾页，默认true
            isShowFL: false,
            //可选，是否展示共{}页，默认true
            isShowTotalPage: false,
            //可选，是否展示共{}条记录，默认true
            isShowTotalSize: false,
            //可选，是否需要重新设置当前页码、总页数及总条数，默认false，如果设为true，那么在请求服务器返回数据时，需要调用setPage方法
            isResetPage: false,
            //可选，跳至展示文本，默认显示文本为跳至
            skip: "跳至",
            //可选，确认按钮展示文本，默认显示文本为确认
            confirm: "确认",
            //必选，回掉函数，返回参数：第一个参数为页码，第二个参数为每页显示N条
            callBack: function (currPage, pageSize) {
                console.log('currPage:' + currPage + ' pageSize:' + pageSize);
                initGoodsList(currPage, pageSize)
            }
        });
    }

    //打开二级悬浮导航
    function openSecondLevelMenu(obj) {
        $('.typeName').removeClass('selectTypeName');
        $('.suspensionNavBox ul li').css({'background': 'rgba(255,255,255,1)'});
        $('.suspensionNavBox').find('img').attr('src','__CDN__/assets/store/images/rightArrow.png');

        $(obj).css({'background': 'rgba(249,249,249,1)'});
        $(obj).find('.typeName').addClass('selectTypeName');
        $(obj).find('img').attr('src','__CDN__/assets/store/images/rightArrow_select.png');

        $('#secondLevelTitle').html($(obj).find('.typeName').html());
        var listVal = $(obj).find('.typeDetailBox').children('p');
        var el = '';
        for (var i=0; i<listVal.length; i++){
            el += '<li>' + $(listVal[i]).html() + '</li>';
        }
        $('#secondLevelList').html(el);
        $('.secondLevelBox').show();
    }

    //关闭二级悬浮导航
    function closeSecondLevelMenu(obj) {
        $('.typeName').removeClass('selectTypeName');
        $('.suspensionNavBox ul li').css({'background': 'rgba(255,255,255,1)'});
        $('.suspensionNavBox').find('img').attr('src','__CDN__/assets/store/images/rightArrow.png');
        $('.secondLevelBox').hide();
    }
</script>
</body>
</html>