kucun_body.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6. <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7. <title>title</title>
  8. <link rel="stylesheet" href="../../css/api.css"/>
  9. <link rel="stylesheet" href="../../css/aui.css"/>
  10. <link rel="stylesheet" href="../../css/weui.min.css"/>
  11. <link rel="stylesheet" href="../../css/html.css"/>
  12. <link rel="stylesheet" href="../../css/xunjia_wuliao.css"/>
  13. <style>
  14. #app {
  15. padding-bottom: 3rem;
  16. }
  17. .weui_cell:before {
  18. border-top: 0px !important;
  19. }
  20. .weui_btn {
  21. border-radius: 0px !important;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <div id="app" v-cloak>
  27. <article style="bottom: 0;">
  28. <div class="weui_cells weui_cells_access zmq-width-90 zmq-bg-transparent">
  29. <a class="weui_cell zmq-margin-top-10 zmq-bg-white zmq-radius-10" href="javascript:;" v-for="(store,index) in list">
  30. <div class="weui_cell_bd weui_cell_primary">
  31. <div class="wuliao-title zmq-border-bottom-1">
  32. <label class="zmq-text-msg">商品编码:{{store.bizGoodsDto.serialNumber}}</label>
  33. <!--<span class="zmq-text-msg" >-{{store.statusName}}</span>-->
  34. <span class="require zmq-line-1 zmq-float-right zmq-position-absolute">总库存:<label class="zmq-text-msg">{{store.tatalStock}}</label></span>
  35. </div>
  36. <div class="wuliao-title">
  37. <label class="zmq-text-font-06 zmq-margin-vertical-5">{{store.bizGoodsDto.comName}}</label>
  38. </div>
  39. <div class="detail clearfix">
  40. <span class="date zmq-text-explain">上架时间:{{store.createTime}}</span>
  41. </div>
  42. </div> </a>
  43. </div>
  44. </article>
  45. <img class="zmq-img-nodata" v-show="hasData == false" src="../../image/nodata.png" />
  46. <div v-show="upLock == false" class="zmq-text-explain zmq-margin-top-10 zmq-textAlign-center zmq-margin-bottom-10 zmq-block-text">
  47. 已无更多数据
  48. </div>
  49. </div>
  50. </body>
  51. <script type="text/javascript" src="../../script/api.js"></script>
  52. <script type="text/javascript" src="../../script/aui-scroll.js"></script>
  53. <script type="text/javascript" src="../../script/vue.js"></script>
  54. <script type="text/javascript" src="../../script/httpRequest.js"></script>
  55. <script type="text/javascript" src="../../script/vue_plugins.js"></script>
  56. <script type="text/javascript">
  57. apiready = function() {
  58. new Vue({
  59. el : '#app',
  60. data : {
  61. retariler_id : '',
  62. // 获取库存url
  63. getStockUrl : 'getKucunInfoUrl',
  64. type : '',
  65. list : [],
  66. // 是否有数据
  67. hasData : false,
  68. // 分页查询
  69. upLock : true,
  70. current : 1,
  71. total : 1,
  72. },
  73. methods : {
  74. init : function() {
  75. var _this = this;
  76. this.retariler_id = $api.getStorage("retailerid");;
  77. _this.getStock();
  78. this.configHeaderRefush(function() {
  79. _this.upLock = true;
  80. _this.current = 1;
  81. _this.downData = 'down';
  82. _this.getStock();
  83. })
  84. this.configBottomRefush(function(status) {
  85. if (_this.hasData == true) {
  86. // 开启上拉加载
  87. if (_this.total > _this.current) {
  88. _this.downData = 'up';
  89. _this.current = _this.current + 1;
  90. _this.getList();
  91. } else {
  92. // 上啦没有数据了
  93. _this.upLock = false;
  94. }
  95. }
  96. })
  97. },
  98. // 获取库存
  99. getStock : function() {
  100. var data = {
  101. retarilerId : this.retariler_id,
  102. current : this.current,
  103. }, _this = this;
  104. this.$post(this.getStockUrl, data, function(ret) {
  105. if (ret.code == 0) {
  106. _this.total = ret.page.pages;
  107. if (_this.downData == 'up') {
  108. _this.list = _this.list.concat(ret.page.records);
  109. } else {
  110. _this.list = ret.page.records;
  111. if (_this.list.length > 0) {
  112. _this.hasData = true;
  113. }
  114. }
  115. }
  116. })
  117. },
  118. // 查看商品详情
  119. loonInfo : function(id){
  120. var page = {
  121. id : id,
  122. page : 'get'
  123. }
  124. this.goWin("orderScan_win","orderScan_win.html",page);
  125. }
  126. },
  127. mounted : function() {
  128. this.init();
  129. }
  130. })
  131. }
  132. </script>
  133. </html>
  134. <!DOCTYPE html>
  135. <html lang="en">
  136. <head>
  137. <meta charset="UTF-8">
  138. <title>简约表格插件</title>
  139. <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  140. <script src="../../script/jquery.min.js"></script>
  141. <script src="../../script/tableXR.js"></script>
  142. <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
  143. <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
  144. <link rel="stylesheet" type="text/css" href="../../css/base.css"/>
  145. <link rel="stylesheet" type="text/css" href="../../css/html.css"/>
  146. <link type="text/css" rel="stylesheet" href="../../css/shaixuan.css">
  147. <script src="../../script/jquery.min.js"></script>
  148. <script src="../../script/shaixuan.js"></script>
  149. <style>
  150. table.gridtable {
  151. font-family: verdana, arial, sans-serif;
  152. font-size: 11px;
  153. color: #333333;
  154. border-width: 1px;
  155. border-color: #666666;
  156. border-collapse: collapse;
  157. width: 100%;
  158. margin-top: 0.5rem;
  159. }
  160. table.gridtable th {
  161. border-width: 1px;
  162. padding: 8px;
  163. border-style: solid;
  164. border-color: #007f86;
  165. background-color: #007f86;
  166. color: #fff;
  167. text-align: center;
  168. }
  169. table.gridtable td {
  170. border-width: 1px;
  171. padding: 8px;
  172. border-style: solid;
  173. border-color: #666666;
  174. text-align: center;
  175. color: #007f86;
  176. }
  177. table.gridtable tr:nth-child(odd) {
  178. background: #d1f8ff !important;
  179. }
  180. table tr:nth-child(even) {
  181. background: #fff !important;
  182. }
  183. .aui-flex {
  184. display: flex;
  185. display: -webkit-flex;
  186. margin: 10px;
  187. float: right;
  188. }
  189. .aui-input {
  190. width: 2rem !important;
  191. border: 1px solid #999 !important;
  192. height: 1.3 rem !important;
  193. margin: 0 10px !important;
  194. }
  195. .slide {
  196. height: 200px
  197. }
  198. .slide li a {
  199. font-size: 0.6 rem;
  200. }
  201. .aui-content {
  202. padding-bottom: 3rem;
  203. padding-top: 40px;
  204. }
  205. #screen {
  206. /*position: fixed;*/
  207. z-index: 105;
  208. width: 100%
  209. }
  210. </style>
  211. </head>
  212. <body>
  213. <div id="app" v-cloak>
  214. <!-- <section class="job-module" id="screen">
  215. <dl class="retrie">
  216. <dt>
  217. <a class="zmq-text-done zmq-text-font-07" href="javascript:;">经销商 </a>
  218. <div class="zmq-text-font-06 zmq-text-msg" style="height: 40px;line-height: 40px;">{{chooseSupplierName}}</div>
  219. </dt>
  220. <dd class="area">
  221. <ul class="slide downlist">
  222. <li v-for="(i,index) in supplierList" v-on:click="doneThisSupplier(i.agentId,i.agentDto.agentName)">
  223. <a class="zmq-text-font-06" href="#">{{i.agentDto.agentName}}</a>
  224. </li>
  225. </ul>
  226. </dd>
  227. </dl>
  228. </section>-->
  229. <div v-show = "hasData == true">
  230. <table class="gridtable">
  231. <tr>
  232. <th>规格</th><th>花纹</th><th>品牌</th><th>库存</th><th>可销售库存</th>
  233. </tr>
  234. <tr v-for="(item,index) in stickList2">
  235. <td>{{item.bizGoodsDto.spec}}</td><td>{{item.bizGoodsDto.model}}</td><td>{{item.bizGoodsDto.brand}}</td><td>{{item.tatalStock}}</td><td>{{item.onsaleStock}}</td>
  236. </tr>
  237. </table>
  238. <div class="aui-flex">
  239. <div class="zmq-text-font-06 zmq-lineHeight-13">
  240. 上一页
  241. </div>
  242. <div>
  243. <input type="text" class="aui-input zmq-text-font-06 zmq-textAlign-center" style="height: 1.2rem"/>
  244. </div>
  245. <div class="zmq-text-font-06 zmq-lineHeight-13">
  246. 下一页
  247. </div>
  248. <div class="zmq-text-font-06 zmq-lineHeight-13 zmq-margin-level-5">
  249. 共 {{total}} 页
  250. </div>
  251. </div>
  252. </div>
  253. <img class="zmq-img-nodata" v-show="hasData == false" src="../../image/nodata.png" />
  254. </div>
  255. </body>
  256. <script type="text/javascript" src="../../script/api.js"></script>
  257. <script type="text/javascript" src="../../script/vue.js"></script>
  258. <script type="text/javascript" src="../../script/httpRequest.js"></script>
  259. <script type="text/javascript" src="../../script/vue_plugins.js"></script>
  260. <script type="text/javascript">
  261. apiready = function() {
  262. new Vue({
  263. el : '#app',
  264. data : {
  265. retariler_id : '',
  266. // 获取经销商列表
  267. getSupplierUrl : 'getSupplierListUrl',
  268. supplierList : [],
  269. chooseSupplierName : '请先选择一个经销商',
  270. // 根据经销商获取库存
  271. getStockListUrl : 'checkStoreUrl',
  272. stockList : [],
  273. // 获取库存url
  274. getStockUrl : 'getKucunInfoUrl',
  275. stickList2 : [], // 库存
  276. // 商品列表
  277. // stockList : [{
  278. // specs : '7.50R16LT',
  279. // pattern : 'JT456',
  280. // brand : '金宇',
  281. // materialName : '外胎:2001933202191'
  282. // },{
  283. // specs : '7.50R16LT',
  284. // pattern : 'JT456',
  285. // brand : '金宇',
  286. // materialName : '外胎:2001933202191'
  287. // },{
  288. // specs : '7.50R16LT',
  289. // pattern : 'JT456',
  290. // brand : '金宇',
  291. // materialName : '外胎:2001933202191'
  292. // },{
  293. // specs : '7.50R16LT',
  294. // pattern : 'JT456',
  295. // brand : '金宇',
  296. // materialName : '外胎:2001933202191'
  297. // },{
  298. // specs : '7.50R16LT',
  299. // pattern : 'JT456',
  300. // brand : '金宇',
  301. // materialName : '外胎:2001933202191'
  302. // },{
  303. // specs : '7.50R16LT',
  304. // pattern : 'JT456',
  305. // brand : '金宇',
  306. // materialName : '外胎:2001933202191'
  307. // },{
  308. // specs : '7.50R16LT',
  309. // pattern : 'JT456',
  310. // brand : '金宇',
  311. // materialName : '外胎:2001933202191'
  312. // },{
  313. // specs : '7.50R16LT',
  314. // pattern : 'JT456',
  315. // brand : '金宇',
  316. // materialName : '外胎:2001933202191'
  317. // },{
  318. // specs : '7.50R16LT',
  319. // pattern : 'JT456',
  320. // brand : '金宇',
  321. // materialName : '外胎:2001933202191'
  322. // }],
  323. // 是否有数据
  324. hasData : true,
  325. // 购物车数量
  326. badge : 0,
  327. // 是否显示背景
  328. chooseInfo : false,
  329. // 是否显示模板
  330. showModal : false,
  331. // ss : [{},{},{},{},{},{},{},{}]
  332. // 分页
  333. total : 1,
  334. currPage : 1,
  335. },
  336. methods : {
  337. init : function() {
  338. // 配置筛选
  339. var _this = this;
  340. this.retariler_id = $api.getStorage("retailerid");
  341. this.getStock2();
  342. // this.getSupplierList();
  343. },
  344. // 获取库存列表
  345. getStock2 : function(){
  346. var data = {
  347. retailerId : this.retariler_id,
  348. currPage : this.currPage,
  349. }, _this = this;
  350. this.$post(this.getStockUrl, data, function(ret) {
  351. if (ret.code == 0) {
  352. _this.total = ret.page.total;
  353. _this.stickList2 = ret.page.records;
  354. if(_this.stickList2.length > 0){
  355. _this.hasData = true;
  356. }
  357. }
  358. })
  359. },
  360. // 选择了这个经销商
  361. doneThisSupplier : function(id, name) {
  362. this.chooseSupplierName = name;
  363. this.hideList();
  364. this.getSupplierStore(id);
  365. },
  366. // 隐藏列表i
  367. hideList : function() {
  368. $(".retrie dt a").removeClass('up');
  369. $('.downlist').hide();
  370. $('.mask').hide();
  371. },
  372. // 获取经销商下的库存
  373. getSupplierStore : function(id) {
  374. var data = {
  375. agentId : id,
  376. url : 'json',
  377. type : 'body'
  378. }, _this = this;
  379. this.$post(this.getStockListUrl, data, function(ret) {
  380. if (ret.code == 0) {
  381. _this.total = ret.page.total;
  382. _this.stockList = ret.page.records;
  383. if (ret.page.records.length > 0) {
  384. _this.hasData = true;
  385. }
  386. }
  387. })
  388. },
  389. // 配置筛选
  390. config : function() {
  391. var _this = this;
  392. $('.retrie dt a').click(function() {
  393. var $t = $(this);
  394. if ($t.hasClass('up')) {
  395. $(".retrie dt a").removeClass('up');
  396. $('.downlist').hide();
  397. $('.mask').hide();
  398. _this.showModal = false;
  399. api.setFrameAttr({
  400. name : api.frameName,
  401. bounces : true
  402. });
  403. } else {
  404. _this.showModal = true;
  405. api.setFrameAttr({
  406. name : api.frameName,
  407. bounces : false
  408. });
  409. $(".retrie dt a").removeClass('up');
  410. $('.downlist').hide();
  411. $t.addClass('up');
  412. $('.downlist').eq($(".retrie dt a").index($(this)[0])).show();
  413. $('.mask').show();
  414. }
  415. });
  416. $(".area ul li a:contains('" + $('#area').text() + "')").addClass('selected');
  417. $(".wage ul li a:contains('" + $('#wage').text() + "')").addClass('selected');
  418. },
  419. // 获取经销商列表
  420. getSupplierList : function() {
  421. var data = {
  422. retailer_id : this.retariler_id,
  423. url : 'json',
  424. type : 'body'
  425. }, _this = this;
  426. this.$post(this.getSupplierUrl, data, function(ret) {
  427. if (ret.code == 0 || ret.code == '0') {
  428. _this.supplierList = ret.list;
  429. _this.config();
  430. }
  431. })
  432. },
  433. // 获取库存
  434. getStock : function() {
  435. var data = {
  436. retailerId : this.retariler_id
  437. }, _this = this;
  438. this.$post(this.getStockUrl, data, function(ret) {
  439. if (ret.code == 0 || ret.code == '0') {
  440. _this.stockList = ret.page.records;
  441. if (_this.stockList.length == 0) {
  442. _this.hasData = false;
  443. }
  444. }
  445. })
  446. },
  447. // 查看详情
  448. lookInfo : function(id) {
  449. var param = {
  450. id : id,
  451. }
  452. this.goWin('storeInfo_win', '../store/storeInfo_win.html', param);
  453. },
  454. // 添加商品到购物车 materialId materialCode retailerId amount -- 选择产品规格
  455. addCar : function(index, type) {
  456. var param = {
  457. shopInfo : this.stockList[index],
  458. type : type
  459. }
  460. this.sendEvent("showInfo", param);
  461. },
  462. demo : function(e) {
  463. e.preventDefault()
  464. }
  465. },
  466. mounted : function() {
  467. this.init();
  468. }
  469. })
  470. }
  471. </script>
  472. </html>