1. 程式人生 > >微信小程式之購物車--商城系列

微信小程式之購物車--商城系列

// pages/shopcart/shopcart.jsPage({
/** * 頁面的初始資料 */ data: { 'iscart': false, //控制購物車有沒有資料 'goodList': [ { 'cover': '/assets/images/img/132-12.jpg', 'isbn': '9787535482051', 'desc': '【光山館】2斤大連煙臺櫻桃新鮮水果現摘現發產地直供孕婦水果兒童水果當季水果早大果紅燈美早車釐子大櫻桃 2斤 AAA級 果徑28mm以上', 'price': 25.9, 'count'
: 1, 'checked': false }, { 'cover': '/assets/images/img/0112-154.jpg', 'isbn': '9787540455958', 'desc': '【第二件立減20元】新鮮採摘 國產 美早 車釐子 大櫻桃新鮮水果1kg 單果26-28mm', 'price': 20.5, 'count': 1, 'checked': false }, { 'cover': '/assets/images/img/132-12.jpg'
, 'isbn': '9787539982830', 'desc': '農家新語 新鮮煙臺大櫻桃2斤現摘當季水果車釐子美早 順豐空運', 'price': 24.1, 'count': 1, 'checked': false }, { 'cover': '/assets/images/img/0112-154.jpg', 'isbn': '9787550013247', 'desc': '【第二件5折】豈鮮大連美早大櫻桃500g大果28-30mm 新鮮水果禮盒', 'price'
: 17.2, 'count': 1, 'checked': false }, { 'cover': '/assets/images/img/123123.jpg', 'isbn': '9787208061644', 'desc': '優仙果 山東美早大櫻桃 1000g裝果徑26-28mm 新鮮水果車釐子', 'price': 17.7, 'count': 1, 'checked': false } ], 'checkAll': false, 'totalCount': 0, 'totalPrice': 0, },
/** * 刪除購物車當前商品 */ deleteList(e) { const index = e.currentTarget.dataset.index; let goodList = this.data.goodList; goodList.splice(index, 1); this.setData({ goodList: goodList }); if (!goodList.length) { this.setData({ iscart: true }); } else { this.calculateTotal(); } },
/** * 計算商品總數 */ calculateTotal: function () { var goodList = this.data.goodList; var totalCount = 0; var totalPrice = 0; for (var i = 0; i < goodList.length; i++) { var good = goodList[i]; if (good.checked) { totalCount += good.count; totalPrice += good.count * good.price; } } totalPrice = totalPrice.toFixed(2); this.setData({ 'totalCount': totalCount, 'totalPrice': totalPrice }) },
/** * 使用者點選商品減1 */ subtracttap: function (e) { var index = e.target.dataset.index; var goodList = this.data.goodList; var count = goodList[index].count; if (count <= 1) { return; } else { goodList[index].count--; this.setData({ 'goodList': goodList }); this.calculateTotal(); } },
/** * 使用者點選商品加1 */ addtap: function (e) { var index = e.target.dataset.index; var goodList = this.data.goodList; var count = goodList[index].count; goodList[index].count++; this.setData({ 'goodList': goodList }); this.calculateTotal(); }, /** * 使用者選擇購物車商品 */ checkboxChange: function (e) { console.log('checkbox發生change事件,攜帶value值為:', e.detail.value); var checkboxItems = this.data.goodList; var values = e.detail.value; for (var i = 0; i < checkboxItems.length; ++i) { checkboxItems[i].checked = false; for (var j = 0; j < values.length; ++j) { if (checkboxItems[i].isbn == values[j]) { checkboxItems[i].checked = true; break; } } }
var checkAll = false; if (checkboxItems.length == values.length) { checkAll = true; }
this.setData({ 'goodList': checkboxItems, 'checkAll': checkAll }); this.calculateTotal(); },
/** * 使用者點選全選 */ selectalltap: function (e) { // console.log('使用者點選全選,攜帶value值為:', e.detail.value); var value = e.detail.value; var checkAll = false; if (value && value[0]) { checkAll = true; }
var goodList = this.data.goodList; for (var i = 0; i < goodList.length; i++) { var good = goodList[i]; good['checked'] = checkAll; }
this.setData({ 'checkAll': checkAll, 'goodList': goodList }); this.calculateTotal(); },
/** * 生命週期函式--監聽頁面載入 */ onLoad: function (options) {
},
/** * 生命週期函式--監聽頁面初次渲染完成 */ onReady: function () { this.calculateTotal(); },
/** * 生命週期函式--監聽頁面顯示 */ onShow: function () {
},
/** * 生命週期函式--監聽頁面隱藏 */ onHide: function () {
},
/** * 生命週期函式--監聽頁面解除安裝 */ onUnload: function () {
},
/** * 頁面相關事件處理函式--監聽使用者下拉動作 */ onPullDownRefresh: function () {
},
/** * 頁面上拉觸底事件的處理函式 */ onReachBottom: function () {
},
/** * 使用者點選右上角分享 */ onShareAppMessage: function () {
},

})

相關推薦

程式購物車--商城系列

// pages/shopcart/shopcart.jsPage({ /** * 頁面的初始資料 */ data: { 'iscart': false, //控制購物車有沒有資料 'goodList': [ { 'cover': '/assets/image

程式購物車和父子元件傳值及calc的注意事項

在做微信小程式時,覺得小組裡對購物車的實現不是很完美,就自己嘗試的寫了下,然後用到了父子元件傳值,父子元件傳值的話,和vue框架上是非常相似的,以及calc這個css函式,calc有個注意點,自己不怎麼用,一時間有差點忘了,這裡記錄下 1.效果圖 2.子元件實現

程式側欄分類 —— 程式實戰商城系列(1)

