addSupplier_body.html 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  6. <meta name="viewport" content="height=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
  7. <title></title>
  8. <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
  9. <link rel="stylesheet" href="../../css/html.css"/>
  10. <style>
  11. .submit {
  12. text-align: center;
  13. }
  14. @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  15. .aui-list .aui-list-item {
  16. background-image: none;
  17. }
  18. }
  19. @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  20. .aui-list {
  21. background-image: none;
  22. }
  23. }
  24. .aui-list .aui-list-header {
  25. padding: .5rem;
  26. }
  27. body {
  28. padding-bottom: 3rem;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <div class="aui-content aui-margin-b-15 zmq-width-90 zmq-margin-top-10 zmq-radius-5" id="app" v-cloak>
  34. <ul class="aui-list aui-form-list zmq-border-none">
  35. <li class="aui-list-header zmq-bg-white zmq-flex zmq-flex-start zmq-text-msg zmq-text-font-08">
  36. <img src="../../image/drawable-xhdpi/jjs.png" class="zmq-icon-inline-middle" />供货商信息
  37. </li>
  38. <div class="zmq-line-level zmq-width-90 zmq-bg-shallow"></div>
  39. <li class="aui-list-item zmq-border-none">
  40. <div class="aui-list-item-inner">
  41. <div class="aui-list-item-label">
  42. 供货商
  43. </div>
  44. <div class="aui-list-item-input">
  45. <input type="text" placeholder="请输入供货商名称" v-model = "info.supplierName" />
  46. </div>
  47. </div>
  48. </li>
  49. <div class="zmq-line-level zmq-width-90 zmq-bg-shallow"></div>
  50. <li class="aui-list-item zmq-border-none">
  51. <div class="aui-list-item-inner">
  52. <div class="aui-list-item-label">
  53. 联系人
  54. </div>
  55. <div class="aui-list-item-input">
  56. <input type="text" placeholder="请输入供货商联系人" v-model = "info.contacts" />
  57. </div>
  58. </div>
  59. </li>
  60. <div class="zmq-line-level zmq-width-90 zmq-bg-shallow"></div>
  61. <li class="aui-list-item">
  62. <div class="aui-list-item-inner">
  63. <div class="aui-list-item-label">
  64. 联系方式
  65. </div>
  66. <div class="aui-list-item-input">
  67. <input type="tel" placeholder="请输入供货商联系方式" v-model = "info.phone" />
  68. </div>
  69. </div>
  70. </li>
  71. <div class="zmq-line-level zmq-width-90 zmq-bg-shallow"></div>
  72. <li class="aui-list-item">
  73. <div class="aui-list-item-inner">
  74. <div class="aui-list-item-label">
  75. 省市区
  76. </div>
  77. <div class="aui-list-item-input" v-on:click="chooseArea">
  78. <div >
  79. {{info.area}}
  80. </div>
  81. </div>
  82. </div>
  83. </li>
  84. <div class="zmq-line-level zmq-width-90 zmq-bg-shallow"></div>
  85. <li class="aui-list-item">
  86. <div class="aui-list-item-inner">
  87. <div class="aui-list-item-label">
  88. 详细地址
  89. </div>
  90. <div class="aui-list-item-input">
  91. <input type="text" placeholder="请输入供货商详细地址">
  92. </div>
  93. </div>
  94. </li>
  95. <div class="zmq-line-level zmq-width-90 zmq-bg-shallow"></div>
  96. <li class="aui-list-item">
  97. <div class="aui-list-item-inner">
  98. <div class="aui-list-item-label">
  99. 备注
  100. </div>
  101. <div class="aui-list-item-input">
  102. <input type="text" placeholder="请输入备注" v-model = "info.remark"/>
  103. </div>
  104. </div>
  105. </li>
  106. </ul>
  107. <div class="zmq-footer-fixed zmq-padding-vertical-5">
  108. <div class="zmq-width-90 zmq-btn-img zmq-padding-vertical-10 zmq-textAlign-center zmq-text-white" v-on:click="sumbilt">
  109. 提交信息
  110. </div>
  111. </div>
  112. </div>
  113. <!--<div class="register" id="app">
  114. <div class="content">
  115. <form action="">
  116. <div class="message">
  117. <input type="text" placeholder="供货商名称" v-model = "info.supplierName"/>
  118. <input type="text" placeholder="联系人" v-model = "info.contacts"/>
  119. <input type="tel" placeholder="电话" />
  120. <input type="text" placeholder="点击选择门店所在省市" readonly="readonly" v-model = "info.area" v-on:click="chooseArea"/>
  121. <input type="text" placeholder="请输入详细地址" />
  122. <input type="text" placeholder="备注" v-model = "info.remark"/>
  123. </div>
  124. <div class="submit" v-on:click="sumbilt">
  125. 提交
  126. </div>
  127. </form>
  128. </div>
  129. </div>-->
  130. </body>
  131. <script type="text/javascript" src="../../script/api.js"></script>
  132. <script type="text/javascript" src="../../script/vue.js"></script>
  133. <script type="text/javascript" src="../../script/httpRequest.js"></script>
  134. <script type="text/javascript" src="../../script/vue_plugins.js"></script>
  135. <script type="text/javascript">
  136. // 获取所在省市,然后填写详细地址
  137. apiready = function() {
  138. new Vue({
  139. el : '#app',
  140. data : {
  141. retariler_id : '',
  142. // 选择省市区
  143. UIActionSelector : '',
  144. // 选择省市区的文件
  145. file : 'widget://res/city.json',
  146. // 提交的数据
  147. info : {
  148. supplierName : '',
  149. contacts : '',
  150. phone : '',
  151. area : '点击选择省市区',
  152. address : '',
  153. remark : '',
  154. site : '',
  155. retailerId : '',
  156. url : 'json',
  157. type : 'body',
  158. },
  159. area : {
  160. name : '供货商所在地',
  161. id : ''
  162. },
  163. // 添加供应商
  164. addSupplierUrl : 'addSupplierUrl',
  165. },
  166. methods : {
  167. init : function() {
  168. this.UIActionSelector = api.require('UIActionSelector');
  169. this.info.retailerId = $api.getStorage("retailerid");
  170. },
  171. // 点击选择省市区
  172. chooseArea : function() {
  173. var _this = this;
  174. this.chooseRegion(this.UIActionSelector, 3, this.file, function(ret) {
  175. _this.info.area = ret.level1 + ret.level2 + ret.level3;
  176. })
  177. },
  178. // 获取该省的经销商
  179. sumbilt : function() {
  180. if (this.info.area == "点击选择省市区") {
  181. api.toast({
  182. msg : '请选择供货商所在省市'
  183. });
  184. return;
  185. }
  186. this.info.site = this.info.area + this.info.address;
  187. var data = this.info, url = this.addSupplierUrl, _this = this;
  188. this.$post(url, data, function(ret) {
  189. if (ret.code == 0) {
  190. api.toast({
  191. msg : '添加供应商成功'
  192. });
  193. _this.sendEvent("refushView");
  194. setTimeout(function() {
  195. api.closeWin({
  196. });
  197. }, 300);
  198. }
  199. })
  200. },
  201. },
  202. mounted : function() {
  203. this.init();
  204. }
  205. })
  206. }
  207. </script>
  208. </html>