From 5122c416a237baa961027e31070e33dae7577743 Mon Sep 17 00:00:00 2001
From: dy <1197793912@qq.com>
Date: Tue, 6 Apr 2021 14:05:54 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E7=89=87=E4=B8=8A=E4=BC=A0=E5=90=8C?=
 =?UTF-8?q?=E6=AD=A5=E6=95=88=E6=9E=9C=E5=9B=BEjs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../templates/activity/info/add.html          | 195 +++++++++++-------
 1 file changed, 122 insertions(+), 73 deletions(-)

diff --git a/sino-activity/src/main/resources/templates/activity/info/add.html b/sino-activity/src/main/resources/templates/activity/info/add.html
index 6bc68c2df..7a5898ae3 100644
--- a/sino-activity/src/main/resources/templates/activity/info/add.html
+++ b/sino-activity/src/main/resources/templates/activity/info/add.html
@@ -4,16 +4,16 @@
     <th:block th:include="include :: header('创建活动')"/>
     <th:block th:include="include :: datetimepicker-css"/>
     <th:block th:include="include :: jquery-smartwizard-css"/>
+    <th:block th:include="include :: jasny-bootstrap-css" />
 </head>
 <style type='text/css'>
-    .rightarea
-    {
+    .rightarea {
         float: left;
         width: 40%;
         height: 300px;
     }
-    .leftarea
-    {
+
+    .leftarea {
         float: left;
         width: 50%;
         height: 300px;
@@ -166,98 +166,108 @@
                 </div>
                 <div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
                     <div style="height: 610px">
-                    <form class="form form-horizontal m-t">
-                        <div class="leftarea">
-                            <h4 class="form-header h4">第3步-配置展现内容</h4>
-                            <div class="row">
-                                <div class="col-sm-6">
-                                    <div class="form-group">
-                                        <label class="col-sm-4 control-label is-required">活动标题：</label>
-                                        <div class="col-sm-8">
-                                            <input id="drawname" name="DRAWNAME" placeholder="活动名称" class="form-control" type="text"
-                                                   maxlength="30" onkeyup="updatePic(this)">
+                        <form class="form form-horizontal m-t">
+                            <div class="leftarea">
+                                <h4 class="form-header h4">第3步-配置展现内容</h4>
+                                <div class="row">
+                                    <div class="col-sm-6">
+                                        <div class="form-group">
+                                            <label class="col-sm-4 control-label is-required">活动标题：</label>
+                                            <div class="col-sm-8">
+                                                <input id="drawname" name="DRAWNAME" placeholder="活动名称"
+                                                       class="form-control" type="text"
+                                                       maxlength="30" onkeyup="updatePic(this)">
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
-                            </div>
-                            <div class="row">
-                                <div class="col-sm-6">
-                                    <div class="form-group">
-                                        <label class="col-sm-4 control-label is-required">活动描述：</label>
-                                        <div class="col-sm-8">
-                                            <input id="drawDescribe" name="drawDescribe" placeholder="活动描述" class="form-control" type="text"
-                                                   maxlength="30" onkeyup="updatePic(this)">
+                                <div class="row">
+                                    <div class="col-sm-6">
+                                        <div class="form-group">
+                                            <label class="col-sm-4 control-label is-required">活动描述：</label>
+                                            <div class="col-sm-8">
+                                                <input id="drawDescribe" name="drawDescribe" placeholder="活动描述"
+                                                       class="form-control" type="text"
+                                                       maxlength="30" onkeyup="updatePic(this)">
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
-                            </div>
-                            <div class="row">
-                                <div class="col-sm-6">
-                                    <div class="form-group">
+                                <div class="row">
+
+                                    <div class="col-sm-6">
                                         <label class="col-sm-4 control-label is-required">背景图片：</label>
-                                        <div class="col-sm-8">
-                                            <input id="pic" name="pic" placeholder="背景图片" class="form-control" type="text"
-                                                   maxlength="30">
+
+                                        <div class="fileinput fileinput-new" data-provides="fileinput">
+                                            <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
+                                            <div>
+                                                <span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span>
+                                                    <input type="file" id="pic"></span>
+                                                <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
+                                            </div>
+                                        </div>
+
+                                    </div>
+                                </div>
+                                <div class="row">
+                                    <div class="col-sm-6">
+                                        <div class="form-group">
+                                            <label class="col-sm-4 control-label is-required">自定义按钮1：</label>
+                                            <div class="col-sm-8">
+                                                <input id="btn1" name="btn1" placeholder="自定义按钮1" class="form-control"
+                                                       type="text"
+                                                       maxlength="30" onkeyup="updatePic(this)">
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
-                            </div>
-                            <div class="row">
-                                <div class="col-sm-6">
-                                    <div class="form-group">
-                                        <label class="col-sm-4 control-label is-required">自定义按钮1：</label>
-                                        <div class="col-sm-8">
-                                            <input id="btn1" name="btn1" placeholder="自定义按钮1" class="form-control" type="text"
-                                                   maxlength="30" onkeyup="updatePic(this)">
+                                <div class="row">
+                                    <div class="col-sm-6">
+                                        <div class="form-group">
+                                            <label class="col-sm-4 control-label is-required">按钮1跳转链接：</label>
+                                            <div class="col-sm-8">
+                                                <input name="btn1Link" placeholder="按钮1跳转链接" class="form-control"
+                                                       type="text"
+                                                       maxlength="30">
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
-                            </div>
-                            <div class="row">
-                                <div class="col-sm-6">
-                                    <div class="form-group">
-                                        <label class="col-sm-4 control-label is-required">按钮1跳转链接：</label>
-                                        <div class="col-sm-8">
-                                            <input  name="btn1Link" placeholder="按钮1跳转链接" class="form-control" type="text"
-                                                   maxlength="30">
+                                <div class="row">
+                                    <div class="col-sm-6">
+                                        <div class="form-group">
+                                            <label class="col-sm-4 control-label is-required">自定义按钮2：</label>
+                                            <div class="col-sm-8">
+                                                <input name="btn2" placeholder="自定义按钮2" class="form-control" type="text"
+                                                       maxlength="30" onkeyup="updatePic(this)">
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
-                            </div>
-                            <div class="row">
-                                <div class="col-sm-6">
-                                    <div class="form-group">
-                                        <label class="col-sm-4 control-label is-required">自定义按钮2：</label>
-                                        <div class="col-sm-8">
-                                            <input name="btn2" placeholder="自定义按钮2" class="form-control" type="text"
-                                                   maxlength="30" onkeyup="updatePic(this)">
+                                <div class="row">
+                                    <div class="col-sm-6">
+                                        <div class="form-group">
+                                            <label class="col-sm-4 control-label is-required">按钮2跳转链接：</label>
+                                            <div class="col-sm-8">
+                                                <input name="btn2Link" placeholder="按钮2跳转链接" class="form-control"
+                                                       type="text"
+                                                       maxlength="30">
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
+
                             </div>
-                            <div class="row">
-                                <div class="col-sm-6">
-                                    <div class="form-group">
-                                        <label class="col-sm-4 control-label is-required">按钮2跳转链接：</label>
-                                        <div class="col-sm-8">
-                                            <input name="btn2Link" placeholder="按钮2跳转链接" class="form-control" type="text"
-                                                   maxlength="30">
-                                        </div>
-                                    </div>
+                            <div class="rightarea">
+                                <h4 class="form-header h4">效果图</h4>
+                                <div style="position: relative;text-align:center">
+                                    <img id="imgPic" src="../../img/1.jpg" width="380" height="500">
+                                    <span class="drawNamePic" id="drawnamePic">活动标题</span>
+                                    <span class="drawDescribePic" id="drawDescribePic">活动描述</span>
                                 </div>
                             </div>
 
-                        </div>
-                        <div class="rightarea">
-                            <h4 class="form-header h4">效果图</h4>
-                            <div style="position: relative;">
-                                <img src="../../img/1.jpg" width="380" height="500">
-                                <span class="drawNamePic" id="drawnamePic" >活动标题</span>
-                                <span class="drawDescribePic" id="drawDescribePic" >活动描述</span>
-                            </div>
-                        </div>
-
-                    </form>
+                        </form>
                     </div>
                 </div>
                 <div id="step-4" class="tab-pane" role="tabpanel" aria-labelledby="step-4">
@@ -383,6 +393,7 @@
 <th:block th:include="include :: footer"/>
 <th:block th:include="include :: datetimepicker-js"/>
 <th:block th:include="include :: jquery-smartwizard-js"/>
+<th:block th:include="include :: jasny-bootstrap-js" />
 <script th:inline="javascript">
     var prefix = ctx + "activity/info"
 
@@ -614,6 +625,44 @@
         var value = val.value;
         $("#"+id+"Pic").text(value);
     }
+    $("#pic").change(function (){
+        previewURL(this);
+        if($(this).val()!='') {
+            // var formData = new FormData();
+            // formData.append('file', $(this)[0].files[0]);
+            // $.ajax({
+            //     url: '/path/to/upload',
+            //     type: 'POST',
+            //     data: formData,
+            //     async: false,
+            //     success: function (r) {
+            //         if(r.success) {
+            //             //success work
+            //         }
+            //     },
+            //     cache: false,
+            //     contentType: false,
+            //     processData: false
+            // });
+            $("#imgPic").attr("src",$(this).val());
+
+        }
+    });
+
+    function previewURL(input) {
+        if (input.files && input.files[0]) {
+            var reader = new FileReader();
+
+            reader.onload = function (e) {
+                //$('#prevImg').attr('src', e.target.result);
+                $("#imgPic").attr("src",e.target.result);
+                //$('#preview').css("background", "url(" + e.target.result +")" + " right top no-repeat");
+            }
+
+            reader.readAsDataURL(input.files[0]);
+        }
+    }
+
 </script>
 </body>
 </html>
\ No newline at end of file