微信小程式購物車 多商家 多商品

2022-08-31 17:36:16 字數 1372 閱讀 8568

主要看一下購物車的計算過程

實現後的基本樣式

# 具體**

主要看shops頁面,

+ shops頁面data資料

```data: ,           //商品

curt: 0,             //分類id

curindex: 0,         //當前index

idx: 0,

ishow: 1,

cai: ,             //菜的陣列

allprice: 0,        //總家

allnum: 0          //總商品數

},```

```onload: function (options) )

console.log(this.data.cai)

} else }})

}```

+ id 為index頁面傳過來的商家 id;依據商家id來顯示不同商家

+ 進入商家頁面 後的布局;頭部就不看了,主要看菜的分類以及都有哪些菜

在這之前需要在商品以及評價的切換中拿到curt,curt就是分類的id

+ 菜品切換

```}

```+ 切換**就不看了,主要是拿到分類的id=>curt

### 下面就是分類下的布局 

```}

月售}¥}-}

+```

#### 先來看下增加的計算邏輯

```//增加商品數量

add(e) )

this.getall() //計算總計

}```

點選按鈕時依據哪個分類下的哪個菜來區分;每點選一次商品數量+1;最後需要實時計算**  this.getall()

#### 減少的計算邏輯與增加超不多

```minus(e)

num--;

//重新賦值數量

cai[curt][index].num = num

this.setdata()

this.getall()

}```

多了乙個判斷而已

#### 接下來就是計算總**

```//計算總價

getall()

}this.setdata();

},```

裡面都有注釋也不難看懂,就不解釋了!!!

### 注意一切已資料為中心!!

### 最後點選去結算的跳轉

```//跳轉支付頁面

getallprice() )

return

} else )}}

```判斷一下是否有商品

在這裡傳遞的資料都可以帶入到支付頁面

## 結束需要**請移步到我的github

+

微信小程式購物車功能

管理您的購物車 點選立即前往 全選 合計 結算 page shop mana management goto carts goods goods check checkbox goods details goods img goods img image goods title goods name...

微信小程式之購物車demo

這篇小demo主要使用了一下幾個技術點 1 全域性變數的使用 在這裡定義的變數 任何乙個頁面和元件都可以訪問到 在使用到的頁面 宣告乙個例項 然後 這樣就可以訪問到 修改也可以直接修改 2 input元件的使用 這種把checkbox group 放在循壞裡面是不太好的 因為這樣列印那個事件e的話取...

微信小程式之購物車功能

先來弄清楚購物車的需求。根據設計圖,我們可以先實現靜態頁面。接下來,再看看乙個購物車需要什麼樣的資料。知道了需要這些資料,在頁面初始化的時候我們先定義好這些。page onshow 購物車列表資料我們一般是通過請求伺服器拿到的資料,所以我們放在生命週期函式裡給 carts 賦值。想到每次進到購物車都...