137_尚硅谷_以太坊项目二_去中心化eBay_竞拍结束后续业务（八）信息页面展示

合约这一部分已经完成，那么接下来大家就会想到合约是作为我们后台的，对吧？那接下来我们是不是就要去做前台了呀，前台的工作对吧？好，那么大家会想到我们前台的话，我们还是先去改这个HTML吧，HTML里边大家会想到我们首先是不是就之前我们有一个这个product status没写啊，我们现在先记得把它加上去对吧？之前我们忘记加了，然后大家会想到我们是不是还应该有一个托管的信息啊。呃，大家会想到如果我已经结束之后，他已经卖出去了，那我应该把托管合约的那个信息都显示出来，然后告诉大家你现在可以去点了，对吧？你可以去要求把这个钱释放给卖家，或者是把它退回给买家。所以大家会看到这里边我们怎么定义呢？定义了一个SSS pro infer叫做这样的一个，也是一个div这样一个模块，对吧？它里边的元素是什么啊？就是基本信息BY尔eler abi放进去对吧？那接下来大家会看到还有一个release count和refund count，这就是要表明当前多少个人已经同意要释放了，对吧？那两种情况都显示出来，然后接下来大家会发现又是链接的形式，定义了两个按钮，对不对？它的class其实是button，对吧？那这两个按钮是什么呢？一个叫做release fund，一个叫做fund fund是不是就是我们可以去点，然后要求把它。

释放给卖家或者释放给买家对吧，所以我这里就不一下一下去敲了，我们把这个复制到HTML里面去。Product里边对吧，大家想一下我们复制到哪里，这个应该。大家觉得这个应该复制在哪里？我们看一下之前的结构，是不是这里是两个表单对不对，这里是上面写着start price，所以就是在我们这里。

这个位置对不对，那大家看到是不是就是下面这里是空的啊，那我们是不是就是把它当时我们就点了finalize结束之后就发现下面空了，觉得有点不适应，是不是我们现在把它填到这里就可以了，好所以我们还是对应的，那我们就还是放在这个大标题下面对吧，这里一个表单，这里一个表单，这里又一个表单final，那我们把它复制在这里，好这个。有点难看啊，看一下这个是不是可以格式化一下哈。好，那么大家现在可以看到，我们把这个放过来之后，就有了上次我们缺失的那个product status，然后呢，我们还定义了一个as pro infer，就是我们的托管信息要把它填在里面，还定义了两个按按钮，对吧？这两个按钮到时候我们是不是在JS里边还得定义它的那个对应的事件了啊，对，所以大家这里要稍微注意一下，好，那接下来HTML有了，我们接下来是不是就应该要去看JS了啊？最后就是GS是我们真正网页交互的这部分内容，对吧？好，首先我们先想一下，我们既然添加了这一个，这里是添加了一个as pro infer这么一个东西，那我们在JS里边是不是就应该查询对应的信息，先把它填进去啊？

另外这个按钮的这个行为，等一下我们再定义对吧，这是分两部分的，添加的这部分信息，大家会想一下，我们JS里边应该添加到哪呢？在哪里去处理呢。什么时候应该显示这个asce infer？是不是还是我们这里边看到的，就在点了那个finalize之后，然后如果我们查出来他的信息，他的状态已经变成了卖掉的状态，Sold的状态，对吧，我们查出来那个P8。

Product status变成了sold，是不是我们就应该显示他的托管信息啊，啊是这样的对吧？因为只有在so的成功的已经状态改成sold的时候，才会去创建那个托管合约，对吧？所以大家能够想到应该在这里去处理，所以大家会想到那我们是不是就应该在这里去点这里去加一段逻辑啊，对，所以那我们就想到干脆我们就不要这个product sold了，对吧。这个，呃，写这么多乱七八糟的东西，还麻烦我们直接把这个对应的as infer填进去就好了，那这个product status，我们就在它没卖掉的时候，没信息的时候显显示一句话就完了，对不对？有信息的候我们直接显示as pro infer，大家会想到我们要显示ass时候，Infer的时候是不是先要把它查出来啊？那这个查询的时候还是调用我们的这个合约对象对不对？E com store是不是先拿到这个deploy的点赞对吧？

好，我们还是拿到这个合约实力，大家会想到我们应该去调它的哪一个信息呢？我们现在首先大家看一下这里边我们想要去拿到的信息有哪些啊，是不是就是bier seller abiter，还有对应的这个release account，还有fund account这些信息，对吧？好，那么我们这里，呃，大家注意一下啊，我们可能首先。我们在JS里边刚刚尽管删掉了这个product status，但是其实我们还是应该有一些关注的，这个product status应该写进去的，对吧，比如说之前大家应该想到我们在这个。

