鸿蒙项目云捐助第三十二讲云捐助项目云前台立即捐款功能开发

前面一讲实现商品列表的展示，当有了商品列表后，就需要进行购买商品下订单的服务，这里就完成捐款商品详情中的“立即捐款”功能的开发。

一、云前台立即捐款功能开发

这里需要完成“立即捐款”功能，就必须存在一个“立即捐款”的数据库，建立捐款的数据库，这里需要的字段是<用户名>,<捐款数额>，<捐物>,<荣耀数>，<产品id>。这里进入华为应用市场，在云数据库中新增对象类型，对象类型中的字段如下图所示。

输入“立即捐款”的数据类型后，点击“下一步”，在接下来的页面中设置索引值，再点击“下一步”进入到权限设置页面，这里的权限选择所有的权限。

接下来再开发“立即捐款”的功能，在IsLandComponent组件中找到“立即捐款”的按钮，然后实现“立即捐款”的功能。这里为立即捐款添加onClick方法，如下图所示。

在onClick事件中当捐款物品或者捐款的钱财不为空时，则进行捐款数据库中数据的添加。

在添加之前需要把云数据库导出,这里导出为js和json格式,js格式存放在model文件夹中,json格式存放在rawfile文件夹中。如下图所示。

在“立即捐款”的按钮中添加云数据库操作的逻辑,需要导入云数据库操作的模块cloud以及两个订单文件的引入,如下图所示。

由于在订单成功后需要加入用户名的内容,同于用户名在鸿蒙云捐助的任何页面都有效。因此在登录页面成功后可以把用户名记录在AppStorage的app存储作用域中,代码如下图所示。

这里在成功查询到用户输入的用户名,密码及身份后,按正常的道理是需要进行页面跳转的,这里在跳转之前还需要把用户名放在AppStorage的app存储作用域中,这里使用的是setOrCreate方法。在订单表中,除了需要记录的用户名,还有捐赠商品的id,这里捐赠商品的id在组件IsLandComponent组件的商品传入参数中,代码如下图所示。

这里传入的商品路由参数就会获取到商品的id。提取出商品的 id,就可以进行订单表商品的数据添加。如下图所示。

代码中获取AppStorage中的用户名使用AppStorage的get方法来获取。注意在AppStorage.get方法获取用户名时，如果当前app的AppStorage中不存在该用户名，会返回为undefined。因此在获取用户名时，有两个选择，要么是string字符串，要么是undefined未定义，在buy_good的订单类中，使用setUsername方法设置用户名，使用setCate_course_id设置用户购买的商品id，这里的商品id是category_id商品分类id及course_id捐赠商品id通过“_”连接的。数据准备好，就可以调用database.collection().upsert()方法进行数据插入的操作。

现在虽然有一定的代码逻辑，但是执行插入操作是不成功的，因为这里还有订单表中的捐物，捐钱和荣耀值。如下图所示。

比较幸运的是，这里的荣耀值，捐款，捐物的值在当前组件页面中都存在，如下图所示。

这里对于捐款次数需要查询数据库中的订单表根据用户去统计，荣耀值是用户捐款最大的值，这里都可以通过查询数据库中当前用户的数据然后按荣耀值排序进行获取。代码如下图所示。

代码通过cloud.database定义数据库BuyInfo,也就是用户购买表，通过AppStorage中存储的用户名对用户购买表进行查询，database.collect()获取BuyInfo表的集合，其后根据query方法进行查询，查询时通过条件equalsTo判断云数据库中的用户是否属于该用户，把equalsTo的结果通过orderByDesc方法对myponse荣耀值进行降序排序，得到的结果长度使用result.length获取就是这个用户的捐款次数，其荣耀值是获取result降序结果中第一个索引数据的基础上再加上1,就是本次捐款的荣耀值。下面就可以完成捐款订单表荣耀值，捐款，捐物的值在数据表中的插入，代码如下图所示。

代码中通过set方法补充了前面代码中没有上传的数据值，捐钱通过setMoney方法实现，捐物通过setObject方法实现，设置荣耀值通过setMyponse方法实现。这样就可以完成本次捐款订单表的数据插入其中。

这里还需要注意，除了捐款订单表，还需要把当前捐款项目的爱心总数写入到商品表的逻辑中，代码如下图所示。

这里通过set方法把所有的商品属性写入到捐款商品的数据库中，由于之前在讲述商品的批量添加时，涉及到捐赠商品的云数据库数据添加，其添加逻辑在之前已讲述，这里不再赘述。

代码最后把数据库的操作放在money和object项不能为空，也就是捐款也好，捐钱也好，不能出现空值。要么有捐款，要么有捐钱，把判断捐钱是否为空或者捐物是否为空进行前置，代码如下图所示。

最后在if的条件后加入else, 一旦用户捐物和捐款都为空，则需要弹出提示框，提示用户进行捐款捐物的操作。代码如下所示。

至此，完成了用户捐赠下单的逻辑。后续还会带来鸿蒙云捐助华为云技术的精彩展示。欢迎关注。