做一些電商或者支付頁面，肯定少不了購物車功能，一方面正反選，另一方面動態價格，全選之後再去加減商品數量（這裡必須考慮 裡面有很多蛋疼的問題）猛的一想，感覺思路很清晰，但是，真正動起手來就各種bug出來了，說實話 搞這個購物車，浪費我整整一下午的時間，當我回過頭捋一遍，其實，半小時就能完事。就是因為全選的時候 我又去更改商品數量，然後呼叫算價格的方法導致浪費了太多時間，話不多少，還是先上圖吧

先看看需求文件吧

程式碼格式不是很整齊 編輯器沒有調整 湊合看吧

<template>
 <div class="pddingTop">
 <van-nav-bar title='購物車' left-text="" fixed></van-nav-bar> 
 <div class="shopContent">
  <ul>
  <li v-for="(item,i) in dataList" :key="i" >
   <div class="shopmain">
   <van-checkbox v-model="item.checked" @change="signchecked(item)"></van-checkbox>
   <div class="shops" @click="todetails(item.productCode)">
    <div class="shopImg"><img :src="item.productUrl" alt="vant實現購物車功能"></div>
    <div class="shopsright">
    <h4>{{item.productName}}</h4>
    <div class="shoprightbot">
     <span>￥{{item.price}}</span>
     <div class="shopradd">
     <button @click.stop="reducebuyNum(item.buyNum,item,item.productCode,i)">-</button>
      <van-field style="width:40px;text-align: center" readonly v-model="item.buyNum" type="number" />
     <button id="button" @click.stop="addbuyNum(item.buyNum,item)">+</button>
     </div>
    </div>
    </div>
   </div>
   </div>
  </li>
  </ul>
 </div>
 <div v-show="!dataList.length" class="shopping">
  <div><img src="./images/shopping.png" alt="vant實現購物車功能"></div>
  <p>暫無商品</p>
 </div>
 <div>
  <van-submit-bar
  :price="total*100"
  button-text="提交訂單"
  @submit="onSubmit"
  >
  <van-checkbox v-model="ischecked" disabled="disabled" @click="checkAll">全選</van-checkbox>
  </van-submit-bar>
 </div>
 </div>
</template>
<script>
//toast 我全域性引用了
import {Checkbox,SubmitBar,Card,Field,Cell,Dialog,Toast } from 'vant';
import utils from '../utils/utils' //這裡是自己封裝的方法 獲取
export default {
 components:{
 [SubmitBar.name]:SubmitBar,[Checkbox.name]:Checkbox,[Card.name]:Card,[Field.name]:Field,[Cell.name]:Cell,},data(){
 return{
  img:require("./images/gouwuche.png"),ischecked:false,dataList:[],total:0,disabled:false,}
 },methods:{
 todetails(productCode){
      this.$router.push('/commodityDetails?productCode='+productCode)
 },//商品加加
 addbuyNum(num,value){
  if(value.buyNum<=98){
  value.buyNum++
  this.shopNumber(value)
  this.amount(value)
  }
 },//商品減減
 reducebuyNum(num,value,productCode,i){
  if(value.buyNum<=1){
  Dialog.confirm({
   title: '溫馨提示',message: '是否刪除商品'
   }).then(() => {
   this.https('後臺介面',{productCode:productCode})
   .then(data=>{
    Toast({
    message:'刪除成功',duration:800
    })
   })
   setTimeout(()=>{
              //這裡千萬不能再呼叫 要把這個數組裡面去除掉 不然問題是很多
    this.dataList.splice(i,1)
    this.amount(value)
   },1000)
   }).catch(() => {
  });
  }else{
  value.buyNum--
  this.shopNumber(value)
  this.amount(value)
  }
 },// 提交訂單
 onSubmit(){
  let cartIdList = []
  this.dataList.forEach(element => {
  if (element.checked) {
   cartIdList.push(String(element.dataId))
  }
  });
  if (cartIdList.length<1) {
  Toast.fail('請選擇訂單');
  } else {
  utils.putlocal('cartIdList',JSON.stringify(cartIdList))
  this.$router.push('/placeorder');
  }
 },//加減 這裡之前是自己手寫了 但是參考別的網站後 這裡是通過介面加減的
 shopNumber(value){
  let data = {
  dataId :value.dataId,buyNum:value.buyNum,productCode:value.productCode
  }
  this.https('後臺介面',data)
  .then(data=>{
  
  }) 
 },// 單選
 signchecked(val){
  this.amount(val)
 },amount(val){
  let arr =[]
  let MoneyList=[]
  this.dataList.forEach(item=>{
  if(item.checked===true){
   MoneyList.push(item)
   arr.push(item.checked)
  }
  })
      //這裡就是判斷時候為全選
  if(arr.length===this.dataList.length){
  this.ischecked = true
  }else{
  this.ischecked = false
  }  
      //價格要置為0 不然一直會累加的 也會又很大的問題
  this.total=0;
  for(var i=0;i<MoneyList.length;i++){
  this.total+=MoneyList[i].price*MoneyList[i].buyNum
  }
 },// 全選 這裡的事件有兩中 一個是click 一個是change 不同的事件用不同的方法
 checkAll(){
  this.dataList.forEach(item=>{
  if(this.ischecked==false){
   item.checked=true
  }else{
   item.checked=false
  }
  })
 },// 列表
 shoppingCartlist () {
  this.https('後臺介面',{})
      .then(data=>{
        if(data.code=='success'){
          //這裡需要手動新增預設的checked 後臺沒有返
   data.data.forEach(element => {
   element.checked = false
   element.num = null
   });
   this.dataList = data.data 
   if(!this.dataList.length){
   this.disabled=true
   }      
        }else {
          Toast.fail(data.message);
        }
      })
 
 }
 },mounted () {
 this.shoppingCartlist ()
 }
}
</script>
<style lang="less" scoped>
.van-submit-bar{
 bottom:49px;
 padding-left:20px;
 
}
.shopContent{
 margin-top:18px;
 padding-bottom:90px;
}
.shopping{
 text-align: center;
 padding-top:99px;
 img{
 width:96px;height:96px;
 margin-bottom: 25px;
 } 
}
li{
 padding:0 15px;
 background:#ffffff;
 margin-bottom:10px;
 position: relative;
 height:103px;
 .shopmain{
 display: flex;
 padding:10px 8px 10px 10px;
 position: relative;
 .shops{
  display: flex;
  .shopImg{
  width:103px;height:83px;
  margin:0 7px 0 11px;
  img{
   width:100%;height:100%;
  }
  }
  .shopsright{
  width:185px;
  display: flex;
  flex-direction:column;
  justify-content: space-between;
  h4{
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
  }
  .shoprightbot{
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 190px;
   span{
   font-size:17px;
   color:#F74022;
   }
  }
  }
 }
 .van-checkbox__icon--checked .van-icon{
  background:red !important;
 }
 }
 button{
 width:24px;height:26px;
 font-size:20px;
 background:#F74022;
 color:#ffffff;
 border:none;
 }
 input{
 width:48px;
 }
} 
.shopradd{
 width: 98px;
 display: flex;
 .van-field__control{
 text-align: center !important;
 }
}
.van-cell{
 padding: 0;
 line-height: 26px
}
.van-field__control{
 height: 26px;
}
</style>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。