合约。终结的时候，我们应该能拿到这个highest bit info，对吧？这个是不是我们还从来没有显示过啊？呃，大家会想到我们之前显示的东西是不是只有就是这几个，这几个按钮对吧，提交的表单还有这几个按钮，我们从来没有显示过当前竞拍成功的那个人到底是谁。所以我们是不是先得把竞竞拍成功的人显示出来，对吧，然后当前他竞拍成功的那个价格显示出来，最后我们才是显示他托管合约的信息啊，这是我们一个正常的想法，所以我们这里是不是先应该去拿到highest BI啊highest。Be info对吧？呃，然后我们这里要传的其实就是一个。

看一眼high啊，就是一个product ID对吧，所以我们在这里能拿到product ID嘛，就传进来的，所以我们直接调就可以了，对不对，Product ID好，拿到之后点赞。然后这里我们拿到的对应的这个就是一个iner对不对，好，那么我们就在回调里边继续去做处理，那大家能想到在这个处理里边，我们是不是就要判断这个infer返回的那那些东西啊，假如说。首先我们看一下那个highest bit iner返回什么东西啊，返回三样东西，一个是这个就是我们竞拍成功的人，另外就是我们他的出价，还有一个是他最后实际成交的价格，也就是第二高报价，对吧？所以这三个信息对于我们来讲都是非常关键的信息，那我们是不是首先得判断一下，呃，就是你当前的这一个信息里边是不是。

有这个竞拍成功的人对不对？对吧，所以我们大家这里注意一下，我们先还是判断一下if，比如说我们是不是判断一下iner里边的D，假如说我们判断第零个，第零个是不是就是我们返回的那个地址啊，He the bit地址对吧？假如说它等于零，是不是相当于我们现在是没有定义出来对应的这一个对应的呃，就是没有竞拍成功的人啊，对吧？所以如果说。出现这种情况的话，那说明我们就没有人去竞拍，或者说诶大家注意这里，如果我们又发现这个他的这个竞拍最high bit竞价成功的人地址是零的话，那么说明呃是没有人去竞拍吗。

其实大家会发现这里边不应该出现这种情况，对吧？我们前面是不是已经判断它这个结果是P8等于一了，P8在什么情况下等于一，大家会回过头来想一下，P8是这个status对吧？我们看一下status在哪里去复制，是不是只有在finalize里面去复制啊。我们定义这个product，点点status，大家会发现只有在finalize里边会赋值，对不对？后面只有那个get product里边会返回，只有在这里会赋值，那么我们会看到它是不是如果说high be等于零的话，我们直接应该负的是on so的那个值啊。是不是，所以如果我们要是HAB本身就没有的话，我们这里是不是就应该走到P8等于二的这种情况。

大家回回忆一下我们这个处理逻辑对吧？这里的P8等于一是代表它的状态等于so。P8等于二是状态等于on sold对吧？而我们on sold在判断的时候，是不是已经判断了它就是he比等于零啊？所以我们如果要是它的状态是so的的话，是不是肯定highest bitter就不等于零啊？对不对，所以我们这里其实已经判断过了，所以在这里其实就不需要再做判断了，对吧，那我们这里其实不需要再做这个判断，那大家会想到，如果说我的这一个。竞拍的这个人，假如说。是已经竞拍成功的话，那我们直接就应该写一句话，应该写什么东西呢？是不是就是说当前我们就在这个product status里面去写了，对吧？status.html那这句话大家会想到我们可能要表达什么内容呢？我们就应该写当前的这个拍卖已经结束，然后他已经卖出去了。

赢得拍卖的人是谁，然后他的进价是多少，然后呢，他实际出的价格是多少，我们都应该把这些信息放进去，对吧？啊，所以说大家会想到我们要写这么一串信息，那具体的这个信息我们就直接照着这个抄就好了，对吧。好，呃，那么大家会发现我们在这个课件里边，这里边还判断了一下这个F2TO。Look string是否等于零？大家说他为什么还要判断一下这个F2呢？大家看它下面的F2，我们是那个第二高报价对吧，他是判断了这个，那其实他也就是在想，是不是当时就没有人竞价成功，对不对，大家会想他这里给的这个信息是什么，拍卖已经结束，没有人揭示报价啊，这个大家就想起来，我们一开始我们是改了一个课件里面的地方的，对吧。

