add function to set dir snapshot

themes/beauty/controller/SiteController.php

@@ -217,10 +217,10 @@ Class SiteController extends Controller {
                         $img_id = $imgFile['id'];
 
                         //小尺寸图片支持
-                        $cacheKey = $this->getCacheKey($imgFile['id'], 'imgsm');
+                        $cacheKey_smimg = $this->getCacheKey($imgFile['id'], 'imgsm');
                         $expireSeconds = FSC::$app['config']['screenshot_expire_seconds'];  //有效期3650天
                         $cacheSubDir = 'image';
-                        $cachedData = Common::getCacheFromFile($cacheKey, $expireSeconds, $cacheSubDir);
+                        $cachedData = Common::getCacheFromFile($cacheKey_smimg, $expireSeconds, $cacheSubDir);
                         if (!empty($cachedData)) {
                             $url = $cachedData;
                             $img_id = '';   //无需再次生成小尺寸图片
@@ -241,6 +241,29 @@ Class SiteController extends Controller {
         return $this->renderJson(compact('code', 'msg', 'url', 'img_id'));
     }
 
+    //保存目录封面图到缓存
+    public function actionSavedirsnap() {
+        $code = 0;
+        $msg = 'OK';
+
+        $cateId = $this->post('id', '');    //目录id
+        $url = $this->post('url', '');      //base64格式的图片数据或者图片网址
+        if (empty($cateId) || empty($url)) {
+            $code = 0;
+            $msg = '参数不能为空';
+        }else {
+            $cacheKey = $this->getCacheKey($cateId, 'dirsnap');
+            $img_id = '';   //为保持数据格式一致，图片id传空
+            $saved = Common::saveCacheToFile($cacheKey, compact('url', 'img_id'));
+
+            if ($saved !== false) {
+                $code = 1;
+            }
+        }
+
+        return $this->renderJson(compact('code', 'msg'));
+    }
+
     //优先从缓存获取小尺寸的图片
     public function actionSmallimg() {
         $imgId = $this->get('id', '');

themes/beauty/views/site/index.php

@@ -65,6 +65,7 @@ eof;
 
 <?php
 $category = !empty($viewData['scanResults'][$selectedId]) ? $viewData['scanResults'][$selectedId] : [];
+$btnSetSnap = '<button class="btn btn-xs btn-info btn-set-snap">选作封面</button>';
 
 //如果是首页
 if (empty($selectedId) && !empty($viewData['menus'])) {
@@ -72,6 +73,7 @@ if (empty($selectedId) && !empty($viewData['menus'])) {
         'directories' => $viewData['menus'],
         'files' => $viewData['scanResults'],
     );
+    $btnSetSnap = '';
 }
 
 if (!empty($category['files'])) {
@@ -220,6 +222,7 @@ eof;
         if (!empty($category['files'])) {        //一级目录支持
             $pageStartIndex = ($viewData['page']-1) * $viewData['pageSize'];
             $index = 0;
+
             foreach ($category['files'] as $file) {
                 if (empty($file['extension']) || !in_array($file['extension'], $supportedExts)) {
                     continue;
@@ -245,7 +248,11 @@ eof;
                     $smallUrl = "/site/smallimg/?id={$file['id']}&url={$imgUrl}";
                     echo <<<eof
 <div class="im_item bor_radius col-xs-6 col-sm-4 col-md-3 col-lg-2">
-    <a href="javascript:;" class="bor_radius" data-fancybox="gallery" data-src="{$file['path']}" data-caption="{$title} - {$file['filename']}" title="{$title} - {$file['filename']}">
+    <a href="javascript:;" class="bor_radius" data-fancybox="gallery"
+        data-src="{$file['path']}"
+        data-caption="{$title} - {$file['filename']}"
+        data-pid="{$file['pid']}"
+        title="{$title} - {$file['filename']}">
         <img src="/img/beauty/lazy.svg"
             data-id="{$file['id']}"
             data-original="{$smallUrl}"
@@ -255,6 +262,7 @@ eof;
                 {$title}
             </span>
         </div>
+        {$btnSetSnap}
     </a>
 </div>
 eof;

www/css/beauty.css

@@ -82,6 +82,8 @@ a:link{text-decoration:none}
 .im_img_title img{vertical-align:bottom}
 .im_item:hover .im_img{transform:scale(1.03)}
 .im_item:hover .im_img_title,.im_item:hover .im_img_title .right-bottom{color:#FFF}
+.im_item .btn-set-snap{display:none;position:absolute;top:5px;right:5px;opacity:0.8}
+.im_item:hover .btn-set-snap{display:inline-block}
 
 .web_info{padding:10px 0 42px 0;margin-top:75px;border-top:solid 1px #f5f5f5}
 .web_info p{color:#808080;font-size:13px;margin:5px 0}

www/js/beauty.js

@@ -20,14 +20,6 @@ if ($('#image_site').get(0)) {
         }
     })
 
-    // 图片懒加载
-    /*
-    $("img.lazy").lazyload({
-        effect: "fadeIn",
-        event: "scroll"
-    });
-    */
-
     //需要浏览器支持naturalWidth
     var saveSmallImg = function(imgEl) {
         var width = imgEl.width,
@@ -47,6 +39,8 @@ if ($('#image_site').get(0)) {
 
         var smallImg = canvas.toDataURL('image/jpeg');
         if (smallImg && /^data:image\/.+;base64,/i.test(smallImg)) {
+            imgEl.src = smallImg;
+
             var params = {
                     id: $(imgEl).attr('data-id'),
                     data: smallImg
@@ -78,6 +72,39 @@ if ($('#image_site').get(0)) {
         }
     });
 
+
+    //设置目录封面图
+    $('.btn-set-snap').click(function(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        var btn = $(evt.target),
+            cateId = $(btn).parents('a').attr('data-pid'),
+            imgUrl = $(btn).parents('a').find('img.im_img').attr('src');
+        if (cateId && imgUrl) {
+            var params = {
+                    id: cateId,
+                    url: imgUrl
+                };
+
+            $(btn).prop('disabled', true);
+            $.ajax({
+                url: '/site/savedirsnap',
+                method: 'POST',
+                dataType: 'json',
+                data: params
+            }).done(function(data) {
+                $(btn).prop('disabled', false);
+                if (data.code != 1) {
+                    console.warn('目录封面图保存失败', data.msg);
+                }
+            }).fail(function(jqXHR, textStatus, errorThrown) {
+                $(btn).prop('disabled', false);
+                console.error('目录封面图保存失败，错误信息：' + errorThrown);
+            });
+        }
+    });
+
+
     // 返回顶部
     var scrolltop = $('#image_site .scroll_topJS');