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