caimei365
/
caimei365-manager


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530
							<%@ page import="com.caimei.modules.baike.entity.CmBaikeProductFile" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/4/9
  Time: 19:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <title>选择其他图片</title>
    <meta name="decorator" content="default"/>
    <style type="text/css">
        .table td i {
            margin: 0 2px;
        }

        .iconBox {
            font-size: 0;
        }

        .controls .conList {
            display: inline-block;
            margin-right: 15px;
        }

        .conList .btn:nth-of-type(1) {
            margin-left: 25px;
        }

        .upload-content {
            margin-top: -70px;
        }

        .upload-content .conList .btn:nth-of-type(1) {
            width: 90px;
            height: 100px;
            border: 2px solid #eee;
            background: #fff;
            position: relative;
        }

        .upload-content .conList .btn:nth-of-type(1) > div {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #666;
        }

        .upload-content .conList .btn:nth-of-type(1) span {
            font-size: 35px;
        }

        .upload-content .conList .btn:nth-of-type(1) h5 {
            color: #666;
        }

        .cancel-upload {
            background: transparent;
            border: none;
            box-shadow: none;
            position: relative;
            top: -38px;
            left: -25px;
            cursor: pointer;
            z-index: 100;
        }

        .upload-content .conList ol li {
            width: 114px;
            min-height: 80px;
            text-align: center;
            background: #fff;
            position: relative;
            top: 120px;
            margin-left: 2px;
        }

        .hide-pic {
            display: none !important;
        }
        .upload {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
            margin-left: 20px;
            cursor: pointer;
            width: 52px;
            height: 20px;
        }

        .upload input {
            position: absolute;
            width: 170px;
            font-size: 20px;
            right: 0;
            top: 0;
            opacity: 0;
            cursor: pointer;
        }

        .upload:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
        .add-submit {
            position: relative;
            display: inline;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
            margin-left: 20px;
            cursor: pointer;
            width: 52px;
            height: 30px;
        }

        .add-submit input {
            position: absolute;
            width: 50px;
            font-size: 20px;
            right: 0;
            top: 0;
            opacity: 0;
            cursor: pointer;
        }

        .add-submit:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
         .aaa {
            color: #2fa4e7;
            font-size: 12px;
            cursor: pointer;
            margin-left: 20px;
        }

    </style>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#inputForm").validate({
                submitHandler: function (form) {
                    var beginTime = $("#beginTime").val();
                    var endTime = $("#endTime").val();
                    if (beginTime > endTime) {
                        alertx("开始时间不能晚于结束时间！");
                        return;
                    } else {
                        loading('正在提交，请稍等...');
                        form.submit();
                    }
                },
                errorContainer: "#messageBox",
                errorPlacement: function (error, element) {
                    $("#messageBox").text("输入有误，请先更正。");
                    if (element.is(":checkbox") || element.is(":radio") || element.parent().is(".input-append")) {
                        error.appendTo(element.parent().parent());
                    } else {
                        error.insertAfter(element);
                    }
                }
            });
        });
    </script>
</head>
<body>
<br/>
<form:form id="inputForm" modelAttribute="floorImage" action="" method="post" class="form-horizontal">
    <form:hidden path="id" id="id"/>
    <sys:message content="${message}"/>
    <div class="control-group iconBox">
        <label class="control-label"><span class="help-inline"><font color="red">*</font> </span>视频封面</label>
        <div class="controls upload-content" id="imageBox">
            <div class="conList">
                <form:hidden id="image" path="image" htmlEscape="false" maxlength="255" class="input-xlarge required"/>
                <sys:ckfinder input="image" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100"
                              maxHeight="100"/>
                <br>
                <label>${pcImageSize}</label>
            </div>
            <div hidden><input id="proId" value=${pageId}></div>

        </div>
    </div>
