ziqim/Yangcai365_web/manage/zview/des/templatePreview.zml

${request.getValidateScript()}
${Mydome()}
<script>
Z.onload(function()
{//定义搜索框
    if (${display})
        Z("#templateTab li:nth-child(1)").click(); 
    else
        Z("#templateTab li:nth-child(2)").click();
})

function doSubmit(form)
{
    if (!validateForm(form))
        return;
 
    var ajax = new Z.Ajax();
    ajax.setClassName("TemplatePreviewPresenter");
    ajax.setMethodName("doTemplateReplaceParam");
    ajax.setParamForm(form);
    ajax.setSuccess(function(){
        
        Z("#templateTab li:nth-child(1)").click(); 
        Z.tips("生成完成");
     });
    ajax.setFailureAlert();
    ajax.setLoading(form.submit, "<i class='z-ico z-loading'></i>正在生成...", {disabled:true});
    ajax.execute();
}

function doUploadOcrImage(data, suffix, fun)
{//上传待识别图片
    var ajax = new Z.Ajax();
    ajax.setClassName("TemplatePreviewPresenter");
    ajax.setMethodName("doUploadOcrImage");
    ajax.addParam("data", data);
    ajax.addParam("suffix", suffix);
    ajax.setSuccess(function(){
        Z("#ocrText").val(ajax.responseText);
        if(typeof fun == "function")fun();
    });
    ajax.setFailure(function(){Z.alert(ajax.responseText);});
    ajax.setLoading(document, true);
    ajax.execute();
}

function doSaveOcrText(ocrText)
{//保存识别文本
    var ajax = new Z.Ajax();
    ajax.setClassName("TemplatePreviewPresenter");
    ajax.setMethodName("doSaveOcrText");
    ajax.addParam("ocrText", ocrText);
    ajax.addParam("designId", '${order.getDesignId()}');
    ajax.setSuccess(function(){});
    ajax.setFailure(function(){Z.alert(ajax.responseText);});
    ajax.setLoading(document, true);
    ajax.execute();
}

function doDialog()
{
    var dialog = new Z.Dialog();
    dialog.title = "截图（截屏后粘贴（CTRL+V）到输入框中）";
    dialog.url = "/copyImage.htm";
    dialog.width = 800;
    dialog.height = 400;
    dialog.execute();
}

function doTransforImage(type,data) 
{//图片转base64
    if (data.files && data.files[0]) 
    {//1.判断input标签的file是否存在
        var size = data.files[0].size;
        if(size/1024/1024 >2)
        {//检测图片大小
            alert("图片大小不能超过2M");
            return;
        }
        
        var reader = new FileReader();//2.实例化一个FileReader()接口
        reader.readAsDataURL(data.files[0]);//3.通过readAsDataURL()方法读取文件，将图片内嵌在网页之中
         reader.onload = function(evt) 
         {//4.调用FileReader()的onload事件
            var url = data.value;
            var suffix=url.substring(url.lastIndexOf(".") + 1, url.length);//后缀名
            
            doUploadOcrImage(evt.target.result, suffix);
        }
    }
}

function doForwardEdit(mediaId)
{
    var dialog = new Z.Dialog();
    dialog.id = "doForwardEdit";
    dialog.title = "新开窗口跳转";
    dialog.url = "templateToEdit.htm?mediaId=" + mediaId;
    dialog.width = 10;
    dialog.height = 10;
    dialog.fixed = true;
    dialog.timeout = 1*1000; //自动关闭
    dialog.execute();
}

function doTemplateDelete(mediaId)
{//删除用户模板   
    if (Z.V.isEmpty(mediaId))
    {
        Z.alert("请选择模板");
        return;
    }
    
    Z.confirm("你确定要删除该模板吗？", function(){
        var ajax = new Z.Ajax();
        ajax.setClassName("TemplatePresenter");
        ajax.setMethodName("doTemplateDelete");
        ajax.addParam("mediaId", mediaId);
        ajax.addParam("designId", '${order.getDesignId()}');
        ajax.setFailureAlert();
        ajax.setSuccess(function(){
            Z("#sel_" + mediaId).remove();
            Z.tips("删除成功");
        });
        ajax.execute();
    });
}

