134_尚硅谷_以太坊项目二_去中心化eBay_竞拍结束后续业务（五）资金托管页面实现

已经有了合约，那接下来是不是我们应该在网页上去做实现了啊，所以大家会看到我们index.js这又有事情做了，呃，大家能回忆的起来，我们首先在这个写合约之前其实就做了一件事情，我们把那个product HTML里面加了一个表单，对不对？加了一个phone。那它如果显示在我们的页面上，是不是就应该是一个这个表单，其实没什么输入内容，就是一个按，就是一个button，对不对，就只有这么一个按钮。那接下来我们在JS里面是不是就要处理这个submit事件啊，啊，所以大家看到我们这里面就是一个常规的submit事件的处理，好，我们接下来就直接把代码吧，这个对于大家来讲不会很难啊。这段代码我们差到哪里去？Submit，那大家如果还记得的话，我们之前所有的submit事件是不是全放在这个app.start里边啊，全在start这个方法里面对不对？所以我们现在依然一样，就是在他一开始初始渲染页面的时候，我们就要把他的这些submit事件都捆绑，就是直接都绑定在我们这个对象里边，对吧，直接都注册好这些事件的监听好。

所以它的handler都是在这里边去实现的，那我们这里还是query的方法，对吧，Dollar里边它的ID叫什么，我们在。回过头来看一眼final final option，这个两边一定要一样，对吧？好，那么这个跟上面都是都是一样的，大家会想到我们要处理它的三米的事件，对吧？所以这里会有一个event，定义一个箭头函数，然后接下来我们要做的是不是跟上面也是非常类似啊，我们先把这个隐藏掉对不对？Message先隐藏掉，最后我们肯定是要显示message的点hide。

好，隐藏之后呢，那么我们，呃，下面一步跟上面一样，你submit的时候先要拿到对应的这些输入的数据，对不对，我们现在没有输入的数据，但是大家会发现我们等一下调用这个合约去做finalize的时候，是不是还需要有一个参数是product ID啊。大家回头看一下啊，不要我们早上实现了之后，这这里面对吧，大家看一眼finalize option是不是得传入product ID，得知道是哪一个商品，对吧？所以我们现在还是一样，在这里要let product ID，我们让它等于Dollar拿出来，上面是product id.value对吧？所以我们还是要把它先拿出来，跟上面的处理方式完全一样。

那接下来的处理方式大家会想到也是一样的，对吧？E commerce store.deployed。点赞先拿到合约的实例，然后我们就可以调用合约的方法啊，这个时候我们要调用的是final option对吧，Final。Option，好，那么这里我们要传什么参数呢？前面其实我们已经知道了要传product ID对吧，大家大家这里注意一下，我们从前面从这一个呃，这个do节点这里拿到它的值，默认应该是一个字符串类型，所以说我们还要把它pass一下，对吧？大家记得我们上面都是这么写的，对不对？Pass，然后product ID。好，那接下来我们可能还是要跟上面一样去传递一个我们的交易对象，对不对？至少要把from要传进去，好，那么我们这里同样啊，鼠标移过来from w3点Eth.ACCOUNT0，大家注意，我们这里为什么一直都在写account呢？

呃，康林呢？那大家有有没有同学有这个疑问，就是我前面这个B的时候也是POS0，然后我揭示报价的时候也是POS0，然后我现在finalize finalize不是说谁去点finalize谁就是仲裁人吗？对吧，那我前面这进价和这个揭示报价的时候，这不应该是一个cell吗。这不应该是一个一个，呃，不不是塞，应该是一个买家对吧，应该是一个buyer吧。那我现在怎么这里还是康S0呢？大家有疑问吗？

