add.html 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
  1. <!DOCTYPE html>
  2. <html lang="zh" xmlns:th="http://www.thymeleaf.org" >
  3. <head>
  4. <th:block th:include="include :: header('新增礼物')" />
  5. </head>
  6. <body class="white-bg">
  7. <div class="wrapper wrapper-content animated fadeInRight ibox-content">
  8. <form class="form-horizontal m" id="form-notice-add">
  9. <div class="form-group" id="chargeErBanNo">
  10. <label class="col-sm-2 control-label">礼物名称:</label>
  11. <div class="col-sm-10">
  12. <input name="giftName" id="giftName" class="form-control" type="text" placeholder="请输入礼物名称" required/>
  13. </div>
  14. </div>
  15. <div class="form-group">
  16. <label class="col-sm-2 control-label">礼物金币:</label>
  17. <div class="col-sm-10">
  18. <input id="goldPrice" min="0" name="goldPrice" class="form-control" type="number" placeholder="请输入礼物金币" required/>
  19. </div>
  20. </div>
  21. <div class="form-group">
  22. <label class="col-sm-2 control-label">礼物类型:</label>
  23. <div class="col-sm-10">
  24. <select name="giftType" id="giftType" class="form-control m-b" th:with="type=${@dict.getType('gift_type')}">
  25. <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
  26. </select>
  27. </div>
  28. </div>
  29. <div class="form-group">
  30. <label class="col-sm-2 control-label">礼物状态:</label>
  31. <div class="col-sm-3">
  32. <div class="radio-box">
  33. <input type="radio" id="giftStatus1" name="giftStatus" value="1" checked>
  34. <label for="giftStatus1">有效</label>
  35. </div>
  36. <div class="radio-box">
  37. <input type="radio" id="giftStatus2" name="giftStatus" value="2">
  38. <label for="giftStatus2">无效</label>
  39. </div>
  40. </div>
  41. <label class="col-sm-2 control-label">礼物特效:</label>
  42. <div class="col-sm-3">
  43. <div class="radio-box">
  44. <input type="radio" id="hasEffect" name="hasEffect" value="0" checked>
  45. <label for="hasEffect">否</label>
  46. </div>
  47. <div class="radio-box">
  48. <input type="radio" id="hasEffect2" name="hasEffect" value="1">
  49. <label for="hasEffect2">是</label>
  50. </div>
  51. </div>
  52. </div>
  53. <div class="form-group">
  54. <label class="col-sm-2 control-label">vgg特效:</label>
  55. <div class="col-sm-3">
  56. <div class="radio-box">
  57. <input type="radio" id="hasVggPic" name="hasVggPic" value="0" checked>
  58. <label for="hasVggPic">否</label>
  59. </div>
  60. <div class="radio-box">
  61. <input type="radio" id="hasVggPic2" name="hasVggPic" value="1">
  62. <label for="hasVggPic2">是</label>
  63. </div>
  64. </div>
  65. <label class="col-sm-2 control-label">最新礼物:</label>
  66. <div class="col-sm-3">
  67. <div class="radio-box">
  68. <input type="radio" id="isLatest" name="isLatest" value="0" checked>
  69. <label for="isLatest">否</label>
  70. </div>
  71. <div class="radio-box">
  72. <input type="radio" id="isLatest2" name="isLatest" value="1">
  73. <label for="isLatest2">是</label>
  74. </div>
  75. </div>
  76. </div>
  77. <div class="form-group">
  78. <label class="col-sm-2 control-label">贵族礼物:</label>
  79. <div class="col-sm-3">
  80. <div class="radio-box">
  81. <input type="radio" id="isNobleGift" name="isNobleGift" value="0" checked>
  82. <label for="isNobleGift">否</label>
  83. </div>
  84. <div class="radio-box">
  85. <input type="radio" id="isNobleGift2" name="isNobleGift" value="1">
  86. <label for="isNobleGift2">是</label>
  87. </div>
  88. </div>
  89. <label class="col-sm-2 control-label">限时礼物:</label>
  90. <div class="col-sm-3">
  91. <div class="radio-box">
  92. <input type="radio" id="isTimeLimit" name="isTimeLimit" value="0" checked>
  93. <label for="isTimeLimit">否</label>
  94. </div>
  95. <div class="radio-box">
  96. <input type="radio" id="isTimeLimit2" name="isTimeLimit" value="1">
  97. <label for="isTimeLimit2">是</label>
  98. </div>
  99. </div>
  100. </div>
  101. <div class="form-group">
  102. <label class="col-sm-2 control-label">是否允许赠送:</label>
  103. <div class="col-sm-3">
  104. <div class="radio-box">
  105. <input type="radio" id="isCanGive" name="isCanGive" value="0" checked>
  106. <label for="isCanGive">否</label>
  107. </div>
  108. <div class="radio-box">
  109. <input type="radio" id="isCanGive2" name="isCanGive" value="1">
  110. <label for="isCanGive2">是</label>
  111. </div>
  112. </div>
  113. <label class="col-sm-2 control-label">表白礼物:</label>
  114. <div class="col-sm-3">
  115. <div class="radio-box">
  116. <input type="radio" id="isExpressGift" name="isExpressGift" value="0" checked>
  117. <label for="isExpressGift">否</label>
  118. </div>
  119. <div class="radio-box">
  120. <input type="radio" id="isExpressGift2" name="isExpressGift" value="1">
  121. <label for="isExpressGift2">是</label>
  122. </div>
  123. </div>
  124. </div>
  125. <div class="form-group">
  126. <label class="col-sm-2 control-label">礼物图片:</label>
  127. <div class="col-sm-10">
  128. <img src="" id="picImage" style="width:250px;height:90px;" alt="">
  129. <input type="file" id="picUploadFile" name="uploadFile" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
  130. <button class="btn btn-success" type="button" id="picUploadBtn">上传</button>
  131. <input type="hidden" id="picUrl" name="picUrl" class="form-control validate[required]"/>
  132. </div>
  133. </div>
  134. <div class="form-group">
  135. <label class="col-sm-2 control-label">vgg图片:</label>
  136. <div class="col-sm-10">
  137. <img src="" id="imgUrl" style="width:250px;height:90px;" alt="">
  138. <input type="file" id="uploadFile" name="uploadFile" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
  139. <button class="btn btn-success" type="button" id="uploadBtn">上传</button>
  140. <input type="hidden" id="vggUrl" name="vggUrl" class="form-control validate[required]"/>
  141. </div>
  142. </div>
  143. <div class="form-group" >
  144. <label class="col-sm-2 control-label">排序:</label>
  145. <div class="col-sm-10">
  146. <input id="seqNo" name="seqNo" min="1" class="form-control" type="number" placeholder="请输入排序" required/>
  147. </div>
  148. </div>
  149. <div class="form-group select-time" >
  150. <label class="col-sm-2 control-label">开始时间:</label>
  151. <div class="col-sm-10">
  152. <input id="startTime" name="startTime" class="form-control time-input" type="text" placeholder="请输入开始时间"/>
  153. </div>
  154. </div>
  155. <div class="form-group select-time" >
  156. <label class="col-sm-2 control-label">结束时间:</label>
  157. <div class="col-sm-10">
  158. <input id="endTime" name="endTime" class="form-control time-input" type="text" placeholder="请输入结束时间"/>
  159. </div>
  160. </div>
  161. </form>
  162. </div>
  163. <th:block th:include="include :: footer" />
  164. <th:block th:include="include :: summernote-js" />
  165. <script type="text/javascript">
  166. var prefix = ctx + "mall/gift";
  167. $("#form-notice-add").validate({
  168. onkeyup: false,
  169. rules:{
  170. giftName:{
  171. minlength: 1,
  172. remote: {
  173. url: prefix + "/checkGiftName",
  174. type: "post",
  175. dataType: "json",
  176. data: {
  177. giftName : function() {
  178. return $.common.trim($("#giftName").val());
  179. }
  180. },
  181. dataFilter: function(data, type) {
  182. return $.validate.unique(data);
  183. }
  184. }
  185. }
  186. },
  187. messages: {
  188. "giftName": {
  189. remote: "该礼物名称已经存在!"
  190. }
  191. },
  192. focusCleanup: true
  193. });
  194. /**
  195. * 礼物图片上传
  196. */
  197. $('#picUploadBtn').on('click',function () {
  198. if($('#picUploadFile').get(0).files[0]==undefined){
  199. $.modal.alertError("请选择要上传的文件!");
  200. return;
  201. }
  202. var formData = new FormData();
  203. formData.append("file", $('#picUploadFile').get(0).files[0]);
  204. $.ajax({
  205. url: ctx + "file/upload",
  206. data: formData,
  207. type: "post",
  208. processData: false,
  209. contentType: false,
  210. success: function(result) {
  211. $('#picImage').attr('src',result.data);
  212. $("input[name='picUrl']").val(result.data);
  213. }
  214. })
  215. });
  216. /**
  217. * vgg图片上传
  218. */
  219. $('#uploadBtn').on('click',function () {
  220. if($('#uploadFile').get(0).files[0]==undefined){
  221. $.modal.alertError("请选择要上传的文件!");
  222. return;
  223. }
  224. var formData = new FormData();
  225. formData.append("file", $('#uploadFile').get(0).files[0]);
  226. $.ajax({
  227. url: ctx + "file/upload",
  228. data: formData,
  229. type: "post",
  230. processData: false,
  231. contentType: false,
  232. success: function(result) {
  233. $('#imgUrl').attr('src',result.data);
  234. $("input[name='vggUrl']").val(result.data);
  235. }
  236. })
  237. });
  238. function submitHandler() {
  239. if ($.validate.form()) {
  240. $.operate.save(prefix + "/add", $('#form-notice-add').serialize());
  241. }
  242. }
  243. </script>
  244. </body>
  245. </html>