2018-03-21 - 购物车项目说明 - 界面功能实现相关

主界面

内容展示区域

功能:应用程序在该区域内显示与用户所选的底端页签相对应的内容。

实现:Android原生代码实现webview,并根据选中的页签,在webview内显示对应的html文件。

底端页签

商品列表页签

功能:实现了用户点击“商品列表”后,应用程序将在内容展示区域内,显示商品列表页面内容的功能。

实现:页签功能来自Android原生代码,底部导航栏BottomNavigationView;列表项图标来自Android Studio提供的Vector Asset文件。

购物车页签

功能:实现了用户点击“购物车”后,应用程序将在内容展示区域内,显示购物车页面内容的功能。

实现:页签功能来自Android原生代码,底部导航栏BottomNavigationView;购物车图标来自Android Studio提供的Vector Asset文件。

商品列表页面

商品信息列表

按钮-添加到购物车

功能:实现了用户按下该按钮后,应用程序将该条目的信息添加到购物车中,并显示Toast提示信息的功能。在购物车页面中,可查看该条目的书名、价格、数量、封面信息。

实现:在list.html内,由addToCart(obj)函数实现。

购物车页面

购物车列表信息

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

实现:在html内,使用js函数,调用Android函数,读取购物车商品信息数据;在html内,使用js函数,将读取的json数据解析并显示到界面上。

购物车列表信息功能区

选择框-全选

功能:用户勾选“全选”后,应用程序将自动勾选列表信息中所有列表项的选择框;用户取消勾选“全选”后,应用程序将自动取消勾选列表信息中所有列表项的选择框。

实现:

按钮-删除所选

功能:用户按下此按钮后,应用程序将删除购物车内所有被标记为“选中状态”的列表项。

实现:在cart.html内,由deleteItem()函数实现。

按钮-一键清空

功能:用户按下此按钮后,应用程序将删除购物车内的所有列表项。

实现:在cart.html内,由deleteAll()函数实现。

文本内容-总价

功能:应用程序将自动显示所有“选中状态”的列表项的总价格。

实现:在cart.html内,由countPrice()函数实现。

按钮-结算

仅供展示用,该版本应用程序未实现相应功能。

购物车列表信息-列表项

功能:展示购物车内一项商品的信息。

实现:在html内,使用一个table表格。在table内,第一列显示选择框,第二列显示封面,第三列显示书名、定价、和数量功能区。其中,数量功能区包含“减少”按钮、数量输入框和“添加”按钮。

购物车列表项-选择框

功能:用户勾选该选择框后,该列表项被标记为“选中状态”。用户取消勾选该选择框后,该列表项被标记为“未选中状态”。此状态将为其他功能提供支持。在用户勾选“全选”的状态下,若用户取消勾选某一项列表项的选择框,应用程序将自动取消勾选“全选”选择框。在用户手动逐一勾选列表项的选择框后,若所有列表项的选择框都被勾选。则应用程序将自动勾选“全选”选择框。

实现:在cart.html内,由selectItemCheckbox(obj)函数实现。

购物车列表项-数量功能区

数量-文本输入框

功能:用户“数量”文本框内输入一个数据。如果是大于0的整数,则输入该数字。如果不是数字,或不是整数,或该数字小于1,则将其更正为1。在同时更新程序内存储的数据。

实现:在cart.html内,由changeNumber(obj)实现。

按钮-添加

功能:用户按下此按钮,应用程序“数量”文本框内的数量加一。同时更新程序内存储的数据。

实现:在cart.html内,由addNumber(obj)实现。

按钮-减少

功能:用户按下此按钮,应用程序“数量”文本框内的数量减一,最小值为1。同时更新程序内存储的数据。

实现:在cart.html内,由subNumber(obj)实现。

你可能感兴趣的:(2018-03-21 - 购物车项目说明 - 界面功能实现相关)