function doTemplateOrderCreate(designId)
{
    if (Z.V.isEmpty(designId))
    {
        Z.alert("订单号不存在，请检查");
        return;
    }
    
    var ajax = new Z.Ajax();
    ajax.setClassName("TemplatePreviewPresenter");
    ajax.setMethodName("doCreateOrderTemplate");
    ajax.addParam("designId", ${designId});
    ajax.addParam("createChannel", "platform_design");
    ajax.setFailureAlert();
    ajax.setSuccess(function()
    {
        var obj = Z.J.toObject(this.responseText);
        var mediaId = obj.mediaId;
        var designWidth = obj.designWidth;
        var designHeight = obj.designHeight;
        var printWidth = obj.printWidth;
        var printHeight = obj.printHeight;
        var printKs = obj.printKs;
        var printMs = obj.printMs;
        var bleedSize = obj.bleedSize;
        var orderIsCardType = obj.orderIsCardType;

        var newLink = "/zhiqimMediaEditor/mediaDesign.htm?";
            newLink += "mediaId=" + mediaId + "&"
            newLink += "designWidth=" + designWidth + "&"
            newLink += "designHeight=" + designHeight + "&"
            newLink += "printWidth=" + printWidth + "&"
            newLink += "printHeight=" + printHeight + "&";
            newLink += "bleedSize=" + bleedSize + "&";
            newLink += "orderIsCardType=" + orderIsCardType + "&";
        window.open(newLink);
        window.location.reload();
    });
    ajax.execute();
}

function doParseText(type)
{
    var userText = Z("#userText").val();
    if (Z.V.isEmpty(userText))
    {
        Z.alert("请输入客户文本");
        return;
    }
    
    var ocrText = Z("#ocrText").val();
    
    var ajax = new Z.Ajax();
    ajax.setClassName("TemplatePreviewPresenter");
    ajax.setMethodName("doParseParamData");
    ajax.addParam("type", type);
    ajax.addParam("paramData", userText + ocrText);
    ajax.setFailureAlert();
    ajax.setSuccess(function(){
         var strs = Z.Jsons.toObject(this.responseText);
         if (strs != "")
         {
            var value = "";
            for(var i= 0; i< strs.length; i++)
            {
                value += strs[i] +"\n";
            }
            
            Z("#paramData").val(value);
         }
    });
    ajax.setLoading(document, true);
    ajax.execute();
}

/** 选择模板 **/
function doSelectTemplate(mediaId)
{
    if (Z("#nav_" + mediaId).hasClass("selected")) {
        Z.tips("已选择！");
        return;
    }
    var ajax = new Z.Ajax();
    ajax.setClassName("TemplatePreviewPresenter");
    ajax.setMethodName("doTemplateCacheAdd");
    ajax.addParam("mediaId", mediaId);
    ajax.addParam("designId", '${order.getDesignId()}');
    ajax.setFailureAlert();
    ajax.setSuccess(function(){Z("#nav_" + mediaId).addClass("selected");Z.tips("选择成功！");});
    ajax.execute();
}
/** 取消模板 **/
function unSelectTemplate(mediaId)
{
    if (!Z("#nav_" + mediaId).hasClass("selected")) {
        Z.tips("已取消！");
        return;
    }
    var ajax = new Z.Ajax();
    ajax.setClassName("TemplatePreviewPresenter");
    ajax.setMethodName("doTemplateCacheDelete");
    ajax.addParam("mediaId", mediaId);
    ajax.addParam("designId", '${order.getDesignId()}');
    ajax.setFailureAlert();
    ajax.setSuccess(function(){Z("#nav_" + mediaId).removeClass("selected");Z.tips("取消成功！");});
    ajax.execute();
}

function doTemplateTypeQuery(page)
{//查询模板
    var keyword = Z("#searchinput").val() || "";
    var queryType = Z("#queryType").val();
    var sort = Z('#searchSort').val();
    var ajax = new Z.Ajax();
    ajax.setClassName("TemplatePreviewPresenter");
    ajax.setMethodName("doTemplateTypeQuery");
    ajax.addParam("page", page);
    ajax.addParam("designId", "${designId}");
    ajax.addParam("typeId", "${order.getTypeId()}");
    ajax.addParam("queryType", queryType);
    ajax.addParam("keyword", keyword);
    ajax.addParam("sort", sort);
    ajax.setCallback("templateResult");
    ajax.setLoading("templateResult");
    ajax.execute();
}

function doTemplateExistQuery()
{//查询已选模板
    var ajax = new Z.Ajax();
    ajax.setClassName("TemplatePreviewPresenter");
    ajax.setMethodName("doTemplateExistQuery");
    ajax.addParam("designId", "${designId}");
    ajax.addParam("typeId", "${order.getTypeId()}");
    ajax.setCallback("templateResult");
    ajax.setLoading("templateResult");
    ajax.execute();
}

function doChangeTab(ele, queryType)
{//切换选项
    Z(ele).addClass("z-active").siblings("li").removeClass("z-active");
    Z('#queryType').val(queryType);
    if(queryType==''){
        Z("#templateLinkSpan").show();
    }else{
        Z("#templateLinkSpan").hide();
    }
    if (!queryType)
    {
        doTemplateExistQuery();
    }
    else
    {
        doTemplateTypeQuery(1);
    }
}

