|
@@ -149,9 +149,9 @@
|
|
|
text-align: center;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
- /*.controls{*/
|
|
|
- /* font-size: 0;*/
|
|
|
- /*}*/
|
|
|
+ .iconBox {
|
|
|
+ font-size: 0;
|
|
|
+ }
|
|
|
.controls .conList{
|
|
|
display: inline-block;
|
|
|
margin-right: 15px;
|
|
@@ -205,9 +205,58 @@
|
|
|
top: 120px;
|
|
|
margin-left: 2px;
|
|
|
}
|
|
|
+ .upload-content-image {
|
|
|
+ margin-top: -70px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-content-image .conList .btn:nth-of-type(1) {
|
|
|
+ width: 90px;
|
|
|
+ height: 100px;
|
|
|
+ border: 2px solid #eee;
|
|
|
+ background: #fff;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-content-image .conList .btn:nth-of-type(1) > div {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-content-image .conList .btn:nth-of-type(1) span {
|
|
|
+ font-size: 35px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-content-image .conList .btn:nth-of-type(1) h5 {
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ .upload-content-image .conList ol li {
|
|
|
+ width: 114px;
|
|
|
+ min-height: 80px;
|
|
|
+ text-align: center;
|
|
|
+ background: #fff;
|
|
|
+ position: relative;
|
|
|
+ top: 120px;
|
|
|
+ margin-left: 2px;
|
|
|
+ }
|
|
|
+ .cancel-upload-image {
|
|
|
+ background: transparent;
|
|
|
+ border: none;
|
|
|
+ box-shadow: none;
|
|
|
+ position: relative;
|
|
|
+ top: -38px;
|
|
|
+ left: -25px;
|
|
|
+ cursor: pointer;
|
|
|
+ z-index: 100;
|
|
|
+ }
|
|
|
.hide-pic {
|
|
|
display: none !important;
|
|
|
}
|
|
|
+ .hide-pic-image {
|
|
|
+ display: none !important;
|
|
|
+ }
|
|
|
.upload-tips {
|
|
|
margin: 10px 0;
|
|
|
}
|
|
@@ -403,8 +452,19 @@
|
|
|
<div class="control-group">
|
|
|
<label class="control-label"><font color="red">*</font>是否显示联系人和联系方式:</label>
|
|
|
<div class="controls" style="margin-top: 5px">
|
|
|
- <form:radiobutton path="showContactFlag" value="1" checked="true" label="不显示"/>
|
|
|
- <form:radiobutton path="showContactFlag" value="2" label="显示"/>
|
|
|
+ <form:radiobutton cssStyle="position: relative" path="showContactFlag" value="1" checked="true" label="不显示"/>
|
|
|
+ <form:radiobutton cssStyle="position: relative" path="showContactFlag" value="2" label="显示"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="control-group">
|
|
|
+ <label class="control-label">身份验证照片:</label>
|
|
|
+ <div class="controls upload-content-image iconBox">
|
|
|
+ <div class="conList">
|
|
|
+ <form:hidden id="authenticationImage" path="authenticationImage" value="${cmSecondHandDetail.authenticationImage}" htmlEscape="false" maxlength="255" class="input-xlarge"/>
|
|
|
+ <sys:ckfinder input="authenticationImage" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100"
|
|
|
+ maxHeight="100"/>
|
|
|
+ <br>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="control-group">
|
|
@@ -447,8 +507,6 @@
|
|
|
<form:input path="address" htmlEscape="false" maxlength="100" class="input-xlarge required"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <%--<c:if test="${empty cmSecondHandDetail.id}">--%>
|
|
|
<div class="control-group">
|
|
|
<label class="control-label" style="margin-top: 17px">图片:</label>
|
|
|
<div class="controls upload-content" id="secondHandImage">
|
|
@@ -477,31 +535,38 @@
|
|
|
<font color="red">最多上传5张二手商品图片,请尽量全部上传,单张图片不能超过5M</font>
|
|
|
</div>
|
|
|
</div>
|
|
|
-<%-- </c:if>
|
|
|
-
|
|
|
- <c:if test="${not empty cmSecondHandDetail.id}">
|
|
|
- <div class="control-group">
|
|
|
- <label class="control-label" style="margin-top: 17px">图片:</label>
|
|
|
- <div class="controls upload-content">
|
|
|
- <img src="${cmSecondHandDetail.image1}" width="150" height="150" style="margin-left: 20px;margin-top: 100px">
|
|
|
- <img src="${cmSecondHandDetail.image2}" width="150" height="150" style="margin-left: 20px;margin-top: 100px">
|
|
|
- <img src="${cmSecondHandDetail.image3}" width="150" height="150" style="margin-left: 20px;margin-top: 100px">
|
|
|
- <img src="${cmSecondHandDetail.image4}" width="150" height="150" style="margin-left: 20px;margin-top: 100px">
|
|
|
- <img src="${cmSecondHandDetail.image5}" width="150" height="150" style="margin-left: 20px;margin-top: 100px">
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="conList upload-tips" style="margin-left: 205px">
|
|
|
- <font color="red">最多上传5张二手商品图片,请尽量全部上传,单张图片不能超过5M</font>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </c:if>--%>
|
|
|
-
|
|
|
<div class="control-group">
|
|
|
<label class="control-label">商品详细信息:</label>
|
|
|
<div class="controls">
|
|
|
<form:textarea path="productDetails" style="width: 500px;height: 180px;" placeholder="请填写商品详细信息,对商品进行更详细的描述,不超过200字" htmlEscape="false" maxlength="250" class="input-xlarge "/>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="control-group">
|
|
|
+ <label class="control-label">二手出让承诺函文件:</label>
|
|
|
+ <form:hidden path="ossName" id="ossName"/>
|
|
|
+ <form:hidden path="fileName" id="fileName"/>
|
|
|
+ <div id='file-list-display' style="box-sizing: border-box;padding-left: 140px;">
|
|
|
+ <c:if test="${not empty cmSecondHandDetail.fileName}">
|
|
|
+ <span>${cmSecondHandDetail.fileName}
|
|
|
+ <a href="${cmSecondHandDetail.url}" target="_blank" style="position: relative">预览</a>
|
|
|
+ <a href="${ctx}/oss/cmOssArchive/fileDownload?ossName=${cmSecondHandDetail.ossName}&fileName=${cmSecondHandDetail.fileName}" style="position: relative">下载</a></span>
|
|
|
+ </c:if>
|
|
|
+ </div>
|
|
|
+ <div class="upload" style="box-sizing: border-box;padding-left: 120px;" >
|
|
|
+ <input type="file" name="file" id="controlsFiles" style="position: relative" accept=".pdf">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="control-group">
|
|
|
+ <label class="control-label">二手出让承诺函图片:</label>
|
|
|
+ <div class="controls upload-content-image iconBox">
|
|
|
+ <div class="conList">
|
|
|
+ <form:hidden id="commitmentImage" path="commitmentImage" htmlEscape="false" maxlength="255" class="input-xlarge"/>
|
|
|
+ <sys:ckfinder input="commitmentImage" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100"
|
|
|
+ maxHeight="100"/>
|
|
|
+ <br>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
<c:if test="${not empty cmSecondHandDetail.productID}">
|
|
|
<div class="control-group">
|
|
@@ -600,6 +665,99 @@
|
|
|
})
|
|
|
},500);
|
|
|
});
|
|
|
+
|
|
|
+
|
|
|
+ $('.upload-content-image .conList .btn:nth-of-type(1)').html('<div><span>+</span><h5>选择图片</h5></div>');
|
|
|
+ $('.upload-content-image .conList .btn:nth-of-type(2)').after('<img class="cancel-upload-image" src="/static/images/close-btn1.png">').remove();
|
|
|
+ $('.upload-content-image .conList').find('.cancel-upload-image').hide();
|
|
|
+ var observeEleImage = document.getElementsByClassName('upload-content-image')[0];
|
|
|
+ var observeEleImage1 = document.getElementsByClassName('upload-content-image')[1];
|
|
|
+ var MutationObserverImage = window.MutationObserver || window.WebKitMutationObserver;
|
|
|
+ var MutationObserverConfigImage = {
|
|
|
+ childList: true,
|
|
|
+ subtree: true,
|
|
|
+ characterData: true
|
|
|
+ };
|
|
|
+ var observerImage = new MutationObserverImage(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-image').show();
|
|
|
+ if (nextEle.hasClass('hide-pic-image')) {
|
|
|
+ nextEle.removeClass('hide-pic-image');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+ observerImage.observe(observeEleImage, MutationObserverConfigImage);
|
|
|
+ observerImage.observe(observeEleImage1, MutationObserverConfigImage);
|
|
|
+
|
|
|
+ $('body').on('click', '.upload-content-image li', function () {
|
|
|
+ var index = $(this).closest('.conList').index() + 1,
|
|
|
+ str = 'remarkImage' + index + 'FinderOpen';
|
|
|
+ eval(str + '()');
|
|
|
+ });
|
|
|
+ $('body').on('click', '.cancel-upload-image', function () {
|
|
|
+ var wrapper = $(this).closest('.conList');
|
|
|
+ wrapper.find('li').css('z-index', '-1');
|
|
|
+ wrapper.find('input').val('');
|
|
|
+ $(this).hide();
|
|
|
+ wrapper.removeClass("hide-pic-image");
|
|
|
+ wrapper.parent().append(wrapper.clone());
|
|
|
+ wrapper.remove();
|
|
|
+ $(".conList").each(function (i, ele) {
|
|
|
+ if ($(ele).find("input.input-xlarge").val()) {
|
|
|
+ $(ele).next().removeClass("hide-pic-image")
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $(window).on("load", function () {
|
|
|
+ setTimeout(function () {
|
|
|
+ var input = $("#authenticationImage");
|
|
|
+ if (input.val()) {
|
|
|
+ input.next().find("li").css("z-index", "99");
|
|
|
+ input.parents(".conList").find(".cancel-upload-image").show();
|
|
|
+ input.parents(".conList").next().removeClass("hide-pic-image")
|
|
|
+ }
|
|
|
+ input = $("#commitmentImage");
|
|
|
+ if (input.val()) {
|
|
|
+ input.next().find("li").css("z-index", "99");
|
|
|
+ input.parents(".conList").find(".cancel-upload-image").show();
|
|
|
+ input.parents(".conList").next().removeClass("hide-pic-image")
|
|
|
+ }
|
|
|
+ }, 500);
|
|
|
+ });
|
|
|
+
|
|
|
+ var controlsFiles = document.getElementById("controlsFiles");
|
|
|
+ controlsFiles.addEventListener("change", function () {
|
|
|
+ $('#uploadFileName').val(name.substring(0, name.indexOf('.')));
|
|
|
+ var files = $('#controlsFiles').prop('files');
|
|
|
+ var data = new FormData();
|
|
|
+ var url = "${ctx}/oss/cmOssArchive/fileUpload";
|
|
|
+ data.append('file', files[0]);
|
|
|
+ $.ajax({
|
|
|
+ url: url,
|
|
|
+ data: data,
|
|
|
+ type: "POST",
|
|
|
+ processData: false,
|
|
|
+ contentType: false,
|
|
|
+ dataType: "json",
|
|
|
+ success: function (res) {
|
|
|
+ var html="<span>"+res.fileName+" <a href="+res.url+" style='position: relative' target='_blank'>预览</a> <a href='${ctx}/oss/cmOssArchive/fileDownload?ossName="+res.ossName+"&fileName="+res.fileName+"' style='position: relative'>下载</a></span>";
|
|
|
+ $("#file-list-display").html(html);
|
|
|
+ $("#controlsFiles").val("");
|
|
|
+ $("#ossName").val(res.ossName);
|
|
|
+ $("#fileName").val(res.fileName);
|
|
|
+ },
|
|
|
+ error: function (error) {
|
|
|
+ alertx(error);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
});
|
|
|
|
|
|
|