微信小程序?qū)崿F(xiàn)簡(jiǎn)單的購物車功能

更新時(shí)間：2022年07月19日 16:29:36 作者：eva_feng

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

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

實(shí)現(xiàn)一個(gè)購物車頁面，需要哪些數(shù)據(jù)。整理下大概如下：
一個(gè)購物車商品列表(carts)，列表里的單個(gè)item包含：商品id(id)，商品圖(image)，商品名(title)，單價(jià)(price)，數(shù)量(amount)，單選按鈕(selected)；
全選按鈕，需要一個(gè)字段(selectAllStatus)表示是否全選；
總價(jià)(totalPrice)；
總數(shù)量（totalNum）。
還有一個(gè)需要判斷的是購物車是否為空(hasList)的字段。
購物車主要的幾個(gè)功能：商品數(shù)量的加減、單選、全選、計(jì)算總價(jià)格、總數(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}}">
? ? ? ? <!-- 單選按鈕 是否選中顯示不同的圖標(biāo) -->
? ? ? ? <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">合計(jì):￥{{totalPrice}}</view>
? <view class="toBuy" bindtap="submitOrder" data-num ="{{totalNum}}">去結(jié)算（{{totalNum}}）</view>
</view>

代碼實(shí)現(xiàn)：

初始展示購物車商品

Page({
? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? ? data: {
? ? carts: [], //購物車商品列表
? ? hasList: false, // 列表是否有數(shù)據(jù)
? ? totalPrice: 0, // 總價(jià)，初始為0
? ? totalNum: 0, //去結(jié)算括號(hào)里的總數(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)購物車不為空才進(jìn)行后續(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里每次打開頁面都會(huì)執(zhí)行
? ? ?this.getList()
? ? ?this.calcTotalPrice()
? ? ?this.totalNum()
? ?}
?})?

商品數(shù)量的加減：點(diǎn)擊+號(hào)，amount 加1，點(diǎn)擊-號(hào)，如果amount > 1，則減1；利用wxml頁面中綁定的type屬性，直接在方法中判斷是操作加號(hào)還是減號(hào)

//加減按鈕操作
? 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) {},
? ? })
? },

單選事件：

//單個(gè)商品選中事件
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]
? ? //新定義一個(gè)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()
? },

計(jì)算總價(jià)格：

//計(jì)算商品總價(jià)
//總價(jià) = 選中的商品1的 價(jià)格 * 數(shù)量 + 選中的商品2的 價(jià)格 * 數(shù)量 + ...
? calcTotalPrice: function() {
? ? //獲取商品列表數(shù)據(jù)
? ? let cartsData = this.data.carts
? ? //聲明一個(gè)變量接收數(shù)組列表price
? ? let total = 0
? ? for (let i = 0, len = cartsData.length; i < len; i++) {
? ? ? if (cartsData[i].selected) { //判斷選中才會(huì)計(jì)算價(jià)格
? ? ? ? total += cartsData[i].amount * cartsData[i].prodPrice;
? ? ? }
? ? }
? ? this.setData({ // 最后賦值到data中渲染到頁面
? ? ? carts: cartsData,
? ? ? totalPrice: total.toFixed(2)
? ? });
? },

計(jì)算總數(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
? ? })
? },

刪除單個(gè)商品：

//刪除商品
? 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: '確認(rèn)刪除嗎',
? ? ? ? ? success: function(res) {
? ? ? ? console.log(res)
? ? ? ? wx.showModal({
? ? ? ? ? title: '提示',
? ? ? ? ? content: '確認(rèn)刪除嗎',
? ? ? ? ? success: function(res) {
? ? ? ? ? ? console.log(res)
? ? ? ? ? ? if (res.confirm) {
? ? ? ? ? ? ? cartsData.splice(index, 1) ?//刪除購物車列表里這個(gè)商品
? ? ? ? ? ? ? that.setData({
? ? ? ? ? ? ? ? carts: cartsData
? ? ? ? ? ? ? })
? ? ? ? ? ? ? that.calcTotalPrice()
? ? ? ? ? ? ? that.totalNum()
? ? ? ? ? ? ? // 如果購物車為空
? ? ? ? ? ? ? if (cartsData.length == 0) {
? ? ? ? ? ? ? ? that.setData({ //修改標(biāo)識(shí)為false，顯示購物車為空頁面
? ? ? ? ? ? ? ? ? hasList: false
? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? })
? ? ? },
? ? ? fail: function(res) {},
? ? ? complete: function(res) {},
? ? })
? },

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: