2018-03-21 - 購物車項(xiàng)目說明 - 界面功能實(shí)現(xiàn)相關(guān)

主界面

內(nèi)容展示區(qū)域

功能:應(yīng)用程序在該區(qū)域內(nèi)顯示與用戶所選的底端頁簽相對應(yīng)的內(nèi)容。

實(shí)現(xiàn):Android原生代碼實(shí)現(xiàn)webview,并根據(jù)選中的頁簽,在webview內(nèi)顯示對應(yīng)的html文件。

底端頁簽

商品列表頁簽

功能:實(shí)現(xiàn)了用戶點(diǎn)擊“商品列表”后,應(yīng)用程序?qū)⒃趦?nèi)容展示區(qū)域內(nèi),顯示商品列表頁面內(nèi)容的功能。

實(shí)現(xiàn):頁簽功能來自Android原生代碼,底部導(dǎo)航欄BottomNavigationView;列表項(xiàng)圖標(biāo)來自Android Studio提供的Vector Asset文件。

購物車頁簽

功能:實(shí)現(xiàn)了用戶點(diǎn)擊“購物車”后,應(yīng)用程序?qū)⒃趦?nèi)容展示區(qū)域內(nèi),顯示購物車頁面內(nèi)容的功能。

實(shí)現(xiàn):頁簽功能來自Android原生代碼,底部導(dǎo)航欄BottomNavigationView;購物車圖標(biāo)來自Android Studio提供的Vector Asset文件。

商品列表頁面

商品信息列表

按鈕-添加到購物車

功能:實(shí)現(xiàn)了用戶按下該按鈕后,應(yīng)用程序?qū)⒃摋l目的信息添加到購物車中,并顯示Toast提示信息的功能。在購物車頁面中,可查看該條目的書名、價格、數(shù)量、封面信息。

實(shí)現(xiàn):在list.html內(nèi),由addToCart(obj)函數(shù)實(shí)現(xiàn)。

購物車頁面

購物車列表信息

功能:顯示用戶所添加的全部商品信息。

實(shí)現(xiàn):在html內(nèi),使用js函數(shù),調(diào)用Android函數(shù),讀取購物車商品信息數(shù)據(jù);在html內(nèi),使用js函數(shù),將讀取的json數(shù)據(jù)解析并顯示到界面上。

購物車列表信息功能區(qū)

選擇框-全選

功能:用戶勾選“全選”后,應(yīng)用程序?qū)⒆詣庸催x列表信息中所有列表項(xiàng)的選擇框;用戶取消勾選“全選”后,應(yīng)用程序?qū)⒆詣尤∠催x列表信息中所有列表項(xiàng)的選擇框。

實(shí)現(xiàn):

按鈕-刪除所選

功能:用戶按下此按鈕后,應(yīng)用程序?qū)h除購物車內(nèi)所有被標(biāo)記為“選中狀態(tài)”的列表項(xiàng)。

實(shí)現(xiàn):在cart.html內(nèi),由deleteItem()函數(shù)實(shí)現(xiàn)。

按鈕-一鍵清空

功能:用戶按下此按鈕后,應(yīng)用程序?qū)h除購物車內(nèi)的所有列表項(xiàng)。

實(shí)現(xiàn):在cart.html內(nèi),由deleteAll()函數(shù)實(shí)現(xiàn)。

文本內(nèi)容-總價

功能:應(yīng)用程序?qū)⒆詣语@示所有“選中狀態(tài)”的列表項(xiàng)的總價格。

實(shí)現(xiàn):在cart.html內(nèi),由countPrice()函數(shù)實(shí)現(xiàn)。

按鈕-結(jié)算

僅供展示用,該版本應(yīng)用程序未實(shí)現(xiàn)相應(yīng)功能。

購物車列表信息-列表項(xiàng)

功能:展示購物車內(nèi)一項(xiàng)商品的信息。

實(shí)現(xiàn):在html內(nèi),使用一個table表格。在table內(nèi),第一列顯示選擇框,第二列顯示封面,第三列顯示書名、定價、和數(shù)量功能區(qū)。其中,數(shù)量功能區(qū)包含“減少”按鈕、數(shù)量輸入框和“添加”按鈕。

購物車列表項(xiàng)-選擇框

功能:用戶勾選該選擇框后,該列表項(xiàng)被標(biāo)記為“選中狀態(tài)”。用戶取消勾選該選擇框后,該列表項(xiàng)被標(biāo)記為“未選中狀態(tài)”。此狀態(tài)將為其他功能提供支持。在用戶勾選“全選”的狀態(tài)下,若用戶取消勾選某一項(xiàng)列表項(xiàng)的選擇框,應(yīng)用程序?qū)⒆詣尤∠催x“全選”選擇框。在用戶手動逐一勾選列表項(xiàng)的選擇框后,若所有列表項(xiàng)的選擇框都被勾選。則應(yīng)用程序?qū)⒆詣庸催x“全選”選擇框。

實(shí)現(xiàn):在cart.html內(nèi),由selectItemCheckbox(obj)函數(shù)實(shí)現(xiàn)。

購物車列表項(xiàng)-數(shù)量功能區(qū)

數(shù)量-文本輸入框

功能:用戶“數(shù)量”文本框內(nèi)輸入一個數(shù)據(jù)。如果是大于0的整數(shù),則輸入該數(shù)字。如果不是數(shù)字,或不是整數(shù),或該數(shù)字小于1,則將其更正為1。在同時更新程序內(nèi)存儲的數(shù)據(jù)。

實(shí)現(xiàn):在cart.html內(nèi),由changeNumber(obj)實(shí)現(xiàn)。

按鈕-添加

功能:用戶按下此按鈕,應(yīng)用程序“數(shù)量”文本框內(nèi)的數(shù)量加一。同時更新程序內(nèi)存儲的數(shù)據(jù)。

實(shí)現(xiàn):在cart.html內(nèi),由addNumber(obj)實(shí)現(xiàn)。

按鈕-減少

功能:用戶按下此按鈕,應(yīng)用程序“數(shù)量”文本框內(nèi)的數(shù)量減一,最小值為1。同時更新程序內(nèi)存儲的數(shù)據(jù)。

實(shí)現(xiàn):在cart.html內(nèi),由subNumber(obj)實(shí)現(xiàn)。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容