优化资源下载界面

2025-06-09 17:36:52 +08:00
parent 234fc206d5
commit c5e5cace18
7 changed files with 1032 additions and 76 deletions
@@ -120,6 +120,7 @@ class ResourcesController extends BaseController
                'title' => input('post.title'),
                'cate' => input('post.cate'),
                'icon' => input('post.icon'),
+                'images' => input('post.images'),
                'url' => input('post.url'),
                'fileurl' => input('post.fileurl'),
                'code' => input('post.code'),
@@ -170,6 +171,7 @@ class ResourcesController extends BaseController
                'desc' => $data['desc'],
                'uploader' => $data['uploader'],
                'icon' => $data['icon'],
+                'images' => $data['images'],
                'fileurl' => $data['fileurl'],
                'url' => $data['url'],
                'code' => $data['code'],
@@ -201,12 +203,22 @@ class ResourcesController extends BaseController
        $resource = Resource::where('id', $id)
            ->where('delete_time', null)
            ->find();
-            
+
        if (!$resource) {
            Log::record('编辑资源', 0, '资源不存在', '资源管理');
            $this->error('资源不存在');
        }

+        // 处理图片路径
+        if (!empty($resource['images'])) {
+            $domain = request()->domain();
+            $images = explode(',', $resource['images']);
+            $images = array_map(function ($image) use ($domain) {
+                return $domain . $image;
+            }, $images);
+            $resource['images'] = implode(',', $images);
+        }
+
        View::assign('resource', $resource);
        return View::fetch();
    }
@@ -248,7 +260,7 @@ class ResourcesController extends BaseController
            ->order('sort asc, id asc')
            ->select()
            ->toArray();
-            
+
        // 获取每个分类下的资源总数
        foreach ($lists as &$item) {
            if ($item['cid'] == 0) {
@@ -257,7 +269,7 @@ class ResourcesController extends BaseController
                    ->where('delete_time', null)
                    ->where('status', 1)
                    ->column('id');
-                    
+
                $item['total'] = Resource::where('cate', 'in', array_merge([$item['id']], $childIds))
                    ->where('delete_time', null)
                    ->where('status', '<>', 3)
@@ -270,7 +282,7 @@ class ResourcesController extends BaseController
                    ->count();
            }
        }
-        
+
        $tree = $this->buildParentChild($lists);
        return json(['code' => 0, 'msg' => '获取成功', 'data' => $tree]);
    }
