ziqim/Yangcai365_web/manage/zview/works/worksShow.zml

<script>
function doWorksDownload()
{//下载文件
    Z.Location.href("worksDownload.htm?worksId=" + '${works.getWorksId()}');
}

function doWorksAdd()
{//申请精品
    var ajax = new Z.Ajax();
    ajax.setClassName("WorksPresenter");
    ajax.setMethodName("doWorksAdd");
    ajax.addParam('${works.getWorksId()}');
    ajax.setFailureAlert();
    ajax.setSuccess(function(){
        Z.alert("申请成功", function(){location.reload();})
     });
     
    ajax.execute();
}

function doWorksShare(value)
{//作品库分享
    var ajax = new Z.Ajax();
    ajax.setClassName("WorksPresenter");
    ajax.setMethodName("doWorksShare");
    ajax.addParam('${works.getWorksId()}');
    ajax.addParam(value);
    ajax.setFailureAlert();
    ajax.setSuccess();
    ajax.execute();
}

function doLabelRelation()
{//关联标签
    var dialog = new Z.Dialog();
    dialog.shadow = true;
    dialog.hasTitle = false;
    dialog.fixed = true;
    
    var worksId = '${works.getWorksId()}';
    dialog.url = "labelRelation.htm?worksId="+worksId;
    dialog.width = 1000;
    dialog.height = 600;
    dialog.execute();
}
function doKeywordRelation()
{//关联关键词
    var dialog = new Z.Dialog();
    dialog.shadow = true;
    dialog.hasTitle = false;
    dialog.fixed = true;
    
    var worksId = '${works.getWorksId()}';
    dialog.url = "keywordRelation.htm?worksId="+worksId;
    dialog.width = 800;
    dialog.height = 400;
    dialog.execute();
}

/*悬浮展示分享列表*/
function shareList_show(){ Z(".share-list").show();}
function shareList_hide(){ Z(".share-list").hide();}

/*收藏点击事件*/
var eventId = '${userEventId}';
function doWorksCollect(ele)
{
    Z(ele).toggleClass("active");
    //执行操作
    if (Z(ele).hasClass("active"))
    {
        var ajax = new Z.Ajax();
        ajax.setClassName("WorksPresenter");
        ajax.setMethodName("doWorksCollect");
        ajax.addParam('${works.getWorksId()}')
        ajax.addParam(eventId);
        ajax.setFailureAlert();
        ajax.setSuccess(function(){
            var collect = this.responseText;
            var collectNum = collect.split("+");
            Z("#collect").text(collectNum[0]);
            eventId = collectNum[1];
         });
         
        ajax.execute();
    }
    else
    {
        var ajax = new Z.Ajax();
        ajax.setClassName("WorksPresenter");
        ajax.setMethodName("doWorksCollect");
        ajax.addParam('${works.getWorksId()}')
        ajax.addParam(eventId);
        ajax.setFailureAlert();
        ajax.setSuccess(function(){
            var collect = this.responseText;
            Z("#collect").text(collect);
            eventId = 0;
         });
         
        ajax.execute();
    }
}

/**/
function selectTag(ele)
{//选中标签
    var $active = Z(".tag-edit-list .tab .active");
    $active.removeClass("active");
    var next = $active.next("span");
    $active.next("span").removeClass("zi-hide").addClass("active");
}

function addKeywords(ele, type)
{//添加关键字
    var $wrap = Z(".kwywordItem-list");
    var $input = Z(ele.previousElementSibling);
    var val = $input.val();
    if (Z.V.isEmptyBlank(val))
    {
        Z.alert("请输入添加内容！");
        return;
    }
    var $$button = $wrap.parent().children("button");
    for (var i = 0;i < $$button.length;i++)
    {
        var text = Z($$button[i]).text();
        if (text == val)
        {
            Z.alert("内容有重复！请重新输入！");
            return;
        }
    }
    
    var ajax = new Z.Ajax();
    ajax.setClassName("DesignerPresenter");
    ajax.setMethodName("doKeywordAdd");
    ajax.addParam("mediaId", '${works.getWorksId()}')
    ajax.addParam("keywordName", val);
    ajax.addParam("type", 'work');
    ajax.setFailureAlert();
    ajax.setSuccess(function(){
        var keywordName = this.responseText;
        var $item = Z('<span class="item-diy z-bg-blue"><i class="z-font z-error" onclick="delThisKeyword(this, \'' + keywordName + '\');"></i>' + val + '</span>');
        $wrap.append($item);
        $input.val("")
    });
    ajax.execute();
}

