device_add.html 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. <include file="public@header" />
  2. <style>
  3. #map {
  4. width: 100%;
  5. height: 100%;
  6. min-height: 320px;
  7. }
  8. .collage {
  9. display: none;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <div class="wrap">
  15. <ul class="nav nav-tabs">
  16. <li><a href="{:url('market/devices')}">推广设备列表</a></li>
  17. <li class="active"><a href="{:url('market/deviceAdd')}">添加设备</a></li>
  18. </ul>
  19. <form method="post" class="form-horizontal js-ajax-form margin-top-20" action="{:url('market/deviceAdd')}">
  20. <div class="form-group">
  21. <label for="input-name" class="col-sm-2 control-label"><span class="form-required">*</span>设备名称</label>
  22. <div class="col-md-6 col-sm-6">
  23. <input type="text" class="form-control" id="input-name" name="name" placeholder="设备名称">
  24. </div>
  25. </div>
  26. <div class="form-group">
  27. <label for="input-api-key" class="col-sm-2 control-label"><span class="form-required">*</span>设备KEY</label>
  28. <div class="col-md-6 col-sm-6">
  29. <input type="text" class="form-control" id="input-api-key" name="api_key" placeholder="32位密钥">
  30. </div>
  31. </div>
  32. <div class="form-group">
  33. <label for="input-device_code" class="col-sm-2 control-label"><span class="form-required">*</span>序列号</label>
  34. <div class="col-md-6 col-sm-6">
  35. <input type="text" class="form-control" id="input-device_code" name="device_code" placeholder="唯一序列号">
  36. </div>
  37. </div>
  38. <div class="form-group">
  39. <label for="input-number" class="col-sm-2 control-label"><span class="form-required">*</span>编号</label>
  40. <div class="col-md-6 col-sm-6">
  41. <input type="text" class="form-control" id="input-number" name="number" >
  42. </div>
  43. </div>
  44. <div class="form-group">
  45. <label for="input-collage" class="col-sm-2 control-label">是否支持拼团</label>
  46. <div class="col-md-6 col-sm-4">
  47. <select class="form-control" name="is_collage" id="input-collage" onchange="changeCollage()">
  48. <option value="1">不支持</option>
  49. <option value="2">支持</option>
  50. </select>
  51. </div>
  52. </div>
  53. <div class="form-group">
  54. <label for="input-price" class="col-sm-2 control-label"><span class="form-required">*</span>价格</label>
  55. <div class="col-md-6 col-sm-6">
  56. <input type="text" class="form-control" id="input-price" name="price" >
  57. </div>
  58. </div>
  59. <div class="form-group">
  60. <label for="input-color_price" class="col-sm-2 control-label"><span class="form-required">*</span>彩印价格</label>
  61. <div class="col-md-6 col-sm-6">
  62. <input type="text" class="form-control" id="input-color_price" name="color_price" >
  63. </div>
  64. </div>
  65. <div class="form-group collage">
  66. <label for="input-collage_price" class="col-sm-2 control-label"><span class="form-required">*</span>拼团价格</label>
  67. <div class="col-md-6 col-sm-6">
  68. <input type="text" class="form-control" id="input-collage_price" name="collage_price" >
  69. </div>
  70. </div>
  71. <div class="form-group collage">
  72. <label for="input-collage_color_price" class="col-sm-2 control-label"><span class="form-required">*</span>拼团彩印价格</label>
  73. <div class="col-md-6 col-sm-6">
  74. <input type="text" class="form-control" id="input-collage_color_price" name="collage_color_price" >
  75. </div>
  76. </div>
  77. <div class="form-group collage">
  78. <label for="input-collage_num" class="col-sm-2 control-label"><span class="form-required">*</span>成团人数</label>
  79. <div class="col-md-6 col-sm-6">
  80. <input type="text" class="form-control" id="input-collage_num" name="collage_num" >
  81. </div>
  82. </div>
  83. <div class="form-group">
  84. <label for="input-address" class="col-sm-2 control-label"><span class="form-required">*</span>定位地址</label>
  85. <div class="col-md-6 col-sm-6">
  86. <input type="text" class="form-control" id="input-address" name="address" placeholder="定位获取" ><span>移动定位点击选择地址</span>
  87. </div>
  88. </div>
  89. <div class="form-group">
  90. <label class="col-sm-2 control-label"><span class="form-required"></span>定位</label>
  91. <div class="col-md-6 col-sm-8">
  92. <input type="hidden" id="lng" name="lng">
  93. <input type="hidden" id="lat" name="lat">
  94. <input type="hidden" id="province" name="province">
  95. <input type="hidden" id="city" name="city">
  96. <input type="hidden" id="district" name="district">
  97. <div id="map">获取定位</div>
  98. </div>
  99. </div>
  100. <div class="form-group">
  101. <div class="col-sm-offset-2 col-sm-10">
  102. <button type="submit" class="btn btn-primary js-ajax-submit">{:lang('SAVE')}</button>
  103. <a class="btn btn-default" href="javascript:history.back(-1);">{:lang('BACK')}</a>
  104. </div>
  105. </div>
  106. </form>
  107. </div>
  108. <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak={$mapKey|default=''}"></script>
  109. <script src="__STATIC__/js/admin.js"></script>
  110. <script>
  111. $(function(){
  112. var map = new BMap.Map('map');
  113. var poi = new BMap.Point(108.360806, 22.819143);
  114. map.enableScrollWheelZoom();
  115. map.centerAndZoom(poi, 12);
  116. var mark = new BMap.Marker(poi);
  117. map.addOverlay(mark);
  118. mark.addEventListener("dragend", showInfo);
  119. mark.enableDragging(); //可拖拽
  120. loadLocation();
  121. map.addEventListener("click",function(e){
  122. poi = new BMap.Point(e.point.lng, e.point.lat);
  123. mark = new BMap.Marker(poi);
  124. mark.addEventListener("dragend", showInfo);
  125. mark.enableDragging(); //可拖拽
  126. });
  127. /**
  128. * 获取地址
  129. * @param e
  130. */
  131. function showInfo(e){
  132. var gc = new BMap.Geocoder();
  133. gc.getLocation(e.point, function(rs){
  134. var addComp = rs.addressComponents;
  135. var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;//获取地址
  136. $("#province").val(addComp.province);
  137. $("#city").val(addComp.city);
  138. $("#district").val(addComp.district);
  139. $("#input-address").val(address);
  140. $("#lng").val(e.point.lng);
  141. $("#lat").val(e.point.lat);
  142. });
  143. }
  144. /**
  145. * 坐标转换
  146. * @param point
  147. * @returns {*}
  148. */
  149. function changePoint(point){
  150. var x_pi = 3.14159265358979324 * 3000.0 / 180.0;
  151. var x = point.lng - 0.0065;
  152. var y = point.lat - 0.006;
  153. var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
  154. var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
  155. point.lng = z * Math.cos(theta);
  156. point.lat = z * Math.sin(theta);
  157. return point;
  158. }
  159. // 定位
  160. function loadLocation() {
  161. var geolocation = new BMap.Geolocation();
  162. geolocation.getCurrentPosition(function (r) {
  163. console.log(r);
  164. if (this.getStatus() == BMAP_STATUS_SUCCESS) {
  165. poi = new BMap.Point(r.point.lng, r.point.lat);
  166. mark = new BMap.Marker(poi);
  167. mark.addEventListener("dragend", showInfo);
  168. mark.enableDragging(); //可拖拽
  169. var address = r.address.province+' '+r.address.city +' '+r.address.district;
  170. $("#lng").val(poi.lng);
  171. $("#lat").val(poi.lat);
  172. $("#province").val(r.address.province);
  173. $("#city").val(r.address.city);
  174. $("#district").val(r.address.district);
  175. $("#input-address").val(address);
  176. setTimeout(function(){
  177. showMsg('您的城市:'+r.address.city);
  178. }, 500)
  179. }
  180. else {
  181. showMsg('获取您的位置信息失败');
  182. }
  183. }, {enableHighAccuracy: true});
  184. }
  185. })
  186. function changeCollage(){
  187. var _this = $("#input-collage");
  188. if(_this.val() == 2){
  189. $(".collage").show();
  190. }else{
  191. $(".collage").hide()
  192. }
  193. }
  194. </script>
  195. </body>
  196. </html>