buycar.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438
  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>
  8. <link rel="stylesheet" type="text/css" href="../../css/api.css" />
  9. <link rel="stylesheet" type="text/css" href="../../css/weui.min.css" />
  10. <link rel="stylesheet" type="text/css" href="../../css/style.css" />
  11. <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css" />
  12. <style>
  13. body{background:#f2f2f2;}
  14. .active{
  15. color: #eb4610;
  16. }
  17. .bottom-line{
  18. border-bottom:1px solid #e8e8e8;
  19. }
  20. .border-none{
  21. text-align: center;
  22. }
  23. .border-none p{
  24. color:#999999;
  25. }
  26. .border-none-img{
  27. margin-top: 3rem;
  28. width: 1.73rem;
  29. height:auto;
  30. }
  31. .buy-btn{
  32. width:100%;
  33. height: 1rem;
  34. background:#ffffff;
  35. border-top:1px solid #e8e8e8;
  36. position:fixed;
  37. bottom:0px;
  38. }
  39. .buy-btn li{
  40. float:left;
  41. /*width:50%;*/
  42. height: 1rem;
  43. line-height: 1rem;
  44. text-align:center;
  45. font-size: 0.28rem;
  46. border-right:1px solid #e8e8e8;
  47. box-sizing:border-box;
  48. }
  49. .order-list-right p {
  50. font-size: 0.22rem;
  51. color: #999;
  52. /*height: 1.04rem;*/
  53. }
  54. .font-rem11 {
  55. font-size: 0.28rem;
  56. }
  57. li.buy-btn-left{
  58. width: 5.3rem;
  59. text-align: left;
  60. padding-left: 0.2rem;
  61. }
  62. li.to-pay{
  63. color:#ffffff;
  64. background: #d9251c;
  65. width: 2.2rem;
  66. }
  67. .to-pay span{
  68. color:#ffffff;
  69. }
  70. .check-all{
  71. width: 0.32rem;height: 0.32rem;vertical-align:middle;
  72. }
  73. .buycar-null{
  74. width:100%;text-align:center;background:#f2f2f2;
  75. }
  76. .buycar-null img{
  77. width:60px;
  78. }
  79. .buycar-price{
  80. font-size: 0.22rem;
  81. }
  82. .h2 {
  83. border-bottom: 1px solid #e8e8e8;
  84. }
  85. .h2:last-child {
  86. border-bottom: 0;
  87. }
  88. </style>
  89. <script>
  90. (function(w, d, m) {
  91. function r() {
  92. var t = 100,
  93. o = 750,
  94. e = d.documentElement.clientWidth || w.innerWidth,
  95. n = m.max(m.min(e, 480), 320),
  96. h = 50;
  97. 320 >= n && (h = m.floor(n / o * t * .99)),
  98. n > 320 && 362 >= n && (h = m.floor(n / o * t * 1)),
  99. n > 362 && 375 >= n && (h = m.floor(n / o * t * 1)),
  100. n > 375 && (h = m.floor(n / o * t * .97)),
  101. d.querySelector("html").style.fontSize = (e/7.5) + "px"
  102. };
  103. r();
  104. w.onresize = function() {
  105. r()
  106. }
  107. })(window, document, Math);
  108. </script>
  109. </head>
  110. <body>
  111. <div class="topbar"></div>
  112. <header class="back-header bottom-line">
  113. <ul>
  114. <li class="padding-20 back-btn"><img class="back-header-ico" src="../../image/nav_button_back_default.png" /></li>
  115. <li class="back-header-title">购物车</li>
  116. <li class="more-btn">编辑</li>
  117. </ul>
  118. </header>
  119. <section class="border-none padding-top">
  120. <img src="../../image/buycar-none.png" class="border-none-img" />
  121. <p>去买点什么</p>
  122. </section>
  123. <section class="order-list mask-hidden white-back padding-top">
  124. </section>
  125. <div class="h50" style="height: 2rem"></div>
  126. <div class="buy-btn" id="buy-cancel">
  127. <ul>
  128. <li class="buy-btn-left"><img src="../../image/checkun.png" class="check-all" /> 全选<span class="total" style="float:right; padding-right: 0.2rem;">合计:¥<span class="total-money">0.00</span></span></li>
  129. <li class="to-pay" style="border-right:none;"><span class="to-pay-text">结 算</span><span class="pay-total">(0)</span></li>
  130. </ul>
  131. </div>
  132. </body>
  133. <script type="text/javascript" src="../../script/api.js"></script>
  134. <script type="text/javascript" src="../../script/swiper.min.js"></script>
  135. <script type="text/javascript" src="../../script/jquery.min.js"></script>
  136. <script type="text/javascript" src="../../script/jquery.tap.js"></script>
  137. <script type="text/javascript" src="../../script/imagesloaded.pkgd.min.js"></script>
  138. <script type="text/javascript">
  139. var _storeid = '';
  140. var _minid = '';
  141. var _page = '1';
  142. apiready = function() {
  143. _storeid = api.pageParam.storeid;
  144. setFixStatusBar();
  145. getRouteData();
  146. };
  147. function getRouteData() {
  148. $.ajax({
  149. url: siteurl + 'v2/order/cart',//'?do=getbuycar',
  150. data: {
  151. buyer_id: $api.getStorage("memberid"),
  152. store_id: _storeid,
  153. page: _page
  154. },
  155. headers: { "X-TOKEN": $api.getStorage("accesstoken") },
  156. dataType: 'json',
  157. type: 'post',
  158. success: function(datas) {
  159. // console.log(datas)
  160. if (datas.result) {
  161. var _html = '';
  162. if ( _page == 1 ) {
  163. _html += '<div class="order-list-title font-rem11"><img src="' + siteurl + "uploads/home/store/" + _storeid + "/" + datas.data.store.store_avatar + '"/> ' + datas.data.store.store_name + '</div>';
  164. }
  165. $.each(datas.data.cart_list, function(index, item2) {
  166. // $.each(item.goods, function(index2, item2) {
  167. var arr = item2.goods_name.split(" ");
  168. var name_arr = arr[0];
  169. var size_arr = item2.goods_name.replace(name_arr, "");
  170. var _goodsname = limitNumber(name_arr, 8);
  171. _html += '<div class="order-list-goods p'+item2.goods_id+'" keyid="' + item2.goods_id + '" style="position:relative;"><ul><li style="width: 0.5rem;line-height: 1.73rem;"><img src="../../image/checkun.png" class="check-btn" style="width: 0.3rem;height: 0.3rem;"/></li><li><img src="' + siteurl + "uploads/home/store/goods/" + item2.goods_image.substr(0, item2.goods_image.indexOf("\_")) + "/" + item2.goods_image + '"/></li>';
  172. _html += '<li class="order-list-right"><span class="font-rem11">' + _goodsname + '</span><p>' + size_arr + ' x <span class="goods_num">' + item2.goods_num + '</span></p>';
  173. _html += '<div class="buycar-price">¥<span class="goods_price">' + item2.goods_price + '<span></div></li></ul></div>';
  174. _html += '<div class="add-num" id="btn_n'+item2.goods_id+'" pid="p'+item2.goods_id+'"><ul><li class="num-down">-</li><li><input class="buy-num" id="buy-num" type="tel" value="' + item2.goods_num + '"/></li>';
  175. _html += '<li style="border-right:none;" class="num-up">+</li></ul></div></div>';
  176. _html += '<div class="h2"></div>';
  177. // });
  178. });
  179. if (_page == 1) {
  180. //
  181. $(".border-none").addClass("mask-hidden");
  182. $(".order-list").removeClass("mask-hidden");
  183. $(".order-list").html(_html);
  184. } else {
  185. $(".order-list").append(_html);
  186. }
  187. getTotal();
  188. function_name();
  189. if (datas.data.cart_list.length == 0) {
  190. $(".order-list").addClass("mask-hidden");
  191. }
  192. if (datas.data.cart_list.length > 0) {
  193. // _minid = datas[datas.length - 1].order_id;
  194. _page++;
  195. } else {
  196. api.toast({ msg: '没有更多数据...' });
  197. }
  198. } else {
  199. errcode(datas, datas.code);
  200. }
  201. }
  202. });
  203. }
  204. var isEdit = false;
  205. $(".more-btn").on("tap", function() {
  206. if (!isEdit) {
  207. $(".more-btn").html("取消");
  208. $(".total").addClass("mask-hidden");
  209. $(".to-pay-text").html("删除");
  210. isEdit = true;
  211. } else {
  212. $(".more-btn").html("编辑");;
  213. $(".total").removeClass("mask-hidden");
  214. $(".to-pay-text").html("结算");
  215. isEdit = false;
  216. }
  217. return false;
  218. })
  219. $(".order-list").on("tap", ".num-up", function() {
  220. var _addnum = $(this).parents(".add-num");
  221. var _num = parseInt(_addnum.find("#buy-num").val()) + 1;
  222. _addnum.find("#buy-num").val(_num);
  223. var pid = '.'+$(this).parents(".add-num").attr("pid")+' .goods_num';
  224. $(pid).html(_num);
  225. getTotal();
  226. changenum();
  227. return false;
  228. })
  229. $(".order-list").on("tap", ".num-down", function() {
  230. var _addnum = $(this).parents(".add-num");
  231. var _num = 1;
  232. if (parseInt(_addnum.find("#buy-num").val()) > 1) {
  233. _num = parseInt(_addnum.find("#buy-num").val()) - 1;
  234. _addnum.find("#buy-num").val(_num);
  235. }
  236. var pid = '.'+$(this).parents(".add-num").attr("pid")+' .goods_num';
  237. $(pid).html(_num);
  238. getTotal();
  239. changenum();
  240. return false;
  241. });
  242. function changenum(recid, num) {
  243. $.ajax({
  244. url: rooturl + '?do=changenum',
  245. data: {
  246. recid: recid,
  247. num: num,
  248. },
  249. dataType: 'json',
  250. type: 'post',
  251. success: function(datas) {
  252. console.log(datas)
  253. push_car_num();
  254. }
  255. });
  256. }
  257. // chkfavorite()
  258. function push_car_num (){
  259. api.execScript({
  260. name: 'showgoods',
  261. script: 'chkfavorite();'
  262. })
  263. }
  264. function up_order_num (recid, num){
  265. $.ajax({
  266. url: siteurl + 'v1/order/og_num',
  267. data: {
  268. rec_id: recid,
  269. num: num
  270. },
  271. headers: { "X-TOKEN": $api.getStorage("accesstoken") },
  272. dataType: 'json',
  273. type: 'post',
  274. success: function(datas) {
  275. if (datas.result) {
  276. //
  277. } else {
  278. errcode(datas, datas.code);
  279. }
  280. }
  281. })
  282. }
  283. function getcheckall(){
  284. var no = $(".order-list-goods").length;
  285. var nox = $(".order-list-goods [src$='checkun.png']").length;
  286. var noc = $(".order-list-goods [src$='checked.png']").length;
  287. if (no == noc) {
  288. $(".check-all").attr("src", "../../image/checked.png");
  289. } else {
  290. $(".check-all").attr("src", "../../image/checkun.png");
  291. }
  292. $(".pay-total").html(noc);
  293. }
  294. $(".check-all").on("tap", function() {
  295. if ($(this).attr("src") == "../../image/checkun.png") {
  296. $(this).attr("src", "../../image/checked.png");
  297. $(".check-btn").attr("src", "../../image/checked.png");
  298. } else {
  299. $(this).attr("src", "../../image/checkun.png");
  300. $(".check-btn").attr("src", "../../image/checkun.png");
  301. }
  302. getTotal();
  303. return false;
  304. })
  305. $(".order-list").on("tap", ".order-list-goods", function() {
  306. if ($(this).find(".check-btn").attr("src") == "../../image/checkun.png") {
  307. $(this).find(".check-btn").attr("src", "../../image/checked.png");
  308. } else {
  309. $(this).find(".check-btn").attr("src", "../../image/checkun.png");
  310. }
  311. getcheckall();
  312. getTotal();
  313. return false;
  314. })
  315. var _totalMoney = 0.00;
  316. var _len = 0;
  317. function getTotal() {
  318. _totalMoney = 0.00;
  319. _len = 0;
  320. $(".total-money").html(_totalMoney);
  321. $(".pay-total").html("(" + _len + ")");
  322. $(".order-list-goods").each(function() {
  323. if ($(this).find(".check-btn").attr("src") == "../../image/checked.png") {
  324. _totalMoney = _totalMoney + parseFloat($(this).find(".goods_price").html()) * $(this).find(".goods_num").html();
  325. _len += parseFloat($(this).find(".goods_num").html());
  326. }
  327. $(".total-money").html(_totalMoney.toFixed(2));
  328. $(".pay-total").html("(" + _len + ")");
  329. })
  330. if ($(".order-list-goods").length == 0) {
  331. $(".order-list").empty();
  332. $(".border-none").removeClass("mask-hidden");
  333. }
  334. }
  335. $(".to-pay").on("tap", function() {
  336. var _ids = [];
  337. if (_len == 0) {
  338. api.toast({ msg: '请选择商品!' });
  339. return false;
  340. }
  341. if (isEdit == true) {
  342. $(".order-list-goods").each(function() {
  343. if ($(this).find(".check-btn").attr("src") == "../../image/checked.png") {
  344. $(this).remove();
  345. _ids.push($(this).attr("keyid"));
  346. $("#btn_n"+$(this).attr("keyid")).remove();
  347. }
  348. })
  349. if ($(".order-list-goods").length == 0) {
  350. $(".order-list").empty();
  351. $(".order-list").addClass("mask-hidden");
  352. $(".border-none").removeClass("mask-hidden");
  353. }
  354. toast_loding_show();
  355. getcheckall()
  356. $.ajax({
  357. url: siteurl + 'v2/order/cart_drop',//'?do=delbuycar',
  358. data: {
  359. buyer_id: $api.getStorage("memberid"),
  360. store_id: _storeid,
  361. ids: _ids.toString()
  362. },
  363. headers: { "X-TOKEN": $api.getStorage("accesstoken") },
  364. dataType: 'json',
  365. type: 'post',
  366. success: function(datas) {
  367. toast_loding_hide();
  368. if (datas.result) {
  369. api.toast({ msg: '删除成功!' });
  370. getTotal();
  371. push_car_num();
  372. } else {
  373. errcode(datas, datas.code);
  374. }
  375. }
  376. });
  377. } else {
  378. var date = new Date;
  379. var year = date.getFullYear();
  380. var timestamp = year + "" + (new Date()).valueOf();
  381. var _goodsx = [];
  382. if ($(".order-list-goods").length > 0) {
  383. $(".order-list-goods").each(function() {
  384. if ($(this).find(".check-btn").attr("src") == "../../image/checked.png") {
  385. _goodsx.push({"goods_id": $(this).attr("keyid"), "buy_num": $(this).find(".goods_num").text()});
  386. }
  387. })
  388. $.ajax({
  389. url: siteurl + 'v1/order/save_og',
  390. data: {
  391. store_id: _storeid,
  392. goods: JSON.stringify(_goodsx)
  393. },
  394. headers: { "X-TOKEN": $api.getStorage("accesstoken") },
  395. dataType: 'json',
  396. type: 'post',
  397. success: function(datas) {
  398. console.log(datas)
  399. if (datas.result) {
  400. //
  401. api.openWin({
  402. name: 'postaddr',
  403. url: './postaddr.html',
  404. bounces: false,
  405. pageParam: {
  406. gorderid: datas.data.order_id,
  407. storeid: _storeid
  408. }
  409. });
  410. } else {
  411. errcode(datas, datas.code);
  412. }
  413. }
  414. });
  415. } else {
  416. api.toast({ msg: '请选择商品!' });
  417. }
  418. }
  419. return false;
  420. })
  421. </script>
  422. </html>