function getTemplateLink()
{//生成模板链接
     Z.copy(window.location.host+"/templateCustomerPreview.htm?designId=${designId}&typeId=${order.getTypeId()}");
     top.Z.tips("复制成功");
}

function doKeywordQuery(page)
{//关键词搜索
    var queryType = Z("#queryType").val();
    Z('li[data-type="'+queryType+'"]').addClass("z-active").siblings("li").removeClass("z-active");
    
    doTemplateTypeQuery(page);
}

function doModifyIndustry()//修改行业
{
    var designId = Z("#designId").text();
    if(Z.V.isEmpty(designId))
    {
        Z.alert("请选择一条订单");
        return;
    }
    var dialog = new Z.Dialog();
    dialog.title = "修改行业";
    dialog.url = "/modifyIndustry.htm?designId="+designId+"&flag=1";
    dialog.width = 500;
    dialog.height = 300;
    dialog.execute();
}

function doReFreshIndustryInfo()
{
    var ajax = new Z.Ajax();
    ajax.setClassName("TemplatePreviewPresenter");
    ajax.setMethodName("doReFreshIndustryInfo");
    ajax.addParam("designId", "${designId}");
    ajax.setFailureAlert();
    ajax.setSuccess(function(){
        var obj = Z.J.toObject(this.responseText);
        Z("#industryName").html(obj);
    });
    ajax.execute();
}
</script>