为什么会这么做？大家是不是觉得这里应该写一个COUNT1或者是count几？嗯，大家觉得是是怎么样的。嗯。啊，大家注意这里我们主要因为我们这里写的是一个web页面，Web页面是在我们浏览器里面去跑的，对吧？那既然你在浏览器去跑，我们首先判定过，先要看浏览器里面有没有内嵌的外三对象，如果有的话，用的就是我们这里的Mac mask这里定义好的provider对不对，那大家注意ma mask这里我们用到它的，如果我们用到它的WEB3对象的时候，它的WEB3点Eth.ACCOUNT0是哪个呢？大家如果之前试验过的话，应该会发现就是我们当前。切换到的ma mask里面的账户，我这里边现在是这里边是ma mask的ACCOUNT2，那如果我现在是这个的话，我页面上指定的web3.1TH点和COUNT0，其实就是这里的这个COUNT2和COUNT2，对吧？如果我这里再切换一下，切换到COUNT1，那那边指定的web3.1t.COUNT0就变成了这个COUNT1，那这个能理解吗？指导对吧？所以大家会发现我们为什么在页面里面写死就是要COUNTS0，因为我们默认。

用户在这里调用的时候，就是用自己这个ma mask这里面默认的这个账户对不对，所以我们弹出这个交易框的时候，用的就是当前账户啊，大家等一下试验的时候再去校验一下，看看是不是这个样子对吧？所以我们等一下在做这个不同操作的时候，大家会发现是不是我们应该切切换一下账户啊。对吧，切换账户之后，我们做B和这个最后终结finalize的时候，就相当于调用的这个账户就不一样了。

而而对于我们的JS界面而来说，这在对于我们的这个外部页面来说，里边写入的这个JS，那它统一都叫account，他并不知道我们当前的mama的账户是是谁，对吧，他只管当前你默认的账户，而且大家知道我们这个页面放到服务器上去之后，所有人从浏览器上访问到的页面都是一样的，对不对，我们这里边是不是写的都是COS0啊？但是每个人执行在自己浏浏浏览器里面的时候，拿到的COM0一定就是他自己的ma mask账户对吧？所以这样就有了区别了，所以大家不需要担心说，哎，为什么我上面逼ing的时候是康S0下面是同一个账户呢？那不应该是同一个账户对吧？所以是这样的，好，那么我们这里把这个from写进来之后，大家也可以加guess，那大家如果懒得写的话，我们就不加也可以，对吧？那已经finalize之后，我们直接就可以点赞。

就可以处理这个回调了，对吧，那这个就是鼠标又漂亮，大家可以看到我们直接把这个result拿到，那其实就是又要做相对应的这些操作了，对不对，就把这个messages去处理一下，对吧？哦，Dollar message.html。然后我直接copy吧，这个大家就是想去，诶不是啊，它这里面大家看我们课件里面其实是还处理了两种情况，处理了这一个，呃，点赞，然后后边还跟了点catch啊，这是之前也跟大家介绍过的，对吧，因为前面的这一个trouble里面包装的所有的返回都是一个promise promise在处理它的resolve函数和reject函数的时候，那点赞就是调用resolve函数对不对。

点catch就是rere reject函数对吧，所以大家会发现我们一般就是用面试调用点赞这里处理结果，点catch这里处理error啊，所以这里我们也可以根据这个一起再实现一下啊，这个都不难，直接把它复制过来，大家可以看到这里面我们要写的内容就是这个。呃，竞拍已经结束了，对吧？然后这个赢得竞拍的人winner已经已经出现，然后我们大家还记得我们要把它show出来对吧？message.show好，那么这里面我们的这个内容就已经完成了，呃，这里面大家会发现我们的课件里面还多了一句。多了一句什么呢？location.reload对吧？哎，啊，为什么呢？因为大家知道我们这里边下面是不是还应该要把它默认的这个提交要要阻止住啊，所以说我们这里边如果还想刷新我们页面去拿到这个新的状态信息的话，那我们直接reload一下就可以了，对吧？所以大家注意一下这里面的这个操作，Location是我们window里面的这个全局对象对吧？之前我们用到的window点，呃，location.search对不对，就拿到我们上面的对应的那个参数筛选参数，那这里面我们同样用到了location，然后它的reload方法就是直接把当前页面刷新一下。