<%--    <div class="control-group iconBox">--%>
<%--        <label class="control-label"><span class="help-inline"><font color="red">*</font> </span>小程序图片：</label>--%>
<%--        <div class="controls upload-content" id="appletsImageBox">--%>
<%--            <div class="conList">--%>
<%--                <form:hidden id="appletsImage" path="appletsImage" htmlEscape="false" maxlength="255" class="input-xlarge required"/>--%>
<%--                <sys:ckfinder input="appletsImage" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100"--%>
<%--                              maxHeight="100"/>--%>
<%--                <br>--%>
<%--                <label>${appletsImageSize}</label>--%>
<%--            </div>--%>
<%--        </div>--%>
<%--    </div>--%>
    <div class="control-group" style="display: ${type eq 'adsImage'?'none':''}">
        <label class="control-label"><font color="red">*</font>标题：</label>
        <div class="controls">
            <form:input path="name" id="name" htmlEscape="false" class="input-xlarge required"/>
        </div>
    </div>
    <div class="control-group" style="display: ${type eq 'adsImage'?'none':''}">
        <label class="control-label"><font color="red">*</font>内容：</label>
        <div class="controls">
            <form:textarea path="content" id="content" htmlEscape="false" class="input-xlarge required"/>
        </div>
    </div>
    <div class="control-group">
        <div class="control-group">
            <label class="control-label" style="margin-top:10px"><font color="red">*</font>视频路径：</label>
            <div class="controls" style="margin-top:10px">
                <input id="uploadFileName" type="text" style="display: inline;" placeholder="支持mp4" disabled="true" class="input-xlarge required" />
                <div class="upload">
                    <input type="file" name="file" id="productFile" accept=".mp4" >选择文件
                </div>
                <div class="add-submit">
                    <input id="addSubmit" type="button" value="上传"/>上传
                </div>
                <div class="upload-loading" hidden>
                    <img alt="gif" src="/static/images/upload.gif" width="32px" border="none">
                </div>
            </div>
        </div>
        <div class="control-group">
            <div id='file-list-display' style="margin-left:180px" hidden>
<%--                <c:if test="${not empty cmBaikeProduct.videoList}">--%>
<%--                    <c:forEach items="${cmBaikeProduct.videoList}" var="videoFile" varStatus="statusIndex">--%>
<%--                        <p>${videoFile.fileTitle}--%>
                                <input type="text" id="videoName" disabled>
                             <div hidden> <input type="text" id="link" disabled/></div>
                            <span class="aaa"><a id="bf">预览</a></span> <%--      ${floorImage.id}          </c:if>--%>

                            <span class="aaa" id="sc">删除</span>
<%--                        </p>--%>
<%--                    </c:forEach>--%>
<%--                </c:if>--%>
            </div>
        </div>
    </div>
<%--    <div class="control-group">--%>
<%--        <label class="control-label">跳转链接：</label>--%>
<%--        <div class="controls">--%>
<%--            <form:input path="link" id="link" htmlEscape="false" cssStyle="position: relative" class="input-xlarge required"/>--%>
<%--        </div>--%>
<%--    </div>--%>
<%--    <div class="control-group iconBox">--%>
<%--        <label class="control-label">小程序内容宣传图：</label>--%>
<%--        <div class="controls upload-content" id="adsImageBox">--%>
<%--            <div class="conList">--%>
<%--                <form:hidden id="adsImage" path="adsImage" htmlEscape="false" maxlength="255" class="input-xlarge required"/>--%>
<%--                <sys:ckfinder input="adsImage" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100"--%>
<%--                              maxHeight="100"/>--%>
<%--                <br>--%>
<%--                <label>建议图片尺寸宽度750px</label>--%>
<%--            </div>--%>
<%--        </div>--%>
<%--    </div>--%>
    <div class="control-group">
        <label class="control-label"><font color="red">*</font> 排序：</label>
        <div class="controls">
            <form:input path="sort" id="sort" htmlEscape="false" maxlength="11" onkeyup="onlynum(this)" class="input-xlarge required"/>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">网站状态：</label>
        <div class="controls">
            <form:select path="pcStatus" id="pcStatus" class="input-medium required">
                <form:option value="1" label="启动"/>
                <form:option value="0" label="停用"/>
            </form:select>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">小程序状态：</label>
        <div class="controls">
            <form:select path="appletsStatus" id="appletsStatus" class="input-medium required">
                <form:option value="1" label="启动"/>
                <form:option value="0" label="停用"/>
            </form:select>
        </div>
    </div>
