wxd / MShopWeApp

Commit fabd3b7922996f38822ffd9bb773746a7ff7fc11

Authored by yvan.ni
1 parent 6539c9b3

购物车功能的修改，在点击+ 点击-，

Inline Side-by-side
Showing 3 changed files with 193 additions and 116 deletions
pages/cart/cart/cart.js
  View file @fabd3b7
... ... @@ -12,18 +12,23 @@ Page({
12 12 iurl: t.globalData.setting.imghost,
13 13 requestData: null,
14 14 checkAllToggle: 0,
15   - total_fee: 0, //结算金额
16   - total_num: 0, //结算数量
17   - all_num:0, //购物车中所有商品数量
  15 + total_fee: 0, //结算金额
  16 + total_num: 0, //结算数量
  17 + all_num: 0, //购物车中所有商品数量
18 18 allsto: null,
19 19 imgUrl: t.globalData.setting.imghost,
20   - is_has_flash:0, //是否又秒杀活动
21   - is_edit:0, //是否编辑
22   - is_load:0, //是否已加载
23   - up_dating:0 //更新中
  20 + is_has_flash: 0, //是否又秒杀活动
  21 + is_edit: 0, //是否编辑
  22 + is_load: 0, //是否已加载
  23 + up_dating: 0, //更新中
  24 + isreduce: 0, //商品数量是否可减
  25 + isadd: 0, //是否可以加商品数量
24 26 },
  27 +
25 28 onLoad: function() {
26   - wx.setNavigationBarTitle({title: "购物车", })
  29 + wx.setNavigationBarTitle({
  30 + title: "购物车",
  31 + })
27 32 var a = this;
28 33 //判断是否有登陆
29 34 t.auth.hadAuth() && t.getUserInfo(function() {
... ... @@ -31,22 +36,24 @@ Page({
31 36 });
32 37 },
33 38 onShow: function() {
34   - var th=this;
35   - this.getCardList();
36   - //--获取是否又秒杀活动--
37   - getApp().request.promiseGet("/api/ms/flash_sale/spikepage", {
38   - data: {
39   - store_id: oo.stoid,
40   - timetype: 2,
41   - is_end: 0,
42   - is_show: 1,
43   - pageSize: 1
44   - },
45   - }).then(res => {
46   - if(res.data.code==0 && res.data.data && res.data.data.pageData.length>0){
47   - th.setData({is_has_flash:1})
48   - }
49   - });
  39 + var th = this;
  40 + this.getCardList();
  41 + //--获取是否又秒杀活动--
  42 + getApp().request.promiseGet("/api/ms/flash_sale/spikepage", {
  43 + data: {
  44 + store_id: oo.stoid,
  45 + timetype: 2,
  46 + is_end: 0,
  47 + is_show: 1,
  48 + pageSize: 1
  49 + },
  50 + }).then(res => {
  51 + if (res.data.code == 0 && res.data.data && res.data.data.pageData.length > 0) {
  52 + th.setData({
  53 + is_has_flash: 1
  54 + })
  55 + }
  56 + });
50 57  
51 58 },
52 59  
... ... @@ -79,12 +86,13 @@ Page({
79 86 },
80 87 success: function(su) {
81 88 //按门店分类的数组
82   - var arr = new Array(),carr = su.data.data.pageData;
83   - var all_num=0;
  89 + var arr = new Array(),
  90 + carr = su.data.data.pageData;
  91 + var all_num = 0;
84 92  
85 93 for (var i = 0; i < carr.length; i++) {
86 94 var item = carr[i];
87   - all_num+=item.goods_num;
  95 + all_num += item.goods_num;
88 96 item.original_img = oo.imghost + item.original_img;
89 97 item.selected = 0;
90 98  
... ... @@ -127,7 +135,10 @@ Page({
127 135 console.log(arr);
128 136  
129 137 th.setData({
130   - requestData: arr,all_num:all_num,is_load:1,is_edit:0
  138 + requestData: arr,
  139 + all_num: all_num,
  140 + is_load: 1,
  141 + is_edit: 0
131 142 }),
132 143 th.doCheckAll(), wx.stopPullDownRefresh();
133 144 }
... ... @@ -173,28 +184,28 @@ Page({
173 184  
174 185 //-------------加数量---------------------
175 186 addNum: function(t) {
176   -
177   - if(this.data.up_dating==1) return false;
178   - this.data.up_dating=1;
  187 + if (this.data.up_dating == 1) return false;
  188 + this.data.up_dating = 1;
179 189  
180 190 var a = t.currentTarget.dataset.item;
181 191 var b = t.currentTarget.dataset.pitems;
182 192 a = this.data.requestData[b].goods[a];
183 193  
184   - if (!(a.goods_num >= a.store_count)) {
185   - var e = {
186   - goods_num: a.goods_num + 1,
187   - id: a.id,
188   - goods_id: a.goods_id,
189   - store_id: oo.stoid
190   - };
191   - isShowLoading: 0;
192   - this.postCardList(e, t.currentTarget.dataset.item, t.currentTarget.dataset.pitems);
193   - }else{
194   - wx.showModal({
195   - title: '提示',
196   - content: '购买的数量不能超出库存数量',
197   - });
  194 + if (a.goods_num<a.store_count) {
  195 + var e = {
  196 + goods_num: a.goods_num + 1,
  197 + id: a.id,
  198 + goods_id: a.goods_id,
  199 + store_id: oo.stoid
  200 + };
  201 + isShowLoading: 0;
  202 + this.postCardList(e, t.currentTarget.dataset.item, t.currentTarget.dataset.pitems);
  203 + } else {
  204 + wx.showModal({
  205 + title: '提示',
  206 + content: '购买的数量不能超出库存数量',
  207 + });
  208 + this.data.up_dating = 0;
198 209 }
199 210 },
200 211 //-------------减数量---------------------
... ... @@ -219,7 +230,8 @@ Page({
219 230 checkAll: function() {
220 231 var e = this,
221 232 dda = e.data.requestData,
222   - tfeel = 0,t_num=0,
  233 + tfeel = 0,
  234 + t_num = 0,
223 235 text_arr = "";
224 236 for (var i = 0; i < dda.length; i++) {
225 237 var item = dda[i].goods;
... ... @@ -261,7 +273,7 @@ Page({
261 273 e.setData({
262 274 checkAllToggle: !e.data.checkAllToggle,
263 275 total_fee: tfeel.toFixed(2),
264   - total_num:t_num,
  276 + total_num: t_num,
265 277 });
266 278 }
267 279 },
... ... @@ -273,7 +285,9 @@ Page({
273 285 item = this.data.requestData[pitems].goods,
274 286 sele = this.data.requestData[pitems].selected;
275 287  
276   - var isok = 1,fir = 0,iarr = item;
  288 + var isok = 1,
  289 + fir = 0,
  290 + iarr = item;
277 291 if (!sele && item.length > 0) {
278 292 for (var i = 0; i < iarr.length; i++) {
279 293 if (iarr[i].distr_type != 0) {
... ... @@ -354,20 +368,23 @@ Page({
354 368 //----------检查是否全选---------
355 369 doCheckAll: function() {
356 370 var th = this,
357   - tfeel = 0,t_num=0,
  371 + tfeel = 0,
  372 + t_num = 0,
358 373 ischeck = 1,
359   - car = this.data.requestData,all_num=0;
  374 + car = this.data.requestData,
  375 + all_num = 0;
360 376  
361 377 for (var a = 0; a < car.length; a++) {
362   - var item = car[a].goods,is_s_sele = 1;
  378 + var item = car[a].goods,
  379 + is_s_sele = 1;
363 380 for (var c = 0; c < item.length; c++) {
364   - all_num+=item[c].goods_num;
  381 + all_num += item[c].goods_num;
365 382 if (item[c].selected == 0) {
366 383 ischeck = 0;
367 384 is_s_sele = 0;
368 385 } else {
369 386 tfeel += item[c].goods_num * item[c].goods_price;
370   - t_num+= item[c].goods_num;
  387 + t_num += item[c].goods_num;
371 388 }
372 389 }
373 390  
... ... @@ -379,9 +396,9 @@ Page({
379 396 }
380 397 this.setData({
381 398 checkAllToggle: ischeck,
382   - total_fee: tfeel.toFixed(2)
383   - ,all_num:all_num,
384   - total_num:t_num
  399 + total_fee: tfeel.toFixed(2),
  400 + all_num: all_num,
  401 + total_num: t_num
385 402 });
386 403 },
387 404  
... ... @@ -392,7 +409,7 @@ Page({
392 409 console.log('update');
393 410 console.log(t);
394 411 rq.get("/api/weshop/goods/get/" + oo.stoid + "/" + t.goods_id, {
395   - isShowLoading:0,
  412 + isShowLoading: 0,
396 413 async success(d) {
397 414 var limit = d.data.data.viplimited;
398 415 var store_count = d.data.data.store_count;
... ... @@ -427,6 +444,7 @@ Page({
427 444 e.setData({
428 445 [txt]: cbuy > 0 ? cbuy : 0,
429 446 });
  447 + e.doCheckAll();
430 448 return false;
431 449 }
432 450  
... ... @@ -439,6 +457,7 @@ Page({
439 457 e.setData({
440 458 [txt]: store_count
441 459 });
  460 + e.doCheckAll();
442 461 return false;
443 462 }
444 463  
... ... @@ -459,6 +478,7 @@ Page({
459 478 e.setData({
460 479 [txt]: false_data.goods_num - false_data.buy_num
461 480 });
  481 + e.doCheckAll();
462 482 return false;
463 483 }
464 484  
... ... @@ -472,6 +492,7 @@ Page({
472 492 e.setData({
473 493 [txt]: false_data.redisnum
474 494 });
  495 + e.doCheckAll();
475 496 return false;
476 497 }
477 498  
... ... @@ -485,9 +506,9 @@ Page({
485 506 e.setData({
486 507 [txt]: false_data.false_data.buy_limit
487 508 });
  509 + e.doCheckAll();
488 510 return false;
489 511 }
490   -
491 512 e.update_cart(t, pitem, item);
492 513 }
493 514 })
... ... @@ -503,10 +524,9 @@ Page({
503 524 var e = this;
504 525 getApp().request.put("/api/weshop/cart/update", {
505 526 data: t,
506   - isShowLoading:0,
507 527 success: function(ee) {
508 528 var txt = "requestData[" + pitem + "].goods[" + item + "].goods_num";
509   - e.data.up_dating=0
  529 + e.data.up_dating = 0
510 530 e.setData({
511 531 [txt]: t.goods_num,
512 532 });
... ... @@ -722,13 +742,15 @@ Page({
722 742 },
723 743  
724 744 //点击编辑后的效果
725   - edit_cart:function (e) {
726   - var type=parseFloat(e.currentTarget.dataset.type);
727   - this.setData({is_edit:type});
  745 + edit_cart: function(e) {
  746 + var type = parseFloat(e.currentTarget.dataset.type);
  747 + this.setData({
  748 + is_edit: type
  749 + });
728 750 },
729 751  
730 752 //--多个删除购物车商品---
731   - check_del:function () {
  753 + check_del: function() {
732 754 var glist = ""; //用逗号隔开的
733 755 var user_id = getApp().globalData.user_id;
734 756 var th = this;
... ... @@ -744,13 +766,24 @@ Page({
744 766 }
745 767 }
746 768  
747   - if (ab == 0) { t.my_warnning("未选择商品", 0, th);return false; }
  769 + if (ab == 0) {
  770 + t.my_warnning("未选择商品", 0, th);
  771 + return false;
  772 + }
748 773 glist = glist.substring(0, glist.length - 1);
749 774 //要删除购物车中的商品
750   - var url = '/api/weshop/cart/delIds/' + oo.stoid + '/' +user_id+"/"+ glist;
  775 + var url = '/api/weshop/cart/delIds/' + oo.stoid + '/' + user_id + "/" + glist;
751 776 getApp().request.delete(url, {
752   - success: function(t) { th.getCardList();}
  777 + success: function(t) {
  778 + th.getCardList();
  779 + }
753 780 });
  781 + },
  782 + //跳到首页
  783 + goto: function(e) {
  784 + wx.switchTab({
  785 + url: '/pages/index/index/index',
  786 + })
754 787 }
755 788  
756 789 });
757 790 \ No newline at end of file
... ...
pages/cart/cart/cart.wxml
  View file @fabd3b7
  1 +<!-- 广告图片 -->
  2 +<navigator class="picture" url="/pages/activity/seckill_list/seckill_list" wx:if="{{is_has_flash}}">
  3 + <image class="picture" src="{{iurl}}miniapp/images/stores/Seckill.png"></image>
  4 +</navigator>
1 5 <view class="container" wx:if="{{requestData.length>0}}">
2   -
3   - <!-- 广告图片 -->
4   - <navigator class="picture" url="/pages/activity/seckill_list/seckill_list" wx:if="{{is_has_flash}}">
5   - <image class="picture" src="{{iurl}}miniapp/images/stores/Seckill.png"></image>
6   - </navigator>
7   -
8 6 <!-- 购物车商品框架 -->
9 7 <view class="login-in">
10 8 <!-- 编辑 -->
11   - <view class="padding flex-vertical-between fs30 Storenum">
  9 + <view class="padding flex-vertical-between fs30 Storenum store">
12 10 <view class="flex">
13 11 <view>商品数量:</view>
14 12 <view class="goods_num">{{all_num}}</view>
... ... @@ -19,31 +17,34 @@
19 17 <block wx:for="{{requestData}}" wx:key="{{index}}" wx:for-index="pidx">
20 18 <!-- 门店底下的商品 -->
21 19 <view class="store">
22   - <view class="shmd_m padding">
23   - <radio color="red" bindtap="check_th_all_item" class="goods-ico flex-center"
24   - checked="{{checkAllToggle||item.selected}}" data-pitems="{{pidx}}"></radio>
  20 + <view class="shmd_m">
  21 + <!-- 门店 -->
  22 + <radio color="red" bindtap="check_th_all_item" class="order-raido flex-center" checked="{{checkAllToggle||item.selected}}" data-pitems="{{pidx}}"></radio>
  23 +
25 24 <view class="flex-center">
26 25 <image src="{{iurl}}miniapp/images/stores/store.png"></image>
27   - <view class="shmd fs30" >{{item.pname}}</view>
  26 + <view class="shmd fs30">{{item.pname}}</view>
28 27 </view>
29 28 </view>
30   - <view class="order-item padding" data-item="{{idx}}" wx:for="{{item.goods}}" wx:for-item="items" wx:for-index="idx" wx:key="{{index}}">
31   - <view bindtap="check_th_item" class="goods-ico" data-check="{{items.selected}}" data-item="{{idx}}" data-pitems="{{pidx}}">
  29 + <view class="order-item" data-item="{{idx}}" wx:for="{{item.goods}}" wx:for-item="items" wx:for-index="idx" wx:key="{{index}}">
  30 + <view bindtap="check_th_item" class="order-raido flex-vertical " data-check="{{items.selected}}" data-item="{{idx}}" data-pitems="{{pidx}}">
32 31 <radio color="red" checked="{{checkAllToggle||items.selected}}"></radio>
33 32 </view>
34 33 <navigator class="goods-img rel" url="/pages/goods/goodsInfo/goodsInfo?goods_id={{items.goods_id}}">
35 34 <image class="wh100" src="{{items.original_img}}" binderror="bind_bnerr2" data-errorimg="requestData[{{pidx}}].goods[{{idx}}].original_img" data-url="{{items.original_img}}"></image>
36   - <view class="abs flex-center fs26" wx:if="{{items.distr_type==0}}">自选</view>
37   - <view class="abs flex-center fs26" wx:if="{{items.distr_type==1}}">自提</view>
38   - <view class="abs flex-center fs26" wx:if="{{items.distr_type==2}}">物流</view>
  35 + <view class="abs flex-center fs26" wx:if="{{items.distr_type==0}}">自选</view>
  36 + <view class="abs flex-center fs26" wx:if="{{items.distr_type==1}}">自提</view>
  37 + <view class="abs flex-center fs26" wx:if="{{items.distr_type==2}}">物流</view>
39 38 </navigator>
40 39 <view class="goods-cont">
41 40 <view class="goods-name">
42   - <navigator class="ellipsis-2 fs30" url="/pages/goods/goodsInfo/goodsInfo?goods_id={{items.goods_id}}">{{items.goods_name}}</navigator>
  41 + <navigator class="ellipsis-2 fs30" url="/pages/goods/goodsInfo/goodsInfo?goods_id={{items.goods_id}}">{{items.goods_name}}</navigator>
43 42  
44   - <view class="Specifications flex-center ellipsis-1" wx:if="{{items.goods_color || items.goods_spec}}">
45   - {{items.goods_color}}{{items.goods_color?"/":''}}{{items.goods_spec}}</view>
46   - <view class="Specifications flex-center ellipsis-1" wx:else>规格1</view>
  43 + <view class="Specifications flex-center">
  44 + <view class="ellipsis-1" wx:if="{{items.goods_color || items.goods_spec}}">
  45 + {{items.goods_color}}{{items.goods_color?"/":''}}{{items.goods_spec}}</view>
  46 + <view class="ellipsis-1" wx:else>规格1</view>
  47 + </view>
47 48 </view>
48 49  
49 50 <view class="flex alend jc_sb">
... ... @@ -65,8 +66,8 @@
65 66  
66 67 <view class="pay-for flex-vertical-between">
67 68 <view class="allradio flex-vertical-between">
68   - <view class="flex-vertical">
69   - <radio bindtap="checkAll" color="red" checked="{{checkAllToggle}}"></radio>
  69 + <view class="flex-vertical" bindtap="checkAll">
  70 + <radio class="order-raido" color="red" checked="{{checkAllToggle}}"></radio>
70 71 <view class="all fs30">全选</view>
71 72 </view>
72 73  
... ... @@ -88,11 +89,18 @@
88 89 </view>
89 90 </view>
90 91 </view>
91   -<view class="no-data" wx:if="{{(!requestData|| requestData.length==0) && is_load}}">
92   - <image class="cart-image" src="{{imgUrl}}/miniapp/images/cart-null.png"></image>
93   - <view class="no-data-title">购物车暂无商品</view>
94   - <navigator class="lookat" openType="switchTab" url="/pages/index/index/index"> 去逛逛 </navigator>
95   -</view>
96 92  
  93 +<!-- 购物车为空 -->
  94 +<view class="empty_order" wx:if="{{(!requestData|| requestData.length==0) && is_load}}">
  95 + <view class="flex-level">
  96 + <image src="{{iurl}}miniapp/images/stores/nocart.png"></image>
  97 + </view>
  98 + <view class="flex-level fs32 xc-ash">购物车竟然是空的</view>
  99 + <view class="flex-level">
  100 + <navigator url="/pages/index/index/index" bindtap="goto">
  101 + <view class="flex-center fs30 white">去首页逛逛</view>
  102 + </navigator>
  103 + </view>
  104 +</view>
97 105  
98 106 <warn id="warn"></warn>
99 107 \ No newline at end of file
... ...
pages/cart/cart/cart.wxss
  View file @fabd3b7
1 1 page {
2   - background-color: #fff;
  2 + background-color: rgb(245, 245, 245);
3 3 font-family: crosoft yahei;
4 4 }
5 5  
... ... @@ -30,18 +30,18 @@ page {
30 30 height: 100%;
31 31 align-items: center;
32 32 justify-content: center;
33   - background-color: #fff;
34   - padding-bottom: 100rpx;
  33 + background-color: rgb(255, 255, 255);
  34 + margin-bottom: 99rpx;
35 35 }
36 36  
37 37 radio {
38 38 transform: scale(0.8);
39   - margin-right: 30rpx;
40 39 }
41 40  
42 41 .login-in {
43 42 width: 100%;
44 43 box-sizing: border-box;
  44 + background-color: rgb(255, 255, 255);
45 45 }
46 46  
47 47 .order-item {
... ... @@ -49,11 +49,19 @@ radio {
49 49 height: 246rpx;
50 50 border-top: 3rpx solid rgb(245, 245, 245);
51 51 align-items: center;
  52 + padding-right: 30rpx;
52 53 }
53 54  
54 55 .goods-ico {
55 56 display: flex;
56 57 align-items: center;
  58 + padding: 0rpx 30rpx;
  59 +}
  60 +
  61 +.order-raido {
  62 + height: 100%;
  63 + padding-left: 30rpx;
  64 + padding-right: 25rpx;
57 65 }
58 66  
59 67 .goods-img {
... ... @@ -61,21 +69,22 @@ radio {
61 69 height: 180rpx;
62 70 font-size: 0;
63 71 overflow: hidden;
  72 + border: 2rpx solid rgb(236, 236, 236);
64 73 }
65 74  
66 75 .goods-cont {
67   - width: 400rpx;
  76 + width: 385rpx;
68 77 height: 165rpx;
69 78 font-size: 28rpx;
70 79 margin-left: 35rpx;
71   - padding-top: 10rpx;
  80 + padding-top: 7rpx;
72 81 padding-bottom: 5rpx;
73 82 }
74 83  
75 84 .goods-name {
76 85 line-height: 32rpx;
77 86 color: #333;
78   - height: 130rpx;
  87 + height: 125rpx;
79 88 }
80 89  
81 90 .goods-attribute {
... ... @@ -85,12 +94,6 @@ radio {
85 94 color: #999;
86 95 }
87 96  
88   -/* .goods-price {
89   - height: 40rpx;
90   - line-height: 40rpx;
91   - margin-top: 10rpx;
92   -} */
93   -
94 97 .btn-del {
95 98 position: absolute;
96 99 right: 0;
... ... @@ -107,9 +110,9 @@ radio {
107 110 }
108 111  
109 112 .count>view, .count>input {
110   - width: 40rpx;
111   - height: 35rpx;
112   - line-height: 34rpx;
  113 + width: 50rpx;
  114 + height: 40rpx;
  115 + line-height: 40rpx;
113 116 text-align: center;
114 117 display: flex;
115 118 font-size: 18rpx;
... ... @@ -118,7 +121,7 @@ radio {
118 121 }
119 122  
120 123 .count>.goodadd {
121   - width: 64rpx;
  124 + width: 67rpx;
122 125 font-size: 24rpx;
123 126 }
124 127  
... ... @@ -202,9 +205,13 @@ radio {
202 205 margin-top: 26rpx;
203 206 }
204 207  
205   -.shmd { margin-left: 5rpx;}
  208 +.shmd {
  209 + margin-left: 5rpx;
  210 +}
206 211  
207   -.store{ border-top: 7rpx solid rgb(245, 245, 245);}
  212 +.store {
  213 + border-bottom: 7rpx solid rgb(245, 245, 245);
  214 +}
208 215  
209 216 .login-in .Storenum {
210 217 height: 80rpx;
... ... @@ -216,8 +223,8 @@ radio {
216 223 }
217 224  
218 225 .allradio {
219   - padding-left: 30rpx;
220 226 width: 600rpx;
  227 + height: 100%;
221 228 }
222 229  
223 230 .allradio .all {
... ... @@ -225,10 +232,10 @@ radio {
225 232 }
226 233  
227 234 .Specifications {
228   - padding: 3rpx 5rpx;
  235 + padding: 3rpx 8rpx;
229 236 margin-top: 8rpx;
230 237 font-size: 22rpx;
231   - max-width: 105rpx;
  238 + max-width: 115rpx;
232 239 height: 30rpx;
233 240 line-height: 29rpx;
234 241 background-color: rgb(236, 236, 236);
... ... @@ -238,6 +245,10 @@ radio {
238 245 color: rgb(63, 63, 63);
239 246 }
240 247  
  248 +.ellipsis-2 {
  249 + max-height: 64rpx;
  250 +}
  251 +
241 252 .abs {
242 253 top: 15rpx;
243 254 left: -39rpx;
... ... @@ -248,3 +259,28 @@ radio {
248 259 color: rgb(255, 255, 255);
249 260 line-height: 40rpx;
250 261 }
  262 +
  263 +/* 购物车为空 */
  264 +
  265 +.empty_order image {
  266 + width: 329rpx;
  267 + height: 229rpx;
  268 + margin-top: 140rpx;
  269 +}
  270 +
  271 +.empty_order .xc-ash {
  272 + margin-top: 25rpx;
  273 + font-weight: 600px;
  274 +}
  275 +
  276 +.empty_order navigator {
  277 + margin-top: 60rpx;
  278 + border-radius: 40rpx;
  279 +}
  280 +
  281 +.empty_order navigator view {
  282 + width: 247rpx;
  283 + height: 56rpx;
  284 + background-color: rgb(255, 72, 72);
  285 + border-radius: 40rpx;
  286 +}
... ...