實現一個微信小程序購物車頁面,包含以下功能:
需求說明:
商品列表:顯示商品名稱、價格、數量加減按鈕,支持修改商品數量(數量≥1)。
全選 / 反選功能:頂部 “全選” 復選框,點擊后切換所有商品的選中狀態。
計算總價:僅計算選中商品的總價,顯示在頁面底部。
刪除功能:點擊 “刪除選中商品” 按鈕,刪除所有選中的商品。
數據持久化:商品數據和選中狀態存儲在本地緩存中,頁面加載時自動讀取。
數據結構參考:
// 商品數據示例
const goodsList = [
? { id: 1, name: '牛奶', price: 5, count: 1, selected: false },
? { id: 2, name: '面包', price: 8, count: 2, selected: true }
];
實現要求:
頁面布局:
頂部:全選復選框(checkbox)和 “全選” 文字。
中間:商品列表,使用wx:for循環渲染,每個商品包含:
復選框(綁定selected狀態)。
商品名稱和價格。
數量加減按鈕(+和-,綁定事件處理函數)。
底部:顯示總價(格式:“總價:¥XX.XX”)和 “刪除選中商品” 按鈕。
功能邏輯:
數量修改:點擊 “+” 增加數量(無上限),點擊 “-” 減少數量,數量為 1 時禁用 “-” 按鈕。
全選功能:全選框選中時,所有商品selected設為true;取消選中時設為false,并更新緩存。
總價計算:遍歷選中商品,計算price * count之和,實時更新視圖。
刪除功能:過濾掉選中的商品,更新列表和緩存。
商品圖片展示:每個商品增加圖片顯示(圖片路徑自定義)。
結算功能:添加 “去結算” 按鈕,跳轉至結算頁面,傳遞選中商品數據。
樣圖?
無需云開發?