- 博客(57)
- 收藏
- 关注
原创 《仿盒马》app开发技术分享-- 回收记录页(端云一体)
上一节我们实现了在订单列表中查看订单详情,但是我们的回收相关的营收就必须要进入到商品详情页才能够进行查看,如果我们在订单较多的情况下,一个一个的查看订单的详情就会变得非常的麻烦了,现在我们需要实现一个订单记录查看页面,针对正在进行的订单,和已完成的订单,展示预估收益和收益统计。然后我们定义接收对应数据的参数根据查询到订单列表的weightid查询出对应的收益和积分。首先我们拿到用户信息然后查询出对应的运输中订单跟已完成订单列表。获取到内容之后我们填充到页面上。我们执行代码查看效果。
2025-06-12 16:29:15
70
原创 《仿盒马》app开发技术分享-- 回收订单详情页(端云一体)
上一节我们实现了订单列表的所有功能,展示了待取件、已取消、运输中、已完成等订单列表的数据展示,并且在对应的订单中点击功能按钮实现了订单的状态切换,这一节我们就要通过点击对应列表内的订单进入相应的订单详情页,展示当前订单的状态和对应的信息,当进入的是已完成订单时展示当前订单的收益,分别显示收入多少金额和对应的积分。拿到id对应的订单之后,我们根据当前订单的weightid查询出对应的重量、收益、积分等信息。首先添加对应的点击事件,在所有的列表都要添加上。然后在订单详情页面接收对应的id。
2025-06-11 22:08:26
105
原创 《仿盒马》app开发技术分享-- 回收订单页功能完善(端云一体)
要实现运输中、已完成订单状态我们分别要先实现tab切换时组件刷新的方法,根据对应的index来实现当前页面的刷新,然后在刷新方法中请求云数据库的数据展示到页面上,通过userid与ordertype去筛选对应的订单,取出符合要求的数据,在不同的状态栏中我们还需要实现修改当前点击订单的状态,实现本地列表的更新和云端订单状态的修改。因为已完成页面不需要修改订单状态,仅需要展示,所以数据查询出来之后直接展示到list中即可。然后在订单中通过点击订单完成按钮完成对订单状态的修改。我们执行代码查看效果。
2025-06-11 20:42:28
563
原创 《仿盒马》app开发技术分享-- 回收订单状态修改与展示(端云一体)
上一节我们实现了订单列表页,但是我们的订单列表又分为很多的订单状态,我们在订单列表页取出的数据是所有的数据,订单的状态我们还需要进行一些操作,如果都在一起,对用户来说非常的不友好,所以我们需要把它修改为不同状态下展示不同的列表,同时我们实现订单的取消,以及已取消订单的列表查看。创建代取件组件,根据userid、ordertype查询对应的待取件列表。到这里我们就实现了待取件订单的取消以及已取消订单的展示。取消预约按钮处,修改订单对应订单的状态。首先查询对应的取消订单列表。对应的列表展示(完整代码)
2025-06-11 16:23:44
232
原创 《仿盒马》app开发技术分享-- 旧物回收订单列表(端云一体)
要实现订单列表的展示,首先我们要查询对应用户下的订单列表,查询出对应的订单列表后,展示出对应的数据到组件内,数据的列表展示使用list实现,在订单展示item上我们根据订单状态展示对应的订单操作按钮。上一节我们实现了订单的创建,并且成功吧数据提交到云数据库中,这一节我们实现的内容是展示我们提交的订单列表。根据用户信息查询当前用户下所有的列表。首先我们获取保存的用户信息。现在我们执行代码查看效果。使用list展示列表。
2025-06-11 15:12:37
357
原创 《仿盒马》app开发技术分享-- 旧物回收页(提交云端)(端云一体)
预估重量列表的实现首先需要创建对应的表和数据源,然后在页面打开的时候从云端查询出对应的数据,展示到我们创建的静态列表中,然后我们创建订单,把页面中的数据放置到创建的订单创建表中。上一节我们已经实现了地址,留言,取件时间的选择,以及静态的预估重量。现在我们需要把预估重量创建出来,从云端去获取,以应对后续的其他业务逻辑,以及回收订单的创建。到这里我们就实现了提交云端数据的功能。在页面打开后获取云端的数据。添加对应的数据到提交信息表。创建对应的实体和db类。首先我们创建对应的表。
2025-06-10 17:02:37
180
原创 《仿盒马》app开发技术分享-- 旧物回收页(业务逻辑)(端云一体)
要实现地址选择,我们首先要在跳转到地址列表选择页,传递过去一个标记,证明我们是从回收首页跳转过来的,选择地址后的地址信息传递要传递到对应的页面。上一节我们实现了旧物回收页的静态展示页,现在我们开始添加对应的模块逻辑,我们要实现的内容有,地址选择、留言、取件时间、重量选择这些模块。这里我们实现一个添加留言的弹窗,拿到内容展示到留言板块即可。可以点击切换,切换时修改对应的背景色,获取到对应的数据。地址选择,点击事件跳转对应的页面。在地址选择页面拿到对应的状态标记。传递对应的地址数据过去,然后接收。
2025-06-10 15:14:19
222
原创 《仿盒马》app开发技术分享-- 旧物回收页(静态)(端云一体)
上一节我们进行了购物车业务逻辑的优化,使我们的程序变得更加健壮,这一节我们将要开始电商业务以外的内容,旧物回收,这是一个全新的业务模块,我们将要在这里实现对应的,回收金,积分,回收业务相关内容。要想实现旧物回收相关的内容,我们首先要搭建一个业务框架,我们这里我们要实现的内容有头部回收种类的展示模块,用户下单滚动提示模块,信息填充模块,以及后续的订单入口模块。然后是我们的用户信息填充模块,这里我们需要的关键信息就是地址,备注,用户下单的回收时间等。到这里我们就暂时实现了旧物回收的主要框架了。
2025-06-09 22:07:44
318
原创 《仿盒马》app开发技术分享-- 购物车逻辑优化(端云一体)
之后我们继续进行逻辑漏洞的寻找,发现当我们选中和取消数据的时候,我们修改数据忘记了传入userid,这会导致我们的数据失去userid,下次在进入购物车查询,这些取消选中的数据都会消失掉,因为我们是根据用户的userid去进行查询的,在这里我们添加对应的逻辑。只要有一条是选中的我们就继续执行后续的逻辑,到了确认订单页面,我们拿到传递过来的数据根据isNeedPay 进行筛选,我们只拿为true的数据,其他的数据我们就不需要了,因为它没被结算依然要存储在购物车中。到这里我们的购物车相对来说就变得比较健壮了。
2025-06-09 22:00:18
273
原创 《仿盒马》app开发技术分享-- 商品搜索页(搜索记录&商品搜索)(端云一体)
商品搜索记录列表,我们可以通过保存输入的搜索内容到用户首选项中实现。搜索记录的唯一性是当我们搜索相同的内容,只会产生一条记录,只需要在添加数据的时候进行一次过滤,搜索记录的删除我们通过弹窗来实现,调用封装好的删除方法,根据key删除对应的存储记录。上一节我们新建了商品搜索页,实现了顶部的搜索bar以及下方的推荐搜索列表,这一节我们要新增一个商品搜索记录列表,以及输入内容之后搜索出对应商品的功能,我们还需要保证搜索内容的唯一性,以及搜索记录的本地数据持久化和搜索记录列表的删除。可以看到我们的效果已经实现。
2025-06-05 10:42:07
464
原创 《仿盒马》app开发技术分享-- 商品搜索页(顶部搜索bar&热门搜索)(端云一体)
随着开发功能的逐渐深入,我们的应用逐渐趋于完善,现在我们需要继续在首页给没有使用按钮以及组件添加对应的功能,这一节我们要实现的功能是商品搜索页面,这个页面我们从上到下开始实现功能,首先就是一个搜索的bar,然后是一个系统推荐的热门搜索列表。要实现顶部的搜索bar其实还是非常简单的,我们只需要使用对应的row布局去填充对应的组件,然后根据输入状态来实现对应组建的展示和隐藏即可,热门搜索列表我们需要在云端新建对应的表,填充数据后,进行云数据库数据的请求。之后我们创建对应的商品搜索页面,在页面中实现一个bar。
2025-06-04 17:02:23
285
原创 《仿盒马》app开发技术分享-- 个人中心&关于逻辑完善(端云一体)
要实现状态的修改,我们在登录以及退出登录页面间通信采用emitter来发送和接收消息,在消息接收成功后的回调里修改当前页面的参数,同时销毁存储的用户信息,关于页面我们直接添加当前应用以及作者的信息即可,同时为了能更好的方便同学们查看其他内容,在关于中我使用webview展示了某站的个人主页,可以查看最新的文章列表,同时在个人信息页面添加退出按钮和对应逻辑。我们继续实现关于页面的逻辑,在这个页面我们只需要填充对应的信息即可,只需要注意跳转到web页面的事件。我们执行一下代码看看webview页面的展示效果。
2025-06-03 22:34:42
449
原创 《仿盒马》app开发技术分享-- 扫一扫功能(端云一体)
要实现扫一扫的功能,我们有两种选择,首先是zxing,然后是scankit,这里我们选择使用scankit,因为它针对多种复杂扫码场景做了识别优化,提升扫码成功率与用户体验,我们自己要处理的内容就会少很多,我们主要扫码内容就是商品的id,通过扫描商品id对应的二维码,携带id跳转到对应的商品详情页面,查询出对应的商品详情展示。在回调中我们获取了扫码的内容,把扫码内容传递到商品详情页。然后我们在引用组件的地方调用Scankit。首先我们在二维码扫描的按钮添加事件回调。到这里就实现了扫码进入商品详情的功能。
2025-06-03 11:38:47
222
原创 《仿盒马》app开发技术分享-- 购物车业务逻辑完善(端云一体)
之前我们已经实现了购物车相关的内容,实现了购物车数据列表的展示,但是我们结算订单之后我们的购物车列表并没有刷新,而且底部的状态栏并没有明显的数据展示来提醒用户,而且当我们在商品详情页添加新商品,底部也没有同步更新,这一节我们要解决的问题就是这些。然后我们在购物车组件内新增一个控制刷新的变量,并监听变量是否修改,修改后我们执行云数据库的查询方法,查询当前登录用户的购物车列表,当提交完订单之后,我们在订单提交页通过emitter传递状态。首先在底部购物车图标右上角新增Badge组件。2.提交购物车商品列表。
2025-06-02 15:37:55
297
原创 《仿盒马》app开发技术分享-- 订单列表页(端云一体)
要实现这么一个功能我们首先就需要实现页面的切换功能,这里我们使用tabs组件,之后我们在tabcontent中添加对应的页面组件,对应当前展示的订单状态,分别有待发货、待收货、已完成这些状态,我们需要在切换到对应页面的时候进行订单的查询,注意tabcontent加载后再次切换时不会再执行生命周期方法,我们还需要进行切换时的请求处理,保证订单列表的实时性。首先实现一个切换的页面,并且添加对应的组件,这里我们暂时实现一个,其他的我们如法炮制即可,我们来实现待发货页面。然后实现切换后的查询代码。
2025-05-29 22:26:45
483
原创 《仿盒马》app开发技术分享-- 订单详情页(端云一体)
在之前的章节中我们实现了订单的提交,以及提交之后跳转到确认订单页面,在确认订单页面我们添加了一个入口,这个入口是查询订单,当我们点击入口时,我们需要跳转到一个新的界面,这个界面通过接收上个界面的订单id或者订单code 等信息,进行订单的详细内容展示要想实现订单内容的展示,首先我们要解决订单查询的问题,之前的订单提交页面,因为我们做了一张关联表,把提交的商品放置到了一张单独的表中,通过order_product_id去做关联查询,所以我们还需要根据id 把对应的商品列表查出来,然后我们再查出对应order_
2025-05-29 20:55:27
565
原创 《仿盒马》app开发技术分享-- 订单地址修改(端云一体)
要实现这样一个页面,首先我们要做的就是在这个页面我们能拿到用户的信息,对应的订单id,这样的话我们就可以通过一个查询订单的按钮或者入口进入到订单的详情界面,然后我们需要有一个地址确认的页面,这能帮助用户核对地址的准确性,同时我们还需要提供一个地址修改的信息展示,辅助用户进行错误地址的修改。当我们的地址需要修改,我们点击修改地址按钮,来到订单地址修改页,我们依旧要接收对应的数据集在当前页面加载,我们展示的内容有当前选择的地址,以及要修改的地址,要修改的地址我们从地址列表也重新选择实现。
2025-05-28 22:01:15
646
原创 《仿盒马》app开发技术分享-- 确认订单页(业务逻辑)(端云一体)
上一节我们实现了确认订单页的页面绘制和价格计算优惠计算,订单列表展示等功能,这一节我们来实现确认订单页的整个业务逻辑。首先我们要实现的就是地址的选择,然后把我们计算的价格,商品列表等数据保存起来,然后我们开始创建订单表实体类等,把这些数据提交到订单表中。要想实现确认订单的功能,首先我们要创建对应的表,我们需要注意的数据有当前订单对应的userid,表的id,以及表携带的数据,订单的创建时间,完成时间,退单时间,订单编号,付款方式,备注等,还要注意商品列表多条时如何有效插入和查询的问题。
2025-05-28 16:35:26
892
原创 《仿盒马》app开发技术分享-- 确认订单页(数据展示)(端云一体)
上一节我们实现了地址的添加,那么有了地址之后我们接下来的重点就可以放到订单生成上了,我们在购物车页面,点击结算会跳转到一个 订单确认页面,在这个页面我们需要有地址选择、加购列表展示、价格计算、优惠计算、商品数量展示等信息。要想实现确认订单页面的功能,我们只需要从购物车页面把加购的列表传递过来,然后根据列表中的buyamount 以及price 去计算对应的价格和加购数量,然后我们通过划线价去计算我们的优惠。最后确认无误提交订单。数据接收成功之后我们绘制收货地址模块,以及列表展示模块,价格计算模块的ui。
2025-05-27 22:37:41
867
原创 《仿盒马》app开发技术分享-- 新增地址(端云一体)
上一节我们实现了地图选点,获取当前位置,在地图上添加标记,根据当前的定位获取poi地址列表等功能,这些全部都为了我们这一节而铺垫,这一节我们要实现的是新增地址,把我们的用户信息,填写收件人、门牌号、手机号、经纬度、详细地址等信息添加到我们的云数据库中,然后在地址查询列表里展示出来。然后我们创建一个新增地址页面在生命周期事件中接收,因为这个页面我们后期会展示用户选择的地址的位置,所以我们需要实现一个堆叠布局,把信息填写放置在地图之上展示。首先我们在地图选点页面,在列表的点击事件中传递我们点击的条目数据。
2025-05-26 22:05:20
1066
原创 《仿盒马》app开发技术分享-- 地图选点(端云一体)
要想实现这些功能,首先我们需要在地图加载之前获取当前的经纬度,根据经纬度查询附近的poi地址,然后我们获取这些poi地址展示到列表内,同时我们根据当前位置计算出与列表内地址的直线差距。上一节我们实现了地图的简单展示,这一节我们要实现的内容是,根据展示的地图,实现当前定位功能,当前位置的poi地址功能,以及列表的展示,给地图添加标记,展示自己的当前定位。这样我们就已经实现了地图上的标记以及当前位置的展示,我们执行一下代码查看一下效果。
2025-05-26 16:44:34
715
原创 《仿盒马》app开发技术分享-- 原生地图展示(端云一体)
地图的展示,我们需要在管理中心先给我们对应的应用开启地图api功能,否则是不能展示的,其次是我们要配置自签,不配置的话也是无法使用地图功能,然后我们还需要注意应用是否开启了联网权限,如果这些都已经完成,那么我们在地图显示之前还需要进行权限时候获取的校验。上一节我们实现了获取当前用户的位置,并且成功的拿到了经纬度,这一节我们就要根据拿到的经纬度,结合我们其他的知识点来实现地图的展示。到这里我们的地图展示就实现了,我们执行一下代码看看效果。可以看到我们的地图已经成功展示出来了,完整代码如下。
2025-05-25 22:17:32
600
原创 《仿盒马》app开发技术分享-- 定位获取(端云一体)
上一节我们实现了地址管理页面的数据查询和展示,接下来我们要实现的功能是地址添加相关的,我们想实现的功能是地图选点,那么在地图选点之前我们要做的就是先获取用户当前的定位。要想实现定位功能,首先我们需要给应用申请定位权限,然后我们每次进入页面之前需要先进行定位功能是否开启的判断,如果没有开启我们要提示用户去开启,之后我们才是对定位请求的开启判断,用户同意之后获取当前的定位,在返回值中拿到经纬度。如果用户开启了定位,并且我们没有开启应用的定位权限,在当前页面的底部提醒用户,去开启定位。
2025-05-25 21:25:09
753
原创 《仿盒马》app开发技术分享-- 地址管理页(端云一体)
上一节我们实现了个人信息页面的信息展示和页面修改,并且实现了数据的同步修改,这一节我们来实现电商应用里比较重要的模块,地址模块。地址列表的展示相对来说是比较简单的,首先我们要新增对应的表,然后在云端先添加几条测试数据,然后在页面中实现当前用户对应的地址查询,在列表组件中进行展示。可以看到我们已经有了两条测试数据,接下来我们就可以创建对应的页面开始查询我们云数据库的数据了。我们的断点中可以看到已经查询出了我们对应的两条数据,然后我们把它展示到列表中。然后我们点击新增进行数据的插入,插入后我们点击查询。
2025-05-25 19:43:29
887
原创 《仿盒马》app开发技术分享-- 个人信息页(端云一体)
个人信息页面的展示,我们需要通过个人中心的入口进入,个人中心页面首先要根据user_id来查询我们用户相对应的信息,然后在页面进行展示,然后我们点击某些可以修改的选项,弹出编辑弹窗在数据库层面进行修改,同时在页面实时刷新。可以看到数据已经展示到页面上,接下来我们进行数据的修改,首先是头像的修改,因为之前我们已经创建了对应的弹窗但是没有实现对应的逻辑,这时候我们只需要在点击事件中添加对应的修改逻辑即可。然后创建对应的个人信息展示页面,并且在生命周期中查询对应的userid对应的个人信息。
2025-05-24 14:37:13
600
原创 《仿盒马》app开发技术分享-- 个人中心页or静态头像选择(业务逻辑)(端云一体)
上一节我们实现了登录页面的业务逻辑,并且成功的实现了数据的查询,同时我们新增了用户首选项的工具类,现在主界面往登录页面跳转,登录成功后我们关闭登录页面,这时候我们就会回到个人中心页面,那么现在我们的业务逻辑是一种什么样的形式?然后解决切换时自定义组件不刷新的问题,我们在index页面定义一个下标的tag ,然后通过@prop 传进组件内,通过监听来执行我们想要的方法。现在我们切换的问题解决了,接下来要解决的是数据的传输,在上方的back中我们把用户信息传递到了index页面,所以我们需要接收一下。
2025-05-23 16:32:56
708
原创 《仿盒马》app开发技术分享-- 用户登录页(业务逻辑)(端云一体)
上一节我们实现了静态的用户登录页,这一节我们需要给他添加上业务逻辑,实现跟云数据库的互通,同时跟整个应用关联起来,因为我们还没有实现用户的注册页面,所以这里我们在云数据库的用户数据插入暂时先不做同用户名的校验,我们在云端先插入几条数据,暂时专注于查询即可。现在我们可以完善相关的业务逻辑了,我们需要处理的有,数据的查询,状态的判断,根据是否注销,是否有对应的账号密码,来执行对应的逻辑。登录页的业务逻辑主要还是针对用户输入的账号密码跟数据库存储的信息是否匹配,用户登录成功之后对当前信息的存储和使用。
2025-05-22 16:09:43
1203
原创 《仿盒马》app开发技术分享-- 用户登陆页面(静态)(端云一体)
上一节我们实现了个人中心页面的静态展示,项目进行到这里呢,我们也是时候添加用户相关的内容了, 因为到了后期,我们的数据都是跟用户绑定的,各个用户之间的数据并不互通,现在为了实现我们的用户绑定制度,我们需要给应用添加一个用户登陆的入口的。用户登陆页面的内容相对来说比较简单,我们首先要实现的就是登陆页的静态页面,需要展示的内容不多,包括logo,账号密码的输入框,登陆按钮,请求状态等,之后我们会在页面中添加相应的业务逻辑使他更丰富一些。实现之后呢,我们看一下执行的效果如何。到这里我们的静态页面就实现完成了。
2025-05-22 13:53:54
287
原创 《仿盒马》app开发技术分享-- 个人中心页面(端云一体)
上一节我们实现了分类页面的所有联动效果,这一节我们要开始完成一个新的页面,这个页面是我们主界面的第四个板块,就是个人中心页面。要实现个人中心页面,首先我们要规划好整体的布局,我们选择从上到下实现,分为三块,一块显示用户信息,一块显示关键信息,一块用来展示用户相关的各种入口列表。这里的url 类型我们注意写成多类型,这样后期我们的内容要修改,我们的改动就会比较小。new SectionLine(“地址簿”,添加完成后我们来到页面完善我们设计的三块内容。new SectionLine(“订单”,
2025-05-21 16:56:43
1018
原创 《仿盒马》app开发技术分享-- 分类右侧商品列表(端云一体)
当我们选择顶部一级分类列表时,左侧列表展示二级分类列表,右侧商品列表展示二级分类列表下的同品类商品,这时候我们需要很好的控制它们之间的联动效果,保证我们每次的切换,对应的列表都能够正常的刷新,同时也要注意数据之间的对应关系,及时的修改对应的id来帮助我们实现数据的查询。因为我们是用左侧列表的right_id字段来进行查询的所以,需要在左侧list的item点击事件中先把值传给我们定义的变量,同时监听这个变量,当它修改的时候我们及时触发列表刷新。之后我们因为在左侧list中可能会点击不同的条目。
2025-05-21 15:08:09
687
原创 《仿盒马》app开发技术分享-- 分类左侧列表(端云一体)
这里比较考验我们对联动效果的整体把控,要实现这个功能,我们需要把弹窗选中的id,列表选中的id,首次进入页面默认选中情况下的id利用起来,作为列表查询的条件进行数据的查询,以及后续list列表数据的展示。上一节我们实现了分类页面的顶部导航栏全选弹窗列表,并实现了跟顶部列表的点击选中联动效果,这一节我们要实现的功能是,分类模块的左侧列表,它同样也需要跟弹窗列表的点击,顶部列表的点击有联动的效果。可以看到我们当前选择的分类是酒水饮料,左侧的细分列表是白酒和啤酒,现在我们点击其他类目。
2025-05-21 11:39:26
873
原创 《仿盒马》app开发技术分享-- 分类模块顶部导航列表弹窗(端云一体)
自定义弹窗的实现,然后我们需要在弹窗创建的时候实现数据的同步,当我们在弹窗未出现的时候进行列表下标的切换,打开弹窗的时候需要把对应的index传递进去,选中状态要保持同步。同时在弹窗内选择分类,外部列表也要同步切换,并且每次切换都要在list允许居中的情况下实现选中的item居中。上一节我们实现了分类页面的顶部导航栏列表,并且实现了首页金刚区跟首页导航栏的联动,这一节我们实现导航栏列表的弹窗功能,需要学习的知识点有自定义弹窗,同时我们的数据源需要跟分类页保持一一致。Text(‘全部分类’)
2025-05-20 20:31:46
274
原创 《仿盒马》app开发技术分享-- 分类模块顶部导航列表(端云一体)
上一节我们实现了购物车商品列表的大部分功能,实现了商品的添加、删除、增减、价格计算等业务,并且都跟云端进行通信。现在我们继续对项目进行改造,这一节我们要改造的内容是分类页,这个页面我们在之前的非端云一体化项目中实现过。现在要改造成端云一体的模式,并且我们的金刚区也要实现分类页的点击联动。分类列表我们要注意首页跳入切换到对应item的情况,点击时item对应的字体、背景色等状态的变化,以及list的切换。可以看到已经实现了跳转到分类并且选中我们在金刚区点击的item了。首先我们要对金刚区的数据进行一个改造。
2025-05-20 16:37:30
565
原创 《仿盒马》app开发技术分享-- 购物车功能完善(端云一体)
这一节我们在这些功能的基础上实现云端记录,因为我们现在只有数据的查询是从云端获取的,其他的操作虽然都实现了相对应的功能,但是当我们操作完,关闭app,再打开不会有对应的记录,有的同学可能会说,那我们把数据用首选项或者数据库的形式存储就可以了吧?商品删除我们使用ListItem的swipeAction 已经实现,但是我们的删除现在是在list中splice,看似我们删除了数据,但是这个数据源重新进入页面就又恢复了,这里我们需要用云数据库的delete函数进行数据的真删除。
2025-05-14 21:54:46
527
原创 《仿盒马》app开发技术分享-- 购物车基础功能实现(端云一体)
上一节我们实现了加入购物车和购物车列表的简单展示。对一个电商类的应用来说,这很显然是不够的,我们的购物车内容应该更加的丰富,他需要用户能自主的去选择想要结算的商品,删除一些不需要的商品,或者取消掉一些本次不结算的商品,同时根据选择的不同,我们需要把相对应的价格和选择的数量等信息传递给用户,帮助用户节省更多的时间。
2025-05-14 16:47:48
725
原创 《仿盒马》app开发技术分享-- 加入购物车&加购列表展示(端云一体)
当然了,作为一个购物类的应用,我们仅仅展示是用处不大的,我们还需要有添加的动作。我们已经实现了弹窗,加入购物车就需要在切换规格的同时,点击提交对应的数据,这里要注意,我们针对同一个数据,是不需要创建多条的,仅仅需要修改加购的商品数量即可,所以这里我们还需要先查在加,防止同一条数据分开生成多条。可以看到数据已经查询出来了,到这里我们的功能就实现了, 下一节我们将要针对购物车进行详细的教学。接下来我们实现加购列表,首先进行页面的创建,在生命周期函数里进行数据的查询。还是比较简单的,我们执行一下看看效果。
2025-05-13 22:39:07
1159
原创 《仿盒马》app开发技术分享-- 商品规格弹窗(端云一体)
上一节我们实现了商品详情页面,并且成功在页面上展示了商品的图片、商品规格、活动详情等信息,要知道同一种商品大多数都是有多种型号跟规格的,所以这一节我们来实现商品的规格弹窗。规格弹窗,我们的数据源需要根据当前商品的specid当条件去规格表里查询对应的数据,需要我们针对id做一个查询。点击不同的选项可以查看不同规格的商品,同时可以自己添加和减少商品数量,到这里我们的弹窗就实现了。弹窗的唤起逻辑是我们点击规格列表时,以及点击加入购物车时,这时候我们再去选择对应的规格。“name”: “红颜草莓”,
2025-05-13 14:00:56
574
原创 《仿盒马》app开发技术分享-- 商品详情页(端云一体)
商品详情页面的结构需要我们去用比较多的布局去处理,首先因为商品详情页面对的数据足够多,需要他能够实现滚动查看信息,然后我们需要在底部固定加入购物车和立即购买按钮,并且我们加购之后,我们也要在页面中即使响应购物车中的商品数。商品详情页面我们需要展示的是商品的各个属性参数、商品的图片、商品规格、活动详情等。我们先进行数据的填充,因为上一节我们已经接收到数据,所以我们直接吧数据打印到text上,对着数据进行填充,同时还能帮我们暂时丰富一下页面内容,查看滑动的效果,页面完善之后我们再去删掉即可。
2025-05-12 14:51:45
371
原创 《仿盒马》app开发技术分享-- 自定义标题栏&商品详情初探(端云一体)
当我们进入二级三级页面的时候,就需要向用户介绍我们当前的页面信息,标题栏很好的实现了这个效果,并且进入的页面级别过多,也要给用户一个可点击的退出按钮。上一节我们实现了顶部toolbar的地址选择,会员码展示,首页的静态页面就先告一段落,这节我们来实现商品列表item的点击传值、自定义标题栏。页面之前的数据传递,是app中比较常见也是比较重要的知识点,这里我们通过点击列表的条目进行数据的传递,然后在详情页进行数据的接收。首先我们需要创建一个商品详情页的页面,然后把我们的自定义标题栏引入进去。
2025-05-11 22:39:46
569
原创 《仿盒马》app开发技术分享-- 首页地址选择&会员码(端云一体)
让我们的首页功能更加的丰富,截至目前首页板块可以说是完成了百分之五十了,跟展示有关的基本都已完成,接下来就是我们对业务逻辑的完善,当然了我们的首页内容还缺少很多,这一节我们来把顶部toolbar的地址选择,会员码展示实现一下。地址选择我们需要实现的是省市区街道的选择,当我们点击街道信息后,根据区域的不同,我们可能会调整首页相应的活动板块修改,以及不同模块的展示,比如我们的新人领券活动,我们仅在A区域开展活动,当我们切换的B区域就会关闭相应的功能展示。可以看到直接就拉起了地区选择的页面。
2025-05-10 17:02:28
549
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人