127_尚硅谷_以太坊项目二_去中心化eBay_web前端核心业务（三）商品详情完善及测试

我们现在已经定义出了当前时间，而且拿到了就是我们整个竞拍结束的时间，他们俩一剪拿到了剩余时间，那么我们要显示的时候，是不是就是根据剩余的时间显示他现在还剩多少天多少多少个小时，对吧，显示这样的一个信息啊，那这里大家首先要注意，就是我们是不是有可能你传进来的这个时间戳，有可能就比我们的呃，就是current time还要小啊，有，有可能已经过了这个时间了，对吧？那首先我要判断一下了，所以如果要是remaining t，如果要小于零的话，小于等于零吧，等于零也就结束了，对吧。那么我们直接就return return什么呢？这里我们要的是display on time，那如果我们要是已经结束的话，是不是应该有另外一个文本啊，啊，我们这里就可以显示一个文本信息，就是提示现在已经结束了，对吧？比方说嗯，忘记这是怎么写的了。

直接把这个复制过去好，这孩子ending，也就是我们的拍竞拍已结束好，接下来那如果要是说它大于零的话，那就是我们正常的要走后面流程对吧？那前面已经return了，所以我们不用写else，好那么接下来我们就定义，首先先要去判断大头对吧，看它这些秒是多少天，所以这是我们的一个原则，所以大家看这个定义一个date，然后怎么样去处理呢？我们用math的这个创方法。这个就是相当于要拿到它的这个整数，对不对，然后我们这里就是remaining time。

要做什么事情呢？除怎么样能除出整天数呢？它是秒对吧？除以多少就是整天数呢？那是不是首先秒，那得除以60就是分钟对不对，然后再除以60就是小时，再除以24是不是就是钱啊啊所以就这样一个过程啊，这样就拿到了还剩多少倍，那接下来我们已经保存了，这是还剩多少天对吧？那是不是剩下还要多少天，多少小时对不对？那是不是应该把这个整天数要减掉啊，所以我们直接就减了，Remaining time减等于。Date，那是不是还得再乘回来啊，还得算秒对吧？所以是我们那边是做了取整的运算，现在还得把它再乘回来，乘以60乘以60，再乘以24，这就是所有的秒数对吧？然后减掉之后就是我们剩下的啊，就是零头时间的零桶，好，那么同样的大家就会想到那小时应该还剩多少呢？同样的操作对吧？这个就大家直接去写出来就可以了，那就是remaining time，这下是除多少是不是除60乘60啊，除以3600就是剩下的小时数对不对？那同样再来一波remaintime又可以减等于小时数乘以。

60乘以60，好，那么接下来还有分钟数对不对？Minutes minutes就可以等于点remaining time就可以直接除以60，是不是就完了？

好，这下我们就已经拿到了剩下的所有的，呃，这个天数，小时数，还有分钟数对吧？所以大家可以看到啊，当然了，这个我们还应该再减一下，拿到最后剩下的秒数对吧？减等于minutes乘以60，那最后剩下的remaintime就是秒数对吧？好，那接下来我们就要去显示了，显示怎么显示呢？肯定是从大到小显示对不对？那大家会注意，我们正常人来讲的话，你如果要是还剩下有十几天，那其实没有人可能会关心他还剩多少秒对吧？十几天，多少小时，多少分，多少秒，这个就不用显示那么详细了，呃，当然了，大家如果要想详细显示很全的话，其实是可以去显示。

那首先我们是不是要判断这个days是不是有啊，前面如果说我们本来剩的时间就很少的话，这个一除是不是days就应该是零，大家可以想象得到对吧？除以完了之后就是一个很小的数，一取整就变零了，对吧？所以我们这里要想拿到对应的天数的话，首首先应该它大于零这种状态下才有意义对吧？这种情况下我们直接return return什么呢？呃，我们还是看一下这个哦，Option as in啊，就是在多长时间内会直接结束对不对？然后就可以加上days，那么后边就是有这么多天对不对？那当然后面大家如果还想继续加的话，我们还可以把小时还有。

还有后边的这个分钟minute通通的都加上对吧？这个就是大家如果想显示多一点的话，就都显示上，看这个自己觉得产品设计应该怎么样做啊？呃，这里是remaining time，然后加上这里是second，对吧？这么多秒，那大家肯定可以想象得到，接下来那肯定就是l if，如果days是零的话，那就看ours是不是零对吧？Our如果大于零的话，那同样我们是不是就把这个去处理一下，我们直接return return就不需要加上前面的days了，对不对？

