372 行
12 KiB
Plaintext
372 行
12 KiB
Plaintext
<!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> |