|
|
@@ -0,0 +1,345 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
|
|
|
+<head>
|
|
|
+ <th:block th:include="include :: header('主题配置')" />
|
|
|
+ <th:block th:include="include :: datetimepicker-css" />
|
|
|
+ <th:block th:include="include :: bootstrap-select-css" />
|
|
|
+ <th:block th:include="include :: cropbox-css"/>
|
|
|
+ <style>
|
|
|
+ .file-wraps{
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ flex-direction: row;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border: 1px solid #f5f5f5;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .file-wraps input{
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ .file-wraps-small-icon{
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ flex-direction: row;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border: 1px solid #f5f5f5;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .file-wraps-small-icon input{
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ .smallIconBox{
|
|
|
+ flex-direction: row;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .smallIconItem{
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ flex-direction: column;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .activityIconBox{
|
|
|
+ flex-direction: row;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .activityIconItem{
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ flex-direction: column;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body class="white-bg">
|
|
|
+<div class="wrapper wrapper-content animated fadeInRight ibox-content">
|
|
|
+ <form class="form-horizontal m" id="form-configuration-add">
|
|
|
+ <div class="form-group" id="bgImageItem">
|
|
|
+ <label class="col-sm-3 control-label">门户背景:</label>
|
|
|
+ <div class="col-sm-8">
|
|
|
+ <div class="file-wraps">
|
|
|
+ <div id="bgImageDiv" style="width: 80px;height: 80px;display: none;"></div>
|
|
|
+ <i id="bgImageIcon" class="fa fa-plus" style="font-size: 40px"></i>
|
|
|
+ <input type="file" class="uploadImage" id="bgImage" name="bgImage" accept="image/*"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="col-sm-3 control-label">小图标设置:</label>
|
|
|
+ <div class="col-sm-8">
|
|
|
+ <div class="smallIconBox">
|
|
|
+ <div class="smallIconItem" th:each="dict : ${@dict.getType('home_icon_type')}">
|
|
|
+ <div class="file-wraps-small-icon">
|
|
|
+ <div th:id="${dict.dictValue}" style="width: 50px;height: 50px;display: none;"></div>
|
|
|
+ <i th:id="${dict.dictValue}+'Icon'" class="fa fa-plus" style="font-size: 30px"></i>
|
|
|
+ <input type="file" class="uploadImage" th:id="${dict.dictCode}" th:name="${dict.dictValue}" accept="image/*"/>
|
|
|
+ </div>
|
|
|
+ <span th:text="${dict.dictLabel}" style="margin-top: 10px;"></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="col-sm-3 control-label">活动图标设置:</label>
|
|
|
+ <div class="col-sm-8">
|
|
|
+ <div class="activityIconBox">
|
|
|
+ <!--<div class="activityIconItem">-->
|
|
|
+ <!--<img src="" style="width: 50px;height: 50px;">-->
|
|
|
+ <!--<i class="fa"></i>-->
|
|
|
+ <!--</div>-->
|
|
|
+ <div id="activityImageDiv" style="width: 50px;height: 50px;display: none;"></div>
|
|
|
+ <div class="file-wraps-small-icon">
|
|
|
+ <i id="activityImageIcon" class="fa fa-plus" style="font-size: 30px"></i>
|
|
|
+ <input type="file" class="uploadImage" id="activityImage" name="activityImage" accept="image/*"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="col-sm-3 control-label">活动图标开始时间:</label>
|
|
|
+ <div class="col-sm-8">
|
|
|
+ <input id="alertStartTime" name="alertStartTime" class="form-control" type="datetime-local">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="col-sm-3 control-label">活动图标结束时间:</label>
|
|
|
+ <div class="col-sm-8">
|
|
|
+ <input id="alertEndTime" name="alertEndTime" class="form-control" type="datetime-local">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="col-sm-3 control-label">提示文字:</label>
|
|
|
+ <div class="col-sm-8">
|
|
|
+ <input id="alertTitle" name="alertTitle" class="form-control" type="text">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="col-sm-3 control-label">提示文字颜色:</label>
|
|
|
+ <div class="col-sm-8">
|
|
|
+ <input id="alertTitleColor" name="alertTitleColor" class="form-control" type="text">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+</div>
|
|
|
+<th:block th:include="include :: footer" />
|
|
|
+<th:block th:include="include :: datetimepicker-js" />
|
|
|
+<th:block th:include="include :: bootstrap-select-js" />
|
|
|
+<th:block th:include="include :: cropbox-js"/>
|
|
|
+<script type="text/javascript">
|
|
|
+ var prefix = ctx + "system/configuration"
|
|
|
+ // var prefixEdit = "http://localhost:10002/oneportal/wxportal/magnet"
|
|
|
+ var prefixEdit = "https://suishenbangtest.nipponpaint.com.cn/oneportal/wxportal/magnet";
|
|
|
+
|
|
|
+ var bgImageUrl = '';
|
|
|
+ var smallImageUrlArray = {};
|
|
|
+ var activityImageUrlArray = [];
|
|
|
+ var options = {
|
|
|
+ thumbBox: '.thumbBox',
|
|
|
+ spinner: '.spinner',
|
|
|
+ imgSrc: ctx + 'img/profile.jpg'
|
|
|
+ }
|
|
|
+
|
|
|
+ $(document).ready(function () {
|
|
|
+ getThemeInfo();
|
|
|
+ })
|
|
|
+
|
|
|
+ $('.uploadImage').on('change', function (res) {
|
|
|
+ var reader = new FileReader();
|
|
|
+ reader.onload = function (e) {
|
|
|
+ options.imgSrc = e.target.result;
|
|
|
+ //根据MIME判断上传的文件是不是图片类型
|
|
|
+ if ((options.imgSrc).indexOf("image/") == -1) {
|
|
|
+ $.modal.alertWarning("文件格式错误,请上传图片类型,如:JPG,PNG后缀的文件。");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ reader.readAsDataURL(this.files[0]);
|
|
|
+ upBg(this.files[0],res.currentTarget.name);
|
|
|
+ })
|
|
|
+
|
|
|
+ $("#alertStartTime").on('change',function () {
|
|
|
+ if ($(this).val() != -1){
|
|
|
+ var startTimeChange1 = $('#alertStartTime').val().replace('T',' ');
|
|
|
+ var endTimeChange1 = $('#alertEndTime').val().replace('T',' ');
|
|
|
+ if (new Date(startTimeChange1).getTime() - new Date(endTimeChange1).getTime() >= 0){
|
|
|
+ $.modal.alertWarning("弹框结束时间不能小于开始时间");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ $("#alertEndTime").on('change',function () {
|
|
|
+ if ($(this).val() != -1){
|
|
|
+ var startTimeChange2 = $('#alertStartTime').val().replace('T',' ');
|
|
|
+ var endTimeChange2 = $('#alertEndTime').val().replace('T',' ');
|
|
|
+ if (new Date(startTimeChange2).getTime() - new Date(endTimeChange2).getTime() >= 0){
|
|
|
+ $.modal.alertWarning("弹框结束时间不能小于开始时间");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ $("#form-configuration-add").validate({
|
|
|
+ focusCleanup: true,
|
|
|
+ // rules:{
|
|
|
+ // alertStartTime:{
|
|
|
+ // required:true
|
|
|
+ // },
|
|
|
+ // alertEndTime:{
|
|
|
+ // required:true
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ });
|
|
|
+
|
|
|
+ function upBg(imgFile,imgType) {
|
|
|
+ var formdata = new FormData();
|
|
|
+ formdata.append("file", imgFile);
|
|
|
+ $.ajax({
|
|
|
+ url: ctx + "common/upload",
|
|
|
+ data: formdata,
|
|
|
+ type: "post",
|
|
|
+ processData: false,
|
|
|
+ contentType: false,
|
|
|
+ success: function (result) {
|
|
|
+ if (result.code == 0) {
|
|
|
+ if (imgType == 'bgImage'){
|
|
|
+ bgImageUrl = result.data.url;
|
|
|
+ $("#bgImageDiv").html("<img src='" + result.data.url + "' style='width;100%;height:100%;'>");
|
|
|
+ document.getElementById("bgImageDiv").style.display = 'block';
|
|
|
+ document.getElementById("bgImageIcon").style.display = 'none';
|
|
|
+ } else if (imgType == 'activityImage'){
|
|
|
+ activityImageUrlArray.push(result.data.url);
|
|
|
+ console.log('activityImageUrlArray',activityImageUrlArray);
|
|
|
+ $("#activityImageDiv").html("<img src='" + result.data.url + "' style='width;100%;height:100%;'>");
|
|
|
+ document.getElementById("activityImageDiv").style.display = 'block';
|
|
|
+ } else {
|
|
|
+ smallImageUrlArray[imgType] = result.data.url;
|
|
|
+ $("#"+imgType).html("<img src='" + result.data.url + "' style='width;100%;height:100%;'>");
|
|
|
+ document.getElementById(imgType).style.display = 'block';
|
|
|
+ document.getElementById(imgType+'Icon').style.display = 'none';
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ $.modal.alertWarning(result.msg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ function getThemeInfo() {
|
|
|
+ var config = {
|
|
|
+ url: prefixEdit + '/getHomeIconInfo',
|
|
|
+ type: "post",
|
|
|
+ dataType: "json",
|
|
|
+ data: {},
|
|
|
+ beforeSend: function () {
|
|
|
+ $.modal.loading("正在处理中,请稍后...");
|
|
|
+ },
|
|
|
+ success: function(result) {
|
|
|
+ $.modal.closeLoading();
|
|
|
+ console.log('result',result);
|
|
|
+ if (result.data.portal_background != ''){
|
|
|
+ bgImageUrl = result.data.portal_background;
|
|
|
+ $("#bgImageDiv").html("<img src='" + result.data.portal_background + "' style='width;100%;height:100%;'>");
|
|
|
+ document.getElementById("bgImageDiv").style.display = 'block';
|
|
|
+ document.getElementById("bgImageIcon").style.display = 'none';
|
|
|
+ }
|
|
|
+ if (Object.keys(result.data.smallIconObject).length > 0){
|
|
|
+ var keyArray = Object.keys(result.data.smallIconObject);
|
|
|
+ keyArray.forEach(item => {
|
|
|
+ smallImageUrlArray[item] = result.data.smallIconObject[item];
|
|
|
+ $("#"+item).html("<img src='" + result.data.smallIconObject[item] + "' style='width;100%;height:100%;'>");
|
|
|
+ document.getElementById(item).style.display = 'block';
|
|
|
+ document.getElementById(item+'Icon').style.display = 'none';
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (result.data.activityIconObject.length > 0){
|
|
|
+ activityImageUrlArray = result.data.activityIconObject;
|
|
|
+ $("#activityImageDiv").html("<img src='" + result.data.activityIconObject[0] + "' style='width;100%;height:100%;'>");
|
|
|
+ document.getElementById("activityImageDiv").style.display = 'block';
|
|
|
+ }
|
|
|
+ if (result.data.bottom_prompt_text != null){
|
|
|
+ document.getElementById("alertTitle").value = result.data.bottom_prompt_text;
|
|
|
+ }
|
|
|
+ if (result.data.prompt_text_color != null){
|
|
|
+ document.getElementById("alertTitleColor").value = result.data.prompt_text_color;
|
|
|
+ }
|
|
|
+ if (result.data.activity_icon_starttime != null){
|
|
|
+ document.getElementById("alertStartTime").value = result.data.activity_icon_starttime;
|
|
|
+ }
|
|
|
+ if (result.data.activity_icon_endtime != null){
|
|
|
+ document.getElementById("alertEndTime").value = result.data.activity_icon_endtime;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ $.ajax(config)
|
|
|
+ }
|
|
|
+
|
|
|
+ function submitHandler() {
|
|
|
+ if ($.validate.form()) {
|
|
|
+ var alertTitle = $('#alertTitle').val();
|
|
|
+ var alertTitleColor = $('#alertTitleColor').val();
|
|
|
+ var startTime = $('#alertStartTime').val().replace('T',' ');
|
|
|
+ var endTime = $('#alertEndTime').val().replace('T',' ');
|
|
|
+ if (new Date(startTime).getTime() - new Date(endTime).getTime() >= 0){
|
|
|
+ $.modal.alertWarning("弹框结束时间不能小于开始时间");
|
|
|
+ }else {
|
|
|
+ var objSubmit = {
|
|
|
+ id:'1',
|
|
|
+ portal_background:bgImageUrl,
|
|
|
+ small_icon_extra:JSON.stringify(smallImageUrlArray),
|
|
|
+ activity_icon_extra:JSON.stringify(activityImageUrlArray)
|
|
|
+ }
|
|
|
+ if (alertTitle != ''){
|
|
|
+ objSubmit.bottom_prompt_text = alertTitle
|
|
|
+ }
|
|
|
+ if (alertTitleColor != ''){
|
|
|
+ objSubmit.prompt_text_color = alertTitleColor
|
|
|
+ }
|
|
|
+ if (startTime != ''){
|
|
|
+ objSubmit.activity_icon_starttime = startTime
|
|
|
+ }
|
|
|
+ if (endTime != ''){
|
|
|
+ objSubmit.activity_icon_endtime = endTime
|
|
|
+ }
|
|
|
+ console.log('objSubmit', objSubmit);
|
|
|
+ var configSubmit = {
|
|
|
+ url: prefixEdit + "/editHome",
|
|
|
+ type: "post",
|
|
|
+ dataType: "json",
|
|
|
+ data: objSubmit,
|
|
|
+ beforeSend: function () {
|
|
|
+ $.modal.loading("正在处理中,请稍后...");
|
|
|
+ },
|
|
|
+ success:function (result) {
|
|
|
+ $.modal.closeLoading();
|
|
|
+ $.operate.successCallback(result);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ $.ajax(configSubmit)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|