Update supply.html

2 months ago · f9221f43b4
1 changed files with 103 additions and 4 deletions
--- a/supply.html
+++ b/supply.html
@ -810,6 +810,52 @@
            background-color: rgba(255, 255, 255, 0.3);
        }
        
+        /* 图片导航按钮 */
+        .image-viewer-nav {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 50px;
+            height: 50px;
+            background-color: rgba(0, 0, 0, 0.6);
+            color: white;
+            border: none;
+            border-radius: 50%;
+            font-size: 30px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: background-color 0.3s;
+            z-index: 10;
+        }
+        
+        .image-viewer-nav:hover {
+            background-color: rgba(0, 0, 0, 0.8);
+        }
+        
+        .prev-btn {
+            left: -25px;
+        }
+        
+        .next-btn {
+            right: -25px;
+        }
+        
+        /* 图片计数器 */
+        .image-viewer-counter {
+            position: absolute;
+            bottom: -40px;
+            left: 50%;
+            transform: translateX(-50%);
+            background-color: rgba(0, 0, 0, 0.6);
+            color: white;
+            padding: 8px 16px;
+            border-radius: 20px;
+            font-size: 14px;
+            font-weight: 500;
+        }
+        
        /* 选择弹窗 */
        .select-modal {
            position: fixed;
@ -1112,8 +1158,16 @@
    <!-- 图片预览 -->
    <div id="imagePreview" class="image-viewer">
        <div class="image-viewer-content">
+            <!-- 上一张按钮 -->
+            <button class="image-viewer-nav prev-btn" onclick="prevPreviewImage()">‹</button>
+            <!-- 图片显示 -->
            <img id="previewImage" class="preview-image" src="" style="transform: scale(1); transition: transform 0.1s ease;">
+            <!-- 下一张按钮 -->
+            <button class="image-viewer-nav next-btn" onclick="nextPreviewImage()">›</button>
+            <!-- 关闭按钮 -->
            <button class="image-viewer-close" onclick="closeImagePreview()">×</button>
+            <!-- 图片计数器 -->
+            <div id="previewCounter" class="image-viewer-counter"></div>
        </div>
    </div>
    
@ -3218,7 +3272,7 @@
                <div class="supply-item" data-id="${supply.id}">
                    <div class="supply-images">
                        <div class="image-slider">
-                            <img src="${imageUrl || 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22100%22 height=%22100%22%3E%3Crect width=%22100%22 height=%22100%22 fill=%22%23f5f5f5%22/%3E%3Ctext x=%2250%22 y=%2250%22 font-family=%22Arial%22 font-size=%2212%22 fill=%22%23999%22 text-anchor=%22middle%22 dominant-baseline=%22middle%22%3E暂无图片%3C/text%3E%3C/svg%3E'}" alt="${supply.productName}" onclick="previewImage('${imageUrl || ''}')">
+                            <img src="${imageUrl || 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22100%22 height=%22100%22%3E%3Crect width=%22100%22 height=%22100%22 fill=%22%23f5f5f5%22/%3E%3Ctext x=%2250%22 y=%2250%22 font-family=%22Arial%22 font-size=%2212%22 fill=%22%23999%22 text-anchor=%22middle%22 dominant-baseline=%22middle%22%3E暂无图片%3C/text%3E%3C/svg%3E'}" alt="${supply.productName}" onclick="previewImage('${imageUrl || ''}', ${supply.imageUrls ? `[${supply.imageUrls.map(url => `'${url}'`).join(', ')}]` : '[]'})">
                        </div>
                    </div>
                    <div class="supply-info">
@ -3853,13 +3907,27 @@
        let initialDistance = null;
        let initialScale = 1;
        
-        // 预览图片
-        function previewImage(imageUrl) {
+        // 预览图片 - 支持多张图片切换
+        let currentPreviewImages = [];
+        let currentPreviewIndex = 0;
+        
+        function previewImage(imageUrl, images = []) {
            if (!imageUrl) return;
            
+            // 如果传入了图片数组，使用它；否则使用单张图片
+            if (images.length > 0) {
+                currentPreviewImages = images;
+                currentPreviewIndex = currentPreviewImages.indexOf(imageUrl);
+            } else {
+                currentPreviewImages = [imageUrl];
+                currentPreviewIndex = 0;
+            }
+            
            const previewModal = document.getElementById('imagePreview');
            const previewImage = document.getElementById('previewImage');
-            previewImage.src = imageUrl;
+            
+            // 更新图片显示
+            updatePreviewImage();
            
            // 重置缩放和拖动状态
            resetImageTransform();
@ -3870,6 +3938,37 @@
            setupImageViewerEvents();
        }
        
+        // 更新预览图片
+        function updatePreviewImage() {
+            const previewImage = document.getElementById('previewImage');
+            const previewCounter = document.getElementById('previewCounter');
+            
+            previewImage.src = currentPreviewImages[currentPreviewIndex];
+            
+            // 更新图片计数器
+            if (previewCounter) {
+                previewCounter.textContent = `${currentPreviewIndex + 1}/${currentPreviewImages.length}`;
+            }
+        }
+        
+        // 切换到上一张图片
+        function prevPreviewImage() {
+            if (currentPreviewImages.length <= 1) return;
+            
+            currentPreviewIndex = (currentPreviewIndex - 1 + currentPreviewImages.length) % currentPreviewImages.length;
+            updatePreviewImage();
+            resetImageTransform();
+        }
+        
+        // 切换到下一张图片
+        function nextPreviewImage() {
+            if (currentPreviewImages.length <= 1) return;
+            
+            currentPreviewIndex = (currentPreviewIndex + 1) % currentPreviewImages.length;
+            updatePreviewImage();
+            resetImageTransform();
+        }
+        
        // 关闭图片预览
        function closeImagePreview() {
            const previewModal = document.getElementById('imagePreview');