好，那么我们这里加上一句那个conslo我就不写了啊，所以location.reload重新加载页面，好，那么我们这里边处理了点赞，那接下来还可以再处理一下点开，对吧，我们学学一下这样的一个写法，大家正正规的在做项目的时候点开一定都是要处理的，对吧，就是这肯定不能说我们预计你就一定没问题，这肯定不要出现这两状况，既然是promise，大家点赞和点看都加进来，所以这里也是我们前面可能就是没有给大家过多的强调这个，这里再给大家强调一下，前面我们都没写点排的对吧？啊，那这里大家还是处理一下，同样我们。

如果说有了这样的一个error的话，我们其实也是应该把message写进去，对不对，HTML。抄一下吧，哇，这个这个L好长啊。大家看一下这里面这个信息是什么好，这里面这个信息他说的是这个竞拍他不能被final。被谁finalize呢？不能被买家和卖家finalize对吧？啊，只有是第三方的一个仲仲裁人才能够finalize啊，那这个提示是什么意思，它就是默认，如果我们这个finalize如果失败的话，因为在我们这个finalize这个呃，Option的这个这个要求里边，大家会发现除了这个时间和这个status的这个状态，这个会出现回滚，另外最重要的其实就应该是。

买家卖家不能等于买家卖家对吧，所以如果说我们时时时间这个我们页面上就可以给他控制到，那如果说这个时候还出现了错误的话，最大的可能其实就是这个对吧？所以我们在这里JS直接提示这一句也是可以的，当然大家想提示别的，也可以把这个error直接抛出来提示一下，对吧？啊其实这个也是可以的。因为我们这里边是messger，就是直接在这个页面上去展示的那个信息，所以说大家要注意一下这个，那我们这里应该在下边去加，对吧。接下来还是把它瘦出来，Message点瘦好，这样我们就实现了在JS里边对这个submit的一个处理。

啊，大家看一下好，这个我们又忘了一件事情，是不是看到上面应该就想起来了，对吧？对这个这个东西很容易忘记啊，做完了这些东西一定要记得把，因为我们自己对它做了单独的处理，我们不希望它提交页面，然后刷新，我们的刷新是在这里手动刷新的，对吧？所以这里边我们把它默认的表单提交的这个行为阻止住，好，那这样我们的这一部分JS就已经写完了，大家会想到我们既然已经有了这样的一个处理的话。那么大家会想到我点击这个finalize之后。那是不是我应该在我的这个页面上也会有对应的显示啊，或者说我们还记得之前我们的那个beding和revealing，他们是不是还是一开始咱们要把它hide起来，然后之后是对应不同的时间段显示不同的东西，对不对？那我们这里只定义了它的submit的方法，我们这个final option本身这个表单是不是也应该有一个它显示的时间时间段啊？

所以大家会想到我们那个在哪里定义的，还记得吗？往下走了对吧，大家看一看我们这个，呃，就是前边我们在做的时候，是不是都在这个render product details里面去做的，所以现在我们还是跳转到这里来来去处理一下，那大家还记得我们在前面的时候，拿到了产品信息，就会把详情图片名称这些东西通通的全部渲染出来，那渲染完了之后呢。呃，大家肯定还记得我们这里是把这个be和reviewing全给隐藏起来了，对不对？那现在是不是我们还应该多一个东西啊，我们是不是应该同样这个finalize这个也应该隐藏起来啊，所以我们这里finalize应该叫final option，对吧？我们把这个同样也是先隐藏起来。

那隐藏起来之后，接下来肯定下面我们就还得把它放开，对不对，那什么时候放开呢。我们还是看一下之前的这个流程啊，我们定义了current time，然后我们要求这个current time小于P6 P6是我们的竞拍的结束时间，对吧。啊，那如果要是竞拍结束时间之前的话，我们显示BD，然后竞拍结束。结束时间之后。而且我们在这个竞拍结束之后的60秒之内，这里是写死的，对吧，我们显示的是这个受，那大家其实简单的就能想到，我们是不是还应该有一个else啊。

