五、书架开发--3.弹出框功能开发、离线缓存功能开发

实现弹出框真实业务逻辑

私密阅读tab业务逻辑

1、根据点击的tab不同，从而展示出不同的popup弹窗

每个tab中都有自己的index，点击的时候获取这个index，就可以知道当前点击的是哪个tab，然后用switch-case来根据不同的index展示不同的popup弹窗。

首先在点击tab事件中，有图书被选中了才行，所以没有图书被选中就return，然后需要根据你选中的是哪个tab从而展示不同的弹窗，所以我们需要通过switch-case如下根据tab的index不同从而展示不同的东西

我们先做点击tab的逻辑，点击tab1就展示tab1的弹窗，我们把展示tab1弹窗封装为一个方法，该方法中就是我们之前做的调用create-api的this.popup()然后往里传标题和按钮文字这些；然后开启按钮我们需要做开启私密阅读的相关逻辑我们先封装为setPrivate()方法，取消按钮我们就关闭弹窗就好了所以调用hidePopup()

2、私密阅读中点击开启按钮的逻辑实现

点击(关闭)私密阅读这个tab，出现弹框后点击里面的开启按钮，从而需要展示的交互逻辑：

开启私密阅读的逻辑其实就是，看我们当前选中的图书们中每个图书的private字段（private为true表明这本书是私密阅读状态，为false即不是私密阅读状态）。

如果都是私密阅读状态，那我们tab中展示的文本应该是关闭私密阅读，然后我们点击关闭私密阅读中的开启按钮，则是要关闭私密阅读，所以被选中的书们会变成不是私密阅读状态的图书，所以我们要把这些被选中的图书们的private字段都置为false，最后展示toast的提示文本；

如果其中有书不是私密阅读状态，那我们tab中展示的文本应该是开启私密阅读，然后我们点击私密阅读中的开启按钮，则是要开启私密阅读，所以被选中的书们会变成私密阅读状态的图书，所以我们要把这些被选中的图书们的private字段都置为true，最后展示toast的提示文本

在做真实项目的时候，这个private一旦置为false以后我们还要调用一个接口回传到数据库里面，然后后端给我们做一些处理。

这里分为以下几点：

第一点：需要判断被选中的图书们的私密阅读状态

我们设计一个计算属性isPrivate(){}来计算被选中的图书们，循环遍历用every判断。如果图书们都是私密阅读状态，那么就返回true；如果图书们中但凡有一个不是私密阅读状态，那么就返回false

第二点：需要定义一个isPrivate变量来记录被选中图书们此时的私密阅读状态应该是什么

因为很多时候要知道这些被选中图书们的私密状态从而做一些逻辑判断，我们定义一个变量记录它就方便使用，不然得去一遍遍循环判断被选中图书们的状态不方便。

定义一个变量叫isPrivate，因为这个变量随时会变所以用let。然后根据前面的计算属性isPrivate()判断，如果计算属性中返回的是true则说明图书们都是私密阅读状态，后面我们点击的就是开启私密阅读，所以就把定义的这个变量isPrivate置为false（表示不需要开启私密阅读此时是私密阅读状态）；如果计算属性中返回的是false则说明图书们有的不是私密阅读状态，后面我们点击的就是开启私密阅读，所以就把定义的这个变量isPrivate置为true（表示需要开启私密阅读此时不是私密阅读状态）

第三点：修改被选中的图书们的private字段

去遍历被选中的图书们，将isPrivate变量赋值给图书的private字段；然后你修改了书架数据，所以我们修改后把书架数据缓存到localstore中

第四点：tab中展示'私密阅读'还是'关闭私密阅读'

根据isPrivate变量判断，如果是true则表示当前被选中的图书们都是私密阅读状态，那么tab中就应该展示'关闭私密阅读'；如果是false则表示当前选中的图书们有的是非私密阅读状态，那么tab中就应该展示'私密阅读'

第五点：点击popup弹窗按钮后弹出不同文本的toast弹窗

根据isPrivate变量判断，如果是true则表示当前被选中的图书们都是私密阅读状态，那么tab中是关闭私密阅读，所以点击popup弹框的开启按钮后，应该是展示'关闭私密阅读成功'的提示；如果是false则表示当前被选中的图书们有的是非私密阅读状态，那么tab中是私密阅读，所以点击popup弹框的开启按钮后，应该是展示'开启私密阅读成功'的提示；

如下，点击第五本书，当前这本书是非私密阅读状态，然后tab正确展示私密阅读，然后点击私密阅读，点击开启（即要把这本书设置为私密阅读），然后就可以看到这本书的private字段为true即为私密阅读状态了，而且toast展示已开启私密阅读

再次点击这本书，此时这本书是私密阅读状态，此时tab就显示关闭私密阅读，点击开启即展示关闭私密阅读成功啦

3、缓存弹出框实现思路也类似

1. 设置根据点击的tab2展示缓存弹窗

2. tab2的popup弹窗的内容

3. 定义一个计算属性判断被选中图书们是否全是缓存状态

4. 点击弹窗开启/删除按钮要实现的逻辑、toast弹框提示

5. tab栏文字的切换

上面状态的切换完成了，但是我们还要完成实际的下载，就先留着等一下再做

4、加入/移除书架

也是同理