<style>
body{height:100%;}
/*图片展示区*/
.container{min-height:auto;background-color:#ffffff;}
.mainbody{height:100%;}
.content{height:calc(100% - 40px);overflow-y:auto;}
form[name="theForm"]{float:left;width:100%;}
/* tab标签 */
.svgTemplateList .itemCtrBar{left:0;top:0;}
#svgTemplateWrap{height:calc(100% - 176px)}
#templateTab{float:none;}

/*内容盒子*/
#svgTemplateWrap > section{height:calc(100% - 50px);background:#ffffff;border:1px solid #dcdcdc;border-top:none;}
/*模板列表*/
.svgTemplateList{width:100%;height:100%;column-count:4;}
.svgTemplateList .svgTemplateItem{width:100%;height:100%;text-align:center;padding:5px;background:#fff;border:1px solid #ccc;overflow:auto; position: relative;margin-bottom: 15px;}

.svgTemplateItem > .templateItemBtn{padding:10%;left:0;top:0;display:flex;justify-content:space-around;align-items:center;align-content:center;}
.svgTemplateItem > .templateItemBtn .z-button{display:none;}
.svgTemplateItem > .templateItemBtn:hover{background:rgba(0,0,0,.2);}
.svgTemplateItem > .templateItemBtn:hover .z-button{display:inline-block;}
.svgTemplateItem .itemSelectedSign{display:none;width:0;height:0;right:5px;bottom:5px;border-width:30px;border-style:solid;border-color:transparent #28a3ef #28a3ef transparent;}
.svgTemplateItem .itemSelectedSign > span{white-space:nowrap;left:-5px;color:#fff;top:5px;}
.svgTemplateItem.selected .itemSelectedSign{display:block;}

.showSvg {pointer-events:none;display: block;margin-top:2px;}
.showSvg:first-child{margin-top:0;}
.showSvg > svg {width:100%;height: auto;}

/** 选中样式 **/
.svgTemplateItem.selected{}
</style>

${zhiqim_manager_breadcrumb_parent("/designOrder.htm", "设计订单", "订单模板设计")}
<div class="content">
${Scripts.src("/zinc/js/global_2019010801.js")}
${Scripts.src("/zinc/js/zhiqim_search_auto_list.js")}
 
<div class="z-tabnav-main z-blue z-mg-b10" style=" width: 478px;height: 44px; float:none">
<nav>
<div class="z-float-left z-mg10">
    <button name="button" class="z-button z-mg-r20" onclick="history.go(-1)"><i class="z-font z-return"></i>返回列表</button>
</div>
</nav>
</div>

<#-- 导航栏 -->
<div class="boxs">
<div class="bos z-blue">
<nav>
<div class="bos_son z-mg10 z-lh30">
    <span class=" z-mg-r10">订单号：<span id="designId" >${order.getDesignId()}</span></span></br>
    <span class="my_spans z-mg-r10">行业：<span id="industryName">${Global.get(DesignIndustryCache.class).getIndustryName(order.getIndustryId())}</span>
     <button style="margin: 0;position: absolute;top:40px;right:22px;" type="button "class="z-button ${zmr_color_class} z-mg-r6" onclick="doModifyIndustry();"><i class="z-font z-modify"></i>修改行业</button>
    </span>
    <span class=" z-mg-r10">产品名称：${order.getOrderText()}</span>
    <#if ZmrPathRule.check(request, "openWangWang")><span class="mybtn_style_two z-mg-r10"><button class="z-button z-mg-r3 ${zmr_color_class}" onclick="Global.openWangWangParam('${order.getBuyerNick()}');"><img src="/zinc/images/wangwang.png">旺旺联系</button></span></#if>
    <#if ZmrPathRule.check(request, "openQQ")><span class="mybtn_style_one z-mg-r10"><button class="z-button z-mg-r3 ${zmr_color_class}" onclick="Global.openQQParam('${order.getUserQq()}');"><img src="/zinc/images/qq.png">QQ联系</button></span></#if>
</div>

</nav>
</div>

<#-- 替换参数 -->
<form name="theForm" action="javascript:void(0);" onsubmit="doSubmit(this);">
<input name="paramCat" type="hidden" value="${order.getTypeId()}">
<input name="designId" type="hidden" value="${order.getDesignId()}">
<input name="typeId" type="hidden" value="${order.getTypeId()}">
<input name="industryId" type="hidden" value="${order.getIndustryId()}">

<div class="bos_two">


      <div class="bos_two_one">
        <p class="text"> 客户文本</p>
        <textarea name="userText" id="userText" class="my-textarea">${order.getUserText()}</textarea>
     </div>
   
     <!-- <i class="z-arrow z-right z-px8"></i></td>-->
  
        <div class="bos_two_one my_bos_two_one">
            
            <p class="text my_text">文本识别</p>
           <div class="btn" style="margin-bottom: 5px;">
            <button id="qrcodeId" type="button" class="z-button z-blue z-w80 z-pointer" style="position:absolute;pointer-events:none;">选择图片</button>
            <input style="width:80px; height:25px; opacity:0;" type="file" accept="image/png,image/jpeg,image/jpg" onchange="doTransforImage('qrcode', this);" single>
            &nbsp;&nbsp;  
            <button type="button" class="z-button z-blue" onclick="doDialog()">截图粘贴</button>
           </div>
            <textarea name="ocrText" id="ocrText" class="my-textarea" onchange="doSaveOcrText(this.value)">${ocrText}</textarea>
        </div>
        
        
        <div class="bos_two_one my_bos_two_one">
         <p style="width: 100%;  height:12px;"></p>
          <p class="text my_text">文本分析</p>
         <div class="btn" style="margin-bottom: 5px;">
          <button type="button" onclick="doParseText(1)" class="z-button z-blue">智能分析</button> &nbsp;&nbsp;  
          <button type="button" onclick="doParseText(2)" class="z-button z-blue">普通分析</button>
         </div>
          <textarea name="paramData" id="paramData" class="my-textarea" >${paramData}</textarea>
       </div>
        
        
        
         <button name="submit" type="sumbit" class="my_btn z-button z-blue">
         生<br>
         成<br>
         模<br>
         板<br>
         </button>
</div>
</form>
</div>

<#-- 导航栏 -->
<div class="boxs_two">
 <div id="svgTemplateWrap" style="height: 45px;" >
    <div id="templateTab" style="height: 45px;" class="boxs_sons z-tabnav-main z-blue">
    <input id="queryType" name="queryType" type="hidden" value="">
    <nav>
    <ul style="border: 1px solid #dcdcdc; height: 45px;width:796px;border-right:none;">
        <li onclick="doChangeTab(this, '');" data-type="">已选模板</li>
        <li onclick="doChangeTab(this, 'OLD');" data-type="OLD">客户历史模板</li>
        <li onclick="doChangeTab(this, 'RECOMMEND');" data-type="RECOMMEND">被分享模板</li>
        <li onclick="doChangeTab(this, 'COLLECT');" data-type="COLLECT">收藏模板</li>
        <li onclick="doChangeTab(this, 'KEYWORD');" data-type="KEYWORD">热搜模板</li>
    </ul>
       <span  style="margin:0;height: 35px;" id="templateLinkSpan" name="templateLinkSpan">
             <button class="z-button z-purple" style="margin-bottom: 6px; height: 100%;margin-left: 20px;" onclick="getTemplateLink();">生成模板链接</button>
        </span>
        <span style="margin:0; height: 35px"  class="my_z-float-rights">
          <button style="margin-left: 16px;" name="button" class="z-button  ${zmr_color_class} mystyle" onclick="doTemplateOrderCreate('${order.getDesignId()}')" ><i class="z-font z-add"></i>创建订单模板</button>
        </span>
   </nav>
   </div>
 </div>
   <!-- <div class="boxs_svg" > -->
      <div style="margin-top: 20px;"  id="templateResult" class="mystyle_svg z-active z-text-center"></div>
   <!-- </div> -->
</div>

${zhiqim_manager_content_end()}
<#-- 联系旺旺&联系QQ弹窗框 -->
<iframe id="openFrm" class="z-hide" src="about:blank"></iframe>