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/controller/YunzeradminController.php
+8
View File
@@ -1053,4 +1053,12 @@ class YunzeradminController extends Base
}
return json(['code' => 1, 'msg' => '请求方法无效']);
}
//获取推送内容Articles和Resources
//https://www.yunzer.cn/index/articles/detail?id=30
//https://www.yunzer.cn/index/program/index?cateid=2
//https://www.yunzer.cn/index/game/index?cateid=8
//https://www.yunzer.cn/index/resources/detail?id=3
}
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>
app/index/view/component/main.php
+2 -2
View File
@@ -496,7 +496,7 @@
});
return `
<div class="opencourse product-item" onclick="window.open('/index/program/detail?id=${program.id || ''}', '_blank')">
<div class="opencourse product-item" onclick="window.open('/index/resources/detail?id=${program.id || ''}', '_blank')">
<div class="video">
<img src="${program.icon || ''}" alt="" class="cover">
</div>
@@ -576,7 +576,7 @@
if (!game) return '';
return `
<div class="opencourse product-item" onclick="window.open('/index/game/detail?id=${game.id || ''}', '_blank')">
<div class="opencourse product-item" onclick="window.open('/index/resources/detail?id=${game.id || ''}', '_blank')">
<div class="video">
<img src="${game.icon || '/static/images/default-game.png'}" alt="" class="cover">
</div>
app/index/view/resources/detail.php
+105 -21
View File
@@ -1,4 +1,9 @@
{include file="component/head" /}
<link href="__STATIC__/css/lightbox.min.css" rel="stylesheet">
<link href="__CSS__/swiper-bundle.min.css" rel="stylesheet">
<script src="__JS__/jquery.min.js"></script>
<script src="__JS__/lightbox.min.js"></script>
<script src="__JS__/swiper-bundle.min.js"></script>
{include file="component/header-simple" /}
<div class="main">
<div class="main-top">
@@ -24,8 +29,35 @@
<div class="detail-top-card">
<div class="detail-top-card-left">
<div class="article-cover">
<img src="<?php echo $game['icon'] ?: '/static/images/default-game.png'; ?>">
<!-- <img src="https://www.yunzer.cn/storage/uploads/20250523/b75a51fa606fd3a18261a6ea283d35fe.jpg" alt=""> -->
<div class="swiper game-swiper">
<div class="swiper-wrapper">
{php}
// 兼容字符串和数组
$images = isset($game['images']) ? $game['images'] : [];
if (is_string($images)) {
$images = explode(',', $images);
}
$images = array_filter($images); // 移除空值
if (empty($images) && !empty($game['icon'])) {
$images = [$game['icon']];
}
{/php}
{volist name="images" id="image"}
<div class="swiper-slide">
<a href="<?php $img = trim($image, ', ');
echo (strpos($img, 'http') === 0 ? $img : request()->domain() . $img); ?>"
data-lightbox="game-gallery">
<img src="<?php $img = trim($image, ', ');
echo (strpos($img, 'http') === 0 ? $img : request()->domain() . $img); ?>"
alt="<?php echo $game['title']; ?>">
</a>
</div>
{/volist}
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div class="detail-top-card-right">
@@ -92,7 +124,7 @@
</div>
</div>
<div class="detail-top-right">
这里放个人信息
这里放个人信息
</div>
</div>
<div class="detail-middle">
@@ -135,7 +167,7 @@
<!-- 相关游戏 -->
<?php if (!empty($relatedGames)): ?>
<div class="related-games">
<h3>相关游戏</h3>
<h3>相关资源</h3>
<div class="game-list">
<?php foreach ($relatedGames as $related): ?>
<div class="game-item"
@@ -172,6 +204,7 @@
<script>
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function () {
// 获取游戏ID
const gameId = new URLSearchParams(window.location.search).get('id');
if (!gameId) {
@@ -261,6 +294,40 @@
});
}
const swiper = new Swiper('.game-swiper', {
slidesPerView: 1,
spaceBetween: 30,
loop: true,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
// 初始化 Lightbox
lightbox.option({
'resizeDuration': 200,
'wrapAround': true,
'albumLabel': "图片 %1 / %2",
'fadeDuration': 300,
'imageFadeDuration': 300,
'positionFromTop': 100,
'maxWidth': 1200,
'maxHeight': 800,
'disableScrolling': true,
'showImageNumberLabel': true,
'alwaysShowNavOnTouchDevices': true
});
//复制分享码
const codeBtn = document.getElementById('codeBtn');
if (codeBtn) {
@@ -292,23 +359,21 @@
// 返回顶部功能
const goToTop = document.getElementById('goToTop');
// 监听滚动事件
window.addEventListener('scroll', function () {
if (window.pageYOffset > 300) {
goToTop.classList.add('show');
} else {
goToTop.classList.remove('show');
}
});
// 点击返回顶部
goToTop.addEventListener('click', function () {
window.scrollTo({
top: 0,
behavior: 'smooth'
if (goToTop) {
window.addEventListener('scroll', function () {
if (window.pageYOffset > 300) {
goToTop.classList.add('show');
} else {
goToTop.classList.remove('show');
}
});
});
goToTop.addEventListener('click', function () {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
}
});
// 更新游戏访问次数
@@ -393,7 +458,7 @@
.detail-top-right {
width: 30%;
border-left: 1px solid #eee ;
border-left: 1px solid #eee;
margin: 20px;
}
@@ -754,6 +819,25 @@
background-color: #0081ff12;
border-radius: 5px;
}
.detail-top-card-left {
width: 350px;
}
.swiper .swiper-button-prev,
.swiper .swiper-button-next {
color: #3881fd;
background: rgba(255, 255, 255, 0.9);
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.swiper .swiper-button-prev:after,
.swiper .swiper-button-next:after {
font-size: 18px;
}
</style>
{include file="component/foot" /}