直接从二开始，对吧？没有days，那同样大家能想到我们else if，如果接下来是minutes的话，同样的操作，对吧？我们就从mini开始。那最后我们直接return还剩多少秒对不对啊，这就是非常简单的一个想法，好，那到目前为止我们就已经啊，我们前面所要实现的这些工具函数就已经全部实现了，好那么我们接下来来看一下这个应该长什么样子啊呃，在开始之前，我们还是先启动一下IPFS。因为我们拿图片的时候是需要去开启它的，另外呢，就是大家要把那个GA纳开开启起来，我在这里先把它清掉，重新启动一次，然后大家就会想到我们这里肯定是需要去起一个自己的npm DV server，对吧？呃，几个ipad和DV server，然后另外呢，就是我们在启动之前还要把这个插相关的一些东西要要写进去，就是我们的合约要布在链上，然后要把我们一开始的这个种子区块链都就产品信息都写进去，对吧？好，那么我们这里的话就是先做一个migrate。

然后exec啊，这就是把我们的那个产品信息先写进去，呃，然后我们这边可以，这边最好等他写进去之后再绕。

因为我们有时候发现这边跑这个server的时候，它会检测我们文件的内容变化，那边文件内容变化的时候，这边server就会重启，对吧，所以这个还是挺烦的，呃，那这个过程大家可以看到就是呃，诶首先大家就是应该能大概想象得到我们这么一个HTML，呃，HTMML。如果整个的渲染出来之后，应该是一个大概什么样子，大家应该呃能想象得到是吧，就因为我们前面这里是一张图片。产品图片放在这儿，然后下面是有一个name，然后下面是有一个and的那个时间对吧，然后这边它这是整个分成12，这边是四，这边是八，所以他们应该是一左一右的分配，对不对，所以这边是有这三项，然后剩下的这个start price啊，这些就是跟竞拍或者说揭示报价相关的那些输入都应该是在右边放着的啊，所以这是我们能想到的一点啊。

这确实有点慢，呃，也是因为我现在电脑里面起了太多的东西，对吧，大家看到就是这个在起的时候打包这个占占资源还是比较多的，好，现在已经起起来了，大家还记得就是我们。啊，我们本身的这一页啊，我先把这个断点先关了啊。好，大家应该记得我们直接进到这一页，进来之后我们显示的是这样的一个样子，对吧，尽管有点丑啊，但是我们知道上面这里点点击这个是可以去重新提交一个，就是上架一个商品，然后这边是呃，列的这个种类，我们到时候可能做选项用，对吧，这现在还没有列出来，然后这里就是products To Buy，这是我们当前上架可以竞拍的产品，然后下边呢，这就是在这个可以去揭示报价的产品，对吧？大家会发现这里我们现在是没办法点的，那怎么样去访问我们那个详情页呢？

我们直接就输这个内容好了，大家还记得我们的内容是product.html对吧，那访问的时候要把它的ID带上，怎么带呢？那大家看就是这样的方式，比如说我们访问ID是二的这个啊，这就是我们这边这个IPHONE6S对吧。所以大家看我们的详情页就是这个样子，所以这边是图片，然后下边啊，当然这个字有点小，大家看着不顺眼的话，可以再把它调大这样式的问题对吧，下边是详情，然后这边大家会发现我现在离它结束还有三分多钟，对吧，所以这边就显示出来是这个B的这个页面是这样的一个样子啊，那大家可以想到让我看一下那个一。

诶，大家会看到，诶一这边他看来这个当时我们给的时间比较短，对吧，它直接已经结束了auction has ended，所以这边显示的就是review的这个B这个框对吧，这个就只输两个就可以了，一个price和一个这个呃，这个secret tax，所以大家看到我们就是完成之后就是这个样子，呃，刚才可能有同学能够就是想到，如果我们要想在这个主页这里。就能直接点进去，我们应该怎么做呢。那肯定我们就应该是你点图片的时候，那就应该图片这里有一个链接了，对吧，那大家说这里如果我们要去改的话，是改哪个文件呢。改哪个文件改改哪个地方。

