138_尚硅谷_以太坊项目二_去中心化eBay_竞拍结束后续业务（九）释放资金页面JS完善

好，那这节课我们就还是继续上节课的内容，我们就把这一块代码准备全部搞定了，呃，那大家就现在就会想到了，我们是不是就只剩下最后一部分内容是什么呢？就是我们对页面那个按键也有了，HHTML都定义好了，我们合约也都有了，能调用的方法都有了，现在是不是就差JS里边去处理它那个点击事件了。对吧，这个点击事件就是我们页面上画出来的那个按钮，点一下我们就应该朝着后台以太坊的这个节点上去发起一个交易请求，然后调用我们的那个，你是release给这个seller还是说refund给VR，对吧？所以这就是我们想要实现的这两个函数，那大家会发现这两个其实非常简单啊，其实大家如果前面我们都已经做了那么多的，这个就是处理和调用，大家会发现这个对于我们来讲就是很小儿科的一件事情了，所以呃，我们在这里就快速的一起过一遍就完了，首先大家还是得确确定一下，就是我们这个东西要写到哪去。

啊，对，还是写在这个app.start函数里面，对不对，所有的事件处理，所有的handle全部写到这个里面来，啊，这之前我们的这个change呀，还有这个submit呀，所有都在这里写，所以现在也不例外，我们跟在后边写一个，这里少了一个符号。跟在后边写一个j query方法对吧，Dollar我们这里要要找哪个了，我们定义了一个叫做release fund的，Release fund的一个。一个link形式的button，对吧？链接形式的一个按键，那这里边我们可以定义它的一个是不是可以定义一个click事件，它就不是submit了，对吧？那link或者是button这个都是有click事件的，所以我们在这里把它定义出来，然后我们去定义一个回调，这个回调里边啊，我们是不是就可以去处理，就是发起我们的交易了，对吧？所以e commerce store点。

Deploy的点常规写法啊，好回调里面爱点我们要去处理什么事情呢？是不是要去release，诶为什么写了一个这个。我们要去处理的是release放对吧，所以我们是不是要调用11COVER store里边我们定义好了这个方法啊，Release amount to sell好，所以我们在这里直接调i.release amount to sell。这里大家就要注意了，我们这里是不是还缺一个参数是product ID啊？我们这里是需要传product ID的，对吧，那我们这里怎么样去拿这个product ID呢？

呃，我们看一下之前，之前我们都是直接从这个product ID这个对应的到节点里面去拿它的值的，对吧，这是因为我们在之前定义的HTML里边，是不是每一个这一个sum的这个组件里边，我们都定义了一个hidden的input呀。所以我们直接从这里面拿，应该就拿得到对吧？那现在我们如果要是本身在下边没有定义这样一个东西的话，那大家可能想到我们是不是还是用别的方法去拿一下可能比较稳妥啊，如果要拿的话，那可能就得找到别的组件里边的这个product ID，这个input对吧？那我们现在上面的组件可能又不显示，那你是不是就拿不到了啊？所以两种方法，要不我们在这里同样定义一个这样的东西。要不我们就呃这里我们还是用另外一种方式来给大家实现啊，就是我们能用多种方式就尽量给大家用多种方式实现，大家会想到我们是不是也可以用一开始我们这个比较原始的方法啊，就是product ID。

我们让它等于大家还记得我们最初是怎么拿的吗？是不是用。呃，这个URL的search。URL啊URL，然后直接从location location点里边对获取到我们当前页面里边的那个测试参数，对吧？ID直接拿出来啊，所以这个其实是我们一开始再去渲染页面的时候，其实就用的这个招，对不对，所以其实我们后面一直都可以用这个招啊，只不过我们为了方便，前面是在在里边都定义了一个product ID对吧？啊，在里边就直接拿了，那我们在这里还是可以用这个之前的这一招，所以我们定义这个window.location。

点对吧。好，诶。然后我们点get ID是不是就可以拿出来了，好，拿到这个product ID之后，我们直接就传进来了，对吧？好，然后点赞，然后在这个呃，Release amount to sell这一个操作里边，大家会想到我们其实呃，就是不会有太多别的一些，就是返回对吧，我们主要就是处理一下，就是返回来之后我们去把它做一个。做一个信息的处理就可以了，那但是大家注意这里边你既然没有返回的数据，那我们这个主要是发起一笔交易去做操作，对吧？那发起交易的时候大家还记得吗？呃，不要忘记啊，我们每一次发起交易的时候，是不是不能忘记，我们要提交这样一个交易对象啊。

呃，要不然在ma mask里边经常就会说invalid的ther对吧？所以我们这里还是不要忘记把交易对象传进去，还是from web3.1th.ACCOUNTS0啊，我们默认用这个ma mask的时候，那每一次的web3.17.accounts0都是我们当前ma mask。就是当前使用的那个账号对吧，那个账户好，那么我们如果已经release之后，大家会想到我们这里。呃，如果release的话。那其实是要更新我们当前的那个，呃，就是大家还记得我们HTMML里边显示的会有一个release fund和这个前面啊release count和一个fund count，对吧？我们肯定是要更新这两个数据，那大家会想到我这里边如果要去更新的话，那是不是还得再去查一遍，对吧？再去调用I点那个get，呃，那个APP as pro infer，然后把那个查出来再填一下，这好像没必要，所以我们这里面大家如果要是代码上想简单的话，我们有一个很简单的方法，就是直接location点。

