day13/上午/256-尚硅谷-尚融宝-锁定和解锁的前端整合

好，前端整合对于我们来说呢，相对就是更容易一些了，首先呢，就把刚才咱们写的这个log方法呢，作为API模块的一个方法给它定义出来，那这面呢，我就直接复制过去了，所以呢，我们找到我们的API模块，找到优付，然后在这个下面呢，咱们再添加这个解锁方法，对照刚才的呃方法看一下哈，首先呢，URL地址你要确保是正确的，第二个呢，就是method，这面是put啊，然后参数呢，传的是ID和statuss这样的两值，所以这块呢是我们的GS，然后接下来呢，我们在view里面呢，去调用这个JS，那么在view里面调用GS的话，那首先我们写一个方法吧。在这个位置就写一个log方法，好这个log方法呢，我们就嗯，User INF for API，点刚才的那个log方法对吧，Lo方法啊，然后我们传什么呢？传一个ID进传一个进来ID和是哪来呀。

那我们肯定是根据点击不同的啊，数据列表当中的数据，然后去通过数据传过来的啊，你点击啊第一条记录传的是第一条记录的ID，同样第二条和第三条各传递自己的，所以呢，这个东西我们就没有办法从全局的范围内直接传进来，只能通过方法。啊，到时候再传，所以只能是这样传啊，然后这样的话传进来之后呢，我们就点then response好，然后如果成功了的话，就是直接写成功就行了，这Dollar message yeah好，然后呢，如果显示完成功之后呢，我们肯定是希望我们的页面的这个状态发生变化，比如说锁定变成正常，或者是正常变成锁定，它一定要变一下，它变一下怎么办？我们可以刷新一下整个的页面的一个查询，对this.data。

就可以了，所以这个呢，是锁定和解锁的一个方法的定义，好，那这个方法定义完了之后呢，我们就把它定义在我们的啊列表里面啊，在列表里面呢，我们找一下这个列表。我们在最后的。嗯，这个位置呢，我们给它添加一个。模板，这个模板呢，就是一个操作列哈，我们来看一下笔记吧。我直接把它复制过来了，大家也是一样，直接复制就可以了。然后呢，我们把它放到最后一个列队里，我们读一下就可以，这块呢就是一个table。啊，然后呢，它是操作啊，里面的所有的内容呢，都是居中的，所以展示的话呢，就是这样的啊，然后它的宽度呢是200是吧？好，这是这一款，然后接下来呢，这面template就是里面我们自定义的内容啊，我们自定义就两个按钮，一个锁定按钮。

一个解锁按钮，那这个锁定按钮和解锁按钮呢，它俩是互斥的，所以呢不能同时显示，所以呢就用if和else啊，把它们这个啊，这个作为一个互斥的对象呢，把它定义在这儿，然后if这块呢，我们就是scope点肉点status，当它的status等于一，也就是说当他的状态等于正常的时候，我们让用户看到的是锁定按钮，反之我们让用户看到的是解锁按钮。啊，然后接下来呢，就是关于这个按钮的颜色和大小的定义了，一个是蓝色，一个是红色啊然后最后呢，就是关于这个按钮的啊，这个事件的定义了，都是click事件调用了刚才我们刚刚写的一个lock方法，那其中的ID这块我们就传当前记录的ID啊，值这块，如果当前是正常状态，我们就让它变成锁定状态，如果当前else锁定状态，我们就变让它变成正常状态，所以呢，这块就是对方法的一个调用啊，所以我们最后呢再来看一眼。

所以这面呢，我们就点解锁好，它就变成锁定了啊，然后这块呢，变成正常了哈，我们再点锁定好，它变成解锁了，然后这块呢就变成锁定了，并且上面这个地方呢，会显示解锁成功或者是锁定成功啊这样的一个提示信息出来。所以呢，这是我们锁定和解锁功能的一个实现。