</form:form>

<script type="text/javascript">
    $(document).ready(function () {
        //弹出框去滚动条
        top.$('#jbox-content').css("overflow-y", "hidden");
        show_title(30);
    });

    $(function () {
        $('.upload-content .conList .btn:nth-of-type(1)').html('<div><span>+</span><h5>选择图片</h5></div>');
        $('.upload-content .conList .btn:nth-of-type(2)').after('<img class="cancel-upload" src="/static/images/close-btn1.png">').remove();
        $('.upload-content .conList').find('.cancel-upload').hide();
        var observeEle = document.getElementsByClassName('upload-content')[0];
        var observeEle1 = document.getElementsByClassName('upload-content')[1];
        var observeEle2 = document.getElementsByClassName('upload-content')[2];
        var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
        var MutationObserverConfig = {
            childList: true,
            subtree: true,
            characterData: true
        };
        var observer = new MutationObserver(function (mutations) {
            $.each(mutations, function (index, item) {
                if (item.type === 'childList') {
                    // 在创建新的 element 时调用
                    var target = $(item.target),
                        thisWrapper = target.closest('.conList'),
                        nextEle = thisWrapper.next();
                    thisWrapper.find('li').css('z-index', 99);
                    thisWrapper.find('.cancel-upload').show();
                    if (nextEle.hasClass('hide-pic')) {
                        nextEle.removeClass('hide-pic');
                    }
                }
            })
        });
        observer.observe(observeEle, MutationObserverConfig);
        observer.observe(observeEle1, MutationObserverConfig);
        observer.observe(observeEle2, MutationObserverConfig);

        $('body').on('click', '.upload-content li', function () {
            var index = $(this).closest('.conList').index() + 1,
                str = 'remarkImage' + index + 'FinderOpen';
            eval(str + '()');
        });
        $('body').on('click', '.cancel-upload', function () {
            var wrapper = $(this).closest('.conList');
            wrapper.find('li').css('z-index', '-1');
            wrapper.find('input').val('');
            $(this).hide();
            wrapper.removeClass("hide-pic");
            wrapper.parent().append(wrapper.clone());
            wrapper.remove();
            $(".conList").each(function (i, ele) {
                if ($(ele).find("input.input-xlarge").val()) {
                    $(ele).next().removeClass("hide-pic")
                }
            })
        });
        $(window).on("load", function () {
            setTimeout(function () {
                $("#imageBox").find("input.input-xlarge").each(function (i, ele) {
                    if ($(ele).val()) {
                        $(ele).next().find("li").css("z-index", "99");
                        $(ele).parents(".conList").find(".cancel-upload").show();
                        $(ele).parents(".conList").next().removeClass("hide-pic")
                    }
                })
                $("#appletsImageBox").find("input.input-xlarge").each(function (i, ele) {
                    if ($(ele).val()) {
                        $(ele).next().find("li").css("z-index", "99");
                        $(ele).parents(".conList").find(".cancel-upload").show();
                        $(ele).parents(".conList").next().removeClass("hide-pic")
                    }
                })
                $("#adsImageBox").find("input.input-xlarge").each(function (i, ele) {
                    if ($(ele).val()) {
                        $(ele).next().find("li").css("z-index", "99");
                        $(ele).parents(".conList").find(".cancel-upload").show();
                        $(ele).parents(".conList").next().removeClass("hide-pic")
                    }
                })
            }, 500);
        });
    });

    function getCheckedItems() {
        var items = {
            "id": $('#id').val(),
            "productId": "",
            "image": $('#image').val(),
            "appletsImage": $('#appletsImage').val(),
            "adsImage": $('#adsImage').val(),
            "name": $('#name').val(),
            "content": $('#content').val(),
            "link": $('#link').val(),
            "sort": $('#sort').val(),
            "pcStatus": $('#pcStatus').val(),
            "appletsStatus": $('#appletsStatus').val(),
            "label": $('#label').val(),
            "createDate": ""
        };
        return items;
    }

    /**
     * @param obj
     * jquery控制input只能输入数字
     */
    function onlynum(obj) {
        obj.value = obj.value.replace(/[^\d]/g, ""); //清除"数字"以外的字符
    }

    //删除文件
    function dataDelete(that, id) {
        console.log($(that).text());
        $(that).parent().remove();
        var fileIds = $("#fileIds").val();
        // if (fileIds.indexOf(id)) {
        //     fileIds = fileIds.replace(id + ',', '');
        //     $("#fileIds").val(fileIds);
        // }
        $.ajax({
            url: "${ctx}/baike/cmBaikeProduct/deleteFile",
            data: {"fileId": id},
            async: false,
            type: "POST"
        });
    }

    function previewVideo(url) {
        var url = "${ctx}/archive/cmProductArchiveContent/preview?url=" + encodeURIComponent(url);
        var title = "视频播放";
        top.$.jBox("iframe:" + url, {
            iframeScrolling: 'yes',
            width: 1000,
            height: 750,
            persistent: true,
            title: title,
            buttons: {"关闭": '-1'}
        });
    }

    var fileIds=$('#id').val()
    //点击上传按钮后上传文件
    $('#addSubmit').click(function () {
        // var fileIdArr = fileIds.split(',');
        // if (fileIdArr.length >= 7) {
        //     alertx('最多上传6个视频');
        //     return;
        // }
        var filesById = document.getElementById('productFile');
        var files = $('#productFile');
        var filevalue = document.getElementById('productFile').value;

        var fileList = files.prop('files');
        var fileTitle = $('#fileTitle').val();
        // var fileName = $('#addSubmit').val();
        var fileName = $('#uploadFileName').val();

        // if (fileTitle == '') {
        //     alertx('请输入视频标题')
        //     return;
        // }
        // if (files === '' || files.length == 0 || fileName == '') {
        //     alertx('请选择上传文件');
        //     return;
        // }
        if (filevalue === '') {
            alertx('请选择上传文件');
            return;
        }
        $("#fileTitle").val("");
        $("#uploadFileName").val("");
        var data = new FormData();
        var productId = $("#proId").val();
        data.append('file', fileList[0]);
        data.append('fileTitle', fileTitle);
        data.append('fileName', fileName);
        data.append('productId', productId);
        data.append('fileIds', fileIds);
        $('.upload-loading').css("display", "inline");
        $.ajax({
            url: "${ctx}/baike/cmBaikeProduct/upload",
            data: data,
            type: "POST",
            processData: false,
            contentType: false,
            dataType: "json",
            success: function (res) {
                if (res.success) {
                    filesById.value = '';
                     var ossUrl=res.productFile.ossUrl;
                    var fileid=res.productFile.id;
                    var videoname=res.productFile.fileName;
                    console.log(res);
                    console.log(res.productFile);
                    document.getElementById('bf').setAttribute("onclick", "previewVideo('" + ossUrl + "')");
                    document.getElementById('sc').setAttribute("onclick", "dataDelete(this,'"+fileid+"')");
                    // console.log(ss.ossUrl);
                    // renderFileList(res.productFile);
                    document.getElementById('videoName').setAttribute("value",videoname);
                    document.getElementById('link').setAttribute("value",ossUrl);
                    $('.upload-loading').hide();
                    $('#file-list-display').show();
                } else {
                    $.jBox.tip(res.msg, 'error');
                    $("#uploadFileName").val(fileName);
                    $('.upload-loading').hide();
                }

            },
            error: function (json) {

            }
        });
    })
    var files = document.getElementById("productFile");
    //选择上传文件后显示文件名称
    files.addEventListener("change", function (event) {
        var name = event.target.files[0].name;
        console.log(name)
        $('#uploadFileName').val(name);
    });
</script>
</body>
</html>