优化自动跳转功能

public/static/css/index.articles.css

@@ -130,6 +130,13 @@
   text-overflow: ellipsis;
 }
 
+.post-item .info .desc {
+  margin: 0 0 8px;
+  font-size: 13px;
+  line-height: 24px;
+  color: #999;
+}
+
 .post-item .info .plus-info {
   margin-top: 5px;
 }
@@ -153,6 +160,18 @@
   color: #777;
 }
 
+.content-container .desc {
+  margin: 0 0 8px;
+  font-size: 13px;
+  line-height: 24px;
+  color: #999;
+  margin-top: 15px;
+}
+
+.content-container .jump-container {
+  margin-top: 15px;
+}
+
 @media screen and (max-width: 768px) {
   .nav-left-list {
     text-align: left;
@@ -172,7 +191,6 @@
     font-weight: 500;
     font-size: 14px;
   }
-
   .content-container .title {
     font-size: 18px;
     line-height: 28px;

view/admin/post/create.html

@@ -197,7 +197,13 @@
                         <input type="text" name="jump_to_url" class="layui-input">
                       </div>
                     </div>
-
+                    <div class="layui-form-item">
+                      <div class="layui-form-label">跳转按钮名称</div>
+                      <div class="layui-input-block">
+                        <input type="text" name="jump_to_btn_title" value="立即跳转"
+                          class="layui-input">
+                      </div>
+                    </div>
                     <div class="layui-form-item">
                       <div class="layui-form-label">跳转链接状态</div>
                       <div class="layui-input-block">

view/admin/post/edit.html

@@ -200,6 +200,13 @@
                           class="layui-input">
                       </div>
                     </div>
+                    <div class="layui-form-item">
+                      <div class="layui-form-label">跳转按钮名称</div>
+                      <div class="layui-input-block">
+                        <input type="text" name="jump_to_btn_title" value="{$post->getData('jump_to_btn_title')}"
+                          class="layui-input">
+                      </div>
+                    </div>
 
                     <div class="layui-form-item">
                       <div class="layui-form-label">跳转链接状态</div>

view/index/common/_require.html

@@ -14,6 +14,8 @@
 
 <script>
 
+  window.layuiInitSuccess = [];
+
   //JavaScript代码区域
   layui.use(['element', 'layer', 'util'], function () {
     var element = layui.element;
@@ -27,6 +29,12 @@
       }
     });
 
+    window.layuiInitSuccess.forEach(item => {
+      if(typeof item == "function"){
+        item(layui)
+      }
+    });
+
   });
 </script>
 {:get_system_config('site_tongji')}

view/index/index/index.html

@@ -27,7 +27,7 @@
                   <img src="{$nav.img}">
                   <div class="panel">
                     <p class="title">{$nav.title}</p>
-                    <p>{$nav.desc}</p>
+                    <p class="desc">{$nav.desc}</p>
                   </div>
                 </a>
                 {/volist}
@@ -65,6 +65,8 @@
 
                 <div class="info">
                   <div class="title">{$post.title}</div>
+                  <div class="desc">{$post.desc_html}</div>
+
                   <div class="plus-info">
                     <span>{$post.hits}访问</span>
                     <span>{$post.comment_count}评论</span>

view/index/post/read.html

@@ -29,6 +29,49 @@
             <div class="info">
               <span>{$post->publish_time_text}</span>
             </div>
+            <div class="desc">
+              {$post.desc_html}
+            </div>
+            {if !empty($post.desc) && $post.jump_to_url_status != 0}
+            <div class="jump-container">
+              <a href="{$post.jump_to_url}" class="layui-btn jump-btn" target="_blank">{$post.jump_to_btn_title|default='立即跳转'}</a>
+            </div>
+            {if $post.jump_to_url_status == 2 }
+            <script>
+              window.layuiInitSuccess.push(function () {
+                var isJumped = false;
+                var countDownNum = 5;
+                var closeJump = false;
+                var jumpUrl = '{$post.jump_to_url}'
+                window.layerJump = layer.confirm('即将自动打开新页面(倒计时<span class="jump-count-dowm">5</span>秒)', {
+                  btn: ['立即跳转', '取消'],
+                  offset:['20%']
+                }
+                  , function (index, layero) {
+                    //按钮【按钮一】的回调
+                    window.open(jumpUrl)
+                    isJumped = true
+                    layer.close(index)
+                  }, function (index) {
+                    //按钮【按钮二】的回调
+                    closeJump = true
+                  })
+
+                window.timerJump = setInterval(() => {
+                  countDownNum--
+                  $('.jump-count-dowm').text(countDownNum)
+                  if (countDownNum <= 0) {
+                    clearInterval(window.timerJump)
+                    layer.close(window.layerJump)
+                    if (!closeJump && !isJumped) {
+                      window.open(jumpUrl)
+                    }
+                  }
+                }, 1000);
+              })
+            </script>
+            {/if}
+            {/if}
             <div class="ql-snow">
               <div class="ql-editor">{$post->content_html|raw}</div>
             </div>