Vant+小程序+購物車實例

圖片實例，看是否是您所需要的喔。。。。

 

 

掃碼小程序可看實例操作，有啥問題也可掃碼加群，很希望可以幫助到你喔！

              

 

HTML部分：

<view class="cart">
  <view class='top' wx:if="{{isTop}}">
    <view>
     <van-icon name="delete" class='delete' bindtap="emptyCart"/><text bindtap="emptyCart">清空購物車</text>
    </view>
  </view>
  <view>
      <view class="cartGoods" wx:for="{{items}}" wx:key="item" data-index="{{index}}">
      <view class="sigleCheck">
      <!-- wx:if 是否選擇顯示不同圖標 -->
          <icon wx:if="{{item.selected}}" type="success" color="#6167e9" bindtap="sigleCheck" data-index="{{index}}" />
          <icon wx:else type="circle" bindtap="sigleCheck" data-index="{{index}}"/>
      </view>
      <view class="goodsImg">
        <navigator url="../details/details?id={{item.id}}">
              <image src="{{item.pic}}" />
        </navigator>
      </view>
      <view class="goodsDetail">
        <view class='details'>
        <view class='goodsName'>
        <navigator url="../details/details?id={{item.id}}">
          {{item.info}}</navigator>
        </view>
          <text class='goodsPrice'>￥{{item.sale_price}}</text>
        </view>
        <view class="operate">
            <van-stepper value="{{item.number}}" data-index="{{index}}" min="1" max="10" bind:plus="plus" bind:minus="minus"/>
            <view class="del">
              <van-icon name="close" bindtap="deleteList" data-index="{{index}}"/>
            </view>
        </view>
      </view> 
    </view>
    <view class="submitBar" wx:if="{{bottomBar}}">
        <van-submit-bar
        price="{{ totalPrice*100 }}"
        button-text="買單"
        bind:submit="onClickButton"
        >
          <!-- wx:if 是否全選顯示不同圖標 -->
          <view class='allCheck'>
            <icon wx:if="{{selectAllStatus}}" type="success_circle" color="#6167e9" bindtap="selectAll"/>
            <icon wx:else type="circle" color="#6167e9" bindtap="selectAll"/>
            <text class="allText">全選</text>
          </view>
        </van-submit-bar>
    </view>
  </view>
  <view wx:if="{{hasList}}" class='empty'>
   <view>
       <image src='../../images/a.png' class='empty_pic'></image>
       <view class="empty_text">購物車為空，快去添加商品吧~</view>
       <view>
       <van-button round type="danger" bindtap='Gohome' class='Gohome' size="large">去逛逛</van-button>
       </view>
   </view>
  </view>
  <van-notify id="custom-selector" />
  <van-toast id="van-toast" />
</view>

JS部分：

//index.js
import Notify from '../vant/notify/notify';
import Toast from '../vant/toast/toast';  //引入toast
var cartData = require('../../api/cart.js');

//獲取應用實例
const app = getApp()

