uniapp 关于购物车的全选与价格变换（添加了删除方法）

这是简略版的，没有获取登录信息，也没有数据库，数据本地模拟，

 

（后面有一个请求数据的，由于我没有数据，请求什么的也没有测试）

 

（最后面新加了一个对选中商品删除方法。）

  1 <template style="height: 100%;">
  2     <view>
  3         <view class="CartK" v-if="flag">
  4             <view class="CartKBox">
  5                 <image src="../../static/img/gwc.png" mode=""></image>
  6                 <text>购物车空空如也</text>
  7             </view>
  8         </view>
  9         <view class="CartM" v-else="!flag">
 10             <view class="CartTop" @click="tabDelete">
 11                 <text>{{Delete==false?'编辑商品':'完成'}}</text>
 12             </view>
 13             <view class="CartCon">
 14                 <view class="CartConList" v-for="(item,index) in shangpin" :key="index">
 15                     <view class="CartConListLeft">
 16                         <checkbox-group @change="selected(item)">
 17                             
 18                                 <checkbox style="transform:scale(0.7)" :checked="item.flag"/>
 19                             
 20                         </checkbox-group>
 21                     </view>
 22                     <view class="CartConListRight">
 23                         <view class="CartImg">
 24                             <image src="../../static/image/banner3.png" mode=""></image>
 25                         </view>
 26                         <view class="CartTxt">
 27                             <view class="CartTxtTop">
 28                                 <text>{{item.title}}</text>
 29                             </view>
 30                             <view class="CartTxtBot">
 31                                 <view class="CartTxtBotPrice">
 32                                     <text>￥{{item.price}}</text>
 33                                 </view>
 34                                 <view class="CartTxtBotNum">
 35                                     <text class="NumReduce" @click="NumReduce(item)">-</text>
 36                                     <text>{{item.nums}}</text>
 37                                     <text class="NumAdd" @click="NumAdd(item)">+</text>
 38                                     本
 39                                 </view>
 40                             </view>
 41                         </view>
 42                     </view>
 43                 </view>
 44             </view>
 45             <view class="CartBot">
 46                 <view class="CartBotLeft">
 47                     <checkbox-group @change="selectedall()">
 48                         <checkbox class="quanxuananniu" :checked="allchecked" style="transform:scale(0.7)"/>
 49                     </checkbox-group>
 50                     全选
 51                 </view>
 52                 <view class="CartBotRightDelete" v-if="Delete">
 53                     <view class="CartBotRightDel" @click="DeleteChecked()">
 54                         <text>删除</text>
 55                     </view>
 56                 </view>
 57                 <view class="CartBotRight" v-else="!Delete">
 58                     <view class="CartBotRightSum">
 59                         合计:<text>￥{{totalPrice}}</text>
 60                     </view>
 61                     <view class="CartBotRightJie">
 62                         <text>结算</text>
 63                     </view>
 64                 </view>
 65                 
 66             </view>
 67         </view>
 68     </view>
 69 </template>
 70 
 71 <script>
 72     export default {
 73         data() {
 74             return {
 75  79                 
 80                 //删除与结算切换
 81                 Delete:false,
 82                 
 83                 
 84                 
 85                 //购物车内是否有商品
 86                 flag: false,
 87                 
 88                 //全选
 89                 allchecked:false,
 90                 
 91                 //商品的数组
 92                 shangpin:[
 93                     {    id:1,
 94                         title:'商品1',
 95                         price:326,
 96                         nums:5,
 97                         flag:false,
 98                     },
 99                     {    id:2,
100                         title:'商品2',
101                         price:656,
102                         nums:10,
103                         flag:false,
104                     },
105                     ]
106                 
107             };
108         },
109         computed: {
110             //监控数据变化
111             
112             //当数量变化时，下面的价格总数也跟着变化
113             totalPrice(){
114                 let totalPrice=0;
115                 this.shangpin.map(item=>{
116                     item.flag?totalPrice+= item.nums * item.price : totalPrice+=0;
117                 })
118                 return totalPrice;
119             }
120         },
121         onShow:function(){
122             try{
123                 
124             }catch(err){
125                 
126             }
127         },
128         methods: {
129             //切换结算与删除
130             tabDelete:function(){
131                 this.Delete=!this.Delete;
132             },
133             
134             //减号操作
135             NumReduce:function(item){
136                 let num=item.nums;
137                 
138                 //判断是否到0
139                 if(num>1){
140                     num-=1;
141                 }else{
142                     num=1;
143                     return num;
144                 };
145                 
146                 //判断是否登录,
147                 // let token=uni.getStorageSync('token');
148                 
149                 //数量加减
150                 item.nums=num;
151                 
152             },
153             
154             //加号操作
155             NumAdd:function(item){
156                 let num=item.nums;
157                 num+=1;
158                 
159                 //判断是否登录(目前没有写)
160                 
161                 //数量加减
162                 item.nums=num;
163             },
164             
165             //单个商品勾选
166             selected:function(item){
167                 item.flag=!item.flag;
168                 if(!item.flag){
169                     this.allchecked=false;
170                     
171                 }else{
172                     const test=this.shangpin.every(item=>{
173                         return item.flag===true;
174                     });
175                     if(test){
176                         this.allchecked=true;
177                     }else{
178                         this.allchecked=false;
179                     }
180                 }
181                 
182             },
183             
184             //全选按钮
185             selectedall:function(){
186                 this.allchecked=!this.allchecked;
187                 if(this.allchecked){
188                     this.shangpin.map(item=>{
189                         item.flag=true;
190                     })
191                 }else{
192                     this.shangpin.map(item=>{
193                         item.flag=false;
194                     })
195                 }
196             },
197             
198             //删除商品（未完成，只能一个一个的删除。。。。。）
199             DeleteChecked:function(){
200                 this.shangpin.forEach(item=>{
201                     if(item.flag==true){
202                         console.log(item)
203                         this.shangpin.splice(item.index,1)
204                     }
205                 })
206         
207                 
208             }
209         },
210         components: {
211             
212         }
213     }
214 </script>
215 
216 <style lang="scss">
217 page{
218     height: 100%;
219     background-color: #F6F5F5;
220     .CartK {
221         width: 750rpx;
222         height: 100%;
223 
224         .CartKBox {
225             width: 360rpx;
226             height: 300rpx;
227             margin: 160rpx auto;
228             @extend .FlexColumnMiddle;
229 
230             image {
231                 width: 328rpx;
232                 height: 282rpx;
233                 @extend .FlexMiddle;
234             }
235 
236             text {
237                 margin-top: 36rpx;
238                 font-size: 28rpx;
239                 color: #999999;
240                 font-weight: bold;
241             }
242         }
243 
244     }
245 
246     .CartM {
247         @extend .WidthAll;
248         background-color: #F6F5F5;
249         height: 100%;
250 
251         .CartTop {
252             @extend .WidthAll;
253             height: 36rpx;
254             padding: 20rpx 0;
255             display: flex;
256             justify-content: flex-end;
257             align-items: center;
258             background-color: #FFFFFF;
259 
260             text {
261                 width: 156rpx;
262                 height: 36rpx;
263                 margin-right: 20rpx;
264                 font-size: 26rpx;
265                 color: #666666;
266                 font-weight: bold;
267                 text-align: center;
268             }
269 
270         }
271 
272         .CartCon {
273             @extend .WidthAll;
274             height: 100%;
275             .CartConList{
276                 margin-top: 20rpx;
277                 width: 750rpx;
278                 height: 276rpx;
279                 background-color: #FFFFFF;
280                 @extend .FlexMiddle;
281                 .CartConListLeft{
282                     @extend .FlexMiddle;
283                     height: 100%;
284                 }
285                 .CartConListRight{
286                     width: 630rpx;
287                     height: 190rpx;
288                     
289                     @extend .FlexMiddle;
290                     .CartImg{
291                         width: 241rpx;
292                         height: 190rpx;
293                         @extend .FlexMiddle;
294                         image{
295                             width: 241rpx;
296                             height: 190rpx;
297                             @extend .FlexMiddle;
298                         }
299                     }
300                     .CartTxt{
301                         width: 373rpx;
302                         height: 190rpx;
303                         margin-left: 16rpx;
304                         .CartTxtTop{
305                             width: 373rpx;
306                             height: 84rpx;
307                             font-size: 28rpx;
308                             color: #333333;
309                             line-height: 42rpx;
310                         }
311                         .CartTxtBot{
312                             width: 373rpx;
313                             height: 52rpx;
314                             margin-top: 40rpx;
315                             @extend .FlexMiddleB;
316                             .CartTxtBotPrice{
317                                 width: 156rpx;
318                                 text-align: left;
319                                 font-size: 26rpx;
320                                 font-weight: bold;
321                                 color: #FF3C31;
322                             }
323                             .CartTxtBotNum{
324                                 width: 196rpx;
325                                 margin-right: 20rpx;
326                                 @extend .FlexMiddle;
327                                 font-size: 24rpx;
328                                 color: #999999;
329                                 font-weight: bold;
330                                 text{
331                                     border: 1rpx solid #E5E5E5;
332                                     border-right: none ;
333                                     padding: 14rpx 24rpx;
334                                     
335                                 }
336                                 .NumAdd{
337                                     border-right: 1rpx solid #E5E5E5;
338                                     margin-right: 10rpx;
339                                 }
340                             }
341                         }
342                         
343                     }
344                     
345                 }
346                 
347             }
348             
349 
350         }
351         .CartBot{
352             width: 750rpx;
353             height: 98rpx;
354             position: fixed;
355             bottom: 0;
356             left: 0;
357             background-color: #FFFFFF;
358             z-index: 99;
359             @extend .FlexMiddleB;
360             
361             .CartBotLeft{
362                 width: 132rpx;
363                 font-size: 26rpx;
364                 color: #666666;
365                 font-weight: bold;
366                 @extend .FlexMiddle;
367                 
368             }
369             .CartBotRight{
370                 width: 330rpx;
371                 @extend .FlexMiddleB;
372                 .CartBotRightSum{
373                     font-size: 26rpx;
374                     color: #666666;
375                     font-weight: bold;
376                     @extend .FlexMiddle;
377                     text{
378                         margin-left: 14rpx;
379                         color: #FF3C31;
380                     }
381                 }
382                 .CartBotRightJie{
383                     width: 160rpx;
384                     height: 98rpx;
385                     background-color: #FF0015;
386                     color: #FFFFFF;
387                     font-size: 30rpx;
388                     @extend .FlexMiddle;
389                     // letter-spacing: 10rpx;
390                 }
391             }
392             .CartBotRightDelete{
393                 display: flex;
394                 align-items: center;
395                 justify-content: flex-end;
396                 .CartBotRightDel{
397                     width: 160rpx;
398                     height: 98rpx;
399                     background-color: #FF0015;
400                     color: #FFFFFF;
401                     font-size: 30rpx;
402                     @extend .FlexMiddle;
403                 }
404                 
405             }
406         }
407     }
408 
409 }
410 </style>

 

 

 