课件里边在最初给这个合约信息的时候，他判断这个合约是否给这个answer的时候，他是不是用的不是highest bitter啊，他用的是什么，大家还记得吗？对，Total be对吧？当时我们就考虑了一下，他如果用total的话，那就有可能出现后边你尽管是有人竞价了，但是没有人监视报价，那就会有问题，对吧？所以我们当时是直接用这种方式把它避免掉了，大家会发现课件里边其实他用另外一种方式避免这种情况。啊，避免什么呢？就是我认为你有人竞价，这个东西就应该是卖出去了，但是如果你没有人揭示报价的话，我在这里再判断一下，那他如果这个，呃，这个最后的成交价格是零的话，我就认为没有人揭示报价，对吧，就是有人去竞价了，但是没有人揭示报价，所以他的那个成交价格是零，我这里再提醒一句，他没有人揭示报价啊，所以这种处理也是一样的，对吧？所以我觉得我们的处理也没有问题，所以大家选择一个自己，这就是产品设计的上的问题了，对吧，你到底要用什么样的方式给用户去展现，什么样的逻辑让用户觉得舒服，所以这里我们就不去改了，那这里可以发现这里边它后边的这一串写了一大串，对吧？这写的是什么东西呢？他说这个结束了。

然后product sold to to谁对吧？这是不是就是我们竞价成功的那个买家，呃，High BI对吧？然后他说for for多少是把它成交的价格显示出来了，所以这里是没有直接显示他的那个竞价的，对吧？啊，因为那个竞竞价可能不重要，而且可能也是隐私方面的一个东西，对吧？所以这里边不显示，只显示成交价格啊，所以display price大家还记得我们曾经写过一个display那个函数对不对，所以这里边就又简单的写了，把它这个传进去就可以显示出来了，对吧？我们那个price还后面加了单位ETH的对吧，From尾，然后ETH那后面还写了一句，这就相当于是提示性的话语了，对吧，这个钱可以这个钱已经放到了我们的托管合约里边，然后这个托管合约什么情况下可以释放呢？啊，就是提示了必须是三个中的两个。

啊，这三个人中的两个对吧，拜尔塞ER和这个托管人，他这个仲裁人里边的两个，他必须去发起这个才能够，才能够把这个钱释放给卖买家或者是卖家，所以就是这么样的一句一句话，对吧，稍微是有点有点长，有点麻烦，大家知道它是什么意思就可以了，我们直接把它抄过来。

index.js对吧？诶，我们写到哪里去了？HTML好，我们直接把它抄过来，这里大家注意啊，它定义的是F，我们定义的是in对吧？呃，这个直接写容易写错啊。好，那么在这里大家会发现我们的这个display price这里已经定义过了，就是下边我们给一个amount，就把它from way，然后后面还要加一个E，所以这个我们都已经实现这个写法了，我们这里就不再重复的去写了，对吧？所以大家经常用到的这个函数提炼出来作为一个工序函数，通用函数，这个还是呃，大家应该能想到的这种处理方式。好，那么我们如果要是已经显示了这个highest BI的信息之外，除了这个之外，我们是不是还想显示这个托管合约的信息啊，大家会想到我们还有托管合约的信息是什么呢？是不是I as pro infer啊，也是在合约里边定义好的，对吧？那么它要传入进去的也是一个product ID，点赞好，那么接下来大家会发现我们这里他拿到的应该是什么呢？

Ascectro infer，我们返回的就是as pro这个合约调用的这个as as infer里边返回对吧，它具体返回的我们在这里看好又是一个数组，那这个数组包含六个内容，是不是我们要的，应该全有了，对吧？啊，就是三个。大家看一下这个HTML里个定义的三个人对吧？然后有多少个人要求release给卖家，有多少个人要求退款给买家啊，所以我们定义的东西全在这里有了，所以这里我们就直接呃，应该拿到这个就还是拿到这个infer吧，然后那么我们这里是不是就可以直接把每一个对应的那个地方填进去了，大家记得我们在这里是不是专门给定每一个我们要写的信息都定义了一个ID对吧，Bier sell abi，所以我们一个一个写就好了，Fire。

诶，这个里边大家要注意一下我们返回的顺序啊，这里边我们返回的是C在第一个，那所以我们还是。就是在这里我们第一个写写ser好了，Poer ser.HTML对吧？那里边我们要传进什么东西呢？呃，大家可能想到我们要传的其实就是这个INER0对不对？第一个元素，当然大家可能想到我们还应该有一些描述性的这个写法，对吧？那我们可能就简单的说这个卖家是谁，我们把它这个信息拼接在后面就好了，对吧。

