|
|
@@ -1,415 +0,0 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html lang="zh" xmlns:th="http://www.thymeleaf.org">
|
|
|
-<head>
|
|
|
- <th:block th:include="include :: header('修改磁贴')"/>
|
|
|
- <th:block th:include="include :: cropbox-css"/>
|
|
|
- <style>
|
|
|
- .bg-sm {
|
|
|
- width: 119px;
|
|
|
- height: 109px;
|
|
|
- font-size: 75px;
|
|
|
- color: black;
|
|
|
- text-align: center
|
|
|
- }
|
|
|
- .bg-md {
|
|
|
- width: 180px;
|
|
|
- height: 150px;
|
|
|
- font-size: 105px;
|
|
|
- color: black;
|
|
|
- text-align: center
|
|
|
- }
|
|
|
- .bg-lg {
|
|
|
- width: 365px;
|
|
|
- height: 160px;
|
|
|
- font-size: 115px;
|
|
|
- color: black;
|
|
|
- text-align: center
|
|
|
- }
|
|
|
- .thumbBox_S {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- width: 238px;
|
|
|
- height: 218px;
|
|
|
- margin-left: -119px;
|
|
|
- margin-top: -109px;
|
|
|
- box-sizing: border-box;
|
|
|
- border: 1px solid rgb(102, 102, 102);
|
|
|
- box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
|
|
|
- background: none repeat scroll 0% 0% transparent;
|
|
|
- }
|
|
|
- .thumbBox_M {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- width: 360px;
|
|
|
- height: 300px;
|
|
|
- margin-left: -180px;
|
|
|
- margin-top: -150px;
|
|
|
- box-sizing: border-box;
|
|
|
- border: 1px solid rgb(102, 102, 102);
|
|
|
- box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
|
|
|
- background: none repeat scroll 0% 0% transparent;
|
|
|
- }
|
|
|
- .thumbBox_L {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- width: 730px;
|
|
|
- height: 320px;
|
|
|
- margin-left: -365px;
|
|
|
- margin-top: -160px;
|
|
|
- box-sizing: border-box;
|
|
|
- border: 1px solid rgb(102, 102, 102);
|
|
|
- box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
|
|
|
- background: none repeat scroll 0% 0% transparent;
|
|
|
- }
|
|
|
- .imageBox_S {
|
|
|
- margin: 0 auto;
|
|
|
- width: 400px;
|
|
|
- }
|
|
|
- .imageBox_M {
|
|
|
- margin: 0 auto;
|
|
|
- width: 400px;
|
|
|
- }
|
|
|
- .imageBox_L {
|
|
|
- margin: 0 auto;
|
|
|
- width: 800px;
|
|
|
- }
|
|
|
- </style>
|
|
|
-</head>
|
|
|
-<body class="white-bg">
|
|
|
-<div class="wrapper wrapper-content animated fadeInRight ibox-content" id="div1">
|
|
|
- <form class="form-horizontal m" id="form-magnet-edit" th:object="${wxMagnet}">
|
|
|
- <input type="hidden" name="magnetId" th:field="*{magnetId}">
|
|
|
-
|
|
|
- <div class="form-group">
|
|
|
- <label class="col-sm-3 control-label"><span style="color: red; ">*</span>磁贴类型：</label>
|
|
|
- <div class="col-sm-8">
|
|
|
- <select name="magnetType" id="sel_magnetType" class="form-control m-b"
|
|
|
- th:with="type=${@dict.getType('sys_magnet_type')}"
|
|
|
- onchange="javascript:magnetTypeChange()">
|
|
|
- <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
|
|
|
- th:field="*{magnetType}"></option>
|
|
|
- </select>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="form-group">
|
|
|
- <label class="col-sm-3 control-label"><span style="color: red; ">*</span>磁贴名称：</label>
|
|
|
- <div class="col-sm-8">
|
|
|
- <input class="form-control" type="text" name="magnetName" id="magnetName" th:field="*{magnetName}"
|
|
|
- required>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="form-group">
|
|
|
- <label class="col-sm-3 control-label"><span style="color: red; ">*</span>显示排序：</label>
|
|
|
- <div class="col-sm-8">
|
|
|
- <input class="form-control" type="text" name="orderNum" th:field="*{orderNum}" required>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="form-group">
|
|
|
- <label class="col-sm-3 control-label"><span style="color: red; ">*</span>磁贴尺寸：</label>
|
|
|
- <div class="col-sm-8">
|
|
|
- <select name="magnetSize" id="sel_magnetSize" class="form-control m-b"
|
|
|
- th:with="type=${@dict.getType('wx_magnet_size')}" onchange="javascript:sizeChange()">
|
|
|
- <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
|
|
|
- th:field="*{magnetSize}"></option>
|
|
|
- </select>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="form-group" style="display: none;">
|
|
|
- <label class="col-sm-3 control-label"><span style="color: red; ">*</span>请求地址：</label>
|
|
|
- <div class="col-sm-8">
|
|
|
- <input id="url" name="url" class="form-control" type="text" th:field="*{url}" required>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="form-group">
|
|
|
- <label class="col-sm-3 control-label">背景图片：</label>
|
|
|
- <div class="col-sm-8">
|
|
|
- <input id="input_bgUrl" name="bgUrl" th:field="*{bgUrl}" type="hidden"/>
|
|
|
- <div class="thumbnail slideshow_span" id="div-bgUrl" onclick="javascript:bgUpload('bg')">
|
|
|
- <img th:src="@{*{bgUrl}}" style="width:100%;height:100%;">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="form-group" style="display: none;">
|
|
|
- <label class="col-sm-3 control-label">小程序二维码：</label>
|
|
|
- <div class="col-sm-8">
|
|
|
- <input id="input_appletQrUrl" name="appletQrUrl" th:field="*{appletQrUrl}" type="hidden"/>
|
|
|
- <div class="thumbnail slideshow_span bg-sm" id="div-appletQrUrl" onclick="javascript:bgUpload('qr')">
|
|
|
- <img th:src="@{*{appletQrUrl}}" style="width:100%;height:100%;">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="form-group">
|
|
|
- <label class="col-sm-3 control-label">菜单状态：</label>
|
|
|
- <div class="col-sm-8">
|
|
|
- <div class="radio-box" th:each="dict : ${@dict.getType('sys_show_hide')}">
|
|
|
- <input type="radio" th:id="${dict.dictCode}" name="visible" th:value="${dict.dictValue}"
|
|
|
- th:field="*{visible}">
|
|
|
- <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="form-group">
|
|
|
- <label class="col-sm-3 control-label">磁贴标记父结构：</label>
|
|
|
- <div class="col-sm-8">
|
|
|
- <input class="form-control" type="text" name="fatherMagnet" id="fatherMagnet" th:field="*{fatherMagnet}"
|
|
|
- >
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="form-group">
|
|
|
- <label class="col-sm-3 control-label">备注：</label>
|
|
|
- <div class="col-sm-8">
|
|
|
- <textarea id="remark" name="remark" class="form-control" type="text" th:field="*{remark}"></textarea>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </form>
|
|
|
-</div>
|
|
|
-
|
|
|
-<div class="wrapper wrapper-content animated fadeInRight ibox-content" id="div2" style="display: none">
|
|
|
- <div id="imageBox">
|
|
|
- <div id="thumbBox"></div>
|
|
|
- <div class="spinner" style="display: none">Loading...</div>
|
|
|
- </div>
|
|
|
- <div class="action" style="margin: 10px auto;">
|
|
|
- <div class="new-contentarea tc">
|
|
|
- <a href="javascript:void(0)" class="upload-img"> <label for="avatar">选择图片</label> </a>
|
|
|
- <input type="file" class="" name="avatar" id="avatar" accept="image/*"/>
|
|
|
- </div>
|
|
|
- <input type="button" id="submitbuttonBg" onclick="upBg()" class="btn-info Btnsty_peyton" value="上传"/>
|
|
|
- <input type="button" id="submitbuttonQr" onclick="upQr()" class="btn-info Btnsty_peyton" value="上传"/>
|
|
|
- <input type="button" onclick="back()" class="btn-info Btnsty_peyton " value="返回"/>
|
|
|
- </div>
|
|
|
-
|
|
|
-</div>
|
|
|
-<th:block th:include="include :: footer"/>
|
|
|
-<th:block th:include="include :: cropbox-js"/>
|
|
|
-<script th:inline="javascript">
|
|
|
- var prefix = ctx + "wxportal/magnet";
|
|
|
- var cropper;
|
|
|
- var size = "S";
|
|
|
- var magnet_type = "0";
|
|
|
- var options = {
|
|
|
- thumbBox: '.thumbBox_' + size,
|
|
|
- spinner: '.spinner',
|
|
|
- imgSrc: ctx + 'img/profile.jpg'
|
|
|
- }
|
|
|
- $(function () {
|
|
|
- var magnetType = $("#sel_magnetType").val();
|
|
|
- var $appletQrUrl = $("#input_appletQrUrl").parents(".form-group");
|
|
|
- var $url = $("#url").parents(".form-group");
|
|
|
- if (magnetType == "1") {
|
|
|
- $appletQrUrl.removeAttr('disabled');
|
|
|
- $appletQrUrl.show();
|
|
|
- $url.attr('disabled', 'disabled');
|
|
|
- $url.hide();
|
|
|
- } else {
|
|
|
- $url.removeAttr('disabled');
|
|
|
- $url.show();
|
|
|
- $appletQrUrl.attr('disabled', 'disabled');
|
|
|
- $appletQrUrl.hide();
|
|
|
- }
|
|
|
- $("#form-magnet-edit").validate({
|
|
|
- onkeyup: false,
|
|
|
- rules: {
|
|
|
- url: {
|
|
|
- required: true,
|
|
|
- },
|
|
|
- magnetName: {
|
|
|
- remote: {
|
|
|
- url: prefix + "/checkMagnetNameUnique",
|
|
|
- type: "post",
|
|
|
- dataType: "json",
|
|
|
- data: {
|
|
|
- "magnetId": function () {
|
|
|
- return $("#magnetId").val();
|
|
|
- },
|
|
|
- "magnetName": function () {
|
|
|
- return $.common.trim($("#magnetName").val());
|
|
|
- }
|
|
|
- },
|
|
|
- dataFilter: function (data, type) {
|
|
|
- return $.validate.unique(data);
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- orderNum: {
|
|
|
- digits: true
|
|
|
- },
|
|
|
-
|
|
|
- },
|
|
|
- messages: {
|
|
|
- "magnetName": {
|
|
|
- remote: "菜单已经存在"
|
|
|
- }
|
|
|
- },
|
|
|
- focusCleanup: true
|
|
|
- });
|
|
|
-
|
|
|
- $('#avatar').on('change', function () {
|
|
|
- var reader = new FileReader();
|
|
|
- reader.onload = function (e) {
|
|
|
- options.imgSrc = e.target.result;
|
|
|
- //根据MIME判断上传的文件是不是图片类型
|
|
|
- if ((options.imgSrc).indexOf("image/") == -1) {
|
|
|
- $.modal.alertWarning("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
|
|
|
- } else {
|
|
|
- cropper = $('.imageBox').cropbox(options);
|
|
|
- }
|
|
|
- }
|
|
|
- reader.readAsDataURL(this.files[0]);
|
|
|
- })
|
|
|
-
|
|
|
-
|
|
|
- $('#btnZoomIn').on('click', function () {
|
|
|
- cropper.zoomIn();
|
|
|
- })
|
|
|
-
|
|
|
- $('#btnZoomOut').on('click', function () {
|
|
|
- cropper.zoomOut();
|
|
|
- })
|
|
|
-
|
|
|
-
|
|
|
- sizeChange();
|
|
|
- });
|
|
|
-
|
|
|
- function submitHandler() {
|
|
|
- if ($.validate.form()) {
|
|
|
- $.operate.save(prefix + "/edit", $('#form-magnet-edit').serialize());
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- function back() {
|
|
|
- $("#div1").show();
|
|
|
- $("#div2").hide();
|
|
|
- }
|
|
|
-
|
|
|
- /*上传背景图片*/
|
|
|
- function bgUpload(value) {
|
|
|
- var imgUrl = null;
|
|
|
- if (value == 'bg') {
|
|
|
- $("#submitbuttonQr").hide();
|
|
|
- $("#submitbuttonBg").show();
|
|
|
- imgUrl = ctx + $("#input_bgUrl").val();
|
|
|
- } else if (value == 'qr') {
|
|
|
- $("#submitbuttonBg").hide();
|
|
|
- $("#submitbuttonQr").show();
|
|
|
- imgUrl = ctx + $("#input_appletQrUrl").val();
|
|
|
- }
|
|
|
- $("#div1").hide();
|
|
|
- $("#div2").show();
|
|
|
-
|
|
|
- if (imgUrl == null || imgUrl == '') {
|
|
|
- imgUrl = ctx + 'img/profile.jpg';
|
|
|
- }
|
|
|
- options = {
|
|
|
- thumbBox: '.thumbBox_' + size,
|
|
|
- spinner: '.spinner',
|
|
|
- imgSrc: imgUrl
|
|
|
- }
|
|
|
- cropper = $('.imageBox').cropbox(options);
|
|
|
- }
|
|
|
-
|
|
|
- function upBg() {
|
|
|
- var img = cropper.getBlob();
|
|
|
- var formdata = new FormData();
|
|
|
- formdata.append("file", img);
|
|
|
- $.ajax({
|
|
|
- url: ctx + "common/upload",
|
|
|
- data: formdata,
|
|
|
- type: "post",
|
|
|
- processData: false,
|
|
|
- contentType: false,
|
|
|
- success: function (result) {
|
|
|
- if (result.code == 0) {
|
|
|
- $("#input_bgUrl").val(result.data.fileName);
|
|
|
- $("#div-bgUrl").html("<img src='" + result.data.url + "' style='width:100%;height:100%;'>");
|
|
|
- $("#div1").show();
|
|
|
- $("#div2").hide();
|
|
|
- } else {
|
|
|
- $("#div1").show();
|
|
|
- $("#div2").hide();
|
|
|
- $.modal.alertWarning(result.msg);
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- function upQr() {
|
|
|
- var img = cropper.getBlob();
|
|
|
- var formdata = new FormData();
|
|
|
- formdata.append("file", img);
|
|
|
- $.ajax({
|
|
|
- url: ctx + "common/upload",
|
|
|
- data: formdata,
|
|
|
- type: "post",
|
|
|
- processData: false,
|
|
|
- contentType: false,
|
|
|
- success: function (result) {
|
|
|
- if (result.code == 0) {
|
|
|
- $("#input_appletQrUrl").val(result.data.fileName);
|
|
|
- $("#div-appletQrUrl").html("<img src='" + result.data.url + "' style='width:100%;height:100%;'>");
|
|
|
- $("#div1").show();
|
|
|
- $("#div2").hide();
|
|
|
- } else {
|
|
|
- $("#div1").show();
|
|
|
- $("#div2").hide();
|
|
|
- $.modal.alertWarning(result.msg);
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- function sizeChange() {
|
|
|
- size = $("#sel_magnetSize").val();
|
|
|
- $("#div-bgUrl").removeClass("bg-sm");
|
|
|
- $("#div-bgUrl").removeClass("bg-md");
|
|
|
- $("#div-bgUrl").removeClass("bg-lg");
|
|
|
- $("#imageBox").removeClass();
|
|
|
- $("#thumbBox").removeClass();
|
|
|
- if (size == "l" || size == "L") {
|
|
|
- $("#div-bgUrl").addClass("bg-lg");
|
|
|
- size = "L";
|
|
|
- $("#imageBox").addClass("imageBox imageBox_L");
|
|
|
- $("#thumbBox").addClass("thumbBox_L");
|
|
|
- } else if (size == "m" || size == "M") {
|
|
|
- $("#div-bgUrl").addClass("bg-md");
|
|
|
- size = "M";
|
|
|
- $("#imageBox").addClass("imageBox imageBox_M");
|
|
|
- $("#thumbBox").addClass("thumbBox_M");
|
|
|
- } else if (size == "s" || size == "S") {
|
|
|
- $("#div-bgUrl").addClass("bg-sm");
|
|
|
- size = "S";
|
|
|
- $("#imageBox").addClass("imageBox imageBox_S");
|
|
|
- $("#thumbBox").addClass("thumbBox_S");
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- function magnetTypeChange() {
|
|
|
- magnet_type = $("#sel_magnetType").val();
|
|
|
- var $appletQrUrl = $("#input_appletQrUrl").parents(".form-group");
|
|
|
- var $url = $("#url").parents(".form-group");
|
|
|
- if (magnet_type == "1") {
|
|
|
- $("#imageBox").addClass("imageBox imageBox_S");
|
|
|
- $("#thumbBox").addClass("thumbBox_S");
|
|
|
- $appletQrUrl.removeAttr('disabled');
|
|
|
- $appletQrUrl.show();
|
|
|
- $url.attr('disabled', 'disabled');
|
|
|
- $url.hide();
|
|
|
- } else {
|
|
|
- $appletQrUrl.attr('disabled', 'disabled');
|
|
|
- $appletQrUrl.hide();
|
|
|
- $("#input_appletQrUrl").val("");
|
|
|
- $url.removeAttr('disabled');
|
|
|
- $url.show();
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-</script>
|
|
|
-</body>
|
|
|
-</html>
|