这里是有发送请求的一个版块（第 29 ~31 行的代码是可以单个商品删除的，但是我没有添加样式，需要调整一下再使用）

 

  1 <template style="height: 100%;">
  2     <view class="page" >
  3         <view class="CartK" v-if="flag">
  4             <view class="CartKBox">
  5                 <image src="../../static/img/gwc.png" mode=""></image>
  6                 <text>购物车空空如也</text>
  7             </view>
  8         </view>
  9         <view class="CartM" v-else="!flag">
 10             <view class="CartTop" @click="tabDelete">
 11                 <text>{{Delete==false?'编辑商品':'完成'}}</text>
 12             </view>
 13             <view class="CartCon">
 14                 <view class="CartConList" v-for="(item,index) in shangpin" :key="index">
 15                     <view class="CartConListLeft">
 16                         <checkbox-group @change="selected(item)">
 17                             
 18                                 <checkbox style="transform:scale(0.7)" :checked="item.flag"/>
 19                             
 20                         </checkbox-group>
 21                     </view>
 22                     <view class="CartConListRight">
 23                         <view class="CartImg">
 24                             <image src="../../static/image/banner3.png" mode=""></image>
 25                         </view>
 26                         <view class="CartTxt">
 27                             <view class="CartTxtTop">
 28                                 <text>{{item.title}}</text>
 29                                 <view class="shanchu" @click="shanchu(item,index)">
 30                                     删除
 31                                 </view>
 32                             </view>
 33                             <view class="CartTxtBot">
 34                                 <view class="CartTxtBotPrice">
 35                                     <text>￥{{item.price}}</text>
 36                                 </view>
 37                                 <view class="CartTxtBotNum">
 38                                     <text class="NumReduce" @click="NumReduce(item)">-</text>
 39                                     <text>{{item.nums}}</text>
 40                                     <text class="NumAdd" @click="NumAdd(item)">+</text>
 41                                     本
 42                                 </view>
 43                             </view>
 44                         </view>
 45                     </view>
 46                 </view>
 47             </view>
 48             <view class="CartBot">
 49                 <view class="CartBotLeft">
 50                     <checkbox-group @change="selectedall()">
 51                         <checkbox class="quanxuananniu" :checked="allchecked" style="transform:scale(0.7)"/>
 52                     </checkbox-group>
 53                     全选
 54                 </view>
 55                 <view class="CartBotRightDelete" v-if="Delete">
 56                     <view class="CartBotRightDel" @click="DeleteChecked()">
 57                         <text>删除</text>
 58                     </view>
 59                 </view>
 60                 <view class="CartBotRight" v-else="!Delete">
 61                     <view class="CartBotRightSum">
 62                         合计:<text>￥{{totalPrice}}</text>
 63                     </view>
 64                     <view class="CartBotRightJie">
 65                         <text>结算</text>
 66                     </view>
 67                 </view>
 68                 
 69             </view>
 70         </view>
 71     </view>
 72 </template>
 73 
 74 <script>
 75     export default {
 76         data() {
 77             return {
 78  82                 
 83                 //删除与结算切换
 84                 Delete:false,
 85                 
 86                 
 87                 
 88                 //购物车内是否有商品
 89                 flag: false,
 90                 
 91                 //全选
 92                 allchecked:false,
 93                 
 94                 //商品的数组
 95                 shangpin:[
 96                     {    id:1,
 97                         title:'商品1',
 98                         price:326,
 99                         nums:5,
100                         flag:false,
101                     },
102                     {    id:2,
103                         title:'商品2',
104                         price:656,
105                         nums:10,
106                         flag:false,
107                     },
108                     ]
109                 
110             };
111         },
112         computed: {
113             //监控数据变化
114             
115             //当数量变化时，下面的价格总数也跟着变化
116             totalPrice(){
117                 let totalPrice=0;
118                 this.shangpin.map(item=>{
119                     item.flag?totalPrice+= item.nums * item.price : totalPrice+=0;
120                 })
121                 return totalPrice;
122             }
123         },
124         onShow:function(){
125             //获取一下本地用户信息，然后请求购物车数据
126             try{
127                 let userid=uni.getStorageSync("userid") //获取缓存中的用户id
128                 let token=uni.getStorageSync("token") //获取缓存中的token值
129                 
130                 if(userid&&token){ //两个值都有的时候才可以访问购物车，不然就跳转到登录页面
131                     uni.request({
132                         
133                         //发送请求,并且要有相对应的userid和token值，作为请求参数
134                         url:'xxxxx',
135                         method:'GET',
136                         data:{
137                             userid,
138                             token
139                         },
140                         // success:(res)=>{
141                         //     console.log(res.data);
142                         //     this.shangpin=res.data;
143                         // }
144                         
145                     }).then(res=>{
146                         if(res.data.code==='10019'){//没有登录的情况下，进行页面跳转
147                             uni.showToast({
148                                 title:"请先登录"
149                             }),
150                             
151                             //跳转页面
152                             uni.navigateTo({
153                                 url:'xxxxxx'
154                             })
155                         }else if(res.data.code==='10012'){//符合登录条件后，但没有商品，改变购物车页面，显示内容
156                             uni.showToast({
157                                 title:"请选择商品"
158                             }),
159                             this.flag=true
160                         }else{
161                             uni.showToast({
162                                 title:'获取列表成功'
163                             }),
164                             this.flag=true,
165                             res.data.shuju.map(item=>{
166                                 item.flag=true
167                             })
168                             this.shangpin=res.data.shuju
169                         }
170                     })
171                     
172                 }else{
173                     uni.showToast({
174                         title:'请先登录'
175                     })
176                     uni.navigateTo({
177                         url:'xxxxxx'
178                     })
179                 }
180             }catch(err){
181                 
182             }
183         },
184         methods: {
185             //切换结算与删除
186             tabDelete:function(){
187                 this.Delete=!this.Delete;
188             },
189             
190             //减号操作
191             NumReduce:function(item){
192                 let num=item.nums;
193                 
194                 //判断是否到0
195                 if(num>1){
196                     num-=1;
197                 }else{
198                     num=1;
199                     return num;
200                 };
201                 
202                 //判断是否登录,然后传对应的接口进行后台数据修改
203                 let token=uni.getStorageSync('token');
204                 uni.request({
205                     url:'xxxxxx',
206                     data::{
207                         token,
208                         cartid:item.id,
209                         num
210                     }
211                 }).then(res=>{
212                     if(res.data.code==='10019'){//没有登录的情况下，进行页面跳转
213                         
214                             uni.showToast({
215                                 title:"请先登录"
216                             }),
217                             
218                             //跳转页面
219                             uni.navigateTo({
220                                 url:'xxxxxx/updata'
221                             })
222                     }else{
223                         uni.showToast({
224                             title:"修改成功"
225                         }),
226                         
227                         //数量加减
228                         item.nums=num;
229                     }
230                 })
231                 
232                 //数量加减
233                 // item.nums=num;
234                 
235             },
236             
237             //加号操作
238             NumAdd:function(item){
239                 let num=item.nums;
240                 
241                 //判断是否登录
242                 let token=uni.getStorageSync('token');
243                 uni.request({
244                     url:'xxxxxx/updata',
245                     data:{
246                         token,
247                         cartid:item.id,
248                         num
249                     }
250                 }).then(res=>{
251                     if(res.data.code==='10019'){
252                         uni.showToast({
253                             title:"请先登录"
254                         }),
255                         
256                         //跳转页面
257                         uni.navigateTo({
258                             url:'xxxxxx/xxxxx'
259                         })
260                     }else{
261                         uni.showToast({
262                             title:"修改成功"
263                         }),
264                         
265                         //数量加减
266                         num+=1;
267                         item.nums=num;
268                     }
269                 })
270                 
271                 //数量加减
272                 // item.nums=num;
273             },
274             
275             
276             //单个删除商品
277             shanchu:function(item,index){
278                 let token=uni.getStorageSync('token');
279                 uni.request({
280                     url:'xxxxxx/delete',
281                     data:{
282                         token,
283                         cartid:item.id
284                     }
285                 }).then(res=>{
286                     if(res.data.code==='10019'){
287                         uni.showToast({
288                             title:"请先登录"
289                         });
290                         
291                         //跳转页面
292                         uni.navigateTo({
293                             url:'xxxxxx/xxxxx'
294                         })
295                     }else{
296                         uni.showToast({
297                             title:"删除成功"
298                         }),
299                         this.shangpin.splice(index,1),
300                         if(this.shangpin.length===0){
301                             this.flag=true;
302                         }
303                         
304                     }
305                 })
306             },
307             
308             
309             //删除选中商品
310             DeleteChecked:function(){
311                 this.shangpin.forEach(item=>{
312                     if(item.flag==true){
313                         console.log(item)
314                         this.shangpin.splice(item.index,1)
315                     }
316                 })
317         
318                 
319             },
320             //单个商品勾选
321             selected:function(item){
322                 item.flag=!item.flag;
323                 if(!item.flag){
324                     this.allchecked=false;
325                     
326                 }else{
327                     const test=this.shangpin.every(item=>{
328                         return item.flag===true;
329                     });
330                     if(test){
331                         this.allchecked=true;
332                     }else{
333                         this.allchecked=false;
334                     }
335                 }
336                 
337             },
338             
339             //全选按钮
340             selectedall:function(){
341                 this.allchecked=!this.allchecked;
342                 if(this.allchecked){
343                     this.shangpin.map(item=>{
344                         item.flag=true;
345                     })
346                 }else{
347                     this.shangpin.map(item=>{
348                         item.flag=false;
349                     })
350                 }
351             }
352         },
353         components: {
354         }
355     }
356 </script>
357 
358 <style lang="scss">
359 page{
360     height: 100%;
361     background-color: #F6F5F5;
362     .CartK {
363         width: 750rpx;
364         height: 100%;
365 
366         .CartKBox {
367             width: 360rpx;
368             height: 300rpx;
369             margin: 160rpx auto;
370             @extend .FlexColumnMiddle;
371 
372             image {
373                 width: 328rpx;
374                 height: 282rpx;
375                 @extend .FlexMiddle;
376             }
377 
378             text {
379                 margin-top: 36rpx;
380                 font-size: 28rpx;
381                 color: #999999;
382                 font-weight: bold;
383             }
384         }
385 
386     }
387 
388     .CartM {
389         @extend .WidthAll;
390         background-color: #F6F5F5;
391         height: 100%;
392 
393         .CartTop {
394             @extend .WidthAll;
395             height: 36rpx;
396             padding: 20rpx 0;
397             display: flex;
398             justify-content: flex-end;
399             align-items: center;
400             background-color: #FFFFFF;
401 
402             text {
403                 width: 156rpx;
404                 height: 36rpx;
405                 margin-right: 20rpx;
406                 font-size: 26rpx;
407                 color: #666666;
408                 font-weight: bold;
409                 text-align: center;
410             }
411 
412         }
413 
414         .CartCon {
415             @extend .WidthAll;
416             height: 100%;
417             .CartConList{
418                 margin-top: 20rpx;
419                 width: 750rpx;
420                 height: 276rpx;
421                 background-color: #FFFFFF;
422                 @extend .FlexMiddle;
423                 .CartConListLeft{
424                     @extend .FlexMiddle;
425                     height: 100%;
426                 }
427                 .CartConListRight{
428                     width: 630rpx;
429                     height: 190rpx;
430                     
431                     @extend .FlexMiddle;
432                     .CartImg{
433                         width: 241rpx;
434                         height: 190rpx;
435                         @extend .FlexMiddle;
436                         image{
437                             width: 241rpx;
438                             height: 190rpx;
439                             @extend .FlexMiddle;
440                         }
441                     }
442                     .CartTxt{
443                         width: 373rpx;
444                         height: 190rpx;
445                         margin-left: 16rpx;
446                         .CartTxtTop{
447                             width: 373rpx;
448                             height: 84rpx;
449                             font-size: 28rpx;
450                             color: #333333;
451                             line-height: 42rpx;
452                         }
453                         .CartTxtBot{
454                             width: 373rpx;
455                             height: 52rpx;
456                             margin-top: 40rpx;
457                             @extend .FlexMiddleB;
458                             .CartTxtBotPrice{
459                                 width: 156rpx;
460                                 text-align: left;
461                                 font-size: 26rpx;
462                                 font-weight: bold;
463                                 color: #FF3C31;
464                             }
465                             .CartTxtBotNum{
466                                 width: 196rpx;
467                                 margin-right: 20rpx;
468                                 @extend .FlexMiddle;
469                                 font-size: 24rpx;
470                                 color: #999999;
471                                 font-weight: bold;
472                                 text{
473                                     border: 1rpx solid #E5E5E5;
474                                     border-right: none ;
475                                     padding: 14rpx 24rpx;
476                                     
477                                 }
478                                 .NumAdd{
479                                     border-right: 1rpx solid #E5E5E5;
480                                     margin-right: 10rpx;
481                                 }
482                             }
483                         }
484                         
485                     }
486                     
487                 }
488                 
489             }
490             
491 
492         }
493         .CartBot{
494             width: 750rpx;
495             height: 98rpx;
496             position: fixed;
497             bottom: 0;
498             left: 0;
499             background-color: #FFFFFF;
500             z-index: 99;
501             @extend .FlexMiddleB;
502             
503             .CartBotLeft{
504                 width: 132rpx;
505                 font-size: 26rpx;
506                 color: #666666;
507                 font-weight: bold;
508                 @extend .FlexMiddle;
509                 
510             }
511             .CartBotRight{
512                 width: 330rpx;
513                 @extend .FlexMiddleB;
514                 .CartBotRightSum{
515                     font-size: 26rpx;
516                     color: #666666;
517                     font-weight: bold;
518                     @extend .FlexMiddle;
519                     text{
520                         margin-left: 14rpx;
521                         color: #FF3C31;
522                     }
523                 }
524                 .CartBotRightJie{
525                     width: 160rpx;
526                     height: 98rpx;
527                     background-color: #FF0015;
528                     color: #FFFFFF;
529                     font-size: 30rpx;
530                     @extend .FlexMiddle;
531                     // letter-spacing: 10rpx;
532                 }
533             }
534             .CartBotRightDelete{
535                 display: flex;
536                 align-items: center;
537                 justify-content: flex-end;
538                 .CartBotRightDel{
539                     width: 160rpx;
540                     height: 98rpx;
541                     background-color: #FF0015;
542                     color: #FFFFFF;
543                     font-size: 30rpx;
544                     @extend .FlexMiddle;
545                 }
546                 
547             }
548         }
549     }
550 
551 }
552 </style>

 

新写的关于删除选中的简单方法，只需将该方法替换上面的删除方法即可（）

 

//删除商品
DeleteChecked:function(){

//获取数组长度
let shangLen=this.shangpin.length;

//新建数组，用来盛放被选中的数组下标
let arrs=[];

//for循环，获取被选中的下标
for(let i=0;i<shangLen;i++){
if(this.shangpin[i].flag==true){

//符合条件，将该下标装入新数组
arrs.push(i);
}else{
}
};

//将新数组的下标翻转，从后面向前删除
arrs=arrs.reverse();

//根据对应的下标删除数组内的元素，
//因为splice方法删除后，新数组的下标就会变化，所以先将下标数组翻转，从后向前删除，因为下标不变，所以可以完全删除
for(let j=0;j<arrs.length;j++){
this.shangpin.splice(arrs[j],1)
}
}

 

 

 

 

 

 

 

 

 

 

 

 

 

转载于        https://blog.csdn.net/qq_42292879/article/details/104465533

 

posted @ 2020-10-27 10:24  伊人兮明眸秋水  阅读(2025)  评论(0)  编辑  收藏  举报