那同样买家是谁呢？我们写一个fire，把这个in里边的一拼接在后边对吧。大家这后面就就都是这种非常简单粗暴的这些操作，大家就一个一个敲就好了，阿比特HTML。呃，这个就叫啊。阿比特应该是英符二对吧，你再确认一下没问题，诶这个@应该是一二是吗？我们看一下这边定义的是什么，一二写错了。

大家特别注意一下这个这个拼写就经常会出这样的错误，好，这三个信息我们已经有了，然后接下来大家还记得，我们应该还有两个信息，是他的那个当前的那个，呃，就是有多少个人是就是有多少个人参与到。就是要求他释放对吧，释放给谁，所以那这种情况大家就发现他还得判断另外一个参数了，我们还有一个参数返回，大家还没注意到，就是我们有一个这个标志位的对不对，对是否已经释放成功，已经释放成功，是不是我们就不用去显示，你有三分之几的人去释放了，对吧，那也已经释放完了嘛，所以我们在这里。可以再去做一个判断，If，那我们要判断的是哪个呢？是不是in里边的三啊，对吧，如果它等于true的话，是不是代表当前这个已经释放完毕。

已经释放完毕的话，那我们就干脆我们还是在这个release release啊，我们是不是有一个叫做release count的一个一个ID啊。好，中间是这个短划线啊，一个叫release count，一个叫fund count是吧，好，Release count，我们就把这个地方给它写一个字，我们就叫做，呃，它这个就是已经释放完了就完了，对吧？啊，那比方说我们就叫还是抄一句吧，Amount from the as pro has been released就是释放了。啊，当然这个时候大家也可以去在这里边再去判断，就是当前到底，呃，就是那两个，就是我们的那个，就是一，那两个计数器到底哪个大于等于二，就判断一下到底释放给谁了，对吧？或者大家还记得我们在里边当时是不是还有一个这个事件触发的对吧？我们大家如果愿意的话，还可以去找这个事件触发的那个元素，对吧，看看当时到底释放给谁了，呃，就是我们可以在这里显示出来到底是释放给买家还是释放给卖家，呃，大家都可以再去把这个做一个实现啊，我们这里就简单写了，然后如果是else的话，那它就应该是还没还没释放掉对吧？那这个时候我们就直接可以把这两个信息再去做一个显示。

Release release啊release count.html那这个时候我们是不是就应该把这个iner应该是到三，前面是三，这到四了，对吧，把IN4应该显示出来。

呃，那当然了，IN4只是一个数，那我们可能还要再加一点边边角角的数据对吧？我们边边角角的一些说法，比方说我们这里就写啊，这是几个of，三个part，呃，Participate participate，就是三个参与人里边的几个，对吧？然后已经同意去释放这个资金，所以我们就写释放资金to sell吧，我们写的明确一点对吧？好，那同样下边我们就可以有，哎，大家注意啊，我这里是不是都缺了这个井号了？呃，昨天上节课的时候，好像我也是有一个地方缺了井号对吧？大家不要犯这个错误啊，然后我们是叫refund count，对吧，点HTML。然后同样的，我们这里要做的就是INFO5拿出来写在这里，然后加上一句话，这个就还是抄一句对吧。还是就是三个当中，三个参与人当中的几个同意去把这个钱啊，就是回回款退给这个买家，所以我们在这里就实现了这样的一个功能，对吧，所以大家会看到我们把整个所有的这些信息呢，全部是填到我们这一个，呃，就是在P8等于一，也就是说我们的status等于so的那种状态下，原先我们这里是直接就在product status这里填了一句。

啊，这个产品已经卖出去了，对吧，那现在我们就把它丰富了很多，首先我们填查到这个最高竞价人，也就是赢得竞价这个人的信息，我们把这个product填的完整一点，把最高的竞价人和他的那个成交金额全写进去，但大家也可以分成两部分写，对吧？就在这边再定义两个div，就像下面这样一样也是可以的，呃，那。这里我们是直接就用了，就用了一个div，然后把这个数据全拼在里面，然后下面这种写法大家会看到，我们就定义了各种好几个div，对吧，每个数据都是一个div，然后都有一个ID，所以我们可以在这里把所有的数据从s as pro infer里边查出来之后，一个一个塞进去就完了，好，这就是我们这一部分，就是展示的这一部分内容。