在京东工作第七天今天的任务如下

今天解决一个逻辑需求加两个显示需求

需求：；当添加商品的时候，商品会放在门店页面里 刚添加进去商品显示未设置，当点击设为可售或者设为不可售的时候，商品状态变为可售或者不可售，并且未设置会永远消失（只要状态改变未设置就消失可以理解为哦promis的pending从pending变为成功或者失败一代女改变就在也变不回pendding了）。 思路

先想一下逻辑 用v-if控制当字段status返回是1的时候显示可售，显示0的时候显示不可售，然后刚添加商品的时候status字段内容是空所以当status=null的时候显示未设置

点击设为可售或者设为不可售的时候状态就会从null变成0或1 这条商品的未设置状态就会永远消失

显示为不可售时底下的button就是显示设为可售 然后点击设为可售上面的不可售会变成可售 底下button变成设为不可售

具体方法如下

1）给未设置 加一个盒子底下写这个盒子的样式，让字体变红，不设置宽高让字体撑起来

2）可售、不可售跟未设置同理都加一个盒子，可售让字体变绿 不可售让字体变灰

3）给设为可售，设为不可售添加样式的时候，绑定一个点击事件，点击设为可售的时候status变成1触发上面的v-if当status变成1的时候显示可售字体，并且不可售的v-if判断为false不显示（设为不可售的事件同理），在事件的参数里加一个标识 1代表设为可售 0代表设为不可售这样咱们就知道点击的是哪个，点击设为可售标识值就是1

4）大体逻辑为 判断字段返回来的信息 当status为1的时候可售的v-if判断为true显示，不可售的v-if判断为false不显示。当字段为null的时候要出现未设置、设为可售、设为不可售、三个盒子，并且当可售出现时下面要显示设为不可售所以当status为1的时候设为不可售的v-if也要为true 这里还需要判断当status=null的时候设为不可售存在||（或运算符）status=1的时候设为不可售也存在 代码如下

5）底下点击事件的方法执行的时候传两个参数第一个参数是插槽第二个参数是标识值，让status字段等于设置的标识值 当点击设为可售时标识值为1 让当前状态码等于当前标识值，status=1可售的v-if判断成立所以显示可售，最后调用接口单个商品的上下架方法，参数传后端要的参数，promise执行成功的时候alert弹出成功执行，然后回调函数执行商品列表更新方法，让商品列表重新执行一次。最后用catch兜错当出现操作引发报错的时候就先显示错误原因 代码如下

总结：写这个需求最重要的是要捋清逻辑 跟传一个标识值让浏览器知道你点击的是谁。判断当null存在设为可售，设为不可售同时存在，当空不存在status为1时候可售跟不可售存在

v-if加||加标识完美解决此次需求