zyy
/
ziqim


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>秒绘彩页库</title>
  <link rel="stylesheet" href="/zinc/mobileWorks/css/mobileWorksPublic.css">
  <link rel="stylesheet" href="/zinc/mobileWorks/css/mobileWorksHome.css">
  <link rel="stylesheet" href="/zinc/mobileWorks/css/mui.min.css">
  <link rel="stylesheet" href="/zinc/mobileWorks/css/pagination.css">
  <script src="/zinc/mobileWorks/zepto/zepto.min.js"></script>
  <script src="/zinc/mobileWorks/js/mui.min.js"></script>
  <script src="/zinc/mobileWorks/js/mobileWorksHome.js"></script>
  <script src="/zinc/mobileWorks/js/pagination.js"></script>
  ${Scripts.src(zhiqim.js)}
  ${Scripts.src("/zinc/js/zhiqim_search_auto_list.js")}
</head>
<body>
  <!-- 头部搜索开始 -->
  <div class="header">
    <a href="javasrcipt:;" class="classify">分类</a>
    <div class="serch">
      <img src="./zinc/mobileWorks/images/search.png" onclick="doWorksSearchByKeyword();" alt="">
       <input type="text" id="searchinput" placeholder="请输入您要查找的内容">
    </div>
    <a href="javasrcipt:;" class="my-classify" onclick="doWorksSearchByKeyword();">搜索</a>
  </div>
  <!--  -->
  <!-- 头部选择模块开始 -->
  <div class="header-cater" style="line-height: 50px;">
    <div class="header-cater-rigth" onclick="doWorksSearch('BEST');">精品推荐</div>
    <div class="header-cater-left" onclick="doWorksSearch();">更多模板
      <!-- 先不展示 -->
      <!-- <i class="dom-arrow"></i> -->
    </div>
  </div>
  <!-- ************ -->
  <div style="width: 100%; height: 110px;"></div>
  <!-- 遮罩层 -->
  <div class="mui-backdrop one">
    <div class="select">
        <a id="heat_label_all" href="javasrcipt:;" class="text-value" onclick="doWorksSearchByLabel('label_all');">全部</a>
        <a id="heat_label_best" href="javasrcipt:;" class="text-value" onclick="doWorksSearchByLabel('label_best');">精品</a>
        <a id="heat_label_recommend" href="javasrcipt:;" class="text-value" onclick="doWorksSearchByLabel('label_recommend');">推荐</a>
        <a id="heat_label_hot" href="javasrcipt:;" class="text-value" onclick="doWorksSearchByLabel('label_hot');">热门</a>
    </div>
  </div>

  <!-- 商品部分开始 -->
  <div class="commodity-box" id="commodity-box">
    <ul class="box-size" id="list-box">
    <ul>
  </div>
  <div class="ht-page" id="ht-page" style="background-color: white; margin-top: 20px;"></div>

    <!-- 分类行业开始  -->
    <div class="cates-box">
      <!-- 阴影遮罩层 -->
      <div class="box-showdom"></div>
      <!-- 行业选择区域 -->
      <div class="box-white">
          <p class="catres">行业</p>
          <div class="my-style">
            <a id="clazz_ind_all" href="javasrcipt:;" class="catres-value">全部</a>
            <#for item : indList>
                <a id="clazz_ind_${item.getIndustryId()}" href="javasrcipt:;" class="catres-value">${item.getIndustryName()}</a>
            </#for>
          </div>
          <p class="catres">产品</p>
          <div class="my-style">
            <a id="clazz_ind_prdColorPage" href="javasrcipt:;" class="catres-value actives">彩页</a>
            <a id="clazz_ind_prdCart" href="./mobileTemplateHome.htm" class="catres-value">名片</a>
          </div>
          <button type="button" class="my-style-btn">确定</button>
        </div>
    </div>
    
    <!-- 返回顶部 -->
    <a href="javasrcipt:;" class="top">
      <img src="./zinc/mobileWorks/images/tx.png" alt="">
      <p class="top-text">顶部</p>
    </a>
    <!-- 搜索时候显示的结果 -->
    <div class="serch-show">
      检索结果
    </div>
