微信小程式純前端完整購物車實作方法

mycart.js代碼

// pages/mycart/mycart.js
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    goods: [{
        id: 1,
        name: "拼色短袖T恤",
        model: "白色，S",
        price: 22,
        num: 1,
        imgurl: "/image/src/good1.png"
      },
      {
        id: 2,
        name: "拼色短袖T恤",
        model: "黑色，S",
        price: 25,
        num: 1,
        imgurl: "/image/src/good2.png"

      },
      {
        id: 3,
        name: "拼色短袖T恤",
        model: "藍色，S",
        price: 28,
        num: 1,
        imgurl: "/image/src/good4.png"
      },
      {
        id: 4,
        name: "拼色短袖T恤",
        model: "紫色，S",
        price: 32,
        num: 1,
        imgurl: "/image/src/good6.png"
      }
    ],
    //所有商品的數
    goodscount: 0,
    is_edit: 0,
    //是否全選，s是編輯模式
    is_check_all_s: 0,
    is_check_all_d: 0,
    //結算時被選中的件數
    select_scount: 0,
    money: 0,
    num_input: 1
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function(options) {
    let goods = this.data.goods
    let goodscount = 0
    for (let i = 0; i < goods.length; i++) {
      goodscount += goods[i].num
      //添加一個新的屬性預設值為0,這個屬性用來判斷在編輯模式商品是否被選中
      goods[i].dot_s = 0
      //在非編輯模式下商品是否被選中
      goods[i].dot_d = 0
    }
    this.setData({
      goodscount: goodscount,
      goods: goods
    })
  },
  goshopping_func() {
    wx.navigateTo({
      url: '/pages/shop/shop',
    })
  },
  //改變購物車模式
  change_edit_func() {
    let is_edit = this.data.is_edit
    let goods = this.data.goods
    let is_check_all_s = this.data.is_check_all_s
    let is_check_all_d = this.data.is_check_all_d
    if (is_edit == 1) {
      for (let i = 0; i < goods.length; i++) {
        //添加一個新的屬性預設值為0
        goods[i].dot_s = 0
      }
    } else {
      for (let i = 0; i < goods.length; i++) {
        //添加一個新的屬性預設值為0
        goods[i].dot_d = 0
      }
    }
    this.setData({
      is_edit: !is_edit,
      goods: goods,
      is_check_all_s: 0,
      is_check_all_d: 0,
      //改變購物車模式時，所有選中商品數清零
      select_scount: 0,
      money: 0
    })
  },
  //商品在倆個模式中被選中時的處理
  select_goods_func(e) {
    let id = e.currentTarget.dataset.id
    let goods = this.data.goods
    let is_edit = this.data.is_edit
    if (is_edit) {
      for (let i = 0; i < goods.length; i++) {
        if (goods[i].id == id) {
          goods[i].dot_s = !goods[i].dot_s
        }
      }
    } else {
      for (let i = 0; i < goods.length; i++) {
        if (goods[i].id == id) {
          goods[i].dot_d = !goods[i].dot_d
        }
      }
      //非編輯模式下統計選中商品數量和總金額
      this.count_money(goods)
    }
    this.setData({
      goods: goods,
    })
  },
  //統計結算金額和結算商品數量
  count_money(goods) {
    let select_scount = 0
    let money = 0
    //在非編輯模式下每次選中商品重新統計被選中商品的件數
    for (let i = 0; i < goods.length; i++) {
      if (goods[i].dot_d) {
        select_scount += goods[i].num
        money += goods[i].num * goods[i].price
      }
    }
    this.setData({
      select_scount: select_scount,
      money: money
    })
  },
  //在不同模式下點選全選
  is_check_all_func() {
    let is_edit = this.data.is_edit
    let goods = this.data.goods
    let is_check_all_s = this.data.is_check_all_s
    let is_check_all_d = this.data.is_check_all_d
    if (is_edit) {
      if (is_check_all_s) {
        for (let i = 0; i < goods.length; i++) {
          goods[i].dot_s = 0
        }
      } else {
        for (let i = 0; i < goods.length; i++) {
          goods[i].dot_s = 1
        }
      }
      is_check_all_s = !is_check_all_s
    } else {
      if (is_check_all_d) {
        for (let i = 0; i < goods.length; i++) {
          goods[i].dot_d = 0
        }
      } else {
        for (let i = 0; i < goods.length; i++) {
          goods[i].dot_d = 1
        }
      }
      is_check_all_d = !is_check_all_d
      //在非編輯模式下每次全選商品重新統計被選中商品的件數
      this.count_money(goods)
    }
    this.setData({
      goods: goods,
      is_check_all_s: is_check_all_s,
      is_check_all_d: is_check_all_d,
    })
  },
  //使用者點選删除按鈕
  delete_func() {
    let that = this
    let goods = this.data.goods
    let goodscount = 0
    wx.showModal({
      title: '提示',
      content: '确認将已選中的删除嗎？',
      success: function(res) {
        if (res.confirm) {
          goods = goods.filter(function(item) {
            return !item.dot_s
          });
          //删除時從小計算所有商品數
          for (let i = 0; i < goods.length; i++) {
            goodscount += goods[i].num
          }
          that.setData({
            goods: goods,
            goodscount: goodscount
          })
        } else if (res.cancel) {
          console.log('使用者點選取消')
        }
      }
    })
  },
  //購物車商品數量改變
  num_input_change_func(e) {
    let num_input = e.detail.value
    let id = e.currentTarget.dataset.id
    let goods = this.data.goods
    if (num_input.length == 1) {
      num_input = parseInt(num_input.replace(/[^1-9]/g, ''))
    } else if (num_input.length > 1) {
      num_input = parseInt(num_input.replace(/\D/g, ''))
    } else {
      num_input = 1
    }
    for (let i = 0; i < goods.length; i++) {
      if (goods[i].id == id) {
        goods[i].num = num_input
      }
    }
    //非編輯模式下統計選中商品數量和總金額
    this.count_money(goods)
  
  },
  reduce_func(e) {
    let id = e.currentTarget.dataset.id
    let goods = this.data.goods
    for (let i = 0; i < goods.length; i++) {
      if (goods[i].id == id) {
        if (goods[i].num > 1) {
          goods[i].num = goods[i].num - 1
        }
      }
    }
    //再重新統計
    this.count_money(goods)
    this.setData({
      goods: goods
    })
  },
  add_func(e) {
    let id = e.currentTarget.dataset.id
    let goods = this.data.goods
    for (let i = 0; i < goods.length; i++) {
      if (goods[i].id == id) {
        if (goods[i].num < 9999) {
          goods[i].num = goods[i].num + 1
        }
      }
    }
    //再重新統計
    this.count_money(goods)
    this.setData({
      goods: goods
    })
  },

})

