Files
ziqim/Yangcai365_design/manage/zview/mobileTemplate/mobileTemplateHome.zml
T
2025-02-20 14:58:55 +08:00

671 خطوط
20 KiB
Plaintext
خام سرزنش تاریخچه

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>扬彩设计模板库</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="/zinc/mobileWorks/css/mui.min.css">
<link href="/zinc/mobileWorks/css/mui.poppicker.css" rel="stylesheet" />
<link href="/zinc/mobileWorks/css/mui.picker.css" rel="stylesheet" />
<script src="/zinc/mobileWorks/js/mui.min.js"></script>
<script src="/zinc/mobileWorks/js/mui.poppicker.js"></script>
<script src="/zinc/mobileWorks/js/mui.picker.js"></script>
<script src="/zinc/mobileWorks/js/mui.pullToRefresh.js"></script>
<script src="/zinc/mobileWorks/js/mui.pullToRefresh.material.js"></script>
<script src="/zinc/mobileWorks/js/mui.view.js"></script>
<style>
* { touch-action: none; }
html,
body {
background-color: #efeff4;
}
.mui-bar~.mui-content .mui-fullscreen {
top: 44px;
height: auto;
}
.mui-pull-top-tips {
position: absolute;
top: -20px;
left: 50%;
margin-left: -25px;
width: 40px;
height: 40px;
border-radius: 100%;
z-index: 1;
}
.mui-bar~.mui-pull-top-tips {
top: 24px;
}
.mui-pull-top-wrapper {
width: 42px;
height: 42px;
display: block;
text-align: center;
background-color: #efeff4;
border: 1px solid #ddd;
border-radius: 25px;
background-clip: padding-box;
box-shadow: 0 4px 10px #bbb;
overflow: hidden;
}
.mui-pull-top-tips.mui-transitioning {
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
}
.mui-pull-top-tips .mui-pull-loading {
/*-webkit-backface-visibility: hidden;
-webkit-transition-duration: 400ms;
transition-duration: 400ms;*/
margin: 0;
}
.mui-pull-top-wrapper .mui-icon,
.mui-pull-top-wrapper .mui-spinner {
margin-top: 7px;
}
.mui-pull-top-wrapper .mui-icon.mui-reverse {
/*-webkit-transform: rotate(180deg) translateZ(0);*/
}
.mui-pull-bottom-tips {
text-align: center;
background-color: #efeff4;
font-size: 15px;
line-height: 70px;
color: #777;
}
.mui-pull-top-canvas {
overflow: hidden;
background-color: #fafafa;
border-radius: 40px;
box-shadow: 0 4px 10px #bbb;
width: 40px;
height: 40px;
margin: 0 auto;
}
.mui-pull-top-canvas canvas {
width: 40px;
}
.mui-slider-indicator.mui-segmented-control {
background-color: #efeff4;
}
.mui-content>.mui-table-view:first-child {
margin-top: -1px;
}
.heard input {
background-color: white;
}
.mui-search {
left: 100px;
right: 80px;
width: auto;
display: inline-block;
position: absolute;
}
.mui-card {
width: 46%;
display: inline-block;
margin: 5px 2% 0 2%;
}
.mui-card-footer {
display: block;
}
#slider {
margin-top: 50px;
}
.mui-fullscreen {
position: fixed;
z-index: 20;
}
.mui-ios .mui-navbar .mui-bar .mui-title {
position: static;
}
html,
body {
background-color: #efeff4;
}
.mui-views,
.mui-view,
.mui-pages,
.mui-page,
.mui-page-content {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #efeff4;
}
.mui-scroll-wrapper,
.mui-scroll {
background-color: #efeff4;
}
.mui-page.mui-transitioning {
-webkit-transition: -webkit-transform 300ms ease;
transition: transform 300ms ease;
}
.mui-page-left {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.mui-ios .mui-page-left {
-webkit-transform: translate3d(-20%, 0, 0);
transform: translate3d(-20%, 0, 0);
}
.mui-navbar {
position: fixed;
right: 0;
left: 0;
z-index: 10;
height: 44px;
background-color: #f7f7f8;
}
.mui-navbar .mui-bar {
position: absolute;
text-align: center;
}
.mui-android .mui-navbar-inner.mui-navbar-left {
opacity: 0;
}
.mui-ios .mui-navbar-left .mui-left,
.mui-ios .mui-navbar-left .mui-center,
.mui-ios .mui-navbar-left .mui-right {
opacity: 0;
}
.mui-navbar .mui-btn-nav {
-webkit-transition: none;
transition: none;
-webkit-transition-duration: .0s;
transition-duration: .0s;
}
.mui-navbar .mui-bar .mui-title {
display: inline-block;
width: auto;
}
.mui-page-shadow {
position: absolute;
right: 100%;
top: 0;
width: 16px;
height: 100%;
z-index: -1;
content: '';
}
.mui-page-shadow {
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
}
.mui-navbar-inner.mui-transitioning,
.mui-navbar-inner .mui-transitioning {
-webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
transition: opacity 300ms ease, transform 300ms ease;
}
.mui-page {
display: none;
}
.mui-pages .mui-page {
display: block;
}
.mui-page .mui-table-view:first-child {
margin-top: 15px;
}
.mui-page .mui-table-view:last-child {
margin-bottom: 30px;
}
.mui-table-view {
margin-top: 20px;
}
.mui-table-view span.mui-pull-right {
color: #999;
}
.mui-table-view-divider {
background-color: #efeff4;
font-size: 14px;
}
.mui-table-view-divider:before,
.mui-table-view-divider:after {
height: 0;
}
#imageShow {
padding: 10px 10px 0 10px;
margin-top: 50px;
}
#imageShow img {
padding: 10px;
}
.mui-slider-indicator {
margin-bottom: 20px;
}
.mui-content-padded {
margin: 0 20px;
}
.mui-content-padded button {
height: 25px;
line-height: 0px;
font-size: 15px;
}
#one img {
width: 100%;
}
.mui-bar-tab {
top: 90px;
height: 30px;
}
.mui-top{
top: 120px;
}
.mui-bar-tab a {
height: 30px !important;
}
</style>
</head>
<body class="mui-fullscreen">
<!--页面主结构开始-->
<div id="app" class="mui-views">
<div class="mui-view">
<div class="mui-navbar">
</div>
<div class="mui-pages">
</div>
</div>
</div>
<input id="copyMediaId" readonly>
<!--页面主结构结束-->
<!--单页面开始-->
<div id="page" class="mui-page">
<!--页面标题栏开始-->
<div class="mui-navbar-inner mui-bar mui-bar-nav">
<header class="mui-bar mui-bar-nav heard">
<button id="industryType" type="button" class="mui-btn mui-btn-blue mui-btn-link mui-pull-left">选择行业<img src="/zinc/images/dropDown.png" style="width: 16px;height: 16px;margin-bottom: -2px;"></button>
<div class="mui-input-row mui-search" style="">
<input id="searchInput" type="search" class="mui-input-clear" placeholder="">
</div>
<button id="seachButton" style="margin-top: -2px;" type="submit" class="mui-btn mui-btn-primary mui-pull-right" onclick="return false;">搜索</button>
</header>
</div>
<!--下拉刷新容器-->
<div class="mui-content">
<div id="slider" class="mui-slider mui-fullscreen">
<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<div id="typeScroll" class="mui-scroll">
<#for item : DesignTypeDao.listTemmplate()>
<a class="mui-control-item <#if item_index == 0>mui-active</#if>" value="${item.getTypeId()}" href="#item1mobile">
${item.getTypeName()}
</a>
</#for>
</div>
</div>
<div class="mui-slider-group">
<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
<div class="mui-scroll-wrapper">
<div class="mui-scroll" id="showScroll" style="margin-top: 35px;">
</div>
</div>
</div>
</div>
</div>
</div>
<nav class="mui-bar mui-bar-tab" style="background-color: #efeff4;z-index:9999;font-size: 15px;" >
<a class="mui-tab-item mui-active" href="#Popover_1" value="3">最热</a>
<a class="mui-tab-item" href="#Popover_2" value="1">最新</a>
<a class="mui-tab-item" href="#Popover_4" value="4">精品</a>
</nav>
<div id="#oddEven" style="display:none">
<nav id="mTemplateHomeNav" class="mui-bar mui-bar-tab mui-top" style="background-color: #efeff4;z-index:9999;font-size: 15px;display: none">
<a class="mui-tab-item mui-active" href="#oddEven_-1" value="-1">全部</a>
<a class="mui-tab-item" href="#oddEven_0" value="0">横版</a>
<a class="mui-tab-item" href="#oddEven_1" value="1">竖版</a>
</nav>
</div>
</div>
<!--单页面结束-->
<div id="mediaInfo" class="mui-page">
<div class="mui-navbar-inner mui-bar mui-bar-nav">
<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
<span class="mui-icon mui-icon-left-nav"></span>返回
</button>
<h1 class="mui-center mui-title">模板详情</h1>
</div>
<div class="mui-page-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<div id="imageShow" class="mui-slider" >
<div class="mui-slider-group mui-slider-loop">
</div>
<div class="mui-slider-indicator">
</div>
<div id="one" style="display:none;">
</div>
</div>
<div id="mediaResult" class="mui-content-padded" style="display: none;font-size:13px;line-height: 26px;">
<div id="mediaName" style="float:left"></div></br>
<div id="mediaPageValue" style="float:left"></div></br>
<div id="mediaOddEven" style="float:left"></div></br>
</div>
<div class="mui-content-padded" style="font-size:13px;line-height: 26px;">
<div id="mediaIdArea" style="float:left"></div>
<div style="float:right;color:#7f7f7f;">复制后发送设计师</div>
</div>
<div class="mui-content-padded">
<button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="color: #FFF;background-color: #28a3ef;">复制模板ID</button>
<button type="button" class="mui-btn mui-btn-block mui-btn-outlined mui-action-back">返回上一页</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
mui.init({
swipeBack:false
});
//初始化单页view
var viewApi = mui('#app').view({
defaultPage: '#page'
});
var view = viewApi.view;
var page = 1;
var hasNext = true;
var industryId = -1;
var self;
var typeId = 1;
var sort = 3;
var oddEven = -1;
//阻尼系数
var deceleration = mui.os.ios?0.003:0.0009;
(function($,doc) {
//处理view的后退与webview后退
var oldBack = $.back;
$.back = function() {
if (viewApi.canBack()) { //如果view可以后退,则执行view的后退
viewApi.back();
} else { //执行webview后退
oldBack();
}
};
//监听页面切换事件方案1,通过view元素监听所有页面切换事件,目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
$('.mui-scroll-wrapper').scroll({
bounce: false,
indicators: true, //是否显示滚动条
deceleration:deceleration
});
$.ready(function() {
// 选择框
var userPicker = new $.PopPicker();
userPicker.setData([
{
value: '-1',
text: '全部行业'
},
<#for item : indList>
{
value: '${item.getIndustryId()}',
text: '${item.getIndustryName()}'
},
</#for>
]);
mui("#typeScroll").on('tap','a',function(){
typeId = this.getAttribute('value');
if(typeId == 3){
var nav = document.getElementById("mTemplateHomeNav");
nav.style.display = "table-row";
}
reload();
});
mui(".mui-top").on('tap','a',function(){
oddEven = this.getAttribute('value');
reload();
});
mui(".heard").on('tap','#seachButton',function(){
reload();
});
mui(".mui-bar-tab").on('tap','a',function(){
sort = this.getAttribute('value');
reload();
});
mui(".mui-content-padded").on('tap','.mui-btn.mui-btn-primary.mui-btn-block.mui-btn-outlined',function(){
var copyMediaId=document.getElementById("copyMediaId");
copyMediaId.select();
document.execCommand("Copy");
mui.toast('复制成功');
});
var industryTypeButton = doc.getElementById('industryType');
industryTypeButton.addEventListener('tap', function(event) {
userPicker.show(function(items) {
industryId = items[0].value;
reload();
//返回 false 可以阻止选择框的关闭
//return false;
});
}, false);
var reload = function () {
document.activeElement.blur();
$.each(document.querySelectorAll('.mui-card'),function(){
this.remove();
});
page = 1;
hasNext = true;
self.refresh(true);
queryAllTemplate();
scrollToTop();
}
var scrollToTop = function () {
//mui('#showScroll').setTranslate(0,0,500);
}
var queryAllTemplate = function(){
mui.ajax('/service/ajax?path=/mobileTemplateHome.htm&time=' + new Date().getTime(),{
data:{
page: page,
industryId: industryId,
keyword: document.getElementById('searchInput').value,
typeId: typeId,
sort: sort,
oddEven: oddEven,
},
dataType:'json',
type:'post',
timeout:10000,
async:false,
headers:{
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
'X-Requested-With': 'XMLHttpRequest',
'X-RMI-Class': 'MobileTemplatePresenter',
'X-RMI-Method': 'doTemplateSearch',
},
success:function(data){
hasNext = data.hasNext;
page++;
var list = data.pageResultList;
if(list && list.length > 0){
var showScroll = document.getElementById('showScroll');
var fragment = document.createDocumentFragment()
for(var i=0;i<list.length;i++){
var card = document.createElement('div');
card.className = "mui-card";
var htmls = `
<div class="mui-card-content">
<a value="`+ list[i].mediaId +`">
`;
if (list[i].mediaUrl){
var imgPathArr = list[i].mediaUrl.split(",");
for (var j = 0; j < imgPathArr.length; j++) {
if (j == 0){
htmls += `<img src="` + imgPathArr[j] + `" onerror="javascript:this.src='/zinc/images/nopic.png';">`;
}
}
} else{
htmls += `<img src="/zinc/images/nopic.png">`;
}
htmls += `</a><div class="mui-card-footer">`;
htmls += `ID` + list[i].mediaId + `<br>`;
htmls += list[i].widthMm + `X` + list[i].heightMm+ `mm`;
htmls += `<div class="copyId" value="`+ list[i].mediaId +`" style="display: inline;float: right;"><img src="/zinc/images/copy.png" style="width: 16px;height: 16px;margin-bottom: -3px;">复制ID</div>`;
htmls += `</div>`;
card.innerHTML = htmls;
fragment.appendChild(card);
}
showScroll.insertBefore(fragment,document.querySelector('.mui-pull-bottom-tips'));
}
self.endPullUpToRefresh(!hasNext);
// 添加点击查看详情事件
mui(".mui-card-content").on('tap','a',function(){
var mediaId = this.getAttribute('value');
queryMediaInfo(mediaId);
});
// 添加点击复制ID事件
mui(".mui-card-content").on('tap','.copyId',function(){
var id = this.getAttribute("value");
var inputEle = document.createElement("input");
document.designMode = "on";
inputEle.value = id;
document.body.appendChild(inputEle);
inputEle.select();
document.execCommand('copy');
inputEle.blur();
inputEle.style.display = 'none';
document.body.removeChild(inputEle);
document.designMode = "off";
mui.toast('复制成功',{ duration:500, type:'div' })
});
},
error:function(xhr,type,errorThrown){
self.endPullUpToRefresh(true);
}
});
}
var queryMediaInfo = function(mediaId){
mui.ajax('/mobileTemplateDetail.htm',{
data:{
mediaId: mediaId,
},
dataType:'json',
type:'post',
timeout:10000,
async:false,
success:function(data){
if(data){
document.getElementById('copyMediaId').value = data.mediaId;
document.getElementById('mediaIdArea').innerHTML = 'ID'+ data.mediaId;
if(data.typeId == 3){
document.getElementById('mediaResult').style.display = "block";
document.getElementById('mediaName').innerHTML = "名称:"+data.mediaName;
document.getElementById('mediaPageValue').innerHTML = "P 数:"+data.pageValue+"P";
if(data.oddEven == 0){
document.getElementById('mediaOddEven').innerHTML = "版式:"+"横版" + data.widthMm + "*" + data.heightMm +"mm";
}else if(data.oddEven == 1){
document.getElementById('mediaOddEven').innerHTML = "版式:"+ "横版" + data.widthMm + "*" + data.heightMm +"mm";
}
}
var parentDiv = document.querySelector("#imageShow .mui-slider-group");
var one = document.querySelector("#one");
var indicatorDiv = document.querySelector("#imageShow .mui-slider-indicator");
indicatorDiv.innerHTML = "";
one.style.display = 'none';
if(data.mediaUrl){
var array = data.mediaUrl.split(',');
if(array.length == 1){
one.style.display = 'block';
one.innerHTML = "";
one.appendChild(creatImgShowDiv(array[0]));
parentDiv.innerHTML = "";
mui('.mui-slider').slider().stopped = true;
} else {
var firstImg = array[0];
var lastImg = array[array.length-1];
var length = array.length;
if (!lastImg){
lastImg = array[array.length-2];
length = array.length - 1;
}
parentDiv.innerHTML = "";
parentDiv.appendChild(creatImgShowDiv(lastImg),"mui-slider-item-duplicate");
parentDiv.appendChild(creatImgShowDiv(firstImg),"mui-slider-item-duplicate");
for(var i =0 ;i<length;i++){
parentDiv.insertBefore(creatImgShowDiv(array[i]),parentDiv.children[0]);
var indicator;
if(i==0){
indicator = creatIndicator("mui-active");
} else {
indicator = creatIndicator();
}
indicatorDiv.appendChild(indicator);
}
mui('.mui-slider').slider().stopped = false;
}
}
document.activeElement.blur();
viewApi.go("#mediaInfo");
} else {
mui.toast('未查询到模板数据');
}
},
error:function(xhr,type,errorThrown){
mui.toast('未查询到模板数据');
}
});
}
function creatImgShowDiv(mediaUrl,className){
var showImgDiv = document.createElement('div');
showImgDiv.className = className ? "mui-slider-item "+className:"mui-slider-item";
showImgDiv.innerHTML = `<a href="#">`;
showImgDiv.innerHTML += `<img src="`+ mediaUrl +`" onerror="javascript:this.src='/zinc/images/nopic.png';">`;
showImgDiv.innerHTML += `</a>`;
return showImgDiv;
}
function creatIndicator(className){
var indicatorDiv = document.createElement('div');
indicatorDiv.className = className ? "mui-indicator "+className:"mui-indicator";
return indicatorDiv;
}
//循环初始化所有下拉刷新,上拉加载。
$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
$(pullRefreshEl).pullToRefresh({
up: {
auto:true,
contentrefresh : "正在加载...",
contentnomore:'没有更多模板了',
callback: function() {
self = this;
queryAllTemplate(self);
}
}
});
});
});
})(mui, document);
</script>
</html>