</body>

<script>
// tabIndex[0: 精品推荐, 1: 更多模板]
var tabIndex;
var _tabType = "BEST";
var _pageTotal = 100;
var _pageSize = 10;
var _pageNo = 1;

Z.onload(function()
{
    tabIndex = 0;
    doWorksSearch(_tabType, "", _pageNo);
})

// 移动端分页组件部分
function pageChange(i)
{
    // console.log("index is :" + i);
    doWorksSearch(_tabType, "", i+1);
    Pagination.Page($(".ht-page"), i, _pageTotal, _pageSize);
}
Pagination.init($(".ht-page"), pageChange);

// 点击Tab查询作品
function doWorksSearch(type, keyw, ppage)
{   
    _tabType = type;

    // 关键字
    var keyword = Z("#searchinput").val();
    
    // 行业
    var industryId = "";
    var indElem = $(".catres-value.actives");
    var indElemId = indElem[0].id;
    // 判断页面元素id是否为[全部]的id，否则根据行业id查询作品列表
    if(indElemId != "clazz_ind_all")
    {
        var indIdStrs = indElemId.split("clazz_ind_");
        industryId = indIdStrs[1];
    }
    
    // 热度标签
    var heatLabelId = "";
    var heatlbElem = $(".text-value.actives");
    var heatlbElemId = heatlbElem[0].id;
    if(heatlbElemId != "heat_label_all")
    {
        var heatlbIdStrs = heatlbElemId.split("heat_");
        heatLabelId = heatlbIdStrs[1];
        
        if (heatLabelId == "label_best")
        {
            heatLabelId = "1";
        }
        if (heatLabelId == "label_recommend")
        {
            heatLabelId = "2";
        }
        if (heatLabelId == "label_hot")
        {
            heatLabelId = "3";
        }
    }
    
    if (!type)
    {
        tabIndex = 1;
    }
    
    var ajax = new Z.Ajax();
    ajax.setClassName("MobileWorksPresenter");
    ajax.setMethodName("doWorksSearch");
    if (type == "BEST")
    {
        ajax.addParam("worksTypeIndex", "BEST");
        tabIndex = 0;
    }
    if (type == "KEYWORD")
    {   
        if (tabIndex == 0)
        {
            ajax.addParam("worksTypeIndex", "BEST");
        }
    }
    if (type == "INDUSTRY")
    {
        if (tabIndex == 0)
        {
            ajax.addParam("worksTypeIndex", "BEST");
        }
        if (keyw)
        {
            ajax.addParam("industryId", keyw);
        }
    }
    if (type == "SEARCHLIKE")
    {
        if (tabIndex == 0)
        {
            ajax.addParam("worksTypeIndex", "BEST");
        }
        keyword = keyw;
        ajax.addParam("searchLike", "true");
    }
    if(industryId)
    {
        ajax.addParam("industryId", industryId);
    }
    if (type == "LABEL")
    {
        if (tabIndex == 0)
        {
            ajax.addParam("worksTypeIndex", "BEST");
        }
        
        if (keyw == "label_best")
        {
            ajax.addParam("labelStatus", "1");
        }
        if (keyw == "label_recommend")
        {
            ajax.addParam("labelStatus", "2");
        }
        if (keyw == "label_hot")
        {
            ajax.addParam("labelStatus", "3");
        }
    }
    if(heatLabelId)
    {
        ajax.addParam("labelStatus", heatLabelId);
    }
    // 分页
    if(ppage)
    {
        ajax.addParam("page", ppage);
    }
    ajax.addParam("keyword", keyword);
    ajax.setFailureAlert();
    ajax.setSuccess(function()
    {
        var resObj = Z.J.toObject(this.responseText);
        var resList = resObj.desWorksFileModels;
        _pageNo = resObj.pageNo - 1;
        _pageTotal = resObj.pageTotal;
        Pagination.Page($(".ht-page"), _pageNo, _pageTotal, _pageSize);
        
        var html = "";
        if (resList.length != 0)
        {
            Z("#ht-page").removeClass("ht-page-hide");
            for (var i = 0; i < resList.length; i++)
            {
                html += 
                `
                  <li>
                   <div class="son-box">
                     <div class="son-box-item">
                       <a href="./mobileWorkDetail.htm?worksId=` + resList[i].worksId + `"` + `>
                `;
                // 封面图片部分
                if (resList[i].thumbImagePath)
                {
                    var imgPathArr = resList[i].thumbImagePath.split(",");
                    for (var j = 0; j < imgPathArr.length; j++)
                    {
                        if (j == 0)
                        {
                            html +=
                            `           <img src="` + imgPathArr[j] + `" alt="">`;
                        }
                    }
                }
                else
                {
                    html +=
                    `           <img src="/zinc/images/nopic.png" alt="">`;
                }
                
                // 热度红心部分
                html += 
                `
                       </a>
                     </div>
                     <div class="son-box-item-bottom">
                       <p class="idName">ID:` + resList[i].worksId + `</p>
                       <p class="heat">
                        <span>热度：</span>
                `;
                for (var k = 0; k < resList[i].worksHeatLabel + 1; k++)
                {
                    html +=
                    `    <img src="./zinc/mobileWorks/images/degree-red.png" alt="">
                    `;
                }
                var grayLength = 5 - (resList[i].worksHeatLabel + 1);
                for (var n = 0; n < grayLength; n++)
                {
                    html +=
                    `    <img src="./zinc/mobileWorks/images/degree-gray.png" alt="">
                    `;
                }
                
                // 找相似部分
                html += 
                `  </p>
                       <div class="son-box-item-footer">
                        <a href="javascript:;" class="one" style="width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;">` 
                        + resList[i].industrySubName + resList[i].attributeName + `</a>
                        <a href="javascript:;" class="two" style="z-index: 996;" onclick="doWorksSearch('SEARCHLIKE', '` + resList[i].industrySubName + `', 1);">找相似</a>
                       </div>
                     </div>
                     <span class="tag" style="display: `;
                
                // 热度标签部分
                if (resList[i].worksHeatLabel == 1)
                {
                    html += `none`;
                }
                html += `;">`;
                if (resList[i].worksHeatLabel == 2)
                {
                    html += 
                    `
                         <label>精品</label>
                    `;
                }
                if (resList[i].worksHeatLabel == 3)
                {
                    html += 
                    `
                         <label>推荐</label>
                    `;
                }
                if (resList[i].worksHeatLabel == 4)
                {
                    html += 
                    `
                         <label>热门</label>
                    `;
                }
                
                html +=
                ` </span>
                   </div>
                  </li>
                `;
            }
        }
        else
        {
            Z("#ht-page").addClass("ht-page-hide");
            html = `<div style="height: 562px; width: 100%; margin-top: 150px; text-align: center;">暂时没有作品数据</div>`;
        }
        // console.dir(html);
        Z("#list-box").htmlc(html);
    });
    ajax.execute();
}

// 根据关键字查询作品
function doWorksSearchByKeyword(keyword)
{
    // console.log(keyword);
    doWorksSearch("KEYWORD", keyword);
}

// 根据行业id查询作品
function doWorksSearchByIndustryId(industryId)
{
    // console.log(industryId);
    doWorksSearch("INDUSTRY", industryId);
}

// 根据标签查询作品
function doWorksSearchByLabel(label)
{
    // console.log(label);
    doWorksSearch("LABEL", label);
}
</script>
</html>