Merge branch 'dev-wyf-v1.8.0-goblin' into test

20f46866 · wangyifan · 8e76121e · 556ed32f · 20f46866
Commit 20f46866 authored Aug 18, 2026 by wangyifan
Show whitespace changes
Inline Side-by-side

Showing with 124 additions and 1 deletion

topBanner.html ...resources/templates/zhengzai/store/homeSet/topBanner.html +124 -1

No files found.
--- a/liquidnet-bus-client/liquidnet-client-admin/liquidnet-client-admin-web/src/main/resources/templates/zhengzai/store/homeSet/topBanner.html
+++ b/liquidnet-bus-client/liquidnet-client-admin/liquidnet-client-admin-web/src/main/resources/templates/zhengzai/store/homeSet/topBanner.html
@@ -3,6 +3,7 @@
 <head>
 	<th:block th:include="include :: header('顶部banner')" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
+    <th:block th:include="include :: cropper-css" />
    <style>
        .home_page {
            display: flex;
@@ -160,9 +161,16 @@
            </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" />
+    <th:block th:include="include :: cropper-js" />
    <script th:inline="javascript">
        var prefix2 = ctx + "local";
        var platformUrl = [[${platformUrl}]];
@@ -198,7 +206,7 @@
                type = 3;
                $("#tags").show();
                $("#activeTags").hide();
-                $("#tall").html('新版顶部BANNER（bannerType=3）');
+                $("#tall").html('(最多允许添加10张图，宽度为764像素，高度为192像素，宽高比4:1)');
            } else {
                type = 1;
                $("#tags").show();
@@ -544,6 +552,32 @@
                    type: 'datetime'
                });
            });
+            if (type == 3) {
+                $("#fileinput"+num+"").fileinput({
+                    'theme': 'explorer-fas',
+                    'uploadUrl':  platformUrl + "/platform/basicServices/alOss/upload",
+                    "uploadExtraData": {
+                        "pathName" : "banner",
+                        "buckType" : 1
+                    },
+                    autoReplace: true,
+                    showCaption: false,
+                    showPreview: false,
+                    showRemove: false,
+                    showUpload: false,
+                    showCancel: false,
+                    showClose: false,
+                    dropZoneTitle: "请上传文件",
+                    maxFileCount: 1
+                }).on("filebatchselected", function (event, files) {
+                    if (!files || !files[0]) {
+                        return;
+                    }
+                    openBannerCrop(files[0], num);
+                    $(this).fileinput('clear');
+                });
+                return;
+            }
            $("#fileinput"+num+"").fileinput({
                'theme': 'explorer-fas',
                // 'uploadUrl':  "https://devplatform.zhengzai.tv/platform/basicServices/alOss/upload",
@@ -590,6 +624,95 @@
                }, 500)
            })
        }
+        var bannerCropper = null;
+        var bannerCropTargetNum = 0;
+        function openBannerCrop(file, targetNum) {
+            if (!file || !/^image\/\w+$/.test(file.type)) {
+                return layer.msg('请选择图片文件');
+            }
+            bannerCropTargetNum = targetNum;
+            var reader = new FileReader();
+            reader.onload = function (e) {
+                layer.open({
+                    type: 1,
+                    title: '裁剪图片（764×192，宽高比4:1）',
+                    area: ['820px', '480px'],
+                    content: $('#bannerCropModal'),
+                    btn: ['确定', '取消'],
+                    yes: function (index) {
+                        confirmBannerCrop(index);
+                    },
+                    success: function () {
+                        $('#bannerCropImg').attr('src', e.target.result);
+                        if (bannerCropper) {
+                            bannerCropper.destroy();
+                            bannerCropper = null;
+                        }
+                        bannerCropper = new Cropper(document.getElementById('bannerCropImg'), {
+                            aspectRatio: 764 / 192,
+                            viewMode: 1,
+                            autoCropArea: 0.9,
+                            dragMode: 'move'
+                        });
+                    },
+                    end: function () {
+                        if (bannerCropper) {
+                            bannerCropper.destroy();
+                            bannerCropper = null;
+                        }
+                        $('#bannerCropImg').attr('src', '');
+                    }
+                });
+            };
+            reader.readAsDataURL(file);
+        }
+        function confirmBannerCrop(layerIndex) {
+            if (!bannerCropper) {
+                return layer.msg('裁剪框加载中,请稍后...');
+            }
+            bannerCropper.getCroppedCanvas({ width: 764, height: 192 }).toBlob(function (blob) {
+                var formdata = new FormData();
+                formdata.append('file', blob, 'banner.jpg');
+                formdata.append('pathName', 'banner');
+                formdata.append('buckType', 1);
+                $.ajax({
+                    url: platformUrl + "/platform/basicServices/alOss/upload",
+                    data: formdata,
+                    type: 'post',
+                    processData: false,
+                    contentType: false,
+                    success: function (res) {
+                        if (res && res.data && res.data.ossPath) {
+                            $("#viewImg" + bannerCropTargetNum).attr('src', 'https://img.zhengzai.tv/' + res.data.ossPath);
+                            layer.close(layerIndex);
+                        } else {
+                            layer.msg((res && res.msg) || '上传失败');
+                        }
+                    },
+                    error: function () {
+                        layer.msg('上传失败');
+                    }
+                });
+            }, 'image/jpeg', 0.92);
+        }
+        if (!HTMLCanvasElement.prototype.toBlob) {
+            Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
+                value: function(callback, type, quality) {
+                    var canvas = this;
+                    setTimeout(function() {
+                        var binStr = atob(canvas.toDataURL(type, quality).split(',')[1]);
+                        var len = binStr.length;
+                        var arr = new Uint8Array(len);
+                        for (var i = 0; i < len; i++) {
+                            arr[i] = binStr.charCodeAt(i);
+                        }
+                        callback(new Blob([arr], {
+                            type: type || 'image/png'
+                        }));
+                    });
+                }
+            });
+        }
        function promiseMethods(url,type,data,contentType) {
            return new Promise((resolve,reject)=>{
                $.ajax({