Geen omschrijving

sourcecreate.blade.php 13KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296
  1. @extends('admin/master')
  2. @section('content')
  3. <style>
  4. .templates_ul{
  5. }
  6. .templates_li{
  7. float: left;
  8. width: 25%;
  9. margin-bottom: 35px;
  10. }
  11. .templates_li .templates_img{
  12. width: 100px;
  13. height: 177px;
  14. margin: auto;
  15. margin-bottom: 10px;
  16. }
  17. .add_div{
  18. width: 100px;
  19. height: 177px;
  20. border: 1px solid #ccc;
  21. font-size: 47px;
  22. color: #ccc;
  23. text-align: center;
  24. border-radius: 5px;
  25. line-height: 177px;
  26. cursor: pointer;
  27. position: relative;
  28. }
  29. .add_div .add_img_input{
  30. position: absolute;
  31. width: 100%;
  32. height: 100%;
  33. left: 0;
  34. top: 0;
  35. opacity: 0;
  36. }
  37. .add_img_title{
  38. width: 100px;
  39. text-align: center;
  40. padding: 8px 0;
  41. }
  42. .clear::after {
  43. content: ".";
  44. clear: both;
  45. display: block;
  46. overflow: hidden;
  47. font-size: 0;
  48. height: 0;
  49. }
  50. .clear {
  51. zoom: 1;
  52. }
  53. .new_tuwen{
  54. display: none;
  55. }
  56. </style>
  57. <body>
  58. @if(count($errors) > 0)
  59. <div class="Huialert Huialert-info" id="error">
  60. @foreach($errors->all() as $error)
  61. <li>{{$error}}</li>
  62. @endforeach
  63. </div>
  64. @endif
  65. <div class="page-container">
  66. <form action="/admin/template/sourcestore" method="post" class="form form-horizontal" enctype="multipart/form-data">
  67. <input type="hidden" name="_token" value="{{ csrf_token() }}" />
  68. <div class="row cl">
  69. <label class="form-label col-xs-4 col-sm-2">
  70. 选择模板:</label>
  71. <div class="formControls col-xs-6 col-sm-7">
  72. @if($templates)
  73. <ul class="templates_ul clear">
  74. @foreach($templates as $item)
  75. <li class="templates_li">
  76. <img class="templates_img" src="{{$item['img']}}"/>
  77. <div>
  78. <input type="radio" id="templates_{{$item['id']}}" value="{{$item['id']}}" @if(old('t_id') == $item['id']) checked @elseif($item['id'] == 1) checked @else @endif name="t_id">
  79. <label for="templates_{{$item['id']}}">{{$item['note']}}</label>
  80. </div>
  81. </li>
  82. @endforeach
  83. </ul>
  84. @endif
  85. </div>
  86. </div>
  87. <div class="row cl" id='back_c'>
  88. <label class="form-label col-xs-4 col-sm-2">
  89. 选择背景图:</label>
  90. <div class="formControls col-xs-6 col-sm-7">
  91. <ul class="templates_ul clear" id="img_ul">
  92. @if($back_imgs)
  93. @foreach($back_imgs as $k=>$back_img)
  94. <li class="templates_li">
  95. <img class="templates_img" src="{{$back_img}}"/>
  96. <div>
  97. <input type="radio" id="bgImg{{$k}}" value="{{$back_img}}" @if(old('back_img') == $back_img) checked @endif name="back_img">
  98. <label for="bgImg{{$k}}">背景图{{$k+1}}</label>
  99. </div>
  100. </li>
  101. @endforeach
  102. @endif
  103. <li id='upload_img' class="templates_li">
  104. <div class="add_div">
  105. <span>+</span>
  106. <input type="file" id="ImgInput" multiple name="img" class="add_img_input" onChange="changeImgID()">
  107. </div>
  108. <div class="add_img_title">上传新背景图</div>
  109. </li>
  110. </ul>
  111. </div>
  112. </div>
  113. <div class="row cl">
  114. <label class="form-label col-xs-4 col-sm-2">
  115. 渠道备注:</label>
  116. <div class="formControls col-xs-6 col-sm-7">
  117. <input type="text" class="input-text" value="{{old('note')}}" placeholder="" name="note">
  118. </div>
  119. </div>
  120. <div class="row cl new_tuwen">
  121. <label class="form-label col-xs-4 col-sm-2">
  122. 文章标题:</label>
  123. <div class="formControls col-xs-6 col-sm-7">
  124. <input type="text" class="input-text" value="{{old('title')}}" placeholder="" name="title">
  125. </div>
  126. </div>
  127. <div class="row cl new_tuwen">
  128. <label class="form-label col-xs-4 col-sm-2">
  129. 段一文字:</label>
  130. <div class="formControls col-xs-6 col-sm-7">
  131. <textarea type="text" class="textarea" placeholder="" name="text1">{{old('text1')}}</textarea>
  132. </div>
  133. </div>
  134. <div class="row cl new_tuwen">
  135. <label class="form-label col-xs-4 col-sm-2">
  136. 段一图片:</label>
  137. <div class="formControls col-xs-6 col-sm-6">
  138. <span class="btn-upload">
  139. <input class="input-text upload-url radius" type="text" name="uploadfile-1" id="uploadfile-1" readonly><a href="javascript:void();" class="btn btn-primary radius"><i class="Hui-iconfont">&#xe642;</i> 上传图片</a>
  140. <input type="file" multiple name="img1" class="input-file">
  141. </span><br>
  142. 文件类型支持:jpg ,png ,ico ,文件大小不能超过1M
  143. </div>
  144. </div>
  145. <div class="row cl new_tuwen">
  146. <label class="form-label col-xs-4 col-sm-2">
  147. 段二文字:</label>
  148. <div class="formControls col-xs-6 col-sm-7">
  149. <textarea type="text" class="textarea" placeholder="" name="text2">{{old('text2')}}</textarea>
  150. </div>
  151. </div>
  152. <div class="row cl new_tuwen">
  153. <label class="form-label col-xs-4 col-sm-2">
  154. 段二图一:</label>
  155. <div class="formControls col-xs-6 col-sm-6">
  156. <span class="btn-upload">
  157. <input class="input-text upload-url radius" type="text" name="uploadfile-1" id="uploadfile-1" readonly><a href="javascript:void();" class="btn btn-primary radius"><i class="Hui-iconfont">&#xe642;</i> 上传图片</a>
  158. <input type="file" multiple name="img2_1" class="input-file">
  159. </span><br>
  160. 文件类型支持:jpg ,png ,ico ,文件大小不能超过1M
  161. </div>
  162. </div>
  163. <div class="row cl new_tuwen">
  164. <label class="form-label col-xs-4 col-sm-2">
  165. 段二图二:</label>
  166. <div class="formControls col-xs-6 col-sm-6">
  167. <span class="btn-upload">
  168. <input class="input-text upload-url radius" type="text" name="uploadfile-1" id="uploadfile-1" readonly><a href="javascript:void();" class="btn btn-primary radius"><i class="Hui-iconfont">&#xe642;</i> 上传图片</a>
  169. <input type="file" multiple name="img2_2" class="input-file">
  170. </span><br>
  171. 文件类型支持:jpg ,png ,ico ,文件大小不能超过1M
  172. </div>
  173. </div>
  174. <div class="row cl new_tuwen">
  175. <label class="form-label col-xs-4 col-sm-2">
  176. 段三文字:</label>
  177. <div class="formControls col-xs-6 col-sm-7">
  178. <textarea type="text" class="textarea" placeholder="" name="text3">{{old('text3')}}</textarea>
  179. </div>
  180. </div>
  181. <div class="row cl new_tuwen">
  182. <label class="form-label col-xs-4 col-sm-2">
  183. 段三图片:</label>
  184. <div class="formControls col-xs-6 col-sm-6">
  185. <span class="btn-upload">
  186. <input class="input-text upload-url radius" type="text" name="uploadfile-1" id="uploadfile-1" readonly><a href="javascript:void();" class="btn btn-primary radius"><i class="Hui-iconfont">&#xe642;</i> 上传图片</a>
  187. <input type="file" multiple name="img3" class="input-file">
  188. </span><br>
  189. 文件类型支持:jpg ,png ,ico ,文件大小不能超过1M
  190. </div>
  191. </div>
  192. <div class="row cl">
  193. <div class="col-9 col-offset-2">
  194. <button class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">&nbsp;&nbsp;提交&nbsp;&nbsp;</button>&nbsp;
  195. <button class="btn btn-default" type="reset" onclick="return_index();">&nbsp;&nbsp;返回&nbsp;&nbsp;</button>&nbsp;
  196. {{--<a href="javascript:void(0)" class="btn btn-default radius" onclick="redirect('{{url('/admin/admin/all')}}')">返回并查看结果</a>--}}
  197. <font color='red'>(*提交后自动生成推广链接)</font>
  198. </div>
  199. </div>
  200. </form>
  201. </div>
  202. <!--_footer 作为公共模版分离出去-->
  203. <script type="text/javascript" src="/admin/lib/jquery/1.9.1/jquery.min.js"></script>
  204. <script type="text/javascript" src="/admin/lib/layer/2.4/layer.js"></script>
  205. <script type="text/javascript" src="/admin/static/h-ui/js/H-ui.min.js"></script>
  206. <script type="text/javascript" src="/admin/static/h-ui.admin/js/H-ui.admin.js"></script>
  207. <!--/_footer 作为公共模版分离出去-->
  208. <!--请在下方写此页面业务相关的脚本-->
  209. <script type="text/javascript">
  210. $(function(){
  211. setTimeout("$('#error').hide()",3000);
  212. getTback();
  213. $('input[type=radio][name=t_id]').change(function () {
  214. getTback();
  215. })
  216. });
  217. /*返回*/
  218. function return_index(){
  219. location.href='/admin/template/sourceindex';
  220. }
  221. function changeImgID(html) {
  222. //获取读取我文件的File对象
  223. var selectedFile = '';
  224. var _token = "{{ csrf_token() }}";
  225. selectedFile = document.getElementById('ImgInput').files[0];
  226. var reader = new FileReader();
  227. reader.readAsDataURL(selectedFile);
  228. reader.onload = function () {
  229. //当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可
  230. var t_id = $("input[type='radio'][name='t_id']:checked").val();
  231. $.ajax({
  232. url:'/admin/template/uploadBack',
  233. type:'post',
  234. data:{img:this.result,_token:_token,t_id:t_id},
  235. success:function(pic_url){
  236. if(pic_url == '0'){
  237. alert(pic_url)
  238. return false;
  239. }
  240. var str = "<li class=\"templates_li\"><img class=\"templates_img\" src=\""+ pic_url +"\"\/><div><input type=\"radio\" id=\"bgImg\" value=\""+pic_url+"\" name=\"back_img\" checked><label for=\"bgImg\">背景图</label><\/div><\/li>";
  241. $("#upload_img").before(str);
  242. },
  243. })
  244. }
  245. }
  246. function getTback(){
  247. var t_id = $("input[type='radio'][name='t_id']:checked").val();
  248. if(t_id==4){
  249. $(".new_tuwen").show();
  250. $("#back_c").hide();
  251. return false;
  252. }
  253. else{
  254. $(".new_tuwen").hide();
  255. $("#back_c").show();
  256. }
  257. if(t_id>0){
  258. $.ajax({
  259. url:'/admin/template/getTempback/'+t_id,
  260. type:'get',
  261. dataType:'json',
  262. success:function(data){
  263. var str = '';
  264. for (var i = 0, l = data.length; i < l; i++) {
  265. var back_img = data[i];
  266. var str = str+ "<li class=\"templates_li\"><img class=\"templates_img\" src=\""+back_img+"\"\/><div><input type=\"radio\" id=\"bgImg"+i+"\" value=\""+back_img+"\" name=\"back_img\"><label for=\"bgImg"+i+"\">背景图" + (i+1) +"<\/label><\/div><\/li>";
  267. }
  268. str += "<li id='upload_img' class='templates_li'><div class='add_div'><span>+</span><input type='file' id='ImgInput' multiple name='img' class='add_img_input' onChange='changeImgID()'><\/div><div class='add_img_title'>上传新背景图<\/div><\/li>";
  269. $("#img_ul").html(str);
  270. },
  271. })
  272. }
  273. }
  274. </script>
  275. </body>
  276. @endsection