yunzerwebsite/yunzer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新资源展示，前后端

Browse Source
This commit is contained in:
hero920103
2025-07-04 11:56:25 +08:00
parent 7aa55a7c1c
commit 3a20b76d4a
7 changed files with 210 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/admin/view/resources/edit.php
+72 -23
View File
@@ -97,29 +97,41 @@
</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>
<p class="image-filename">{$image|basename}</p>
<div class="image-list-table">
<table class="layui-table">
<thead>
<tr>
<th width="100" align="center">缩略图</th>
<th width="40" align="center">操作</th>
</tr>
</thead>
<tbody>
{php}
// 处理图片字符串，正确拆分逗号分隔的路径
$imageArray = [];
if (isset($resource['images']) && !empty($resource['images'])) {
$imageArray = explode(',', $resource['images']);
$imageArray = array_map('trim', $imageArray); // 去除每个路径的前后空格
$imageArray = array_filter($imageArray); // 过滤空值
}
{/php}
{volist name="imageArray" id="image"}
<tr>
<td>
<div class="image-thumbnail" onclick="previewImage('<?php echo (strpos($image, 'http') === 0 ? $image : request()->domain() . $image); ?>')">
<img src="<?php echo (strpos($image, 'http') === 0 ? $image : request()->domain() . $image); ?>" alt="缩略图">
</div>
</td>
<td>
<button type="button" class="layui-btn layui-btn-danger layui-btn-xs delete-image" data-src="{$image}">
<i class="fas fa-trash"></i> 删除
</button>
</td>
</tr>
{/volist}
</tbody>
</table>
</div>
{/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;">
@@ -190,7 +202,7 @@
</div>
</div>
</div>
<div class="layui-form-item" style="margin-top: 80px;">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formSubmit">立即提交</button>
@@ -685,6 +697,19 @@
updateImagesInput();
}
});
// 图片预览功能
window.previewImage = function(imageUrl) {
layer.photos({
photos: {
"data": [{
"src": imageUrl,
"alt": "图片预览"
}]
},
anim: 5
});
};
});
</script>
@@ -820,4 +845,28 @@
.container-right {
width: 65%;
}
/* 图片列表表格样式 */
.image-list-table {
margin-top: 15px;
}
.image-thumbnail {
width: 60px;
height: 60px;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
transition: transform 0.2s;
}
.image-thumbnail:hover {
transform: scale(1.05);
}
.image-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>