Page({
  data: {
    isTop: true,
    bottomBar:true,           //默認底部導航
    hasList: false,          // 列表是否有數據
    selectAllStatus: false,    // 全選狀態，默認全選
    totalPrice:0,    //總價
  },
  onLoad: function () {
    this.setData({
      items: cartData.cartList
    });
  },
  // 減去商品
  minus(event){
    var items = this.data.items  //獲取購物車列表
    var index = event.currentTarget.dataset.index;//獲取當前點擊事件的下標索引
    var number = items[index].number  //獲取購物車里面的value值
      number--
      items[index].number=number;
      console.log("number",number);
    this.setData({
      items: items
    });
    this.getTotalPrice();                               // 重新獲取總價
  },
  // 加
  plus(e){
    var items = this.data.items  //獲取購物車列表
    var index = e.currentTarget.dataset.index;//獲取當前點擊事件的下標索引
    var number = items[index].number  //獲取購物車里面的value值
     number++
     items[index].number = number;
    this.setData({
      items: items
    });
    this.getTotalPrice();                               // 重新獲取總價
  },
  // 單選
  sigleCheck(e){
    var items = this.data.items  //獲取購物車列表
    var index = e.currentTarget.dataset.index;//獲取當前點擊事件的下標索引
    var selected = items[index].selected  //獲取購物車里面的value值
    items[index].selected = !selected;
    this.setData({
      items:items
    });
    this.getTotalPrice();                               // 重新獲取總價
  },
  // 全選
  selectAll(e) {
    let selectAllStatus = this.data.selectAllStatus;    // 是否全選狀態
    selectAllStatus = !selectAllStatus;
    let items = this.data.items;

    for (let i = 0; i < items.length; i++) {
 65       items[i].selected = selectAllStatus;            // 改變所有商品狀態
 66     }
 67     this.setData({
 68       selectAllStatus: selectAllStatus,
 69       items: items
 70     });
 71     this.getTotalPrice();                               // 重新獲取總價
 72   },
 73   // 總價
 74   getTotalPrice() {
 75     let items = this.data.items;                  // 獲取購物車列表
 76     let total = 0;
 77     for (let i = 0; i < items.length; i++) {         // 循環列表得到每個數據
 78       if (items[i].selected) {                   // 判斷選中才會計算價格
 79         total+= items[i].number * items[i].sale_price;     // 所有價格加起來
 80         total=total
 81       }
 82     }
 83 
 84     this.setData({                                // 最后賦值到data中渲染到頁面
 85       items: items,
 86       totalPrice: total
 87     });
 88     console.log(this.data.totalPrice)
 89   },
 90   // 刪除商品
 91   deleteList(e) {
 92     const index = e.currentTarget.dataset.index;
 93     let items = this.data.items;
 94     items.splice(index, 1);              // 刪除購物車列表里這個商品
 95     this.setData({
 96       items: items
 97     });
 98     if (!items.length) {                  // 如果購物車為空
 99       Notify({
100         text: '全部刪除',
101         duration: 1000,
102         selector: '#custom-selector',
103         backgroundColor: '#fc464a'
104       });
105       this.setData({
106         hasList: true,              // 修改標識為false，顯示購物車為空頁面
107         bottomBar: false,          //底部導航隱藏
108         isTop: false,
109       });
110     } else {                              // 如果不為空
111       this.getTotalPrice();           // 重新計算總價格
112       Notify({
113         text: '刪除一個',
114         duration: 1000,
115         selector: '#custom-selector',
116         backgroundColor: '#fc464a'
117       });
118     }
119   },
120   // 清空購物車
121   emptyCart(){
122     console.log("清空",this.data.items)
123     var items = this.data.items;
124    items = '';
125     this.setData({
126       items: items,
127       bottomBar: false,
128       hasList: true,
129       isTop: false,
130     });
131   },
132   // 購買成功
133   onClickButton() {
134     Toast.success('購買成功');
135   },
136   Gohome(){
137     wx.switchTab({
138       url: '../home/home'
139     })
140   }
141 })

CSS部分：

.cart{
  background: #f7f7f7;
}
.top{
  color: #666;
  background: #fff;
  padding: 20rpx 20rpx;
  font-size: 32rpx;
  display: flex;
  justify-content: space-between;
}
.top .wap-nav{
  vertical-align: middle;
  padding-right:16rpx;
}
.delete{
  padding-right:16rpx;
  margin-left: 20rpx; 
}
.compute,.cartGoods{
  display: flex;
  align-items: center;
}
.cartGoods{
  justify-content: space-between;
}
.cartGoods{
  background: #fff;
  margin-top: 20rpx;
  padding: 10px 0;
}
.goodsImg image{
  width: 160rpx;
  height: 160rpx
}

.goodsDetail{
  margin:0 30rpx;
}
.goodsName{
  color: #666;
 font-size: 28rpx;
  width: 80%;
}
.details{
  height: 46rpx;
  overflow: hidden;
  display: flex;
}
.goodsPrice{
 font-size: 30rpx;
  color: red;
  font-weight: bold;
  display: inline-block;
  width: 200rpx;
}
.operate{
  display: flex;
  margin-top:30rpx;
  justify-content: space-around;
}

.sigleCheck{
  margin: 0 20rpx;
}
.allCheck{
  margin-left: 20rpx;
}
.allCheck icon{
  vertical-align: middle;
  padding-right:10rpx;
}
.empty{
  background: #fff;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #666;
  font-size: 32rpx;
}
.empty_text{
  padding: 10rpx 0 30rpx 0;
  text-align: center;
}
.empty_pic{
 width:400rpx;
height:250rpx;
}
.Gohome .van-button--large{
  height: 80rpx;
  background: #6167e9;
  border: 1px solid #6167e9;
  line-height: 74rpx;
  font-size: 36rpx;
}
.submitBar .van-button--danger{
  border: 1px solid #6167e9;
  background: #6167e9;
}