126_尚硅谷_以太坊项目二_去中心化eBay_web前端核心业务（二）商品详情JS实现

我们接下来就要去完善这个产品详情的JS了，对吧？啊，大家大家可以看一下，我们先来瞄一眼这个代码啊，就是大家会看一下，就是这个代码稍微还是有点长的啊，但是我们首先可以看到上边这里，上边这里这一部分是干什么的，他说的是说这个应该放在这个window点，就是APP里面，所以这个是我们启动的时候就应该去判断的。那这个判断是什么呢？大家会看到我们是判断product details这个ID对应的那个do.las是不是大于零，所以它其实是什么意思呢？大家还记得我们刚刚的这个HTML里边，它最上面的这个div是不是就叫product details啊？所以他这是在做什么，其实就是看我们这个页面里面有没有这个ID，对吧，如果我们在另外的两个页面list item和这个，我们把这个copy一下啊。

在list item这里边，如果我们去查的话，那肯定是查不到的，对吧？在index HTML里边去查，那肯定也是查不到的，所以我们只有在product HTML里边才有这么一个东西，所以我们判定这个DOM plans是不是大于零，是不是就能判定当前的页面是不是在这个product页面里。啊，所以大家注意啊，是这样的一种方法，它判断如果大于零，那说明当前是产品详情页，商品的详情页，那么我们就做这样一个操作，大家看拿到product ID。这个product ID是怎么拿到的呢？大家看后面这个操作啊，是URL search。所以这是要用我们全局的方法，从哪里拿的，从我们上边的这一个URL里面去拿啊，大家应该知道对吧，所以window.location这就是我们整个的这个URL，然后点search。

那大家，呃，这个里边我们没有啊，大家平常其实是经常能见到这样的写法，是不是冒号后边，然后比方说啊，Name等于啊什么什么什么东西对吧？所以大家会看到这个点search拿的是什么呢？就是问号后边，问号作为分割符，后边就是它的search试条件对吧，查询条件，所以点search拿的就是我们后边的这些参数，好，所以大家可以看到URL search paragraphm，然后把这个search传进来，前面这一部分我们是不是就拿到了这个问号后面那些参数，然后get ID，所以这是不是说我们在这个产品详情页的时候，它上面那个URL跳转的时候，我们是要把ID作为它的这个一个。

Search参数搜搜寻搜索参数放在上面的URL里面的，是不是这样一个想法对吧？好，那后面就是具体怎么实现，大家到时候再来看啊，好，那接下来大家会看到我们拿到这个product ID了，所以就我们把下面要做的事情，就是我们把整个这个产品详情页渲染出来，对吧？所以我们定义一个函数专门做它做这件事情就叫做render product details，我们主页面不是叫render，呃，Product嘛，对吧。Product list的是吧？呃，我们现在就叫render product details，然后把对应的产品ID传进去，那接下来我们就看下边是这个product details，那就是具体的详情，大家会发现我们是还是用我们这个区块链上把合约对象先。这个合约实例先拿到，然后调用我们的get product方法，因为我们已经有ID了，对吧？所以直接就能拿到它对应的所有的详细的详情，当然里边有些是要从IPFS去拿的，对吧？有些就我们直接可以去添加了。好那么接下来当然下面就还有一些工具方法了，我们接下来就是一点一点带大家把这个做一个实现。好那么首先我们回到这个index.js里边来，在这个里边大家会想到我们首先要去要去把刚才的这个定义出来，对吧，就是先判定一下当前页面在哪里，它的做法是什么呢？它是判断。

判断当前这个ID是是这个东西对吧，是product details诶。

没有复制上啊。如果我们当前页面里边。ID是product details这个节点，这个do元素。假如它的length。大于零的话，那就代表有这个元素，也就代表是在我们product的那个页面里面对吧？那在这种情况下我们就去渲染这个页面，那当然渲染之前我要先拿到product ID，对吧？ID等于这个等于什么呢？我们的想法是把它传在URL里边传进来对吧？所以是new一个URL search，大家看这个全局的这个变量已经出来了，对吧？Search，然后我们要传入的是当前window.location。

点search对吧，好，所以我们要传输的是这个，然后我们要拿的具体的是哪个参数呢？我们要拿的是ID那个参数对吧。啊，所以大家注意一下我们这里的这个具体的写法啊，呃，当然这个ID这里如果我们这么写的话，这就变成一个变量了，对吧？我们要的应该是这个引起来，这是我们的一个参数对吧？它的名称叫ID，好，那接下来我们拿到product ID之后呢？啊，那我们就定义一个这样的方法去render product details对吧。然后我们会有一个参数，就叫做product ID，所以大家可以看，这样的话我们就已经定义好了，接下来应该要怎么做，我们想所要做的其实就是把这样一个render product details这个函数实现就可以了，对吧？之前我们是render store，现在我们render details把它copy一下。