//删除关键字
function delThisKeyword(ele, keywordName, type)
{
    Z.confirm('您确定删除该关键字吗？', function(){
        Z(ele).parent().remove();
    
	    var ajax = new Z.Ajax();
	    ajax.setClassName("DesignerPresenter");
	    ajax.setMethodName("doKeywordDelete");
	    ajax.addParam("mediaId", '${works.getWorksId()}');
	    ajax.addParam("keywordName", keywordName);
	    ajax.addParam("type", type);
	    ajax.setFailureAlert();
	    ajax.setSuccess(function(){location.reload();});
	    ajax.execute();
    
    });
}

function doWorksDelete()
{
    var ajax = new Z.Ajax();
    ajax.setClassName("WorksPresenter");
    ajax.setMethodName("doWorksDelete");
    ajax.addParam('${works.getWorksId()}')
    ajax.setFailureAlert();
    ajax.setSuccess(function(){
      Z.success("删除成功", function(){parent.location.reload()});
     });
    ajax.execute();
}

function doWorksCancel()
{
    var ajax = new Z.Ajax();
    ajax.setClassName("WorksPresenter");
    ajax.setMethodName("doWorksCancel");
    ajax.addParam('${works.getWorksId()}')
    ajax.setFailureAlert();
    ajax.setSuccess(function(){
      Z.success("取消成功", function(){parent.location.reload()});
     });
    ajax.execute();
}

