kucunjjs_body.html 17 KB

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