.

root/res/mods/case.js

@@ -0,0 +1,165 @@
+/**
+
+ @Name: 案例
+
+ */
+ 
+layui.define(['laypage', 'fly'], function(exports){
+
+  var $ = layui.jquery;
+  var layer = layui.layer;
+  var util = layui.util;
+  var laytpl = layui.laytpl;
+  var form = layui.form;
+  var laypage = layui.laypage;
+  var upload = layui.upload;
+  var fly = layui.fly;
+  var device = layui.device();
+  
+
+  //求解管理
+  var active = {
+    //提交案例
+    push: function(div){
+      layer.open({
+        type: 1
+        ,id: 'LAY_pushcase'
+        ,title: '提交案例'
+        ,area: (device.ios || device.android) ? ($(window).width() + 'px') : '660px'
+        ,content: ['<ul class="layui-form" style="margin: 20px;">'
+          ,'<li class="layui-form-item">'
+            ,'<label class="layui-form-label">案例名称</label>'
+            ,'<div class="layui-input-block">'
+              ,'<input required name="title" lay-verify="required" placeholder="一般为网站名称" value="" class="layui-input">'
+            ,'</div>'
+          ,'</li>'
+          ,'<li class="layui-form-item">'
+            ,'<label class="layui-form-label">案例网址</label>'
+            ,'<div class="layui-input-block">'
+              ,'<input required name="link" lay-verify="url" placeholder="必须是自己或自己参与过的项目" value="" class="layui-input">'
+            ,'</div>'
+          ,'</li>'
+          ,'<li class="layui-form-item layui-form-text">'
+            ,'<label class="layui-form-label">案例描述</label>'
+            ,'<div class="layui-input-block layui-form-text">'
+              ,'<textarea required name="desc" lay-verify="required" autocomplete="off" placeholder="大致介绍你的项目，也可以阐述你在该项目中使用 layui 的感受\n10-60个字" class="layui-textarea"></textarea>'
+            ,'</div>'
+          ,'</li>'
+          ,'<li class="layui-form-item">'
+            ,'<label class="layui-form-label">案例封面</label>'
+            ,'<div class="layui-input-inline" style="width:auto;">'
+              ,'<input type="hidden" name="cover" lay-verify="required" class="layui-input fly-case-image">'
+              ,'<button type="button" class="layui-btn layui-btn-primary" id="caseUpload">'
+                ,'<i class="layui-icon">&#xe67c;</i>上传图片'
+              ,'</button>'
+            ,'</div>'
+            ,'<div class="layui-form-mid layui-word-aux" id="preview">推荐尺寸：478*300，大小不能超过 30kb</div>'
+          ,'</li>'
+          ,'<li class="layui-form-item">'
+            ,'<label class="layui-form-label"> </label>'
+            ,'<div class="layui-input-block">'
+              ,'<input type="checkbox" name="agree" id="agree" title="我同意（如果你进行了刷赞行为，你的案例将被立马剔除）" lay-skin="primary">'
+            ,'</div>'
+          ,'</li>'
+          ,'<li class="layui-form-item">'
+            ,'<div class="layui-input-block">'
+              ,'<button type="button" lay-submit lay-filter="pushCase" class="layui-btn">提交案例</button>'
+           ,'</div>'
+          ,'</li>'
+        ,'</ul>'].join('')
+        ,success: function(layero, index){
+          var image = layero.find('.fly-case-image')
+          ,preview = $('#preview');
+ 
+          upload.render({
+            url: '/api/upload/case/'
+            ,elem: '#caseUpload'
+            ,size: 30
+            ,done: function(res){
+              if(res.status == 0){
+                image.val(res.url);
+                preview.html('<a href="'+ res.url +'" target="_blank" style="color: #5FB878;">封面已上传，点击可预览</a>');
+              } else {
+                layer.msg(res.msg, {icon: 5});
+              }
+            }
+          });
+
+          form.render('checkbox').on('submit(pushCase)', function(data){
+            if(!data.field.agree){
+              return layer.tips('你需要同意才能提交', $('#agree').next(), {tips: 1});
+            }
+
+            fly.json('/case/push/', data.field, function(res){
+              layer.close(index);
+              layer.alert(res.msg, {
+                icon: 1
+              })
+            });
+          });
+        }
+      });
+    }
+    
+    //点赞
+    ,praise: function(othis){
+      var li = othis.parents('li')
+      ,PRIMARY = 'layui-btn-primary'
+      ,unpraise = !othis.hasClass(PRIMARY)
+      ,numElem = li.find('.fly-case-nums')
+
+      fly.json('/case/praise/', {
+        id: li.data('id')
+        ,unpraise: unpraise ? true : null
+      }, function(res){
+        numElem.html(res.praise);
+        if(unpraise){
+          othis.addClass(PRIMARY).html('点赞');
+          layer.tips('少了个赞囖', numElem, {
+            tips: 1
+          });
+        } else {
+          othis.removeClass(PRIMARY).html('已赞');
+          layer.tips('成功获得个赞', numElem, {
+            tips: [1, '#FF5722']
+          });
+        }
+      });
+    }
+
+    //查看点赞用户
+    ,showPraise: function(othis){
+      var li = othis.parents('li');
+      if(othis.html() == 0) return layer.tips('该项目还没有收到赞', othis, {
+        tips: 1
+      });
+      fly.json('/case/praise_user/', {
+        id: li.data('id')
+      }, function(res){
+        var html = '';
+        layer.open({
+          type: 1
+          ,title: '项目【'+ res.title + '】获得的赞'
+          ,id: 'LAY_showPraise'
+          ,shade: 0.8
+          ,shadeClose: true
+          ,area: '305px'
+          ,skin: 'layer-ext-case'
+          ,content: function(){
+            layui.each(res.data, function(_, item){
+              html += '<li><a href="/u/'+ 168*item.id +'/" target="_blank" title="'+ item.username +'"><img src="'+ item.avatar +'"></a></li>'
+            });
+            return '<ul class="layer-ext-ul">' + html + '</ul>';
+          }()
+        })
+      });
+    }
+  };
+
+  $('body').on('click', '.fly-case-active', function(){
+    var othis = $(this), type = othis.data('type');
+    active[type] && active[type].call(this, othis);
+  });
+
+  exports('case', {});
+});