Vant+小程序+购物车实例

Posted 2022-06-29 cinderellastory

图片实例，看是否是您所需要的喔。。。。

 

 

扫码小程序可看实例操作，有啥问题也可扫码加群，很希望可以帮助到你喔！

              

 

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部分：

  1 //index.js
  2 import Notify from ‘../vant/notify/notify‘;
  3 import Toast from ‘../vant/toast/toast‘;  //引入toast
  4 var cartData = require(‘../../api/cart.js‘);
  5 
  6 //获取应用实例
  7 const app = getApp()
  8 
  9 Page(
 10   data: 
 11     isTop: true,
 12     bottomBar:true,           //默认底部导航
 13     hasList: false,          // 列表是否有数据
 14     selectAllStatus: false,    // 全选状态，默认全选
 15     totalPrice:0,    //总价
 16   ,
 17   onLoad: function () 
 18     this.setData(
 19       items: cartData.cartList
 20     );
 21   ,
 22   // 减去商品
 23   minus(event)
 24     var items = this.data.items  //获取购物车列表
 25     var index = event.currentTarget.dataset.index;//获取当前点击事件的下标索引
 26     var number = items[index].number  //获取购物车里面的value值
 27       number--
 28       items[index].number=number;
 29       console.log("number",number);
 30     this.setData(
 31       items: items
 32     );
 33     this.getTotalPrice();                               // 重新获取总价
 34   ,
 35   // 加
 36   plus(e)
 37     var items = this.data.items  //获取购物车列表
 38     var index = e.currentTarget.dataset.index;//获取当前点击事件的下标索引
 39     var number = items[index].number  //获取购物车里面的value值
 40      number++
 41      items[index].number = number;
 42     this.setData(
 43       items: items
 44     );
 45     this.getTotalPrice();                               // 重新获取总价
 46   ,
 47   // 单选
 48   sigleCheck(e)
 49     var items = this.data.items  //获取购物车列表
 50     var index = e.currentTarget.dataset.index;//获取当前点击事件的下标索引
 51     var selected = items[index].selected  //获取购物车里面的value值
 52     items[index].selected = !selected;
 53     this.setData(
 54       items:items
 55     );
 56     this.getTotalPrice();                               // 重新获取总价
 57   ,
 58   // 全选
 59   selectAll(e) 
 60     let selectAllStatus = this.data.selectAllStatus;    // 是否全选状态
 61     selectAllStatus = !selectAllStatus;
 62     let items = this.data.items;
 63 
 64     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;