微信小程序?qū)崿F(xiàn)購(gòu)物車(chē)功能

更新時(shí)間：2020年11月18日 12:01:09 作者：前端設(shè)計(jì)詩(shī)

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)購(gòu)物車(chē)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)購(gòu)物車(chē)功能的具體代碼，供大家參考，具體內(nèi)容如下

1、購(gòu)物車(chē)界面功能實(shí)現(xiàn)

先來(lái)弄清楚購(gòu)物車(chē)的需求。

單選、全選和取消，而且會(huì)隨著選中的商品計(jì)算出總價(jià)
單個(gè)商品購(gòu)買(mǎi)數(shù)量的增加和減少
刪除商品。當(dāng)購(gòu)物車(chē)為空時(shí)，頁(yè)面會(huì)變?yōu)榭召?gòu)物車(chē)的布局

根據(jù)設(shè)計(jì)圖，我們可以先實(shí)現(xiàn)靜態(tài)頁(yè)面。接下來(lái)，再看看一個(gè)購(gòu)物車(chē)需要什么樣的數(shù)據(jù)。

首先是一個(gè)商品列表(carts)，列表里的單品需要：商品圖(image)，商品名(title)，單價(jià)(price)，數(shù)量(num)，是否選中(selected)，商品id(id)
然后左下角的全選，需要一個(gè)字段(selectAllStatus)表示是否全選了右下角的總價(jià)(totalPrice)最后需要知道購(gòu)物車(chē)是否為空(hasList)
知道了需要這些數(shù)據(jù)，在頁(yè)面初始化的時(shí)候我們先定義好這些。

2、下面是代碼

<view class="main">
 <view wx:if="{{hasList}}">
  <view class="cart-box">
   <view class="cart-list" wx:for="{{carts}}" wx:key="{{index}}">
    <icon wx:if="{{item.selected}}" type="success" color="red" data-index="{{index}}" class="cart-pro-select" bindtap="selectList"/>
    <icon wx:else type="circle" class="cart-pro-select" data-index="{{index}}" bindtap="selectList"/>
    <navigator url="../details/details?id={{item.id}}"><image class="cart-thumb" src="{{item.image}}"/></navigator>
    <text class="cart-pro-name">{{item.title}}</text>
    <text class="cart-pro-price">￥{{item.price}}</text>
    <view class="cart-count-box">
     <text class="cart-count-down" bindtap="minusCount" data-obj="{{obj}}" data-index="{{index}}">-</text>
     <text class="cart-count-num">{{item.num}}</text>
     <text class="cart-count-add" bindtap="addCount" data-index="{{index}}">+</text>
    </view>
     <text class="cart-del" bindtap="deleteList" data-index="{{index}}">x</text>
   </view>
  </view>
   
   <view class="cart-footer">
    <icon wx:if="{{selectAllStatus}}" type="success_circle" color="#fff" class="total-select" bindtap="selectAll"/>
    <icon wx:else type="circle" color="#fff" class="total-select" bindtap="selectAll"></icon>
    <view class="order-icon">
     <navigator url="../orders/orders"><image src="/image/icon3.png" /></navigator>
    </view>
    <text>全選</text>
    <text class="cart-total-price">￥{{totalPrice}}</text>
   </view> 
 </view>
 <view wx:else>
  <view class="cart-no-data">購(gòu)物車(chē)是空的哦</view>
 </view> 
</view>

js:

