{{food.name}}
{{food.description}}
{{food.month_saled_content}}
{{food.praise_content}}
￥{{food.min_price}} /{{food.unit}}
資訊專欄INFORMATION COLUMN
摘要：如上所示，這篇我們將商品分類菜單顯示數(shù)量的提示完善，是軟件更加易于使用。指向了實例完善購物車內(nèi)的數(shù)量統(tǒng)計另需導(dǎo)入總個數(shù)總金額結(jié)算按鈕顯示去結(jié)算現(xiàn)在商品分類菜單的數(shù)量提示就完成了。
如上所示，這篇我們將商品分類菜單顯示數(shù)量的提示完善，是軟件更加易于使用。
好先讓我回顧一下上節(jié)課的內(nèi)容，Goods組件，數(shù)量提示功能最終需要在Goods組件內(nèi)顯示。
{{container.tag_name}}
{{calculateCount(item.spus)}}//通過i標(biāo)簽展示數(shù)量
{{item.name}}
![]()
{{item.name}}
{{food.name}}
{{food.description}}
{{food.month_saled_content}} {{food.praise_content}}![]()
￥{{food.min_price}} /{{food.unit}}
注意methods方法中的calculateCount函數(shù)實現(xiàn)計算個數(shù)，數(shù)量來自于增減組件內(nèi)Cartcontrol。
calculateCount(spus) {
console.log(spus)
let count = 0;
spus.forEach(food => {
if (food.count > 0) {
count += food.count;
}
});
return count;
},
以上是spus數(shù)據(jù)
Cartcontrol組件控制商品增減
通過組件Cartcontrol接受了來自父組件的傳值，并且我們在組件內(nèi)添加商品的增減功能。
完善購物車內(nèi)的數(shù)量統(tǒng)計
0}">0}"> 0}"> {{totalCount}}￥{{totalPrice}}
0}">另需{{shipping_fee_tip}}
0}">{{payStr}}
現(xiàn)在商品分類菜單的數(shù)量提示就完成了。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106025.html
摘要：本篇我們將繼續(xù)推進(jìn)外賣項目商品頁的展示。如圖所示，我們可以把商品也面分為兩大部分左側(cè)菜單欄右側(cè)商品展示為當(dāng)前商品頁面的根元素。下一篇文章我們開始為左側(cè)菜單欄，右側(cè)商品展示加入數(shù)據(jù)。 上次我們通過設(shè)計評價組件這個過程，了解到了組件設(shè)計中的良好的習(xí)慣，比如，文件夾如何支撐組件，圖片，組件路徑的存放于設(shè)置。 本篇我們將繼續(xù)推進(jìn)外賣項目—商品頁的展示。 showImg(https://segm...
摘要：本篇我們將構(gòu)建商品控件與購物車聯(lián)動。商品控件商品控件的結(jié)構(gòu)編寫在商品組件的標(biāo)簽內(nèi)完成項目結(jié)構(gòu)，以及數(shù)據(jù)，事件的綁定，與判斷邏輯的書寫。有商品數(shù)量的時候會按照規(guī)定動畫進(jìn)行顯示，反之則隱藏。 本篇我們將構(gòu)建商品控件與購物車聯(lián)動。 商品控件 商品控件的結(jié)構(gòu)編寫showImg(https://segmentfault.com/img/bVbvk8j?w=191&h=439); 在商品組件的標(biāo)簽...
摘要：上篇我們將菜單欄，商品展示結(jié)構(gòu)完成，本次我們?yōu)檫@兩個部分接入數(shù)據(jù)。菜單欄接入數(shù)據(jù)導(dǎo)入組件，定義需要的數(shù)據(jù)格式導(dǎo)入滾動組件導(dǎo)入商品頁面準(zhǔn)備需要的數(shù)據(jù)初始化組件。 上篇我們將菜單欄，商品展示結(jié)構(gòu)完成，本次我們?yōu)檫@兩個部分接入數(shù)據(jù)。 showImg(https://segmentfault.com/img/bVbu2JW?w=312&h=421); 菜單欄接入數(shù)據(jù) 導(dǎo)入組件，定義需要的數(shù)據(jù)格...
摘要：最佳實踐良好的編碼規(guī)范單元測試持續(xù)集成文檔，從一開始就形成良好的編碼習(xí)慣。真實的電商業(yè)務(wù)所有的業(yè)務(wù)需求來自真實的客戶，并且線上良好運營中。 重要通知： Laravel + 小程序的開源電商版本源碼已經(jīng)在 github 上拉，歡迎提交 issue 和 star :) 開源電商 Server 端: Laravel API源碼 開源電商 client 端：小程序源碼 iBrand 簡介...
摘要：輪播圖區(qū)域這里微信小程序給我們提供了組件，直接用就可以了。但是需要注意的是在微信小程序里，強烈推薦使用彈性布局首頁商品展示區(qū)這里的商品都是分塊展示，很有規(guī)律，因此整個商品展示都可以直接用遍歷出來。 showImg(https://user-gold-cdn.xitu.io/2018/6/11/163ed74a0fff9596?w=1262&h=676&f=jpeg&s=174374);...
閱讀 3095·2021-09-08 10:43
閱讀 1062·2019-08-30 15:53
閱讀 1023·2019-08-30 13:51
閱讀 865·2019-08-29 14:03
閱讀 845·2019-08-26 18:35
閱讀 1264·2019-08-26 13:38
閱讀 1628·2019-08-26 10:34
閱讀 3531·2019-08-26 10:21
