admin-设置新版banner 设置固定宽高裁剪

liquidnet-bus-client/liquidnet-client-admin/liquidnet-client-admin-web/src/main/resources/templates/zhengzai/store/homeSet/topBanner.html

@@ -161,12 +161,6 @@
             </div>
         </div> -->
     </div>
-    <div id="bannerCropModal" style="display:none;padding:16px;">
-        <div class="banner-crop-box" style="width:764px;height:320px;overflow:hidden;margin:0 auto;background:#f5f5f5;">
-            <img id="bannerCropImg" src="" alt="">
-        </div>
-        <p style="text-align:center;color:#888;margin:10px 0 0;">请裁剪为 764×192（宽高比4:1）</p>
-    </div>
     <th:block th:include="include :: footer"/>
     <th:block th:include="include :: bootstrap-fileinput-js" />
     <th:block th:include="include :: bootstrap-suggest-js" />
@@ -553,13 +547,9 @@
                 });
             });
             if (type == 3) {
-                $("#fileinput"+num+"").fileinput({
+                var capturedNum = num;
+                $("#fileinput"+capturedNum+"").fileinput({
                     'theme': 'explorer-fas',
-                    'uploadUrl':  platformUrl + "/platform/basicServices/alOss/upload",
-                    "uploadExtraData": {
-                        "pathName" : "banner",
-                        "buckType" : 1
-                    },
                     autoReplace: true,
                     showCaption: false,
                     showPreview: false,
@@ -570,10 +560,13 @@
                     dropZoneTitle: "请上传文件",
                     maxFileCount: 1
                 }).on("filebatchselected", function (event, files) {
-                    if (!files || !files[0]) {
+                    // 未设 uploadUrl 时，files 是原生 FileList
+                    var file = files && files[0];
+                    if (!file || !/^image\//.test(file.type)) {
+                        layer.msg('请选择图片文件');
                         return;
                     }
-                    openBannerCrop(files[0], num);
+                    openBannerCrop(file, capturedNum);
                     $(this).fileinput('clear');
                 });
                 return;
@@ -633,17 +626,22 @@
             bannerCropTargetNum = targetNum;
             var reader = new FileReader();
             reader.onload = function (e) {
+                var dataUrl = e.target.result;
                 layer.open({
                     type: 1,
                     title: '裁剪图片（764×192，宽高比4:1）',
-                    area: ['820px', '480px'],
-                    content: $('#bannerCropModal'),
+                    area: ['820px', '500px'],
+                    content: '<div style="padding:16px;">' +
+                        '<div style="width:764px;height:340px;overflow:hidden;margin:0 auto;background:#f0f0f0;">' +
+                        '<img id="bannerCropImg" src="' + dataUrl + '" alt="" style="max-width:100%;">' +
+                        '</div>' +
+                        '<p style="text-align:center;color:#888;margin:8px 0 0;">拖动/缩放后点击确定，输出 764×192</p>' +
+                        '</div>',
                     btn: ['确定', '取消'],
                     yes: function (index) {
                         confirmBannerCrop(index);
                     },
                     success: function () {
-                        $('#bannerCropImg').attr('src', e.target.result);
                         if (bannerCropper) {
                             bannerCropper.destroy();
                             bannerCropper = null;
@@ -660,7 +658,6 @@
                             bannerCropper.destroy();
                             bannerCropper = null;
                         }
-                        $('#bannerCropImg').attr('src', '');
                     }
                 });
             };