在商場專案中,一般都會有分類頁面。 分類頁面可以給使用者快速找到相關的商品,下面以側欄分類為例,如下圖 佈局分析: <主盒子> <左盒子></左盒子> <

程式仿淘寶分類入口 —— 程式實戰商城系列(2)

分類入口,已經成為了商城專案必須的佈局之一,這裡以仿照淘寶的分類入口來做案例 下圖紅框部分,就是本文重點講解部分,另外本文並沒有寫點選某個入口跳轉頁面。 如需學習頁面跳轉的同學,可以參考此文 頁

程式購物數量加減 —— 程式實戰商城系列(3)

我們在購買寶貝的時候,購物的數量,經常是我們需要使用的,如下所示: 在寶貝詳情頁裡: 在購物車裡: 現在就為大家介紹這個小元件,在小程式中,該如何去寫 下圖為本專案的圖: wxml: &l

程式商品屬性分類 —— 程式實戰商城系列(4)

所提及的購物數量的加減,現在說說商品屬性值聯動選擇。 為了讓同學們有個直觀的瞭解,到電商網截了一個圖片,就是紅圈所示的部分 現在就為大家介紹這個小元件,在小程式中,該如何去寫 下圖為本專案的圖: wxml: <view class="title"&

程式登陸 —— 程式教程系列(20)

簡介: 微信登陸,在新建一個微信小程式Hello World專案的時候,就可以看到專案中出現了我們的微信頭像,其實這個Hello World專案,就有一個簡化版的微信登陸。只不過是,還沒有寫入到咱們自家的後臺中而已。 新建一個Hello World專案,找到a

程式登入頁例項 —— 程式實戰系列(5)

提供一個登入頁的案例,供同學們使用 專案效果圖: 目錄結構: 圖片資源: name.png key.png loginLog.jpg login.wxml: <view c

程式商城倒計時

index.html  === > <view class="countDownTimeView pull-left countDownAllView text-left"> <text>倒計時:</text>

程式 簡單的使用者授權系列操作

一、獲取使用者登入狀態 和 獲取使用者資訊 想獲取使用者資訊,需要點選btn按鈕,給button設定屬性open-type="getUserInfo" 和bindgetuserinfo="MygetUserInfo" <button open-type="getUs

程式自定義toast例項 —— 程式實戰系列(6)

微信提供了一個toast的api  wx.showToast() 本來是比較好的,方便使用,但是這個toast會顯示出圖示,而且不能去除。 假設:我們執行完業務的時候,toast一下,當執行成功的

程式仿android fragment可滑動的底部導航欄例項 —— 程式實戰系列(4)

底部3-5個選項的底部導航欄,目前在移動端上是主流佈局之一 因此騰訊官方特地做了,可以通過設定,就可以做出了一個底部的導航欄 但是通過設定的這個底部的導航欄,功能上比較固定,它必須要設定與它對應的一個頁面,而且並不能滑動。 在業務上,有時候會比較限制,並不能完全滿足所需

程式自定義輪播圖例項 —— 程式實戰系列(3)

輪播圖是大部分應用的一個常用的功能,常用於廣告投放、產品展示、活動展示等等。 漂亮的輪播圖效果可以吸引使用者的點選,達到推廣產品的作用。 廢話少說,下面開始動手。 業務需求: 5個圖片輪番播放,

程式自定義抽屜選單(從下拉出)例項 —— 程式實戰系列(7)

微信提供了動畫api,就是下面這個 通過使用這個建立動畫的api,可以做出很多特效出來 下面介紹一個抽屜選單的案例 實現程式碼: wxml: <!--button--> &l

程式物流狀態時間軸

一個月左右沒更新部落格了,最近有點懶了哈(工作上真的忙),很多工作上學習到的東西都沒有及時分享出來,有點愧疚,不過自己最近一直在收集資料和學習一些新技術,最主要是想要構建自己的前端技術體系和自定義一個前端規範文件,哈哈哈。說重點啦,微信小程式裡面開發的商城模組還挺多的,剛好寫了一個物流狀態的時間軸,簡單分享一

程式swiper限制迴圈滑動

最近接的一個單子是使用swiper來達到頁面之間完美滑動的效果的。也就三個頁面首頁、內容頁、尾頁。 但是客戶要求首頁不能滑到尾頁,尾頁不能滑到首頁。 在官方文件中沒有找到方法,因此只能繞彎路了。  wxml頁面程式碼:重點在於 current='{{show_index}}'

11.程式canvas生成圖片並儲存到手機

在小程式中,會有這樣一種需求,儲存某一個頁面並將其分享到朋友圈。一般的做法是:將這個頁面用canvas繪製出來,通過wx.canvasToTempFilePath,把當前畫布指定區域的內容匯出生成指定大小的圖片。然後再通過wx.saveImageToPhotosAlbum,儲存圖片到系統相簿。由

程式介面互動反饋

互動反饋就是在使用者觸發某事件之後,給使用者一個反饋資訊。 在小程式中是通過以下幾種方式實現的: 1.wx.showToast()方法 showToast: function (postscollected, postcollected) {

程式側邊欄滑動實現(附完整原始碼)

目錄 一、效果圖 二、原理解析 三、原始碼 四、專案下載 同類文章推薦: 更多幹貨關注公眾號: 一、效果圖 講什麼都不如直接上效果圖好,所以我們先來看下實現效果如何。 通過滑動螢幕,或者點選左上角的圖示按鈕,都能實現側邊欄的劃出效果。   &nb

Android 分享程式圖片優化

      小菜上週接入了微信分享小程式的入口,基本功能實現都沒問題,有需要的朋友可以瞭解一下 Android 分享微信小程式失敗二三事,雖然功能都正常,但整體測試發現圖片展示效果不佳。於是小菜整理了一個簡單的小方法處理一下圖片!