tag manage ui ready

themes/tajian/controller/SiteController.php

@@ -146,10 +146,9 @@ Class SiteController extends Controller {
                     $sorted_tags[$id] = $item;
                 }
             }
-
         }
 
-        return $sorted_tags;
+        return array_merge($sorted_tags, $tags);
     }
 
     //根据tag的filenames获取它们的files数据，数据结构保持跟原file一致

themes/tajian/views/my/tags.php

@@ -8,13 +8,23 @@ if (!empty(FSC::$app['config']['multipleUserUriParse']) && !empty(FSC::$app['use
     <form class="g_form_style mt65" id="tags_form" action="" method="POST">
         <?php if (!empty($viewData['tags'])) {
 
+            $tagsTotal = 0;
+            foreach($viewData['tags'] as $id => $tag) {
+                $tagsTotal ++;
+            }
+
             $index = 0;
             foreach($viewData['tags'] as $id => $tag) {
+                $upIconCls = $index == 0 ? 'hide' : '';
+                $downIconCls = $index < $tagsTotal - 1 ? '' : 'hide';
+
                 $index ++;
                 echo <<<eof
         <div class="mb-3 tag-item">
             <button class="btn-danger" type="button">删除</button>
             <label class="form-label">分类 {$index}</label>
+            <img src="/img/arrow-up.svg" alt="向上移动" width="18" data-action="up" class="verMiddle ml20 {$upIconCls}">
+            <img src="/img/arrow-down.svg" alt="向下移动" width="18" data-action="down" class="verMiddle ml20 {$downIconCls}">
             <input name="tags[]" placeholder="请填写 2 - 5 个汉字" value="{$tag['name']}">
         </div>
 eof;

www/css/tajian.css

@@ -260,6 +260,7 @@ a:link{text-decoration:none;}
 .mg_menus li a:hover{background-color:lightblue;color:#FFF;font-weight:bold}
 .mg_menus li img{vertical-align:middle}
 .tag-item .btn-danger{float:right}
+.tag-item img{cursor:pointer}
 
 /* layout index */
 body.layout_index{background-color:#e5f1f3}

www/img/arrow-down.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-circle" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.5 4.5a.5.5 0 0 0-1 0v5.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293z"/>
+</svg>

www/img/arrow-up.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-circle" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z"/>
+</svg>

www/js/tajian.js

@@ -8,6 +8,7 @@ var taJian = {
     apis: {
         addVideos: '/frontapi/addfav',          //添加视频
         setNickname: '/frontapi/setnickname',   //设置昵称
+        saveTags: '/frontapi/savetags',         //保存分类
         sendSmsCode: '/frontapi/sendsmscode',   //发送短信验证码
         register: '/frontapi/createuser',       //注册
         login: '/frontapi/loginuser'            //登入
@@ -396,4 +397,82 @@ if ($('#nickname_form').get(0)) {
     });
 }
 
+// tag分类管理
+if ($('#tags_form').get(0)) {
+    $('#tags_form .tag-item img').click(function(e) {
+        var action = $(this).attr('data-action');
+        var current_el = $(this).parents('.tag-item'),
+            next_el = current_el.next('.tag-item'),
+            prev_el = current_el.prev('.tag-item');
+
+        var current_tag = current_el.find('input').val(), another_tag;
+        if (action == 'up' && prev_el.length > 0) {
+            another_tag = prev_el.find('input').val();
+            prev_el.find('input').val(current_tag);
+        }else if (action == 'down' && next_el.length > 0) {
+            another_tag = next_el.find('input').val();
+            next_el.find('input').val(current_tag);
+        }
+
+        current_el.find('input').val(another_tag);
+    });
+
+    $('#tags_form .tag-item button.btn-danger').click(function(e) {
+        var current_el = $(this).parents('.tag-item'),
+            current_tag = current_el.find('input').val();
+
+        if ($('#tags_form input').length == 1) {
+            alert('请至少保留一个分类！');
+            return false;
+        }
+
+        if (confirm('确定删除分类“' + current_tag + '”吗？')) {
+            current_el.remove();
+        }
+    });
+
+    $('#tags_form .jsbtn').click(function(e) {
+        e.preventDefault();
+
+        var tag_els = $('#tags_form input'),
+            tags = [];
+
+        if (tag_els.length == 0) {
+            alert('请至少保留一个分类！');
+            return false;
+        }
+
+        for (var index=0;index<tag_els.length;index++) {
+            tags.push(tag_els[index].value);
+        }
+
+        var bt = $(this), btLoading = bt.children('.bt_class_JS'), btText = bt.children('.bt_text_JS');
+        btLoading.removeClass('elementNone');
+        bt.prop('disabled', true);
+        btText.text('提交中...');
+
+        var datas = {
+            'tags': tags
+        };
+        console.log(datas);
+        /*
+        publicAjax(taJian.apis.saveTags, 'POST', datas, function (data) {
+            btLoading.addClass('elementNone');
+            bt.prop('disabled', false);
+            btText.text('保存');
+            if (data.code == 1) {
+                alert(data.msg);
+            } else {
+                alert(data.err);
+            }
+        }, function (jqXHR, textStatus, errorThrown) {
+            bt.prop('disabled', false);
+            btText.text('保存');
+            btLoading.addClass('elementNone');
+            alert('网络请求失败，请重试。');
+        });
+        */
+    });
+}
+
 })();