微信小程序?qū)崿F(xiàn)簡單的購物車功能
更新時間：2022年07月19日 16:29:36 作者：eva_feng
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)簡單的購物車功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序?qū)崿F(xiàn)簡單購物車的具體代碼，供大家參考，具體內(nèi)容如下
實現(xiàn)一個購物車頁面，需要哪些數(shù)據(jù)。整理下大概如下：
一個購物車商品列表(carts)，列表里的單個item包含：商品id(id)，商品圖(image)，商品名(title)，單價(price)，數(shù)量(amount)，單選按鈕(selected)；
全選按鈕，需要一個字段(selectAllStatus)表示是否全選；
總價(totalPrice)；
總數(shù)量（totalNum）。
還有一個需要判斷的是購物車是否為空(hasList)的字段。
購物車主要的幾個功能：商品數(shù)量的加減、單選、全選、計算總價格、總數(shù)量、商品刪除。
wxml代碼：
<!-- 購物車商品列表 -->
<view class="list">
? <view wx:if="{{hasList}}">
? ? <block wx:for="{{carts}}" wx:key="id">
? ? ? <view class="item-section" bindlongpress="delItem" data-index="{{index}}">
? ? ? ? <!-- 單選按鈕 是否選中顯示不同的圖標 -->
? ? ? ? <view class="radio-section" wx:if="{{item.selected}}" data-index="{{index}}" bindtap="changeSelect">
? ? ? ? ? <icon type="success_circle" color="#f00"></icon>
? ? ? ? </view>
? ? ? ? <view class="radio-section" wx:else ?data-index="{{index}}" bindtap="changeSelect">
? ? ? ? ? <icon type="circle" color="#ccc"></icon>
? ? ? ? </view>
? ? ? ??
? ? ? ? <view class="cart-info">
? ? ? ? ? <view class="img">
? ? ? ? ? <!-- 圖片跳轉(zhuǎn)到詳情頁 -->
? ? ? ? ? <navigator ?url="/pages/good-detail/good-detail?productId={{item.prodId}}">
? ? ? ? ? ? <image src="{{item.prodPic}}" mode="aspectFill" />
? ? ? ? ? </navigator>
? ? ? ? ? </view>
? ? ? ? ? <view class="info-rt">
? ? ? ? ? ? <view class="title">{{item.prodName}}</view>
? ? ? ? ? ? <view>
? ? ? ? ? ? ? <view class="price">￥{{item.prodPrice}}</view>
? ? ? ? ? ? ? <!-- 數(shù)量加減操作 -->
? ? ? ? ? ? ? <view class="numarea">
? ? ? ? ? ? ? ? <text class="sign num-minus" data-types="minus" data-index="{{index}}" bindtap="changeNum">-</text>
? ? ? ? ? ? ? ? <text class="num-input">{{item.amount}}</text>
? ? ? ? ? ? ? ? <text class="sign num-plus" data-types="plus" data-index="{{index}}" bindtap="changeNum">+</text>
? ? ? ? ? ? ? </view>
? ? ? ? ? ? </view>
? ? ? ? ? </view>
? ? ? ? </view>
? ? ? </view>
? ? </block>
? </view>
? <view wx:else>
? ? <view>購物車還沒有商品哦~~</view>
? ? <navigator open-type='switchTab' url="/pages/allproduct/allproduct" class="toShopping">去逛逛</navigator>
? </view>
</view>
<!-- 底部操作欄 -->
<view class="bottom-box">
? <view class="select-all" wx:if="{{selectAllStatus}}" data-select="{{selectAllStatus}}" bindtap="selectAll">
? ? <icon type="success_circle" color="#f00"></icon>
? ? <text>全選</text>
? </view>
? <view class="select-all" wx:else bindtap="selectAll">
? ? <icon type="circle" color="#ccc"></icon>
? ? <text>全選</text>
? </view>?
? <view class="total-price">合計:￥{{totalPrice}}</view>
? <view class="toBuy" bindtap="submitOrder" data-num ="{{totalNum}}">去結(jié)算（{{totalNum}}）</view>
</view>代碼實現(xiàn)：
初始展示購物車商品
Page({
? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? ? data: {
? ? carts: [], //購物車商品列表
? ? hasList: false, // 列表是否有數(shù)據(jù)
? ? totalPrice: 0, // 總價，初始為0
? ? totalNum: 0, //去結(jié)算括號里的總數(shù)量
? ? selectAllStatus: false, // 全選狀態(tài)
? ? userId: '',
? ?},
? ? //根據(jù)userId得到購物車列表數(shù)據(jù)
? getList: function() {
? ? let that = this
? ? let userId = that.data.userId
? ? let carts = that.data.carts
? ? wx.request({
? ? ? url: 'xxx.com/api/ShoppingCar/getShoppingCar?userId=' + userId,
? ? ? header: {
? ? ? ? 'content-type': 'application/json'
? ? ? },
? ? ? method: 'GET',
? ? ? success: function(res) {
? ? ? ? console.log(res)
? ? ? ? let items = res.data.items
? ? ? ? //當(dāng)購物車不為空才進行后續(xù)判斷操作
? ? ? ? if(items !== null){
? ? ? ? ? if (items.length > 0) {
? ? ? ? ? ? that.setData({
? ? ? ? ? ? ? hasList: true, // 有數(shù)據(jù)了，那設(shè)為true
? ? ? ? ? ? ? carts: res.data.items,
? ? ? ? ? ? ? shoppingCarId: res.data.shoppingCarId,
? ? ? ? ? ? ? buyerId: res.data.buyerId
? ? ? ? ? ? })
? ? ? ? ? } else {
? ? ? ? ? ? console.log('購物車沒有商品')
? ? ? ? ? }
? ? ? ? } else{
? ? ? ? ? return false
? ? ? ? }
? ? ? },
? ? ? fail: function(res) {},
? ? ? complete: function(res) {},
? ? })
? },
??
? onShow: function(){
? ?? ?//onLoad 和onReady 只執(zhí)行一次 所以數(shù)據(jù)放在onshow里每次打開頁面都會執(zhí)行
? ? ?this.getList()
? ? ?this.calcTotalPrice()
? ? ?this.totalNum()
? ?}
?})?商品數(shù)量的加減：點擊+號，amount 加1，點擊-號，如果amount > 1，則減1；利用wxml頁面中綁定的type屬性，直接在方法中判斷是操作加號還是減號
//加減按鈕操作
? changeNum: function(e) {
? ? //console.log(e)
? ? let that = this
? ? let types = e.target.dataset.types, //加和減按鈕上分別設(shè)置了types屬性
? ? ? index = e.target.dataset.index,
? ? ? cartsData = that.data.carts; //初始購物車列表數(shù)據(jù)
? ? console.log(cartsData[index])
? ? let amount = cartsData[index].amount
? ? if (types == 'minus') {
? ? ? if (amount <= 1) { //不允許購物車數(shù)量低于1
? ? ? ? wx.showToast({
? ? ? ? ? title: '數(shù)量不能少于1',
? ? ? ? })
? ? ? ? return false
? ? ? } else {
? ? ? ? amount = amount - 1
? ? ? ? cartsData[index].amount = amount
? ? ? ? //修改數(shù)量后重新渲染頁面
? ? ? ? that.setData({
? ? ? ? ? carts: cartsData
? ? ? ? })
? ? ? }
? ? }
? ? if (types == 'plus') {
? ? ? amount = amount + 1
? ? ? cartsData[index].amount = amount
? ? ? that.setData({
? ? ? ? carts: cartsData
? ? ? })
? ? }
? ? that.calcTotalPrice()
? ? that.totalNum()
? ? wx.request({
? ? ? url: 'xxx.com/api/ShoppingCarItem/uptTransItem',
? ? ? data: {
? ? ? ? "transItemId": cartsData[index].transItemId,
? ? ? ? "prodId": cartsData[index].prodId,
? ? ? ? "amount": cartsData[index].amount,
? ? ? ? "shoppingCarId": cartsData[index].shoppingCarId
? ? ? },
? ? ? header: {
? ? ? ? 'content-type': 'application/json'
? ? ? },
? ? ? method: 'POST',
? ? ? success: function(res) {
? ? ? ? console.log(res)
? ? ? },
? ? ? fail: function(res) {},
? ? ? complete: function(res) {},
? ? })
? },單選事件：
//單個商品選中事件
changeSelect: function(e) {
? ? //console.log(e)
? ? let cartsData = this.data.carts
? ? let index = e.currentTarget.dataset.index
? ? //切換選中狀態(tài)
? ? cartsData[index].selected = !cartsData[index].selected
? ? // 循環(huán)數(shù)組數(shù)據(jù)，判斷----選中/未選中[selected]
? ? //新定義一個flag, 當(dāng)循環(huán)商品的選中狀態(tài)為true,flag+1;所有商品都為選中狀態(tài)，則為全選
? ? let flag = 0
? ? for (let i = 0, len = cartsData.length; i < len; i++) {
? ? ? if (cartsData[i].selected == true) {
? ? ? ? flag += 1
? ? ? }
? ? }
? ? if (cartsData.length == flag) {
? ? ? this.data.selectAllStatus = true;
? ? } else {
? ? ? this.data.selectAllStatus = false;
? ? }
? ? this.setData({
? ? ? carts: cartsData,
? ? ? selectAllStatus: this.data.selectAllStatus
? ? })
? ? this.calcTotalPrice()
? ? this.totalNum()
? },全選事件：
//購物車全選按鈕
? selectAll: function(e) {
? ? //console.log(e)
? ? let selectAllStatus = e.currentTarget.dataset.select; //先判斷是否為全選
? ? let cartsData = this.data.carts
? ? //將true 轉(zhuǎn)為 false(所有商品未選中狀態(tài))
? ? selectAllStatus = !selectAllStatus
? ? for (let i = 0, len = cartsData.length; i < len; i++) {
? ? ? cartsData[i].selected = selectAllStatus
? ? }
? ? // 頁面重新渲染
? ? this.setData({
? ? ? selectAllStatus: selectAllStatus,
? ? ? carts: cartsData
? ? })
? ? this.calcTotalPrice()
? ? this.totalNum()
? },計算總價格：
//計算商品總價
//總價 = 選中的商品1的 價格 * 數(shù)量 + 選中的商品2的 價格 * 數(shù)量 + ...
? calcTotalPrice: function() {
? ? //獲取商品列表數(shù)據(jù)
? ? let cartsData = this.data.carts
? ? //聲明一個變量接收數(shù)組列表price
? ? let total = 0
? ? for (let i = 0, len = cartsData.length; i < len; i++) {
? ? ? if (cartsData[i].selected) { //判斷選中才會計算價格
? ? ? ? total += cartsData[i].amount * cartsData[i].prodPrice;
? ? ? }
? ? }
? ? this.setData({ // 最后賦值到data中渲染到頁面
? ? ? carts: cartsData,
? ? ? totalPrice: total.toFixed(2)
? ? });
? },計算總數(shù)量：
//總數(shù)量
? totalNum: function() {
? ? let cartsData = this.data.carts
? ? //新定義初始變量
? ? let totalNum = 0
? ? for (let i = 0, len = cartsData.length; i < len; i++) {
? ? ? if (cartsData[i].selected) {
? ? ? ? totalNum += cartsData[i].amount
? ? ? }
? ? }
? ? this.setData({
? ? ? totalNum: totalNum
? ? })
? },刪除單個商品：
//刪除商品
? delItem: function(e) {
? ? //console.log(e)
? ? let that = this
? ? let cartsData = that.data.carts
? ? let index = e.currentTarget.dataset.index
? ? wx.request({
? ? ? url: 'xxx.com/api/ShoppingCarItem/delTransItem?value=' + cartsData[index].transItemId,
? ? ? header: {
? ? ? ? 'content-type': 'application/json'
? ? ? },
? ? ? method: 'POST',
? ? ? success: function(res) {
? ? ? ? console.log(res)
? ? ? ? wx.showModal({
? ? ? ? ? title: '提示',
? ? ? ? ? content: '確認刪除嗎',
? ? ? ? ? success: function(res) {
? ? ? ? console.log(res)
? ? ? ? wx.showModal({
? ? ? ? ? title: '提示',
? ? ? ? ? content: '確認刪除嗎',
? ? ? ? ? success: function(res) {
? ? ? ? ? ? console.log(res)
? ? ? ? ? ? if (res.confirm) {
? ? ? ? ? ? ? cartsData.splice(index, 1) ?//刪除購物車列表里這個商品
? ? ? ? ? ? ? that.setData({
? ? ? ? ? ? ? ? carts: cartsData
? ? ? ? ? ? ? })
? ? ? ? ? ? ? that.calcTotalPrice()
? ? ? ? ? ? ? that.totalNum()
? ? ? ? ? ? ? // 如果購物車為空
? ? ? ? ? ? ? if (cartsData.length == 0) {
? ? ? ? ? ? ? ? that.setData({ //修改標識為false，顯示購物車為空頁面
? ? ? ? ? ? ? ? ? hasList: false
? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? })
? ? ? },
? ? ? fail: function(res) {},
? ? ? complete: function(res) {},
? ? })
? },以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了原生Js 實現(xiàn)的簡單無縫滾動輪播圖的示例代碼，幫助大家更好的理解喝學(xué)習(xí)使用js，感興趣的朋友可以了解下2021-05-05
本文主要介紹了Pixi.js實現(xiàn)可視化圖形編輯器的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
Bootstrap分頁插件之Bootstrap Paginator實例詳解
Bootstrap Paginator是一款基于Bootstrap的js分頁插件，功能很豐富，個人覺得這款插件已經(jīng)無可挑剔了，感興趣的朋友跟著腳本之家小編一起學(xué)習(xí)吧2016-10-10
利用Bootstrap實現(xiàn)表格復(fù)選框checkbox全選
Bootstrap相信應(yīng)該不用多介紹，來自 Twitter，是目前最受歡迎的前端框架。這篇文章主要給大家介紹了如何利用Bootstrap實現(xiàn)表格中的checkbox復(fù)選框全選效果，文中給出詳細的介紹及完整的實例代碼，相信對大家的理解和學(xué)習(xí)具有一定的參考借鑒價值，下面來一起看看吧。2016-12-12
這篇文章主要為大家詳細介紹了微信小程序自定義輪播圖，swiper dots默認樣式修改，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
javascript跨域總結(jié)之window.name實現(xiàn)的跨域數(shù)據(jù)傳輸
本文給大家介紹window.name實現(xiàn)的跨域數(shù)據(jù)傳輸，自己親自實踐了一下，真的非常好用，特此分享到腳本之家網(wǎng)站供大家參考2015-11-11
今天小編就為大家分享一篇解決Layui中l(wèi)ayer報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
微信小程序?qū)崿F(xiàn)watch監(jiān)聽
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)watch監(jiān)聽，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
Javascript中的window.event.keyCode使用介紹
我們之前發(fā)過不少關(guān)于event.keyCode相關(guān)的文章，大家都可以參考下。2011-04-04
遍歷子節(jié)點子元素的方法有很多，本例使用js來實現(xiàn)，另附示例代碼及屬性方法，需要的朋友可以參考下2014-08-08