fix: 颜色选择

app/admin/view/config/publish.html

@@ -87,6 +87,14 @@
                 </div>
             </div>
 
+            <div class="layui-form-item">
+                <label class="layui-form-label" style="width: 90px">启用颜色配置</label>
+                <div class="layui-input-inline">
+                    <input type="radio" name="color_open" value="0" title="关闭" {if condition="(isset($cate) && $cate.color_open eq '0') || !isset($cate)"}checked{/if}>
+                    <input type="radio" name="color_open" value="1" title="启用" {if condition="isset($cate) && $cate.color_open eq '1'"}checked{/if}>
+                </div>
+            </div>
+
             <div class="layui-form-item">
                 <label class="layui-form-label" style="width: 90px">图片label</label>
                 <div class="layui-input-inline">
@@ -96,6 +104,15 @@
                 <div class="layui-form-mid layui-word-aux">默认为“配图”</div>
             </div>
 
+            <div class="layui-form-item">
+                <label class="layui-form-label" style="width: 90px">颜色label</label>
+                <div class="layui-input-inline">
+                    <input name="color_label" lay-verify="" placeholder="自定义label文字,请输入" autocomplete="off" class="layui-input"
+                           type="text" {if condition="isset($cate) && $cate->getData('color_label')" }value="{$cate.color_label}" {/if}>
+                </div>
+                <div class="layui-form-mid layui-word-aux">默认为“配色”</div>
+            </div>
+
             <div class="layui-form-item">
                 <label class="layui-form-label" style="width: 90px">配置名label</label>
                 <div class="layui-input-inline">

app/admin/view/config_option/index.html

@@ -96,6 +96,14 @@
                     }
                     },
                     //{/if}
+                    //{if condition="$config->color_open"}
+
+                    {
+                        field: 'color', title: '{$config.color_label}', minWidth: 80, align: 'center', templet: function (row) {
+                        return '<div style="color:' + row.color + '">' + row.color + '</div>';
+                    }
+                    },
+                    //{/if}
 
                     {
                         field: 'status', title: '状态', align: 'center', width: 100, templet: function (row) {

app/admin/view/config_option/publish.html

@@ -60,8 +60,8 @@
         </div>
       </div>
 
-      {if condition="$config->image_open"}
       <div class="layui-col-md5">
+      {if condition="$config->image_open"}
         <div class="layui-upload">
           <label class="layui-form-label">{$config.image_label}</label>
           <div class="layui-upload-list">
@@ -69,9 +69,21 @@
             <input type="hidden" id="upload_value" name="image" value='{notempty name="$link.image"}{$link.image}{/notempty}'>
           </div>
         </div>
-      </div>
       {/if}
 
+      {if condition="$config->color_open"}
+        <div class="layui-form-item">
+          <label class="layui-form-label">{$config.color_label}</label>
+          <div class="layui-input-inline" style="width: 120px;">
+            <input type="text" name="color" placeholder="请选择颜色" class="layui-input" id="colorpicker-form-input" {notempty name="$link.color"}value="{$link.color}"{/notempty}>
+          </div>
+          <div class="layui-inline" style="left: -11px;">
+            <div id="colorpicker"></div>
+          </div>
+        </div>
+      {/if}
+      </div>
+
 
       <input type="hidden" name="pid" value="{$Request.param.pid}">
 
@@ -108,10 +120,12 @@
         })
     </script>
     <script>
-      layui.use(['layer', 'form'], function() {
+      layui.use(['layer', 'form','colorpicker'], function() {
           var layer = layui.layer,
               $ = layui.jquery,
               form = layui.form;
+          var colorpicker = layui.colorpicker;
+
               $(window).on('load', function() {
                   form.on('submit(admin)', function(data) {
                       $.ajax({
@@ -131,6 +145,17 @@
                       })
                       return false;
                   });
+
+                  //颜色选择器
+                  colorpicker.render({
+                      elem: '#colorpicker',  //绑定元素
+                      predefine: true,//预定义颜色是否开启
+                      colors: ['#FF5722','#FFB800','#009688','#393D49','#5FB878','#31BDEC'], //预定义颜色
+                      color:"{notempty name='$link.color'}{$link.color}{/notempty}",
+                      done: function(color){
+                        $('#colorpicker-form-input').val(color);
+                      }
+                  });
               });
       });
     </script>

app/api/controller/接口文档.md

@@ -3,7 +3,7 @@
 
 接口地址: /api/index/siteinfo
 
-更新时间: 2023-05-01
+更新时间: 2023-05-03
 
 请求方式：get / post
 
@@ -51,7 +51,8 @@
                 "image":"https:\/\/iph.href.lu\/400x200\/?text=%E8%BD%AE%E6%92%AD%E5%9B%BE%E7%89%872&fg=666666&bg=cccccc", //封面图地址
                 "status": 1,
                 "single_status": 0,
-                "sort": 0
+                "sort": 0,
+                "color":"#31bdec"
             },
             {
                 "id": 5,
@@ -62,7 +63,8 @@
                 "image": 7,
                 "status": 1,
                 "single_status": 0,
-                "sort": 0
+                "sort": 0,
+                "color":""
             }
         ],
         "contact_us": "0595-88052395",  //联系电话

app/common/model/Config.php

@@ -64,12 +64,24 @@ class Config extends Model
         return $value == 1 ? true : false;
     }
 
+    //color_open
+    public function getColorOpenAttr($value, $data)
+    {
+        return $value == 1 ? true : false;
+    }
+
     //image_label
     public function getImageLabelAttr($value, $data)
     {
         return $value ?: '配图';
     }
 
+    //color_label
+    public function getColorLabelAttr($value, $data)
+    {
+        return $value ?: "配色";
+    }
+
     //name_label
     public function getNameLabelAttr($value, $data)
     {

app/install/data/db.sql

@@ -928,3 +928,10 @@ ALTER TABLE `tplay_appointment`
 
 ALTER TABLE `tplay_appointment`
 	CHANGE COLUMN `weeks` `weeks` VARCHAR(50) NOT NULL DEFAULT '' COMMENT '排号工作日' AFTER `end_time`;
+
+-- 2023-05-03
+ALTER TABLE `tplay_config_option`
+	ADD COLUMN `color` VARCHAR(50) NOT NULL DEFAULT '' COMMENT '颜色' AFTER `image`;
+ALTER TABLE `tplay_config`
+	ADD COLUMN `color_open` TINYINT(4) NOT NULL DEFAULT '0' COMMENT '1启用颜色配置' AFTER `image_open`,
+	ADD COLUMN `color_label` VARCHAR(50) NOT NULL DEFAULT '' AFTER `image_label`;