buycar.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437
  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. push_car_num();
  253. }
  254. });
  255. }
  256. //触发更新购物车数的函数
  257. function push_car_num (){
  258. api.execScript({
  259. name: 'showgoods',
  260. script: 'chkfavorite();'
  261. })
  262. }
  263. function up_order_num (recid, num){
  264. $.ajax({
  265. url: siteurl + 'v1/order/og_num',
  266. data: {
  267. rec_id: recid,
  268. num: num
  269. },
  270. headers: { "X-TOKEN": $api.getStorage("accesstoken") },
  271. dataType: 'json',
  272. type: 'post',
  273. success: function(datas) {
  274. if (datas.result) {
  275. //
  276. } else {
  277. errcode(datas, datas.code);
  278. }
  279. }
  280. })
  281. }
  282. function getcheckall(){
  283. var no = $(".order-list-goods").length;
  284. var nox = $(".order-list-goods [src$='checkun.png']").length;
  285. var noc = $(".order-list-goods [src$='checked.png']").length;
  286. if (no == noc) {
  287. $(".check-all").attr("src", "../../image/checked.png");
  288. } else {
  289. $(".check-all").attr("src", "../../image/checkun.png");
  290. }
  291. $(".pay-total").html(noc);
  292. }
  293. $(".check-all").on("tap", function() {
  294. if ($(this).attr("src") == "../../image/checkun.png") {
  295. $(this).attr("src", "../../image/checked.png");
  296. $(".check-btn").attr("src", "../../image/checked.png");
  297. } else {
  298. $(this).attr("src", "../../image/checkun.png");
  299. $(".check-btn").attr("src", "../../image/checkun.png");
  300. }
  301. getTotal();
  302. return false;
  303. })
  304. $(".order-list").on("tap", ".order-list-goods", function() {
  305. if ($(this).find(".check-btn").attr("src") == "../../image/checkun.png") {
  306. $(this).find(".check-btn").attr("src", "../../image/checked.png");
  307. } else {
  308. $(this).find(".check-btn").attr("src", "../../image/checkun.png");
  309. }
  310. getcheckall();
  311. getTotal();
  312. return false;
  313. })
  314. var _totalMoney = 0.00;
  315. var _len = 0;
  316. function getTotal() {
  317. _totalMoney = 0.00;
  318. _len = 0;
  319. $(".total-money").html(_totalMoney);
  320. $(".pay-total").html("(" + _len + ")");
  321. $(".order-list-goods").each(function() {
  322. if ($(this).find(".check-btn").attr("src") == "../../image/checked.png") {
  323. _totalMoney = _totalMoney + parseFloat($(this).find(".goods_price").html()) * $(this).find(".goods_num").html();
  324. _len += parseFloat($(this).find(".goods_num").html());
  325. }
  326. $(".total-money").html(_totalMoney.toFixed(2));
  327. $(".pay-total").html("(" + _len + ")");
  328. })
  329. if ($(".order-list-goods").length == 0) {
  330. $(".order-list").empty();
  331. $(".border-none").removeClass("mask-hidden");
  332. }
  333. }
  334. $(".to-pay").on("tap", function() {
  335. var _ids = [];
  336. if (_len == 0) {
  337. api.toast({ msg: '请选择商品!' });
  338. return false;
  339. }
  340. if (isEdit == true) {
  341. $(".order-list-goods").each(function() {
  342. if ($(this).find(".check-btn").attr("src") == "../../image/checked.png") {
  343. $(this).remove();
  344. _ids.push($(this).attr("keyid"));
  345. $("#btn_n"+$(this).attr("keyid")).remove();
  346. }
  347. })
  348. if ($(".order-list-goods").length == 0) {
  349. $(".order-list").empty();
  350. $(".order-list").addClass("mask-hidden");
  351. $(".border-none").removeClass("mask-hidden");
  352. }
  353. toast_loding_show();
  354. getcheckall()
  355. $.ajax({
  356. url: siteurl + 'v2/order/cart_drop',//'?do=delbuycar',
  357. data: {
  358. buyer_id: $api.getStorage("memberid"),
  359. store_id: _storeid,
  360. ids: _ids.toString()
  361. },
  362. headers: { "X-TOKEN": $api.getStorage("accesstoken") },
  363. dataType: 'json',
  364. type: 'post',
  365. success: function(datas) {
  366. toast_loding_hide();
  367. if (datas.result) {
  368. api.toast({ msg: '删除成功!' });
  369. getTotal();
  370. push_car_num();
  371. } else {
  372. errcode(datas, datas.code);
  373. }
  374. }
  375. });
  376. } else {
  377. var date = new Date;
  378. var year = date.getFullYear();
  379. var timestamp = year + "" + (new Date()).valueOf();
  380. var _goodsx = [];
  381. if ($(".order-list-goods").length > 0) {
  382. $(".order-list-goods").each(function() {
  383. if ($(this).find(".check-btn").attr("src") == "../../image/checked.png") {
  384. _goodsx.push({"goods_id": $(this).attr("keyid"), "buy_num": $(this).find(".goods_num").text()});
  385. }
  386. })
  387. $.ajax({
  388. url: siteurl + 'v1/order/save_og',
  389. data: {
  390. store_id: _storeid,
  391. goods: JSON.stringify(_goodsx)
  392. },
  393. headers: { "X-TOKEN": $api.getStorage("accesstoken") },
  394. dataType: 'json',
  395. type: 'post',
  396. success: function(datas) {
  397. console.log(datas)
  398. if (datas.result) {
  399. //
  400. api.openWin({
  401. name: 'postaddr',
  402. url: './postaddr.html',
  403. bounces: false,
  404. pageParam: {
  405. gorderid: datas.data.order_id,
  406. storeid: _storeid
  407. }
  408. });
  409. } else {
  410. errcode(datas, datas.code);
  411. }
  412. }
  413. });
  414. } else {
  415. api.toast({ msg: '请选择商品!' });
  416. }
  417. }
  418. return false;
  419. })
  420. </script>
  421. </html>