@@ -260,7 +260,7 @@
            accept: 'images',
            before: function (obj) {
                obj.preview(function (index, file, result) {
-                    $('#imagePreview').append('<div class="layui-upload-img-item" style="display: inline-block; margin-right: 10px;"><img src="' + result + '" alt="' + file.name + '" style="width: 100px; height: 100px; object-fit: cover;"><p>' + file.name + '</p></div>');
+                    $('#imagePreview').append('<div class="layui-upload-img-item" style="display: inline-block; margin-right: 10px;"><img src="' + result + '" alt="' + file.name + '" style="width: 100px; height: 100px; object-fit: cover;"><p>' + file.name + '</p><button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete-image" style="position: absolute; top: 0; right: 0;">删除</button></div>');
                });
                element.progress('image-progress', '0%');
                layer.msg('图片上传中', { icon: 16, time: 0 });
@@ -110,29 +110,42 @@
        <div class="layui-form-item">
            <label class="layui-form-label">图片上传</label>
            <div class="layui-input-block">
-                <div class="layui-upload">
-                    <button type="button" class="layui-btn" id="imageUpload">多图片上传</button>
-                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
-                        预览图：
-                        <div class="layui-upload-list" id="imagePreview" style="display: flex; flex-direction: column;">
-                            {if condition="$resource.images"}
-                            {foreach name="images" item="image" explode=",", $resource.images}
-                            <div class="layui-upload-img-item" data-src="{$image}">
-                                <img src="{$image}" alt="已上传图片" style="width: 100px; height: 100px; object-fit: cover;">
-                                <p>{$image|basename}</p>
-                                <button type="button"
-                                    class="layui-btn layui-btn-xs layui-btn-danger delete-image">删除</button>
+                <div class="image-upload-container">
+                    <button type="button" class="btn btn-primary" id="imageUpload">
+                        <i class="fas fa-upload"></i> 多图片上传
+                    </button>
+                    <div class="image-preview-container" id="imagePreview">
+                        {if condition="isset($resource.images) && !empty($resource.images)"}
+                        {if condition="strpos($resource.images, ',') !== false"}
+                        {volist name="resource.images|explode=',',true" id="image"}
+                        <div class="image-preview-item" data-src="{$image}">
+                            <img src="{$image}" alt="已上传图片">
+                            <div class="image-preview-overlay">
+                                <button type="button" class="delete-image">
+                                    <i class="fas fa-trash"></i>
+                                </button>
                            </div>
-                            {/foreach}
-                            {/if}
+                            <p class="image-filename">{$image|basename}</p>
                        </div>
-                    </blockquote>
+                        {/volist}
+                        {else}
+                        <div class="image-preview-item" data-src="{$resource.images}">
+                            <img src="{$resource.images}" alt="已上传图片">
+                            <div class="image-preview-overlay">
+                                <button type="button" class="delete-image">
+                                    <i class="fas fa-trash"></i>
+                                </button>
+                            </div>
+                            <p class="image-filename">{$resource.images|basename}</p>
+                        </div>
+                        {/if}
+                        {/if}
+                    </div>
+                    <div class="upload-progress" id="imageProgress" style="display: none;">
+                        <div class="progress-bar" role="progressbar" style="width: 0%"></div>
+                    </div>
+                    <input type="hidden" name="images" id="images" value="{$resource.images|default=''}">
                </div>
-                <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="image-progress"
-                    style="margin-top: 10px;">
-                    <div class="layui-progress-bar" lay-percent=""></div>
-                </div>
-                <input type="hidden" name="images" id="images" value="{$resource.images|default=''}">
            </div>
        </div>

@@ -266,7 +279,7 @@
            accept: 'images',
            before: function (obj) {
                obj.preview(function (index, file, result) {
-                    $('#imagePreview').append('<div class="layui-upload-img-item" data-src="' + result + '"><img src="' + result + '" alt="' + file.name + '" style="width: 100px; height: 100px; object-fit: cover;"><p>' + file.name + '</p><button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete-image">删除</button></div>');
+                    $('#imagePreview').append('<div class="layui-upload-img-item" data-src="' + result + '"><img src="' + result + '" alt="' + file.name + '" style="width: 100px; height: 100px; object-fit: cover;"><p>' + file.name + '</p><button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete-image" style="position: absolute; top: 0; right: 0;">删除</button></div>');
                });
                element.progress('image-progress', '0%');
                layer.msg('图片上传中', { icon: 16, time: 0 });
@@ -564,4 +577,223 @@
    function goBack() {
        window.location.href = '{:url("resources/lists")}';
    }
-</script>
+</script>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        const imageUpload = document.getElementById('imageUpload');
+        const imagePreview = document.getElementById('imagePreview');
+        const imageProgress = document.getElementById('imageProgress');
+        const progressBar = imageProgress.querySelector('.progress-bar');
+        const imagesInput = document.getElementById('images');
+
+        // 处理图片上传
+        imageUpload.addEventListener('click', function () {
+            const input = document.createElement('input');
+            input.type = 'file';
+            input.multiple = true;
+            input.accept = 'image/*';
+
+            input.onchange = function (e) {
+                const files = e.target.files;
+                if (files.length === 0) return;
+
+                imageProgress.style.display = 'block';
+                let uploadedCount = 0;
+
+                Array.from(files).forEach(file => {
+                    const formData = new FormData();
+                    formData.append('file', file);
+
+                    fetch('{:url("index/upload_img")}', {
+                        method: 'POST',
+                        body: formData
+                    })
+                        .then(response => response.json())
+                        .then(res => {
+                            if (res.code === 0) {
+                                addImagePreview(res.data);
+                                updateImagesInput();
+                            } else {
+                                alert('上传失败：' + res.msg);
+                            }
+                        })
+                        .catch(error => {
+                            console.error('上传错误:', error);
+                            alert('上传出错');
+                        })
+                        .finally(() => {
+                            uploadedCount++;
+                            const progress = (uploadedCount / files.length) * 100;
+                            progressBar.style.width = progress + '%';
+
+                            if (uploadedCount === files.length) {
+                                setTimeout(() => {
+                                    imageProgress.style.display = 'none';
+                                    progressBar.style.width = '0%';
+                                }, 500);
+                            }
+                        });
+                });
+            };
+
+            input.click();
+        });
+
+        // 添加图片预览
+        function addImagePreview(imageUrl) {
+            const div = document.createElement('div');
+            div.className = 'image-preview-item';
+            div.dataset.src = imageUrl;
+
+            div.innerHTML = `
+            <img src="${imageUrl}" alt="已上传图片">
+            <div class="image-preview-overlay">
+                <button type="button" class="btn btn-danger btn-sm delete-image">
+                    <i class="fas fa-trash"></i>
+                </button>
+            </div>
+            <p class="image-filename">${imageUrl.split('/').pop()}</p>
+        `;
+
+            imagePreview.appendChild(div);
+        }
+
+        // 更新隐藏输入框的值
+        function updateImagesInput() {
+            const images = Array.from(imagePreview.querySelectorAll('.image-preview-item'))
+                .map(item => item.dataset.src);
+            imagesInput.value = images.join(',');
+        }
+
+        // 删除图片
+        imagePreview.addEventListener('click', function (e) {
+            if (e.target.closest('.delete-image')) {
+                const item = e.target.closest('.image-preview-item');
+                item.remove();
+                updateImagesInput();
+            }
+        });
+    });
+</script>
+
+<style>
+    .image-upload-container {
+        margin: 20px 0;
+    }
+
+    .image-preview-container {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+        gap: 15px;
+        margin-top: 15px;
+    }
+
+    .image-preview-item {
+        position: relative;
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+
+    .image-preview-item img {
+        width: 100%;
+        height: 150px;
+        object-fit: cover;
+        display: block;
+    }
+
+    .image-preview-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.5);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        transition: opacity 0.3s;
+        z-index: 1;
+        /* 添加 z-index */
+    }
+
+    .image-preview-item:hover .image-preview-overlay {
+        opacity: 1;
+    }
+
+    .image-filename {
+        margin: 5px 0;
+        font-size: 0.9em;
+        text-align: center;
+        word-break: break-all;
+    }
+
+    .upload-progress {
+        margin-top: 10px;
+        height: 4px;
+        background: #f0f0f0;
+        border-radius: 2px;
+        overflow: hidden;
+    }
+
+    .progress-bar {
+        height: 100%;
+        background: #007bff;
+        transition: width 0.3s ease;
+    }
+
+    .btn {
+        padding: 8px 16px;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 14px;
+        transition: all 0.3s;
+    }
+
+    .btn-primary {
+        background: #007bff;
+        color: white;
+    }
+
+    .btn-primary:hover {
+        background: #0056b3;
+    }
+
+    .btn-danger {
+        background: #dc3545;
+        color: white;
+    }
+
+    .btn-danger:hover {
+        background: #c82333;
+    }
+
+    .btn-sm {
+        padding: 4px 8px;
+        font-size: 12px;
+    }
+
+    .delete-image {
+        background: #dc3545;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        padding: 8px 12px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: background-color 0.3s;
+        z-index: 2;
+        /* 确保按钮在悬停层之上 */
+    }
+
+    .delete-image i {
+        font-size: 14px;
+        margin-right: 4px;
+        /* 添加图标右边距 */
+    }
+</style>