form.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358
  1. {extend name="default/base/base_member" /}
  2. {block name="member_main"}
  3. <div class="dsm-default-form fl">
  4. <form method="post" action="" id="address_form">
  5. {if $Think.config.ds_config.chain_isuse}
  6. <dl>
  7. <dt>&nbsp;</dt>
  8. <dd> <a href="{:url('Memberaddress/chain_add')}" class="dsm-btn-mini dsm-btn-orange"><i class="icon-flag"></i>{$Think.lang.use_self_service_station}</a>
  9. <p class="hint">{$Think.lang.address_description}<br/>{$Think.lang.receiving_paper}</p> </dd>
  10. </dl>
  11. {/if}
  12. <dl>
  13. <dt>{$Think.lang.consignee}:</dt>
  14. <dd>
  15. <span class="w400">
  16. <input type="text" class="text" maxlength="20" name="true_name" value="{$address.address_realname}">
  17. </span>
  18. </dd>
  19. </dl>
  20. <dl>
  21. <dt>{$Think.lang.area}:</dt>
  22. <dd>
  23. <span class="w400">
  24. <div {if $Think.config.ds_config.mapak_type eq '2'}onclick="change_map()"{/if}>
  25. <input type="hidden" value="{$address.city_id|default=''}" name="city_id" id="_area_2">
  26. <input type="hidden" value="{$address.area_id|default=''}" name="area_id" id="_area">
  27. <input type="hidden" name="area_info" id="region" value="{$address.area_info|default=''}"/>
  28. </div>
  29. </span>
  30. </dd>
  31. </dl>
  32. <dl>
  33. <dt>{$Think.lang.street_address}:</dt>
  34. <dd>
  35. <span class="w400">
  36. <input type="text" class="text" maxlength="20" name="address" id="address" value="{$address.address_detail}" {if $Think.config.ds_config.mapak_type eq '2'}onkeyup="search($(this).val());"{/if}>
  37. </span>
  38. </dd>
  39. </dl>
  40. <dl>
  41. <dt>{$Think.lang.tel_phone}:</dt>
  42. <dd>
  43. <span class="w400">
  44. <input type="text" class="text" maxlength="20" name="tel_phone" value="{$address.address_tel_phone}">
  45. </span>
  46. </dd>
  47. </dl>
  48. <dl>
  49. <dt>{$Think.lang.mob_phone}:</dt>
  50. <dd>
  51. <span class="w400">
  52. <input type="text" class="text" maxlength="20" name="mob_phone" value="{$address.address_mob_phone}">
  53. </span>
  54. </dd>
  55. </dl>
  56. {if !isset($address.chain_id) || $address.chain_id==0}
  57. <dl>
  58. <dt>{$Think.lang.default}:</dt>
  59. <dd>
  60. <input type="checkbox" class="checkbox vm mr5" name="is_default" id="is_default" value="1" {if $address.address_is_default eq '1'}checked="checked"{/if} />
  61. <label for="is_default">{$Think.lang.set_default_shipping_address}</label>
  62. </dd>
  63. </dl>
  64. {/if}
  65. <dl>
  66. <dt>{$Think.lang.map_location}:</dt>
  67. <dd>
  68. <input name="longitude" id="longitude" value="{$address.address_longitude}" type="hidden" />
  69. <input name="latitude" id="latitude" value="{$address.address_latitude}" type="hidden" />
  70. <div id="allmap" style="width:530px;height: 350px;margin-top: 20px"></div>
  71. </dd>
  72. </dl>
  73. <dl class="bottom">
  74. <dt></dt>
  75. <dd>
  76. <input type="submit" class="submit" value="{$Think.lang.ds_submit}">
  77. </dd>
  78. </dl>
  79. </form>
  80. </div>
  81. <script src="{$Think.PLUGINS_SITE_ROOT}/mlselection.js"></script>
  82. <!--{if $Think.config.ds_config.mapak_type eq '1'}-->
  83. <script type="text/javascript">
  84. window._AMapSecurityConfig = {
  85. securityJsCode:"{$Think.config.ds_config.gaode_jscode}",
  86. }
  87. </script>
  88. <script type="text/javascript" src="//webapi.amap.com/maps?v=2.0&key={$Think.config.ds_config.gaode_ak}"></script>
  89. <!--{else}-->
  90. <script type="text/javascript" src="{$Think.HTTP_TYPE}api.map.baidu.com/api?v=2.0&ak={$Think.config.ds_config.baidu_ak}"></script>
  91. <!--{/if}-->
  92. <script>
  93. var local;
  94. var map;
  95. var lst_name='';
  96. function change_map(){
  97. var name=$("#area_info").val();
  98. if(name!='' && lst_name!=name){
  99. lst_name=name;
  100. map.setCurrentCity(name);
  101. map.centerAndZoom(name,16);
  102. map.clearOverlays();
  103. local.search(name);
  104. }
  105. }
  106. $(function(){
  107. if({$Think.config.ds_config.mapak_type} == '1'){
  108. var map = new AMap.Map("allmap", {
  109. resizeEnable: true,
  110. zoom:15
  111. });
  112. var lng = '{$address.address_longitude}';
  113. var lat = '{$address.address_latitude}';
  114. if(!lng && !lat){
  115. var map = new AMap.Map("allmap", {
  116. resizeEnable: true,
  117. zoom:15
  118. });
  119. //获取用户所在城市信息
  120. AMap.plugin("AMap.CitySearch", function () {
  121. var citySearch = new AMap.CitySearch();
  122. citySearch.getLocalCity(function (status, result) {
  123. if (status === "complete" && result.info === "OK") {
  124. // 查询成功,result即为当前所在城市信息
  125. AMap.plugin("AMap.Geocoder", function () {
  126. var geocoder = new AMap.Geocoder({
  127. // city 指定进行编码查询的城市,支持传入城市名、adcode 和 citycode
  128. city: result.adcode,
  129. });
  130. geocoder.getLocation(result.city, function(status1, result1) {
  131. var location = result1.geocodes[0].location;
  132. var lng = location.lng;
  133. var lat = location.lat;
  134. //初始化定位
  135. var marker = new AMap.Marker({
  136. position: new AMap.LngLat(lng, lat),
  137. icon: '//api.map.baidu.com/images/marker_red_sprite.png',
  138. zoom: 15
  139. });
  140. map.add(marker);
  141. document.getElementById("longitude").value = lng;
  142. document.getElementById("latitude").value = lat;
  143. map.panTo([lng, lat]);
  144. //搜索定位
  145. AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], function(){
  146. var auto = new AMap.AutoComplete({input:"address"});
  147. var placeSearch = new AMap.PlaceSearch({
  148. map: map
  149. }); //构造地点查询类
  150. auto.on("select", select);//注册监听,当选中某条记录时会触发
  151. function select(e) {
  152. placeSearch.setCity(e.poi.adcode);
  153. placeSearch.search(e.poi.name); //关键字查询查询
  154. }
  155. });
  156. //点击定位
  157. map.on('click', function(e) {
  158. document.getElementById("longitude").value = e.lnglat.getLng();
  159. document.getElementById("latitude").value = e.lnglat.getLat();
  160. if(marker){
  161. map.remove(marker);
  162. }
  163. marker = new AMap.Marker({
  164. position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()),
  165. icon: '//api.map.baidu.com/images/marker_red_sprite.png',
  166. anchor: 'bottom-center',
  167. zoom: 15
  168. });
  169. map.add(marker);
  170. });
  171. });
  172. });
  173. }
  174. });
  175. });
  176. }else{
  177. map.panTo([lng, lat]);
  178. //初始化定位
  179. var marker = new AMap.Marker({
  180. position: new AMap.LngLat(lng, lat),
  181. icon: '//api.map.baidu.com/images/marker_red_sprite.png',
  182. zoom: 15
  183. });
  184. map.add(marker);
  185. document.getElementById("longitude").value = lng;
  186. document.getElementById("latitude").value = lat;
  187. //搜索定位
  188. AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], function(){
  189. var auto = new AMap.AutoComplete({input:"address"});
  190. var placeSearch = new AMap.PlaceSearch({
  191. map: map
  192. }); //构造地点查询类
  193. auto.on("select", select);//注册监听,当选中某条记录时会触发
  194. function select(e) {
  195. placeSearch.setCity(e.poi.adcode);
  196. placeSearch.search(e.poi.name); //关键字查询查询
  197. }
  198. });
  199. //点击定位
  200. map.on('click', function(e) {
  201. document.getElementById("longitude").value = e.lnglat.getLng();
  202. document.getElementById("latitude").value = e.lnglat.getLat();
  203. if(marker){
  204. map.remove(marker);
  205. }
  206. marker = new AMap.Marker({
  207. position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()),
  208. icon: '//api.map.baidu.com/images/marker_red_sprite.png',
  209. anchor: 'bottom-center',
  210. zoom: 15
  211. });
  212. map.add(marker);
  213. });
  214. }
  215. }else{
  216. map = new BMap.Map("allmap");
  217. var lng = '{$address.address_longitude}';
  218. var lat = '{$address.address_latitude}';
  219. if(!lng && !lat){
  220. var geolocation = new BMap.Geolocation();
  221. geolocation.getCurrentPosition(function (r) {
  222. if (this.getStatus() == BMAP_STATUS_SUCCESS) {
  223. var lng = r.point.lng;
  224. var lat = r.point.lat;
  225. var point = new BMap.Point(lng, lat);
  226. map.centerAndZoom(point, 16);
  227. map.addControl(new BMap.NavigationControl());
  228. map.enableScrollWheelZoom();
  229. var marker = new BMap.Marker(point); // 创建标注
  230. map.addOverlay(marker); // 将标注添加到地图中
  231. marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
  232. document.getElementById("longitude").value = lng;
  233. document.getElementById("latitude").value = lat;
  234. } else {
  235. layer.msg('failed' + this.getStatus());
  236. }
  237. }, {enableHighAccuracy: true})
  238. }else{
  239. var point = new BMap.Point(lng, lat);
  240. map.centerAndZoom(point, 16);
  241. map.addControl(new BMap.NavigationControl());
  242. map.enableScrollWheelZoom();
  243. var marker = new BMap.Marker(point); // 创建标注
  244. map.addOverlay(marker); // 将标注添加到地图中
  245. marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
  246. }
  247. var options = {
  248. onSearchComplete: function(results){
  249. // 判断状态是否正确
  250. if (local.getStatus() == BMAP_STATUS_SUCCESS){
  251. if(results.getCurrentNumPois()>0){
  252. map.clearOverlays(); //清除标注 或者可以把market 放入数组
  253. var point = new BMap.Point(results.getPoi(0).point.lng , results.getPoi(0).point.lat);
  254. var marker = new BMap.Marker(point);
  255. map.centerAndZoom(point, 16);
  256. map.addOverlay(marker);
  257. marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
  258. document.getElementById("longitude").value = results.getPoi(0).point.lng;
  259. document.getElementById("latitude").value = results.getPoi(0).point.lat;
  260. }
  261. }
  262. }
  263. };
  264. local = new BMap.LocalSearch(map, options);
  265. map.addEventListener("click", function(e){
  266. // alert(e.point.lng + ", " + e.point.lat);
  267. map.clearOverlays(); //清除标注 或者可以把market 放入数组
  268. var point = new BMap.Point(e.point.lng , e.point.lat);
  269. var marker = new BMap.Marker(point);
  270. map.addOverlay(marker);
  271. marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
  272. document.getElementById("longitude").value = e.point.lng;
  273. document.getElementById("latitude").value = e.point.lat;
  274. });
  275. }
  276. })
  277. $(function () {
  278. $("#region").ds_region();
  279. });
  280. $(document).ready(function () {
  281. $('#address_form').validate({
  282. submitHandler: function (form) {
  283. ds_ajaxpost('address_form','url','{:url('Memberaddress/index')}');
  284. },
  285. rules: {
  286. true_name: {
  287. required: true
  288. },
  289. address: {
  290. required: true
  291. },
  292. tel_phone: {
  293. required: check_phone,
  294. minlength: 6,
  295. maxlength: 20
  296. },
  297. mob_phone: {
  298. required: check_phone,
  299. minlength: 11,
  300. maxlength: 11,
  301. digits: true
  302. }
  303. },
  304. messages: {
  305. true_name: {
  306. required: '{$Think.lang.please_fill_name_consignee}'
  307. },
  308. address: {
  309. required: '{$Think.lang.please_fill_address_consignee}'
  310. },
  311. tel_phone: {
  312. required: '{$Think.lang.fill_least_one_phone}',
  313. minlength: '{$Think.lang.please_correct_fill_phone_number}',
  314. maxlength: '{$Think.lang.please_correct_fill_phone_number}'
  315. },
  316. mob_phone: {
  317. required: '{$Think.lang.fill_least_one_phone}',
  318. minlength: '{$Think.lang.please_fill_phone_number_correctly}',
  319. maxlength: '{$Think.lang.please_fill_phone_number_correctly}',
  320. digits: '{$Think.lang.please_fill_phone_number_correctly}'
  321. }
  322. }
  323. });
  324. function check_phone() {
  325. return ($('input[name="tel_phone"]').val() == '' && $('input[name="mob_phone"]').val() == '');
  326. }
  327. });
  328. </script>
  329. {/block}