这个就肯定是在render到后面对吧，前面都是render这一些方法，我们放在这儿，然后放在这个我们，呃，Load事件监听这个前面啊，好方式。那这个里边会传入一个参数叫做product ID，好这样一个方法里面大家会想到我们首先要根据product ID，你既然是渲染这个所有product的细节嘛，对吧？Details，那我这里当然就应该要先拿到我所有的细节，对吧？那我怎么样根据ID拿到细节呢？再到区块链上去查，所以我们现在的做法是commerce in commerce store.deploy的点赞，这就是我们的常规写法，对吧？

然后我们拿拿到这个合约实力就可以做操作，然后我们拿获取这个整个产品的详情，是用哪个函数呢？Get product对吧？我们有这样一个函数，然后这个product product肯定要传入参数product ID对吧？拿到对应的详情，然后就点赞。拿到详情之后，我们怎么做呢？呃，那么大家可以想到，那我们拿到这个product，我们叫P吧，尽管不太好听，但是比较简单。好，那现在这个P就是我们拿到的具体的产品对象product，对吧？好，那么接下来我们要做的事情就是一点一点把它渲染出来，好，首先我们先定义一个，大家首先想到我们最麻烦的一个应该是什么。

是不是，呃，应该是我们的图片和。图片和那个详情那两部分对吧，这两这两部分，因为我们从区块链里面拿出来的只是一个哈希，我们还得到IPFS里面去取，对不对？那这里边大家会想到，如果我们图片的话，拿到哈希是不是我们直接拼到那个URL上面，其实就可以直接访问IPS上的图片了，对吧？把那个写到link里面就可以了，那这个还相对简单一点，那更麻烦的其实是那个详情，那个详情我们是真的得从IPFS上再去拿到，然后存在我们本地的，对吧？存到我们这这里的这个JS对象里面的，所以我们这里先定义一个对象来存这个详情。好，我们这个详情就叫做比方说叫做DEC啊，我们定义一个详情，然后首先它是一个空字符串，它就是一个字符串，对吧，那接下来就是IPFS点就可以去拿这个详情的内容了，对吧？大家还记得我们在IPFS里面可以用什么方法去获取一个文本文件吗？

我们在IPFS里边是不是直接可以敲IPFS，然后cat后边一个文件，直接就可以把它的文本拿出来，对吧？所以这里的API调用也是一样的，IPFS.cat。那看谁呢？直接大家看啊，直接cat，我们对应的那个哈希，因为IPFS本身我们是不是上面都已经定义好这个IPFS的实例了，他已经知道去连接local host，呃，5001这个去调用这个API对吧，而且协议是HP，所以这个我们不需要再去拼这个link了啊，所以在这里直接调用，诶写到哪了。

然后大家还记得我们在这个合约里边返回的对象。第一个是ID，第二个是name，然后是种类，然后是第五个是我们的详情link对吧，详情的哈希，所以在我们这里边第五个是不是就应该是数组里边第四个人做好大家注意，我们这里从。以太坊上面get product拿到的这一个详情，这里的返回大家还记得我们定义的这个多多项返回是不是一个数组啊，所以大家要注意啊，这不是一个大对象，所以我们调用的方式是用数组的方式去访问的啊，它顺序就是我定义好的顺序，所以这里直接拿出来这个P4。然后拿出来之后点赞，因为IPFS的API调用也是一个异步的，对吧，而且返回的是一个promise，所以我们直接用点赞去做这个，呃，异步调用，那我们拿到的这个其实就是一个文本了，对吧？一个file，然后我们是不是就可以把它直接给到我们当前的这个变量里边了，对吧？DEC就可以等于file.to string，我们把它转成一个字符串。

然后转转成字符串之后，是不是我们就直接可以把这个字符串添加到对应的那个详情信息里面去了，我们在这里边是不是有一个地方就专门是详情信息，好我把这个复制一下。鼠标。所以我们在这里又是调用这query的方法，Dollar，井号product DEC，然后我们可以点aend把一个元素添加进去，对不对？那这个时候我们要添加的应该不能是简单的文本，我们还是加一个div，对吧，大家能够想到。