mycart.wxml 檔案

<view class="container">
  <view class="outer_layer">
    <block wx:if="{{goods.length>=1}}">
      <view class="goods_edit_view">
        <view class="goods_edit_left_view">
          <text>全部寶貝{{goodscount}}件</text>
        </view>
        <view class="goods_edit_right_view" bindtap="change_edit_func">
          <text>{{is_edit?"完成":"編輯"}}</text>
        </view>
      </view>
      <view class="goods_view">
        <block wx:for="{{goods}}" wx:key="unique">
          <view class="good_view" >
            <view class="good_left_view" data-id="{{item.id}}" bindtap="select_goods_func">
              <view class="dot_view">
                <block wx:if="{{is_edit?item.dot_s:item.dot_d}}">
                  <view class="dot_s"></view>
                </block>
              </view>
            </view>
            <view class="good_center_view">
              <view class="good_center_img_view">
                <image class="good_img" src="{{item.imgurl}}" mode="widthFix"></image>
              </view>
              <view class="good_center_col">
                <view class="good_name_view">
                  <text>{{item.name}}</text>
                </view>
                <view class="good_model_view">
                  <text>{{item.model}}</text>
                </view>
                <view class="priceandnum_view">
                  <view class="good_price_view">
                    <text>￥{{item.price}}</text>
                  </view>
                  <view class="num_change_view" hidden="{{is_edit}}">
                    <image class="reduce_img" bindtap="reduce_func" src="/image/reduce.png" data-id="{{item.id}}" mode="widthFix"></image>
                    <input class="num_input" type="number" maxlength="4" placeholder="" value="{{goods[index].num}}" data-id="{{item.id}}" bindinput="num_input_change_func" />
                    <image class="add_img" bindtap="add_func" src="/image/add.png" data-id="{{item.id}}" mode="widthFix"></image>
                  </view>

                </view>
              </view>
            </view>
          </view>
        </block>
      </view>
      <!-- 這裡是底部結算按鈕區域 -->
      <view class="cart_bottom_vew">

        <view class="cart_bottom_left_view" bindtap="is_check_all_func">
          <view class="dot_view">
            <block wx:if="{{is_edit?is_check_all_s:is_check_all_d}}">
              <view class="dot_s"></view>
            </block>
          </view>
          <text class="dot_text">全選</text>
        </view>
        <view class="cart_bottom_right_view">
          <block wx:if="{{is_edit}}">
            <view class="del_btn" bindtap="delete_func">
              <text>删除</text>
            </view>
          </block>
          <block wx:else>
            <view class="settlement_view">
              <view class="settlement_left_view">
                <view>
                  <text>合計：<text style="color:#4528A7;font-size:32rpx;">￥{{money}}</text></text>
                </view>
                <view style="color:#4D4D4D;font-size:26rpx;">
                  <text>總額{{money}}元，活動優惠0元</text>
                </view>
              </view>
              <view class="del_btn">
                <text>去結算({{select_scount}}件)</text>
              </view>
            </view>
          </block>
        </view>
      </view>
    </block>
    <block wx:else>
      <view class="no_goods_view">
        <view class="no_good_view">
          <text>您的購物車還沒有商品</text>
        </view>
        <view class="goshopping_view" bindtap="goshopping_func">
          <text class="goshopping_text">去購物</text>
        </view>
      </view>
    </block>
  </view>
