storeList1_body.html 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title>screening</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  7. <meta name="apple-touch-fullscreen" content="yes">
  8. <meta name="apple-mobile-web-app-capable" content="yes">
  9. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  10. <meta name="format-detection" content="telephone=no">
  11. <meta http-equiv="x-rim-auto-match" content="none"/>
  12. <meta name="HandheldFriendly" content="true"/>
  13. <link type="text/css" rel="stylesheet" href="../../css/aui.css">
  14. <link type="text/css" rel="stylesheet" href="../../css/html.css">
  15. <link type="text/css" rel="stylesheet" href="../../css/shaixuan.css">
  16. <link type="text/css" rel="stylesheet" href="../../css/base.css">
  17. <link type="text/css" rel="stylesheet" href="../../css/html.css">
  18. <script src="../../script/jquery.min.js"></script>
  19. <script src="../../script/shaixuan.js"></script>
  20. <style>
  21. .aui-list-item-right {
  22. /*color: #067974 !important;*/
  23. border: 1px solid #067974;
  24. padding: 1px 3px;
  25. border-radius: 5px;
  26. }
  27. .aui-list .aui-list-item-text {
  28. font-size: 0.6rem;
  29. }
  30. .aui-content {
  31. z-index: -1;
  32. /*margin-top: 2.05rem;*/
  33. }
  34. .aui-media-list .aui-list-item-inner {
  35. padding-top: 0.5rem;
  36. padding-bottom: 0.3rem;
  37. }
  38. .aui-list-item-arrow:before {
  39. z-index: 0;
  40. }
  41. .aui-line {
  42. display: flex;
  43. display: -webkit-flex;
  44. float: right;
  45. font-size: 0.6rem;
  46. color: #757575;
  47. margin-top: -5px;
  48. width: 4rem;
  49. }
  50. .aui-btn-buy {
  51. border: 1px solid #08acee;
  52. color: #08acee;
  53. padding: 2px 7px;
  54. border-radius: 5px;
  55. }
  56. .aui-btn-addCar {
  57. /*padding: 2px 7px;*/
  58. border-radius: 5px;
  59. /*margin-left: 10px;*/
  60. border: 1px solid #00787B;
  61. padding: 3px 5px;
  62. color: #00787B;
  63. }
  64. [v-cloak] {
  65. display: none;
  66. }
  67. .aui-background {
  68. background-color: #000;
  69. opacity: 0.2;
  70. z-index: 3;
  71. position: fixed;
  72. top: 0;
  73. left: 0;
  74. width: 100%;
  75. height: 100%;
  76. }
  77. .Sort-height {
  78. top: 0;
  79. }
  80. .aui-sort-bg {
  81. position: fixed;
  82. width: 100%;
  83. height: 100%;
  84. overflow: hidden;
  85. top: 0;
  86. left: 0;
  87. background-color: #000;
  88. opacity: 0.2;
  89. }
  90. .zmq-card-nomal {
  91. margin-top: 0;
  92. }
  93. .aui-list {
  94. background-color: #fff;
  95. border-radius: 5px
  96. }
  97. .aui-content, .aui-card-list, .aui-card-list-content {
  98. background-color: transparent !important;
  99. }
  100. .aui-list {
  101. border-top: 0px !important;
  102. }
  103. @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  104. .aui-list .aui-list-item {
  105. background-image: none;
  106. }
  107. }
  108. @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  109. .aui-list {
  110. background-image: none;
  111. }
  112. }
  113. .slide {
  114. max-height: 200px;
  115. height: auto;
  116. }
  117. .slide li a {
  118. font-size: 0.6rem;
  119. }
  120. .aui-content {
  121. padding-bottom: 3rem;
  122. padding-top: 100px;
  123. }
  124. #screen {
  125. position: fixed;
  126. z-index: 105;
  127. top: 50px;
  128. left: 0;
  129. width: 100%
  130. }
  131. .aui-shopCar-bg {
  132. width: 3.2rem;
  133. height: 3.2rem;
  134. }
  135. .aui-shop-badge {
  136. margin-top: -8px
  137. }
  138. .zmq-car-text {
  139. margin-top: 9px;
  140. }
  141. .aui-btn-addCar {
  142. padding: 3px 7px;
  143. border-radius: 5px;
  144. margin-left: 10px;
  145. margin-top: 10px;
  146. }
  147. .zmq-total {
  148. position: fixed;
  149. width: 100%;
  150. height: 50px;
  151. box-sizing: border-box;
  152. background-color: #fff;
  153. z-index: 105;
  154. border: 1px solid #ddd;
  155. padding-left: 5%;
  156. line-height: 50px;
  157. }
  158. </style>
  159. </head>
  160. <body>
  161. <div id="app" v-cloak>
  162. <div class="zmq-model-bg" v-show="showModal"></div>
  163. <div class="zmq-total zmq-text-font-07" v-on:click="startChoose">
  164. 已选条件:<em v-show="doneList.brand == doneList.gg == doneList.hw == ''" class="zmq-text-msg">请选择规格花纹</em><em class="zmq-margin-level-5 zmq-text-msg">{{doneList.brand}}</em><em class="zmq-margin-level-5 zmq-text-msg">{{doneList.gg}}</em><em class="zmq-margin-level-5 zmq-text-msg">{{doneList.hw}}</em>
  165. </div>
  166. <!--<div class="zmq-model-bg" v-show="showModal" v-on:click="hideList"></div>-->
  167. <section class="job-module" id="screen">
  168. <dl class="retrie">
  169. <dt>
  170. <a class="zmq-text-done zmq-text-font-07 zmq-btn-border-done" id="choosejjsid" href="javascript:;">经销商 <i class="aui-iconfont aui-icon-down"></i></a>
  171. <div class="zmq-text-font-06 zmq-text-msg" style="height: 50px;line-height: 50px;background-color: #fff" v-on:click="choosejjs">
  172. {{chooseSupplierName}}
  173. </div>
  174. <!--<a class="zmq-text-done zmq-text-font-07" href="javascript:;">花纹</a>
  175. <a class="zmq-text-done zmq-text-font-07" href="javascript:;">尺寸</a>-->
  176. </dt>
  177. <dd class="area">
  178. <ul class="slide downlist">
  179. <li v-for="(i,index) in supplierList" v-on:click="doneThisSupplier(i.agentId,i.agentDto.agentName)">
  180. <a href="#">{{i.agentDto.agentName}}</a>
  181. </li>
  182. </ul>
  183. </dd>
  184. </dl>
  185. </section>
  186. <!-- 轮胎列表 -->
  187. <section class="aui-content">
  188. <div class="aui-card-list zmq-card-nomal">
  189. <div class="aui-card-list-content ">
  190. <ul class="aui-list aui-media-list zmq-margin-top-10" v-for="(item,index) in stockList" v-on:click.stop = "addCar(index,'car')">
  191. <li class="aui-list-item aui-list-item-middle" >
  192. <div class="aui-media-list-item-inner">
  193. <div class="aui-list-item-media" style="width: 4rem;">
  194. <img v-lazy ="item.simple_img_path" />
  195. </div>
  196. <div class="aui-list-item-inner">
  197. <div class="aui-list-item-text">
  198. <div class="aui-list-item-title zmq-text-msg aui-font-size-14" style="max-width: 75%;line-height: 0.8rem">
  199. {{item.specs}} {{item.pattern}}
  200. <!--8kkskskks-->
  201. </div>
  202. <div class="aui-list-item-right zmq-bg-noraml zmq-text-white" style="padding-top : 2px;margin-right: 10px;">
  203. <!-- <!--长荣-->
  204. {{item.brand}}
  205. </div>
  206. </div>
  207. <div class="aui-list-item-text zmq-margin-top-5">
  208. {{item.material_name}}
  209. <!--sasdasd-->
  210. </div>
  211. <!-- <div class="aui-list-item-text zmq-width-80 zmq-margin-top-5">
  212. </div>-->
  213. <div class="aui-line">
  214. <!--<div class="aui-btn-buy" v-on:click.stop = "addCar(index,'down')">
  215. 立即下单
  216. </div>-->
  217. <div class="aui-btn-addCar">
  218. 加入订单 <!--<img src="../../image/drawable-xhdpi/shopCar.png" />-->
  219. </div>
  220. </div>
  221. </div>
  222. </div>
  223. </li>
  224. </ul>
  225. </div>
  226. </div>
  227. <!-- 没有数据显示 -->
  228. <img v-show="hasData == false" src="../../image/nodata.png" class="zmq-img-nodata" style="margin-top: 10vh"/>
  229. <div v-show="upLock == false" class="zmq-text-explain zmq-margin-top-10 zmq-textAlign-center zmq-margin-bottom-10 zmq-block-text">
  230. 已无更多数据
  231. </div>
  232. </section>
  233. <!-- 添加购物车 -->
  234. <shopcar v-bind:badge = "badge"></shopcar>
  235. <!--<div class="aui-shopCar-bg" v-on:click="goToCar"><div class="aui-shop-badge">1</div><div class="zmq-car-text">订单<br />维护</div></div>-->
  236. </div>
  237. </body>
  238. <script src="../../script/api.js" type="text/javascript"></script>
  239. <script type="text/javascript" src="../../script/aui-scroll.js"></script>
  240. <script type="text/javascript" src="../../script/vue.js"></script>
  241. <script type="text/javascript" src="../../script/vue-lazyload.js"></script>
  242. <script type="text/javascript" src="../../script/httpRequest.js"></script>
  243. <script type="text/javascript" src="../../script/vue_plugins.js"></script>
  244. <script type="text/javascript">
  245. apiready = function() {
  246. var h = api.pageParam.h;
  247. new Vue({
  248. el : '#app',
  249. data : {
  250. retariler_id : '',
  251. // 获取经销商列表
  252. getSupplierUrl : 'getSupplierListUrl',
  253. supplierList : [],
  254. chooseSupplierName : '请先选择一个经销商',
  255. // 根据经销商获取库存
  256. getStockListUrl : 'checkStoreUrl',
  257. stockList : [],
  258. // 商品列表
  259. // stockList : [{
  260. // specs : '7.50R16LT',
  261. // pattern : 'JT456',
  262. // brand : '金宇',
  263. // materialName : '外胎:2001933202191'
  264. // },{
  265. // specs : '7.50R16LT',
  266. // pattern : 'JT456',
  267. // brand : '金宇',
  268. // materialName : '外胎:2001933202191'
  269. // },{
  270. // specs : '7.50R16LT',
  271. // pattern : 'JT456',
  272. // brand : '金宇',
  273. // materialName : '外胎:2001933202191'
  274. // },{
  275. // specs : '7.50R16LT',
  276. // pattern : 'JT456',
  277. // brand : '金宇',
  278. // materialName : '外胎:2001933202191'
  279. // },{
  280. // specs : '7.50R16LT',
  281. // pattern : 'JT456',
  282. // brand : '金宇',
  283. // materialName : '外胎:2001933202191'
  284. // },{
  285. // specs : '7.50R16LT',
  286. // pattern : 'JT456',
  287. // brand : '金宇',
  288. // materialName : '外胎:2001933202191'
  289. // },{
  290. // specs : '7.50R16LT',
  291. // pattern : 'JT456',
  292. // brand : '金宇',
  293. // materialName : '外胎:2001933202191'
  294. // },{
  295. // specs : '7.50R16LT',
  296. // pattern : 'JT456',
  297. // brand : '金宇',
  298. // materialName : '外胎:2001933202191'
  299. // },{
  300. // specs : '7.50R16LT',
  301. // pattern : 'JT456',
  302. // brand : '金宇',
  303. // materialName : '外胎:2001933202191'
  304. // }],
  305. // 是否有数据
  306. hasData : true,
  307. // 购物车数量
  308. badge : 0,
  309. // 是否显示背景
  310. chooseInfo : false,
  311. // 是否显示模板
  312. showModal : false,
  313. // ss : [{},{},{},{},{},{},{},{}]
  314. // 分页
  315. upLock : true,
  316. current : 1,
  317. total : 1,
  318. agentId : '',
  319. searchAttion : [{
  320. name : '规格',
  321. key : [],
  322. type : 'input',
  323. value : '',
  324. }, {
  325. name : '花纹',
  326. key : [],
  327. type : 'input',
  328. value : '',
  329. }, {
  330. name : '品牌',
  331. key : [],
  332. type : 'radio',
  333. value : '',
  334. }],
  335. // 获取门店信息
  336. getMDInfoUrl : 'getMDInfo',
  337. // 筛选条件
  338. doneList : {
  339. brand : '',
  340. gg : '',
  341. hw : ''
  342. },
  343. },
  344. methods : {
  345. init : function() {
  346. // 配置筛选
  347. var _this = this;
  348. this.retariler_id = $api.getStorage("retailerid");
  349. this.getSupplierList();
  350. this.getMD();
  351. this.getCarNum(this.retariler_id, function(num) {
  352. _this.badge = num.length;
  353. })
  354. // 刷新购物车数量
  355. this.addEvent("refushCar", function() {
  356. _this.getCarNum(_this.retariler_id, function(num) {
  357. _this.$set(_this, "badge", num.length)
  358. })
  359. })
  360. this.configHeaderRefush(function() {
  361. if (_this.agentId != '') {
  362. _this.downData = 'down';
  363. _this.upLock = true;
  364. _this.current = 1;
  365. _this.getSupplierStore();
  366. } else {
  367. api.refreshHeaderLoadDone();
  368. }
  369. })
  370. this.configBottomRefush(function(status) {
  371. // 开启上拉加载
  372. if (_this.hasData == true) {
  373. // 开启上拉加载
  374. if (_this.total > _this.current) {
  375. _this.downData = 'up';
  376. _this.current = _this.current + 1;
  377. _this.getSupplierStore();
  378. } else {
  379. // 上啦没有数据了
  380. _this.upLock = false;
  381. }
  382. }
  383. })
  384. // 注册监听,添加筛选功能
  385. this.addEvent("kucunjjs_body", function(extra) {
  386. if (extra.value.done == true) {
  387. _this.doneList = extra.value;
  388. if (_this.agentId == '') {
  389. api.toast({
  390. msg : '请先选择经销商'
  391. });
  392. } else {
  393. _this.current = 1;
  394. _this.downData = 'down';
  395. _this.getSupplierStore();
  396. }
  397. }
  398. _this.configDownChoose(_this.searchAttion, extra);
  399. })
  400. },
  401. // 点击选择筛选
  402. startChoose : function() {
  403. var _this = this;
  404. var data = {
  405. value : {
  406. f : 'kucunjjs_body',
  407. h : h
  408. }
  409. }
  410. _this.configDownChoose(_this.searchAttion, data);
  411. },
  412. // 获取个人信息,通过个人信息获取签约的轮胎品牌
  413. getMD : function() {
  414. var data = {
  415. id : this.retariler_id,
  416. url : 'json',
  417. type : 'body'
  418. }, _this = this;
  419. this.$post(this.getMDInfoUrl, data, function(ret) {
  420. if (ret.code == 0) {
  421. var brandList = new Array();
  422. ret.retailerDto.brandDtoList.map(function(b, i) {
  423. brandList.push(b.brandName);
  424. })
  425. _this.searchAttion[2].key = brandList;
  426. }
  427. })
  428. },
  429. // 点击选择经销商
  430. choosejjs : function() {
  431. var _this = this;
  432. var $t = $('.choosejjsid');
  433. if ($t.hasClass('up')) {
  434. $(".retrie dt a").removeClass('up');
  435. $('.downlist').hide();
  436. $('.mask').hide();
  437. _this.showModal = false;
  438. api.setFrameAttr({
  439. name : api.frameName,
  440. bounces : true
  441. });
  442. } else {
  443. _this.showModal = true;
  444. api.setFrameAttr({
  445. name : api.frameName,
  446. bounces : false
  447. });
  448. $(".retrie dt a").removeClass('up');
  449. $('.downlist').hide();
  450. $t.addClass('up');
  451. $('.downlist').eq($(".retrie dt a").index($(this)[0])).show();
  452. $('.mask').show();
  453. }
  454. },
  455. // 选择了这个经销商
  456. doneThisSupplier : function(id, name) {
  457. this.chooseSupplierName = name;
  458. this.agentId = id;
  459. this.downData = 'down';
  460. this.upLock = true;
  461. this.stockList = new Array();
  462. this.hideList();
  463. this.getSupplierStore();
  464. },
  465. // 隐藏列表i
  466. hideList : function() {
  467. $(".retrie dt a").removeClass('up');
  468. $('.downlist').hide();
  469. $('.mask').hide();
  470. this.showModal = false;
  471. api.setFrameAttr({
  472. name : api.frameName,
  473. bounces : true
  474. });
  475. },
  476. // 获取经销商下的库存
  477. getSupplierStore : function() {
  478. var data = {
  479. agentId : this.agentId,
  480. current : this.current,
  481. url : 'json',
  482. type : 'body',
  483. }, _this = this;
  484. if (this.doneList.brand != "") {
  485. this.extend(data, {
  486. brand : this.doneList.brand
  487. })
  488. }
  489. if (this.doneList.gg != "") {
  490. this.extend(data, {
  491. specs : this.doneList.gg,
  492. })
  493. }
  494. if (this.doneList.hw != "") {
  495. this.extend(data, {
  496. pattern : this.doneList.hw,
  497. })
  498. }
  499. this.$post(this.getStockListUrl, data, function(ret) {
  500. if (ret.code == 0) {
  501. _this.total = ret.page.pages;
  502. if (_this.downData == 'up') {
  503. _this.stockList = _this.stockList.concat(ret.page.records);
  504. } else {
  505. _this.stockList = ret.page.records;
  506. if (_this.stockList.length > 0) {
  507. _this.hasData = true;
  508. } else {
  509. _this.hasData = false;
  510. }
  511. }
  512. }
  513. })
  514. },
  515. // 配置筛选
  516. config : function() {
  517. var _this = this;
  518. $('.retrie dt a').click(function() {
  519. var $t = $(this);
  520. if ($t.hasClass('up')) {
  521. $(".retrie dt a").removeClass('up');
  522. $('.downlist').hide();
  523. $('.mask').hide();
  524. _this.showModal = false;
  525. api.setFrameAttr({
  526. name : api.frameName,
  527. bounces : true
  528. });
  529. } else {
  530. _this.showModal = true;
  531. api.setFrameAttr({
  532. name : api.frameName,
  533. bounces : false
  534. });
  535. $(".retrie dt a").removeClass('up');
  536. $('.downlist').hide();
  537. $t.addClass('up');
  538. $('.downlist').eq($(".retrie dt a").index($(this)[0])).show();
  539. $('.mask').show();
  540. }
  541. });
  542. // $(".area ul li a:contains('" + $('#area').text() + "')").addClass('selected');
  543. // $(".wage ul li a:contains('" + $('#wage').text() + "')").addClass('selected');
  544. },
  545. // 获取经销商列表
  546. getSupplierList : function() {
  547. var data = {
  548. retailer_id : this.retariler_id,
  549. url : 'json',
  550. type : 'body'
  551. }, _this = this;
  552. this.$post(this.getSupplierUrl, data, function(ret) {
  553. if (ret.code == 0 || ret.code == '0') {
  554. _this.supplierList = ret.list;
  555. _this.config();
  556. }
  557. })
  558. },
  559. // 获取库存
  560. getStock : function() {
  561. var data = {
  562. retailerId : this.retariler_id
  563. }, _this = this;
  564. this.$post(this.getStockUrl, data, function(ret) {
  565. if (ret.code == 0 || ret.code == '0') {
  566. _this.stockList = ret.page.records;
  567. if (_this.stockList.length == 0) {
  568. _this.hasData = false;
  569. }
  570. }
  571. })
  572. },
  573. // 筛选条件
  574. chooseAcction : function() {
  575. api.sendEvent({
  576. name : 'kucunjjs_win',
  577. extra : {
  578. }
  579. });
  580. },
  581. // 查看详情
  582. lookInfo : function(id) {
  583. var param = {
  584. id : id,
  585. }
  586. this.goWin('storeInfo_win', '../store/storeInfo_win.html', param);
  587. },
  588. // 添加商品到购物车 materialId materialCode retailerId amount -- 选择产品规格
  589. addCar : function(index, type) {
  590. var param = {
  591. shopInfo : this.stockList[index],
  592. type : type,
  593. agentId : this.agentId
  594. }
  595. this.sendEvent("showInfo", param);
  596. },
  597. demo : function(e) {
  598. e.preventDefault()
  599. }
  600. },
  601. mounted : function() {
  602. Vue.use(VueLazyload,{
  603. preLoad: 1.3,
  604. error: '../../image/noimg.png',
  605. loading: '../../image/load.gif',
  606. attempt: 1,
  607. });
  608. this.init();
  609. }
  610. })
  611. }
  612. </script>
  613. </html>