Div。然后我们后边是不是就可以把这个内容放在里边，然后把这个div封闭掉，这样的话我们就已经完成了这个内容的添加，对吧？好呃，这就是我们第一个最麻烦的这一个东西就已经搞定了，就是就是这个详情，那接下来大家还有一个第二麻烦的东西，就是我们那个图片对吧？那图片这个东西我们其实已经拿到它的哈希了，P4是详情的那个哈希，T3就是图片的那个哈希，对吧？大家可以想到拿到哈希的话，我们直接就可以在IPFS那个link上面对吧，直接访问了，那所以我们这里其实可以直接把这个图片添加进去了，好，那么我们这里同样去做一个这个j query的一个一个处理，对吧？那我们刚才的那个图片应该是在哪里呢？Product image。

哦，所以井号image，然后a pen的一个元素对吧，那这个em image的话，大家能想到它的A肯定是img元素对吧？然后后边是不是应该有S啊。那S的话，我们是不是直接就应该是HTTP啊，我们这里如果要是直接是local host的话，就简单访问对吧，我这里直接写死啊，我这里是9009001。然后IPFS，所以大家会想到是这样的一个应用，对吧，啊，后面斜杠后边是不是要再加上P3这个哈希对吧，然后呃，后面继续加，应该再加上。

我们要完结这个元素对吧，那就就能想到我们先要把它封闭起来，那前面这个S就结束了，对吧？啊，然后我们应该就可以。把它封闭起来，我们再看一下啊，是不是还少了一些东西。哦，大家会看到这里还定义了这个一些样式，对吧，宽度等于250个PX，好，我们在这里定义一下吧。宽度等于250个，好，所以这样的话，我们把图片就也已经添加在上面了，当然我们添加的时候，因为都是按照这个ID来去找的，所以我们不需要按照顺序对吧，先是name，然后后面是什么种类，不需要按这个顺序，因为他知道这个按照ID去塞就可以了，先后其实没关系，先后渲染大家其实在页面上，呃，也没有太大区别了，后面都是一些文本吧，快速的好，那接下来其实我们要做的就是一些常规性的操作了，那大家首先想一下，我们当时这个页面里边还有哪个东西，对吧。

呃，大家会首先看到我们上边这个有这个product name对吧，先把它来做一个处理。井号。Product name点呃，Product name的话，那大家想到这个可能我们都不需要这个div对吧，所以我们直接HTML直接把它加进去就完了，对吧？P name应该是P几。P1对吧，零是ID，所以一是内对吧？好，然后接下来我们再继续看，就一个一个找就可以了啊，那这个option end，这个可能我们现在还不知道该填什么，这看起来像是一个就是一个信息的提示对吧？所以我们现在可以呃，就是大家先把这个放一下啊，然后我们先把这个简单的东西先放出来，接下来是有一个product price对不对。

好，Teller这就是常规应用啊，大家把这个就是都都这个稳稳的把它手敲一遍，那这个price的话呢，大家能够想到也是直接把它写进去就完了呗，呃，但是这个显示的时候大家会想到。呃，首先大家想一下，我们那个price是几啊。Price第12345678第八个，所以这个price应该是P7对吧，对不对。那大家会想到这个P7的话，我们一开始拿出来的可能是有问题的，对吧，我们一开始这里返回的。

这个start price好像还是以尾做单位的是不是？所以我们这里边还得做个处理，那这样吧，我们定义一个工具方法去处理它好了，呃，比方说。我跟这边尽量保持一致啊，我们看一下这边定义了一个什么叫。叫display price，好吧，这个方法还是还是比较明确，能让大家知道是干什么的，对吧？我们就把这个查出来的这个尾的这个数值传进去，然后display price，我们把它显示的好一点，可能还要转换成以态，然后可能还得加个单位什么的，对吧？我们直接用一个函数了来把它做一个处理好，除了这个price和name之外，那大家会想到我们这边还应该有什么呢？我们定义的好，接下来就是form里边需要的一些东西了，对吧，大家会想到。Form里面其实有很关键的一个东西叫做ID，大家还记得吗？

