kucunC_body.html 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631
  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.6 rem;
  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.5 rem;
  35. padding-bottom: 0.3 rem;
  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.6 rem;
  45. color: #757575;
  46. margin-top: -1.1 rem;
  47. width: 2.6 rem;
  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.6 rem;
  115. }
  116. .aui-content {
  117. padding-bottom: 3rem;
  118. padding-top: 50px;
  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. .updataStock {
  157. font-size : 0.6rem;
  158. padding : 5px 8px;
  159. background-color: #007F86;
  160. border-radius : 5px;
  161. color: #fff;
  162. }
  163. </style>
  164. </head>
  165. <body>
  166. <div id="app" v-cloak>
  167. <zmqalert v-bind:info = "alertInfo" v-on:donechoose="alertBtn"></zmqalert>
  168. <div class="zmq-model-bg" v-show="alertInfo.show == true"></div>
  169. <div class="zmq-total zmq-text-font-07" v-on:click="startChoose">
  170. 已选条件:<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>
  171. </div>
  172. <!-- 轮胎列表 -->
  173. <section class="aui-content">
  174. <div class="aui-card-list zmq-card-nomal">
  175. <div class="aui-card-list-content ">
  176. <ul class="aui-list aui-media-list zmq-margin-top-10" v-for="(item,i) in stockList">
  177. <li class="aui-list-item aui-list-item-middle" v-on:click="lookInfo(item.id)">
  178. <div class="aui-media-list-item-inner">
  179. <div class="aui-list-item-media" style="width: 4rem;">
  180. <img v-lazy="item.simple_img_path" />
  181. <!--<img src="../../image/drawable-xhdpi/store01.png" class="aui-img-round" >-->
  182. </div>
  183. <div class="aui-list-item-inner aui-list-item-arrow">
  184. <div class="aui-list-item-text">
  185. <div class="aui-list-item-title zmq-text-msg aui-font-size-14 zmq-lineHeight-08">
  186. {{item.brand}} · {{item.specs}} · {{item.pattern}}
  187. </div>
  188. </div>
  189. <div class="aui-list-item-text zmq-margin-top-5">
  190. {{item.material_name}}
  191. </div>
  192. <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'">
  193. 当前库存:{{item.tatal_stock}} <em class="updataStock" v-on:click.stop="upDateStock(item.stockId,i)">校准数量</em>
  194. <!--| stockToString-->
  195. </div>
  196. </div>
  197. </div>
  198. </li>
  199. </ul>
  200. </div>
  201. </div>
  202. <!-- 没有数据显示 -->
  203. <img v-show="hasData == false" src="../../image/nodata.png" class="zmq-img-nodata" />
  204. <div v-show="upLock == false" class="zmq-text-explain zmq-margin-top-10 zmq-textAlign-center zmq-margin-bottom-10 zmq-block-text">
  205. 已无更多数据
  206. </div>
  207. </section>
  208. </div>
  209. </body>
  210. <script src="../../script/api.js" type="text/javascript"></script>
  211. <script type="text/javascript" src="../../script/aui-scroll.js"></script>
  212. <script type="text/javascript" src="../../script/vue.js"></script>
  213. <script type="text/javascript" src="../../script/httpRequest.js"></script>
  214. <script type="text/javascript" src="../../script/vue-lazyload.js"></script>
  215. <script type="text/javascript" src="../../script/vue_plugins.js"></script>
  216. <script type="text/javascript">
  217. apiready = function() {
  218. var h = api.pageParam.h;
  219. new Vue({
  220. el : '#app',
  221. data : {
  222. agentId : '',
  223. // 获取经销商列表
  224. getSupplierUrl : 'getSupplierListUrl',
  225. supplierList : [],
  226. chooseSupplierName : '请先选择一个经销商',
  227. // 根据经销商获取库存
  228. getStockListUrl : 'checkStoreUrl',
  229. stockList : [],
  230. // 商品列表
  231. // stockList : [{
  232. // specs : '7.50R16LT',
  233. // pattern : 'JT456',
  234. // brand : '金宇',
  235. // materialName : '外胎:2001933202191'
  236. // },{
  237. // specs : '7.50R16LT',
  238. // pattern : 'JT456',
  239. // brand : '金宇',
  240. // materialName : '外胎:2001933202191'
  241. // },{
  242. // specs : '7.50R16LT',
  243. // pattern : 'JT456',
  244. // brand : '金宇',
  245. // materialName : '外胎:2001933202191'
  246. // },{
  247. // specs : '7.50R16LT',
  248. // pattern : 'JT456',
  249. // brand : '金宇',
  250. // materialName : '外胎:2001933202191'
  251. // },{
  252. // specs : '7.50R16LT',
  253. // pattern : 'JT456',
  254. // brand : '金宇',
  255. // materialName : '外胎:2001933202191'
  256. // },{
  257. // specs : '7.50R16LT',
  258. // pattern : 'JT456',
  259. // brand : '金宇',
  260. // materialName : '外胎:2001933202191'
  261. // },{
  262. // specs : '7.50R16LT',
  263. // pattern : 'JT456',
  264. // brand : '金宇',
  265. // materialName : '外胎:2001933202191'
  266. // },{
  267. // specs : '7.50R16LT',
  268. // pattern : 'JT456',
  269. // brand : '金宇',
  270. // materialName : '外胎:2001933202191'
  271. // },{
  272. // specs : '7.50R16LT',
  273. // pattern : 'JT456',
  274. // brand : '金宇',
  275. // materialName : '外胎:2001933202191'
  276. // }],
  277. // 是否有数据
  278. hasData : true,
  279. // 购物车数量
  280. badge : 0,
  281. // 是否显示背景
  282. chooseInfo : false,
  283. // 是否显示模板
  284. showModal : false,
  285. // ss : [{},{},{},{},{},{},{},{}]
  286. // 分页
  287. upLock : true,
  288. current : 1,
  289. total : 1,
  290. agentId : '',
  291. // 根据经销商id获取签约品牌
  292. getBrandUrl : 'getBrandUrl',
  293. // 弹出框信息
  294. alertInfo : {
  295. show : false,
  296. title : '请输入商品库存',
  297. showMsg : true,
  298. msg : '',
  299. content : '',
  300. },
  301. // 筛选条件
  302. searchAttion : [{
  303. name : '规格',
  304. key : [],
  305. type : 'input',
  306. value : '',
  307. }, {
  308. name : '花纹',
  309. key : [],
  310. type : 'input',
  311. value : '',
  312. }, {
  313. name : '品牌',
  314. key : [],
  315. type : 'radio',
  316. value : '',
  317. }],
  318. // 筛选条件
  319. doneList : {
  320. brand : '',
  321. gg : '',
  322. hw : ''
  323. },
  324. // 修改库存
  325. upDateStockUrl : 'upDateStockUrl',
  326. chooseStoreId : 0,
  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.agentId = $api.getStorage('agentid');
  353. this.getSupplierStore();
  354. this.getBrand();
  355. // 刷新购物车数量
  356. this.addEvent("refushCar", function() {
  357. _this.getCarNum(_this.retariler_id, function(num) {
  358. _this.$set(_this, "badge", num.length)
  359. })
  360. })
  361. this.configHeaderRefush(function() {
  362. if (_this.agentId != '') {
  363. _this.downData = 'down';
  364. _this.upLock = true;
  365. _this.current = 1;
  366. _this.getSupplierStore();
  367. } else {
  368. api.refreshHeaderLoadDone();
  369. }
  370. })
  371. this.configBottomRefush(function(status) {
  372. // 开启上拉加载
  373. if (_this.hasData == true) {
  374. // 开启上拉加载
  375. if (_this.total > _this.current) {
  376. _this.downData = 'up';
  377. _this.current = _this.current + 1;
  378. _this.getSupplierStore();
  379. } else {
  380. // 上啦没有数据了
  381. _this.upLock = false;
  382. }
  383. }
  384. })
  385. // 注册监听,添加筛选功能
  386. this.addEvent("kucunC_body", function(extra) {
  387. if (extra.value.done == true) {
  388. _this.doneList = extra.value;
  389. _this.current = 1;
  390. _this.downData = 'down';
  391. _this.getSupplierStore();
  392. }
  393. _this.configDownChoose(_this.searchAttion, extra);
  394. })
  395. },
  396. // 点击选择筛选
  397. startChoose : function() {
  398. var _this = this;
  399. var data = {
  400. value : {
  401. f : 'kucunC_body',
  402. h : h
  403. }
  404. }
  405. _this.configDownChoose(_this.searchAttion, data);
  406. },
  407. // 获取经销商签约品牌
  408. getBrand : function() {
  409. var data = {
  410. agent_id : this.agentId
  411. }, _this = this;
  412. this.$post(this.getBrandUrl, data, function(ret) {
  413. if (ret.code == 0) {
  414. if (ret.list.length == 0) {
  415. _this.showModal("暂未获取到您签约的品牌")
  416. } else {
  417. var list = new Array();
  418. ret.list.map(function(b, i) {
  419. if (b.brandName == "金宇") {
  420. // 放在第一个
  421. list.unshift(b.brandName);
  422. } else {
  423. list.push(b.brandName);
  424. }
  425. })
  426. _this.searchAttion[2].key = list;
  427. // _this.$set("_this.searchAttion[2]","key",list);
  428. }
  429. }
  430. })
  431. },
  432. // 点击选择经销商
  433. choosejjs : function() {
  434. var _this = this;
  435. var $t = $('.choosejjsid');
  436. if ($t.hasClass('up')) {
  437. $(".retrie dt a").removeClass('up');
  438. $('.downlist').hide();
  439. $('.mask').hide();
  440. _this.showModal = false;
  441. api.setFrameAttr({
  442. name : api.frameName,
  443. bounces : true
  444. });
  445. } else {
  446. _this.showModal = true;
  447. api.setFrameAttr({
  448. name : api.frameName,
  449. bounces : false
  450. });
  451. $(".retrie dt a").removeClass('up');
  452. $('.downlist').hide();
  453. $t.addClass('up');
  454. $('.downlist').eq($(".retrie dt a").index($(this)[0])).show();
  455. $('.mask').show();
  456. }
  457. },
  458. // 选择了这个经销商
  459. doneThisSupplier : function(id, name) {
  460. this.chooseSupplierName = name;
  461. this.agentId = id;
  462. this.downData = 'down';
  463. this.upLock = true;
  464. this.hideList();
  465. this.getSupplierStore(id);
  466. },
  467. // 隐藏列表i
  468. hideList : function() {
  469. $(".retrie dt a").removeClass('up');
  470. $('.downlist').hide();
  471. $('.mask').hide();
  472. this.showModal = false;
  473. api.setFrameAttr({
  474. name : api.frameName,
  475. bounces : true
  476. });
  477. },
  478. // 获取经销商下的库存
  479. getSupplierStore : function() {
  480. var data = {
  481. agentId : this.agentId,
  482. current : this.current,
  483. url : 'json',
  484. type : 'body',
  485. }, _this = this;
  486. if (this.doneList.brand != "") {
  487. this.extend(data, {
  488. brand : this.doneList.brand
  489. })
  490. }
  491. if (this.doneList.gg != "") {
  492. this.extend(data, {
  493. specs : this.doneList.gg,
  494. })
  495. }
  496. if (this.doneList.hw != "") {
  497. this.extend(data, {
  498. pattern : this.doneList.hw,
  499. })
  500. }
  501. this.$post(this.getStockListUrl, data, function(ret) {
  502. if (ret.code == 0) {
  503. _this.total = ret.page.pages;
  504. if (_this.downData == 'up') {
  505. _this.stockList = _this.stockList.concat(ret.page.records);
  506. } else {
  507. _this.stockList = ret.page.records;
  508. if (_this.stockList.length > 0) {
  509. _this.hasData = true;
  510. } else {
  511. _this.hasData = false;
  512. }
  513. }
  514. }
  515. })
  516. },
  517. // 配置筛选
  518. config : function() {
  519. var _this = this;
  520. $('.retrie dt a').click(function() {
  521. var $t = $(this);
  522. if ($t.hasClass('up')) {
  523. $(".retrie dt a").removeClass('up');
  524. $('.downlist').hide();
  525. $('.mask').hide();
  526. _this.showModal = false;
  527. api.setFrameAttr({
  528. name : api.frameName,
  529. bounces : true
  530. });
  531. } else {
  532. _this.showModal = true;
  533. api.setFrameAttr({
  534. name : api.frameName,
  535. bounces : false
  536. });
  537. $(".retrie dt a").removeClass('up');
  538. $('.downlist').hide();
  539. $t.addClass('up');
  540. $('.downlist').eq($(".retrie dt a").index($(this)[0])).show();
  541. $('.mask').show();
  542. }
  543. });
  544. $(".area ul li a:contains('" + $('#area').text() + "')").addClass('selected');
  545. $(".wage ul li a:contains('" + $('#wage').text() + "')").addClass('selected');
  546. },
  547. // 获取经销商列表
  548. getSupplierList : function() {
  549. var data = {
  550. retailer_id : this.retariler_id,
  551. url : 'json',
  552. type : 'body'
  553. }, _this = this;
  554. this.$post(this.getSupplierUrl, data, function(ret) {
  555. if (ret.code == 0 || ret.code == '0') {
  556. _this.supplierList = ret.list;
  557. _this.config();
  558. }
  559. })
  560. },
  561. // 修改库存
  562. upDateStock : function(id,i){
  563. this.alertInfo.show = true;
  564. this.chooseStoreId = id + ',' + i;
  565. },
  566. // 确认库存了,提交
  567. alertBtn : function(type) {
  568. var i = this.chooseStoreId.split(',');
  569. var data = {
  570. tatalStock : parseInt(this.alertInfo.content),
  571. id : i[0],
  572. url : 'json',
  573. type : 'body'
  574. },_this = this,url = this.upDateStockUrl;
  575. this.$post(url, data, function(ret) {
  576. if (ret.code == 0 || ret.code == '0') {
  577. api.toast({
  578. msg:'修改库存成功'
  579. });
  580. _this.$set(_this.stockList[parseInt(i[1])],"tatal_stock",parseInt(_this.alertInfo.content));
  581. }
  582. })
  583. },
  584. // 获取库存
  585. getStock : function() {
  586. var data = {
  587. retailerId : this.retariler_id
  588. }, _this = this;
  589. this.$post(this.getStockUrl, data, function(ret) {
  590. if (ret.code == 0 || ret.code == '0') {
  591. _this.stockList = ret.page.records;
  592. if (_this.stockList.length == 0) {
  593. _this.hasData = false;
  594. }
  595. }
  596. })
  597. },
  598. // 查看详情
  599. lookInfo : function(id) {
  600. var param = {
  601. id : id,
  602. }
  603. this.goWin('storeInfo_win', './storeInfo_win.html', param);
  604. },
  605. // 添加商品到购物车 materialId materialCode retailerId amount -- 选择产品规格
  606. addCar : function(index, type) {
  607. var param = {
  608. shopInfo : this.stockList[index],
  609. type : type,
  610. agentId : this.agentId
  611. }
  612. this.sendEvent("showInfo", param);
  613. },
  614. demo : function(e) {
  615. e.preventDefault()
  616. }
  617. },
  618. mounted : function() {
  619. Vue.use(VueLazyload,{
  620. preLoad: 1.3,
  621. error: '../../image/noimg.png',
  622. loading: '../../image/load.gif',
  623. attempt: 1,
  624. });
  625. this.init();
  626. }
  627. })
  628. }
  629. </script>
  630. </html>