Reload，大家还记得我们之前做过这用过这一招对吧，这一招其实就是让他直接页面刷新就完了，好，那接下来呃，我们看一下这边是不是有一些信息提醒啊。哦，大家会发现我们是在点击的时候，上面给这个messger给了一个信息提醒，对吧，那这里大家注意看一下，我们把这个抄过来，大家会发现这里边的写法是放在一起写了就是。Message，然后点HTML。我们就把它后面的内容显示显示出来，就是你的这个交易已经提交，然后可能你需要稍微等一下，因为我们是一点击就发起交易之后，然后就显示这个信息，对吧？然后后面是准备就reload了，对不对？所以我们是要先显示出来之后reload的话，信息就刷新了，那大家注意这里边是本来这个messagesger是不是本来是应该是黑的的一个状态，那我们把它添加进来之后，后边可以直接跟点show，就像我们链式调用一样，对吧？G query里边的写法，所以我们可以用这一句直接把它显示出来。

好，那另外就没有reload之后就没有什么操作了，对吧？没有什么别的这个显示了，那大家如果想打印这个cons dilo做这个调试使用的话，大家也可以把这个cons log都打出来，我这里就不打了啊，那后面可以看到我们还是就做一个这个异常处理，就是跟大家说的养成好习惯，在真正的项目里边点赞，后面都跟上点catch，对吧？这是promise的标准处理，一个返回resolve，一个返回reject，我们两个都要拿到，那么如果呃，就是这样的话，我们就直接log把它打印出来就好了，对吧。

好，那么这个就是我们的release fund的这个按钮的实现，它的click方法的实现，那与之对应的大家会想到我们还有另外一个按钮叫做refund，还是抄一下吧，这个容易写错啊。Refund funds。放放点，同样立刻。我们在这里去定义它的一个回调。好，那大家就会想到了，我们，呃，同样还是应该拿到，诶大家注意啊，就是我们这里边刚才这一句啊，拿这一个ID，其实我们不应该在他这个回调里边再去拿，对不对，回调里边其实这一个可能整个上下文环境就已经变了，对吧，所以我们其实是应该。

应该在上面就拿到，对不对。这个一进来就应该能拿到了，对吧，所以这个啊，我们完全是可以在上面就处理好的，所以接下来我们这里同样也是模仿上面先拿到这一个product ID对吧，然后我们就1COM store.deployed。点赞。这个常规操作，我们就大家。一遍一遍的敲，应该也都很熟了，对吧，那同样这里我们肯定还是先显示一个信息，我还是直接抄过来吧。啊，这里信息都差不多的是吧，看起来完全一样，所以确实大家会想到这两个处理确实就是差不多的对吧？呃，甚至大家都可以直接把那个代码全copy过来，改一改这个名字就可以了，大家会想到这里要调用的方法就不一样了，对吧，我们那个叫做refund refund什么来着。

Refund amount To Buyer对，所以这里把这个复制过来，调用这个方法点赞。呃，那同样我们这里就可以注意啊，还是要传进我们的product ID对不对，同样后面给一个我们的交易对象from web3.1th.ACCOUNT0好，那后边点赞，我们拿到这个结果之后要做的其实也就是刷新一下对不对，对吧，就是完全一样啊location.reload好，那么接下来还是同样的操作，我们点开加进来啊。Error处理一下，点log，哎。

好，那么大家看到我们现在其实就已经把这个动作都已经处理完了，对吧，所以呃，在这个里面大家可以看到，呃，另外就是说大家可以看到我们那个课件里面下面还多了一句。Alert一下啊，所以这其实是就是考虑到什么呢？就是如果我们做这种回款的这种操作，就退回的这种操作的话，可能这是一个比较异常的一个一个操作，对吧，所以说这个可能是要专门用一个很重的提醒提示一下用户的啊，大家也可以把这句加上，也可以不加，对吧？啊，我们这里可以就是照着这个，大家注意这个在哪里写的呢。是在我们这个refund fund这个click事件里面去写的，对吧，只不过是在我们整个前面的这些东西的就是。呃，大家注意，我们不是要等着这个全部结束之后才去有了，其实这个就应该是大家会发现前面这些promise都是异步的，对不对，我们这里是不是就直接把它alert出来了呀，所以在下边直接alert对吧。

Refund。呃，Refund的放子对吧，好。直接出来，所以大家现在就可以看到，我们就已经完成了我们整个的项目啊，现在其实大家就会发现这个功能就已经很完善了，从一开始我们渲染页面对吧？我们有三个页面，一开始有一个主页面，呃，就是index.html，然后呢，我们可以上架产品，我们又有一个，呃，Item list HTML，后边我们又定义了一个页面叫product details详产品详情页，对吧？产品详情页里边我们就可以做很多很多的事情，我们根据不同的时间可以判断是否可以去比去竞拍，是否可以去reviewing，去揭示报价，然后报价完，揭示报价完了一段时间之后，还可以把它直接终止掉，终止掉之后我们就可以显示出来相对应的这个竞拍。

赢得竞拍人的信息对吧，还有他的竞拍价格，然后还可以显示出来当前的托管合约，托管合约显示出来之后，那对应的就还可以有两个操作，就是释放资金给卖家，或者是回款给买家，对吧？所有的操作在我们网页上全部实现了。