Product ID。这个ID我们说了，这里边不是用户去输的，也就是说我们是不是应该在JS里面去给它复制写进去。那我们既然是在JS里面去写，那我们是不是在一开始渲染的时候就应该知道这个东西啊，我们自然对吧，进来就知道了嘛，所以我们这里其实是可以做这件事情的，Product ID可以把它的value去给一个赋值，这个VV代表它的value对吧？每一个input都可以去设置它的value，这就是我们通过JS去强制给它设置value，它的value应该是什么呢？那应该是我应该是我们这里的P0对不对。对吧，当然大家也可以直接用这个product ID，其实都是一样的，对吧，我们这里用P0也是一样的，好，那接下来有了这个product ID之后，大家就会想到我们还有一个上面的这个元素，我们好像没有处理，对吧，叫做product option and，那这个可能大家会想到稍微有点复杂。

我们先把它列出来。Product AU and，然后大家可以想到这个东西，呃，可能我们需要的应该是哪个参数呢？Option and，对，那大家会想到我们是不是应该需要这个这里的这个结束时间啊，这里是跟它是否结束这个信息相关，对吧？所以我们在这里，但是具体怎么显示，大家可能会想到我们，呃，可能还稍微有点复杂，所以说这样吧，我们不直接把它写进去，我们还是去定义一个方法来好了，那就像上面这个display对吧，我们定义一个叫做day，不叫price了，This day and end time吗？好，这里定义成end our啊，我们就直接定义end time好了。

那大家可以想到这里我们要传入的参数，这个函数是不是需要一个参数，对，那需要的是我们的n type应该是P6，对吧？刚才大家已经看到了，就是start price前面那一个，好，那接下来已经有了这个and an option end之后，那大家看到我们这里定义的这个模块其实就都已经有了，对吧？上面这些就都已经有了，接下来是不是就应该是B的，还有这个reviewing这些东西了啊，这个可能又稍微的复杂一些，对吧？啊，那大家注意我们这里的这个处理的。模式啊，我们一开始大家首先先想到我们B的和V这两个不应该共存对吧，不应该用户进来之后，既能看到我可以去竞价，又能看到我还可以去填写这个揭示报价的这个过程，所以我们一上来就做一个操作。

Dollar。然后呃，大家可以看，就是我们可以同时去写这两个对吧，小V对吧，我们同时还是看一眼有没有写错啊，这个叫will。这叫做be是吧，好吧，所以我们把这两个be和revealing在一开始的时候，他们既然不能同时显现，所以我们一开始就把它全隐藏起来，然后之后我们其实就是要判断当前的时间对不对，根据当前的时间来判断谁去显示，所以那我们这里是不是要定义一个当前时间啊，对，那大家之前做过这样操作的啊，Current tie就等于。

呃，我们这里大家之前其实做过这个操作，我们还是把它定义一个一个函数吧，对吧，Get current time。定义这样一个函数，然后等一下，我们直接去在下面工具函数把它实现一下，大家还记得就是我们要用一堆那个new date对吧，然后除，然后我们就可以知道如果current time，如果它小于什么，这里要跟什么做判断，An time做判断啊对，如果那前面我们有那个P6对吧，如果它要是小于an time的话。我们是不是就应该让哪个显现出来？让哪个选项比竞拍结束时间小的时候，也就是还没到竞拍时间的时候，是不是必定应该显示啊对，所以来把这个逻辑搞顺啊，所以他点瘦，那同样呢，就想到了else是不是就应该是Dollar。

Reviewing点授啊，好，所以大家可以看到，就是我们基本的逻辑就是这样啊，当然有些同学可能如果细致一些啊，可能想到那你不应该是，就是只要过了竞拍时间，就一直都可以揭示报价呀，那我最后还应该有一个真正的截止时间，你就进报价也不能报价了，对吧，所以可能我还会有一个限制，比方说那这里边我没有定义啊，那就随便写一个，比方说我要。它如果大于。呃，就是大于。

揭示时间可以揭示报价，我还得要求它小于，比方说加上一个时间对吧，比方说我们就一分钟之内的话，那我们加一个60，如果要是说这个，呃，就是就是更大一点的话，大家可以再再去做一些别的这些操作，对吧，那大家这里注意P6这个返回的，如果大家不确定它这个到底是什么东西的话，我们可以确定这个current time是肯定是一个数，对吧？所以我们可以把这个把这个东西放到这边来。减一个60，那可以这样去做对吧，这样就是保证我们这里的数据结构一定是一定是数字对吧？呃，大家可能会担心，假如你那个P6返回是一个字符串的话，我直接加60，那我还得这个pass in对吧，To to int转成int，然后再做这种操作，这太麻烦了，那我确定的是current time，这个我当前拿到肯定是一个数字，所以我把这个移项移过来。

它减它小于P0也是一样的，对吧，好，那这是我们这个基本的框架。