From c3507830e88fca7f8fdb2f3f19784929d82de0e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=B9=E6=99=AF=E7=AB=8B?= <zoujingli@qq.com>
Date: Tue, 2 Mar 2021 16:36:59 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/data/controller/Config.php    |  7 ++++++-
 app/data/view/config/cropper.html | 17 ++++++++++++-----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/app/data/controller/Config.php b/app/data/controller/Config.php
index 180ec61db..a57827b14 100644
--- a/app/data/controller/Config.php
+++ b/app/data/controller/Config.php
@@ -38,11 +38,15 @@ class Config extends Controller
      * 邀请二维码设置
      * @auth true
      * @menu true
+     * @throws \think\db\exception\DataNotFoundException
+     * @throws \think\db\exception\DbException
+     * @throws \think\db\exception\ModelNotFoundException
      */
     public function cropper()
     {
         $this->title = '邀请二维码设置';
-        $this->fetch();
+        $this->skey = 'cropper';
+        $this->__sysdata('cropper');
     }
 
     /**
@@ -131,6 +135,7 @@ class Config extends Controller
     {
         if ($this->request->isGet()) {
             $this->data = sysdata($this->skey);
+            dump($this->data);
             $this->fetch($template);
         }
         if ($this->request->isPost()) {
diff --git a/app/data/view/config/cropper.html b/app/data/view/config/cropper.html
index f6a57f3fd..9d8373e0a 100644
--- a/app/data/view/config/cropper.html
+++ b/app/data/view/config/cropper.html
@@ -2,14 +2,14 @@
 
 {block name="content"}
 <div class="think-box-shadow" id="ContentBox">
-    <div class="padding-30">
+    <div class="padding-left-20 padding-right-20 padding-top-10">
         <div class="text-left">
             <p>1. 上传邀请码的背景图片（ 支持 PNG 和 JPG 格式 ）</p>
             <p>2. 选择需要绘制二维码的区域，生成相对图片坐标参数</p>
             <p>3. 保存位置数据，下次可直接显示</p>
         </div>
         <div class="margin-top-20 inline-block" style="max-width:800px">
-            <img alt="img" id="target" style="width:800px;height:400px" src="https://d3o1694hluedf9.cloudfront.net/market-750.jpg">
+            <img alt="img" id="target" style="width:800px;height:400px" src="{$data.image|default='https://d3o1694hluedf9.cloudfront.net/market-750.jpg'}">
             <div class="margin-top-5">
                 <label class="margin-top-5 block"><input id="inputImage" readonly value='' class="layui-input layui-bg-gray"></label>
                 <label class="margin-top-5 block"><input id="inputData" readonly value='' class="layui-input layui-bg-gray"></label>
@@ -18,15 +18,19 @@
         <div class="margin-top-20">
             <a class="layui-btn layui-btn-primary margin-right-5" data-type="png,jpg" data-upload-image>上传图片</a>
             <span></span>
-            <a class="layui-btn layui-btn-primary margin-left-5" data-upload-update>保存设置</a>
+            <a class="layui-btn layui-btn-primary margin-left-5" data-upload-commit>保存设置</a>
         </div>
     </div>
+    <label class="layui-hide">
+        <textarea class="layui-textarea" id="DefaPostion">{$data.postion|default=''}</textarea>
+    </label>
 </div>
 
 <script>
-    // 默认数据，可以从数据库读取
-    var defaData = {"x": 401.54158425953585, "y": 167.1141879254591, "width": 25.413444821187255, "height": 25.413444821187255, "rotate": 0, "scaleX": 1, "scaleY": 1}
+    // 默认绘制位置数据
+    var defaData = JSON.parse($('#DefaPostion').val() || '{}');
 
+    // 加载插件并显示界面
     require(['cropper'], function (Cropper) {
         (function (image, cropper) {
             cropper = new Cropper(image, {
@@ -46,6 +50,9 @@
                 image.src = url;
                 cropper.replace(url, true).reset();
             });
+            $('[data-upload-commit]').on('click', function () {
+                $.form.load('{:url("")}', {image: image.src, postion: JSON.stringify(cropper.getData())}, 'post');
+            });
         })(document.getElementById('target'));
     });