修改代码

This commit is contained in:
邹景立 2021-03-02 16:36:59 +08:00
parent aa75728f85
commit c3507830e8
2 changed files with 18 additions and 6 deletions

View File

@ -38,11 +38,15 @@ class Config extends Controller
* 邀请二维码设置 * 邀请二维码设置
* @auth true * @auth true
* @menu true * @menu true
* @throws \think\db\exception\DataNotFoundException
* @throws \think\db\exception\DbException
* @throws \think\db\exception\ModelNotFoundException
*/ */
public function cropper() public function cropper()
{ {
$this->title = '邀请二维码设置'; $this->title = '邀请二维码设置';
$this->fetch(); $this->skey = 'cropper';
$this->__sysdata('cropper');
} }
/** /**
@ -131,6 +135,7 @@ class Config extends Controller
{ {
if ($this->request->isGet()) { if ($this->request->isGet()) {
$this->data = sysdata($this->skey); $this->data = sysdata($this->skey);
dump($this->data);
$this->fetch($template); $this->fetch($template);
} }
if ($this->request->isPost()) { if ($this->request->isPost()) {

View File

@ -2,14 +2,14 @@
{block name="content"} {block name="content"}
<div class="think-box-shadow" id="ContentBox"> <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"> <div class="text-left">
<p>1. 上传邀请码的背景图片( 支持 PNG JPG 格式 </p> <p>1. 上传邀请码的背景图片( 支持 PNG JPG 格式 </p>
<p>2. 选择需要绘制二维码的区域,生成相对图片坐标参数</p> <p>2. 选择需要绘制二维码的区域,生成相对图片坐标参数</p>
<p>3. 保存位置数据,下次可直接显示</p> <p>3. 保存位置数据,下次可直接显示</p>
</div> </div>
<div class="margin-top-20 inline-block" style="max-width:800px"> <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"> <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="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> <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"> <div class="margin-top-20">
<a class="layui-btn layui-btn-primary margin-right-5" data-type="png,jpg" data-upload-image>上传图片</a> <a class="layui-btn layui-btn-primary margin-right-5" data-type="png,jpg" data-upload-image>上传图片</a>
<span></span> <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>
</div> </div>
<label class="layui-hide">
<textarea class="layui-textarea" id="DefaPostion">{$data.postion|default=''}</textarea>
</label>
</div> </div>
<script> <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) { require(['cropper'], function (Cropper) {
(function (image, cropper) { (function (image, cropper) {
cropper = new Cropper(image, { cropper = new Cropper(image, {
@ -46,6 +50,9 @@
image.src = url; image.src = url;
cropper.replace(url, true).reset(); 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')); })(document.getElementById('target'));
}); });