</script>
<style>
body{height:100%}
/*图片展示区*/
.show-thumb{left:0;top:0;bottom:0;right:300px;padding:30px;}
.show-thumb-list{display:flex;align-items:center;align-content:center;justify-content:center;flex-wrap:wrap;}
.show-thumb-list>li{padding:5px;max-width:45%;}
/*信息列表区*/
.show-info{top:0;bottom:0;right:0;border-left:1px solid #e1e1e1;}
.show-info-list>li{font-size:14px;padding:15px 0;border-bottom:1px solid #f5f5f5;color:#777;}
/*顶部三要素*/
.show-info-list>li>span.tag{margin-right:28px;float:left;padding:15px 0;}
.show-info-list>li>span.tag:not(.view):hover,.show-info-list>li>span.tag.collect.active{color:#00a2eb;}
.show-info-list>li>span.tag>i{display:inline-block;width:17px;height:15px;vertical-align:middle;margin-right:5px;background:url(http://cdn.tubangzhu.com/static/tbz-main/images/preview-tag_8774a98.png) no-repeat;}
.show-info-list>li>span.tag.share>i{background-position:0 0;margin-right:3px;}
.show-info-list>li>span.tag.share:hover>i{background-position:0 -15px;}
.show-info-list>li>span.tag.view>i{background-position:-17px 0;}
.show-info-list>li>span.tag.view>i{background-position:-17px 0;}
.show-info-list>li>span.tag.collect>i{background-position:-35px 0;}
.show-info-list>li>span.tag.collect:hover>i,.show-info-list>li>span.tag.collect.active>i{background-position: -35px -15px;}
.show-info-list>li .z-button.z-xlarge{height:44px;}
/*分享列表*/
.share-list{position:absolute;top:45px;left:-5px;background:#fff;width:280px;line-height:35px;box-shadow:0 0 5px #aaa;border-radius:4px;padding:8px 15px;/*display:none;*/z-index:1;}
.share-list>span{position:absolute;width:10px;height:10px;background:#fff;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);top:-5px;left:30px;box-shadow:-1px -1px 0 #d4d2d2;}
/*标题图标*/
.list-title>i{background:url(http://cdn.tubangzhu.com/static/tbz-main/images/preview-tag_8774a98.png) no-repeat -187px 0;display:inline-block;width:10px;height:19px;vertical-align:middle;margin-right:5px;}
/*类型添加*/
.type-list{}
.type-list>li{padding:8px 0;border-bottom:1px dashed #f5f5f5;}
/*关键字选择区*/
.kwywords-list>.kwywordItem-list>span{display:inline-block;border-radius:3px;padding:5px 10px;margin:3px;position:relative;}
.kwywords-list>.kwywordItem-list>span>.z-error{display:none;position:absolute;right:-5px;top:-5px;border-radius:50%;margin:0;border:1px solid #777;width:15px;height:15px;line-height:14px;text-align:center;font-size:12px;background:#fff;z-index:9;cursor:pointer;}
.kwywords-list>.kwywordItem-list>span>.z-error:hover{color:#ea4a36;border-color:#ea4a36;}
.kwywords-list>.kwywordItem-list>span:hover .z-error{display:block;}
.kwywords-list>.item-add{position:relative;}
.kwywords-list>.item-add>input{width:100%;}
.kwywords-list>.item-add>button{padding:3px 10px;position:absolute;top:0;right:0;}

/**/

</style>

<div class="z-relative z-w100p z-h100p z-overflow-hidden">
    <div class="show-thumb z-absolute z-bg-gray">
        <ul class="show-thumb-list z-w100p z-h100p">
            <#for path : Arrays.toStringArray(works.getThumbImagePath())>
            <li><img src="${path}"/></li>
            </#for>
        </ul>
    </div>
    <div class="show-info z-absolute z-w300 z-pd15">
        <ul class="show-info-list z-relative z-h100p">
            <li class="z-clearfix">ID：${works.getWorksId()}</li>
            <li class="z-clearfix">创建时间：${works.getCreateTime()}</li>
            <li class="z-clearfix"><#if works.getWorksName() != null>名称：${works.getWorksName()}&nbsp;|&nbsp;</#if>设计师：${works.getDesigner()}</li>
            <li class="z-clearfix z-relative z-color-999 zi-px13 zi-pd0">
                <span class="tag view" onclick=""><i></i>浏览(${browseNum})</span>
                <span class="tag collect z-pointer zi-mg-r0 <#if userEventId != 0>active</#if>" onclick="doWorksCollect(this);"><i></i>收藏(<span id="collect" >${collectNum}</span>)</span>
            </li>
            <li class="z-clearfix">
                <div class="z-float-left z-w50p z-pd-r5">
                     <#if works.getWorksType() == 0><button class="z-button z-xlarge zi-w100p" onclick="doWorksAdd();"><i class="z-font z-flower"></i>申请精品</button></#if> 
                     <#if works.getWorksType() == 1><button class="z-button z-xlarge z-blue zi-w100p"><i class="z-font z-flower"></i>精品作品</button></#if> 
                     <#if works.getWorksType() == 2><button class="z-button z-xlarge zi-w100p"><i class="z-font z-flower"></i>精品待审</button></#if> 
                </div>
                <div class="z-float-left z-w50p z-pd-l5"><button class="z-button z-xlarge z-red zi-w100p zi-pd-l0 zi-pd-r0" onclick="doWorksDownload();"><i class="z-font z-download"></i>下载(${downNum})</button></div>
            </li>
            <li class="tag-edit z-relative" data-value="一级 类型  二级 行业 三级 属性">
                <div class="z-h25 z-mg-t5 z-mg-b15">
                    <span class="z-float-right">
                         <#if ZmrPathRule.check(request, "/labelRelation.htm")><button class="z-button z-blue z-small" onclick="doLabelRelation()"><i class="z-font z-modify"></i>修改</button></#if>
                    </span>
                    <span class="list-title z-lh25"><i></i>行业属性</span>
                </div>
                <ul class="type-list">
                  <li>
                    ${Global.get(ProductTypeCache.class).getName(works.getPrdTypeId())}&nbsp;&nbsp;
                    ${Global.get(DesignIndustryCache.class).getIndustryName(works.getIndustryId())}&nbsp;&nbsp;
                    ${works.getIndustrySubName()}&nbsp;&nbsp;
                    ${works.getAttributeName()}&nbsp;&nbsp;
                 </li>
                </ul>
            </li>
            <li class="keyword-edit">
                <div class="list-title z-mg-t5 z-mg-b15"><i></i>关键词</div>
                <div class="kwywords-list">
                    <div class="kwywordItem-list">
                    <#for keyword : DesignerPresenter.updateKeywordArr(works.getKeywordName(), "work", works.getWorksId())>
                        <span class="z-bg-blue"><i class="z-font z-error" onclick="delThisKeyword(this, '${keyword}', 'works');"></i>${keyword}</span>
                    </#for>
                    </div>
                    <div class="item-add z-w100p z-mg-t10"><input class="z-input z-small" type="text"><button class="z-button z-blue" onclick="addKeywords(this, 'works');">添加</button></div>
                </div>
            </li>
            
            <#if ZmrPathRule.check(request, "doWorksDelete")>
            <li class="keyword-edit">
                <div class="list-title z-mg-t5 z-mg-b15"><i></i>作品操作</div>
                <div>
                    <button class="z-button" onclick="doWorksCancel();"><i class="z-font z-modify"></i>取消精品</button>
                    <button class="z-button z-red" onclick="doWorksDelete();"><i class="z-font z-delete"></i>删除作品</button>
                </div>
            </li>
            </#if>
            
        </ul>
    </div>
</div>