是改这个详情页吗？对，这肯定不是，所以肯定是改index对吧？我们主页是在index里边去画的吧，那我们就找到index里边，大家会想到它在什么地方放进了这些产品呢？它是在product list里边对吧？这里边本来没东西，那我们是在JS里边做的对不对，所以还是回到JS里边去整什么，什么时候把它这个渲染出来的呢？我们是一进来之后就做了这个runnder store，对不对，在这个地方就已经渲染出来了，诶跳转不了run stop这里大家会看到我们这里是呃，直接已经写死的，把这两个直接拿到它相应的这一个信息，然后直接调用了一个build product的方法，然后把它画在这个地方，对吧？那大家会看一下build product这里边是不是就把这个图片给添加进来了呀，那我们是不是要给这个图片添加一个链接，对不对，所以哦啊。

我们在这里是不是可以有一个A？一个链接对吧，然后我们是不是可以有这样的一个，我们先把这个先。呃。这里是用的双引号对吧，好。好，我们先把这个先分开啊，所以前面大家会想到我们要建立一个链接，然后它指向哪里呢。是不是应该指向点HTML？然后后边还要加上ID对不对，所以后边还要ID等于等于什么呢？那应该是等于我们前面能够。看到的这个product ID对不对，那如果我们这里，呃，大家如果这里还拿不到，就是不知道它的这个product ID是什么的话，哎，大家说这里可以拿到product ID吗？Product ID在哪里。

这里我们是不是把整个的产品对象都已经传进来了呀，对，所以它的P0是不是就是product ID，对，所以大家，呃，我们在上面用这种方式去去拿product ID，是因为我们进这个页面的时候不知道对吧，不知道是哪个拿不到，整个产品的对象还没有拿到，我们是要通过这个URL里边带参数去找，所以是这种方式，而我们在这里的话，我们直接就知道这个product是什么嘛，所以我们在这里就可以直接加上。P0，然后我们就继续加后边的内容，大家说这个加完了之后，这个完了没有。

我们刚才这么写是不是不对啊，应该是ID等于后面加P0对不对对，然后我们要把刚才的这个要完结掉，对吧，怎么完结呢？是不是得先有一个引号。然后一个减括号，这样就完结掉了，对吧？好，这是我们这里的这个A，那最后是不是还应该把这个A完结掉了，当然链接的话，有时候大家不不打后面的这个也可以，对吧？对，但是大家习惯的话，最好还是就是有这样的一个过程啊好，我们把这个加进来之后，看看这个效果。好，这里重启重启server啊。另外其实大家刚才还可以看到有一个问题，呃，不知道大家详细就是注意到没有，就是我们点进去之后，它页面刷新的时候是有一个问题的，我们等一下进去大家看一下这个效果啊，其实大家也就是把这个看一下效果，就就能看到我们这个项目一开始好像什么都没有，都是乱七八糟的东西，然后一点一点，好像看起来就就有血有肉了，对吧，一点一点功能就加进来了，诶这边已经刷完了，嗯，刷完了之后直接。

搞错了。难道。看一眼。好，这里有一个p is not DeFine，说明我们这个肯定有地方写错了，对吧。哦，这里为什么写了一个P呢？哎。这个可能等他半天，还不如重新起一下啊。这个是真慢啊。都没有计过时，看他这个要耗几分钟才能起起来。

咱平常起的时候大概几分钟啊，这个瞬间启启动没有一两分钟是吧？哦三分钟的话，那可能比我这个也快不了太多，好现在已经刷出来了，大家可以看，现在我们定义了这一个链接之后。上去之后变成小手了，对吧，我们点点开大家可以看，就跳到这里来了啊，那大家说为什么这里它这里不显示东西了呢。因为我们这里结束了，而且大家还记得吗？我们在这一个这个beding和revealing的时候，是限制了一个，假如说他已经这个reviewing超过时间一分钟的话，是相当于就全部显示了，对吧，就相当于这个reviewing的窗口也给关掉了，所以而且我没有没有定义别的一些显示，所以说这里就变成空的了，对吧，所以大家可以想到这个还是比较合理的一个状态。

我们就是这么写的，那我们看二啊，二这边也结束了，对吧，所以这边也就什么都不显示了，所以这就是一个我们简单的一个实现，把它这个设置一个链接，然后我们就可以简单的做一个跳转，当然了有同学可能就想到，那我既然可以跳转回来，我是不是还应该有一个返回，返回到那边啊，不要总是点这里对吧，大家自己就实现这个功能就好了，因为这个很简单，对不对，就定义一个链接对吧，就跳回去了。