那就是竞拍结束已经又过了60秒之后，那我们简单想，是不是就应该把这个说出来了。Final对吧，Final option点，所以我们就把这个加进来。嗯。好，那么呃，接下来那大家可能会想到你这个600的话可能会有点有点太少了，对吧？呃，60的话可能有点太少了，那我们给个600好了，大家看一下这个我们课件里面是怎么做的啊，课件里边下面让我们更新这个render product details函数对不对，那我们发现前面的话，我们还是拿这个基本信息，然后该渲染的渲染，这里是display and our，然后下边到这里啊，大家会发现这里还多了一个。多了一个叫astro info的一个东西，那也就是说我们还应该在某种情况下去显示。

现在这一个托管账户的信息对不对，那这个时候大家单想写可以写上，因为现在我们还没有把它真正实现出来，所以说大家不写也可以，对吧，大家看一下这里边还有什么考量啊，大家会想到我们现在已经竞拍结束之后，是不是就假如说已经竞拍结束的话，那我们是不是应该显示一点别的东西啊。我们应该显示这个产品到底卖出去没有，对不对，所以大家看这里边其实是先去判断了P8 P8是什么。我们回过头来看一下这个P8，这个是我们在get product返回的，对吧。我们这里边返回的这是六对不对，七是start price，八是status对不对，Status是什么呢？就是它是open，还是卖出去了，还是没卖出去对不对，就这三种。

类型，所以我们在这里也可以加一个这样的一个判断if啊，这个P8，那大家注意这个P8返回来的时候，它的数据类型有可能是一个string，对吧，所以我们把它做一个pass。如果它等于一的话，就代表什么。一是so的是对不对，大家还记得吗？我们三个枚举类型对吧，这是已经卖出去了对吧？对，所以如果要是已经卖出去的话，那我们应该显示一个信息，对不对啊，大家会看到我们在这一个。

呃，这个index htm应该在product里边对吧？Product HTML里边，我们其实在上边应该是有一个地方啊，这里面其实还没有啊，我们可以想象一下，就是如果我们要想显示的话，是不是应该在这个HTML里边要有对应的地方显示这个当前的状态啊。对吧，所以现在这里边还没有，所以说我们就先把它放着吧，我们写进来吧，到时候大家记得这一点啊，就是Dollar，我们定义一个，看一下定义成什么了，叫做就叫产品状态好，我们把这个copy过来，所以大家会会想到我们应该在HTML里边需要把这个东西定义出来的，对吧？好，那么它HTM，呃，我们就直接写一个，这个其实就是说明他已经卖出去了，对不对，我们就说product sold好，那么如果要是else if。

那大家会想到，如果它要是等于二的话，是不是就是已经结束而且没卖出去啊，还是帕八对吧。如果它等于二的话，那么我们就Dollar，我们把上面这个复制一下好了。那这个就不是product so，那就是not sold了，对吧？啊，所以我们显示一下它的基本状态，那然后下面大家想到是不是还应该L啊。这个LC是什么呢？上面的是说我们的P8等于一，P8等于二，那P8其实只有三种状态，还有一种就是等于零，就是open状态，对不对？只有在open状态下，我们是不是才会去考虑它到底是B0还是REVIEW0，还是可以去finalize对不对？一旦finalize之后是不是就要不是。

P8等于一，要不是四的，要不是二四的对不对，所以大家看我们的这个逻辑是这样啊，就是把它前面先判断已经结束的状态分成两种状态，要不是卖出去了，要不没卖出去，如果在他没有结束的状态下，假如前两种都不是，那还没有卖出去，没有卖出去，也就是还在open的状态下，这种状态下我们就要判断它的这个竞拍结束时间是不是符合我们的要求，如果说他还在竞拍结束时间以内，那么我们显示B如果说已经超过了结束时间。而且还在超过600秒之内的话，也就十分钟之内的话，我们让他可以去揭示报价ing，如果说已经超出了600秒之外，那我们就直接把finalize对吧，就可以finalize啊，这就是我们这个过程，这就已经全部定义完了。