// page/component/cart/cart.js
Page({

 /**
 * 頁(yè)面的初始數(shù)據(jù)
 */
 data: {
  carts: [], //購(gòu)物車(chē)列表
  hasList: false, //列表是否有數(shù)據(jù)
  totalPrice: 0, // 總價(jià) 初始為0 
  selectAllStatus: true, // 全選狀態(tài) 默認(rèn)全選
  obj: {
  name: "hello"
  }
 },

 /**
 * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
 */
 onLoad: function (options) {

 },

 /**
 * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
 */
 onReady: function () {

 },

 /**
 * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
 */
 onShow: function () {
  this.setData({
   hasList: true, // 含有數(shù)據(jù) 設(shè)為true 
   carts: [
   {id: 1, title: '新鮮芹菜 半斤', image:'/image/s5.png',num:4,price: 0.01,seclected:true},
   {id: 2, title: '素米 500g', image: '/image/s6.png', num: 1, price: 0.03, seclected:true}
   ]
  });
  this.getTotalPrice();
 },
 // 當(dāng)前商品選中事件
 selectList(e) {
 const index = e.currentTarget.dataset.index; //獲取 data 傳進(jìn)來(lái)的index
 let carts = this.data.carts;   // 獲取購(gòu)物車(chē)列表
 const seclected = carts[index].seclected; //獲取當(dāng)前商品的選中狀態(tài)
 carts[index].seclected = !seclected; // 改變狀態(tài)
 this.setData({
  carts: carts
 });
 this.getTotalPrice();      //重新獲取總價(jià)
 },

 // 刪除購(gòu)物車(chē)當(dāng)前商品
deleteList(e) {
 const index = e.currentTarget.dataset.index;
 let carts = this.data.carts;
 carts.splice(index, 1);     // 刪除購(gòu)物車(chē)列表里這個(gè)商品
 this.setData({
 carts: carts
 });
 if (!carts.length) {     // 如果購(gòu)物車(chē)為空
 this.setData({
  hasList: false     // 修改標(biāo)識(shí)為false 顯示購(gòu)物車(chē)為空頁(yè)面
 });
 } else {        // 如果不為空 
 this.getTotalPrice();    // 重新計(jì)算總價(jià)格
 }
},

// 購(gòu)物車(chē)全選事件

selectAll(e) {
 let selectAllStatus = this.data.selectAllStatus; // 是否全選狀態(tài)
 selectAllStatus = !selectAllStatus;
 let carts = this.data.carts;

 for (let i = 0; i < carts.length; i++) {
  carts[i].selected = selectAllStatus;
 }           // 改變所有商品狀態(tài)
 this.setData({
  selectAllStatus: selectAllStatus,
  carts: carts
 });
 this.getTotalPrice();  //重新獲取總價(jià)
},

// 綁定加數(shù)量事件
addCount(e) {
 const index = e.currentTarget.dataset.index;
 let carts = this.data.carts;
 let num = carts[index].num;
 num = num + 1;
 carts[index].num = num;
 this.setData({
 carts: carts
 });
 this.getTotalPrice();
},

// 綁定減數(shù)量事件
minusCount(e) {
 const index = e.currentTarget.dataset.index;
 const obj = e.currentTarget.dataset.obj;
 let carts = this.data.carts;
 let num = carts[index].num;
 if (num <= 1) {
  return false;
 }
 num = num - 1;
 carts[index].num = num;
 this.setData({
  carts: carts
 });
 this.getTotalPrice();
},

// 計(jì)算總價(jià)
getTotalPrice() {
  let carts = this.data.carts; // 獲取購(gòu)物車(chē)列表
  let total = 0;  
  for (let i = 0; i < carts.length; i ++) { // 循環(huán)列表得到每個(gè)數(shù)據(jù)
   if (carts[i].selected) { // 判斷選中才會(huì)計(jì)算價(jià)格
   total += carts[i].num * carts[i].price; // 所有價(jià)格加起來(lái)
   }
  }
  this.setData({       // 最后賦值到data 中渲染到頁(yè)面
  carts: carts,
  totalPrice: total.toFixed(2)
  });
},

 /**
 * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
 */
 onHide: function () {

 },

 /**
 * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
 */
 onUnload: function () {

 },

 /**
 * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶(hù)下拉動(dòng)作
 */
 onPullDownRefresh: function () {

 },

 /**
 * 頁(yè)面上拉觸底事件的處理函數(shù)
 */
 onReachBottom: function () {

 },

 /**
 * 用戶(hù)點(diǎn)擊右上角分享
 */
 onShareAppMessage: function () {

 }
})