主界面
内容展示区域
功能:应用程序在该区域内显示与用户所选的底端页签相对应的内容。
实现: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)实现。