</view>

mycart.wxss檔案

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  color: #1a1311;
  font-size: 30rpx;
}

.outer_layer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 40rpx;
}
.no_goods_view {
  display: flex;
  flex-direction: column;
  margin-top: 420rpx;
  align-items: center;
}

.no_good_view {
  color: #515c6f;
  font-size: 48rpx;
  font-weight: 600;
}

.goshopping_view {
  margin-top: 30rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 180rpx;
  height: 60rpx;
  border: 1rpx solid #515c6f;
}

.goshopping_text {
  color: #515c6f;
}

.goods_edit_view {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  /* padding: 0rpx 30rpx; */
  height: 100rpx;
  border-top: 1rpx solid #e0e0e0;
  border-bottom: 1rpx solid #e0e0e0;
  color: #515c6f;
  position: fixed;
  background-color: #fff;
}

.goods_edit_left_view {
  padding-left: 30rpx;
}

.goods_edit_right_view {
  padding-right: 30rpx;
}

.goods_view {
  display: flex;
  flex-direction: column;
  margin-top: 100rpx;
  margin-bottom: 100rpx;
}

.good_view {
  min-height: 200rpx;
  padding: 20rpx 10rpx;
  display: flex;
  flex-direction: row;
  border-bottom: solid #e0e0e0 1rpx;
}

.good_left_view {
  width: 100rpx;
  height: 200rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.dot_view {
  border-radius: 50%;
  width: 35rpx;
  height: 35rpx;
  padding: 5rpx;
  border: 1rpx solid #e0e0e0;
}

.dot_s {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #4528a7;
}

.good_center_view {
  height: 200rpx;
  overflow-y: hidden;
  display: flex;
  flex-direction: row;
}

.good_img {
  width: 200rpx;
}

.good_center_col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 15rpx;
  width: 400rpx;
}

.good_name_view {
  color: #515c6f;
  font-weight: 600;
}

.good_model_view {
  color: #838383;
  width: 400rpx;
  font-size: 28rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.priceandnum_view{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 90rpx;
}
.good_price_view {
  font-size: 38rpx;
  color: #4528a7;
}



/* 數量選擇 */

.num_change_view{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border: 1rpx solid #e0e0e0;
}

.reduce_img {
  width: 20rpx;
  height: 20rpx;
  padding: 30rpx;
}

.add_img {
  width: 20rpx;
  height: 20rpx;
  padding: 30rpx;
}

.num_input{
  width: 70rpx;
  height: 30rpx;
  font-size: 28rpx;
  text-align: center;
}

.cart_bottom_vew{
  position: fixed;
  width: 100%;
  height: 120rpx;
  background-color: #fff;
  bottom:1rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}
.cart_bottom_left_view{
  color: #070203;
  font-size: 28rpx;
  margin-left: 20rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.cart_bottom_right_view{
  margin-right: 15rpx;
}
.dot_text{
  margin-left: 20rpx;
}

.del_btn{
  font-size: 26rpx;
  padding: 0rpx 10rpx;
  min-width: 150rpx;
  height: 70rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #4528A7;
  border-radius: 15rpx;
  color: #fff;
}

.settlement_view{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.settlement_left_view{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-right: 10rpx;
  justify-content: center;
}

mycart.json 檔案

{
  "usingComponents": {},
  "navigationBarTitleText": "購物車"
}

微信小程式純前端完整購物車實作方法

繼續閱讀

頁面傳值的方式 - 小程式篇一、跨頁面傳值二、頁面内傳值三、本地儲存四、全局的app對象

小程式回傳值

小程式url頁面傳值

微信小程式父子傳值

小程式元件傳值通訊

214情人節，使用微信小程式【信鴿相知】寫情書吧

微信小程式npm如何引用Vant Weapp

微信小程式雲開發入門(4)之資料庫的增删改查(查:含模糊查找)

簡單封裝一個微信小程式的ajax請求

微信小程式即時通訊(融雲sdk)

微信小程式的cover-image 無法覆寫的問題！注意一定是位址的問題之前試了好多次！首先要在cover-view 标簽裡面外層是 map chart，camera 等原始元件

小程式自定義button元件擷取使用者資訊（使用者授權登入）

微信小程式前端解密擷取使用者資訊

微信小程式界面開發-底部導航欄

微信小程式之底部導航欄（一）

微信小程式快速設定底部導航欄