//获取阅读器封面
        this.book.loaded.cover.then (cover => {
          this.book.archive.createUrl (cover).then (url => {
            this.setCover (url);
          })
        });
        //获取图书基本信息
        this.book.loaded.metadata.then (metadata => {
          this.setMetadata (metadata);
        });

export function flatten ( array ) {
  return [].concat(array.map (item => [].concat (item, ...flatten(item.subitems))));
}

 //获取图书列表信息
        this.book.loaded.navigation.then (nav => {
          const navItem = flatten (nav.toc);

          function find ( item, level = 0 ) {
            return !item.parent ? level : find (navItem.filter (parentItem => parentItem.id === item.parent)[ 0 ], ++level);
          }

          navItem.forEach (item => {
            item.level = find (item);
          });
          this.setNavigation(navItem);
        })

const book = {
  fileNames: state => state.book.fileNames,
  menuVisitor: state => state.book.menuVisitor
};

export default book;

import { mapGetters } from "vuex";

//计算属性调用
computed: {
    ...mapGetters(['fileNames', 'menuVisitor'])//vuex插件
  }

**actions.js文件配置**

import { mapActions } from "vuex";
//函数调用
methods: {
    ...mapActions(['setFileName', 'setMenuVisitor'])
  }

import { mapGetters, mapActions } from "vuex";
export const eookMixin = {
  computed: {
    ...mapGetters(['fileNames', 'menuVisitor'])//vuex插件
  },
  methods: {
    ...mapActions(['setFileName', 'setMenuVisitor'])
  }
};

import { eookMixin } from "../../utils/mixin";
export default {
   mixins: [ eookMixin ]
}

import Epub from 'epubjs' //引入epub.js
global.ePub = Epub;

initEpub() {
  // 渲染电子书 epub文件 ，read 渲染位置
   this.rendition = this.book.renderTo('read', {
              width: window.innerWidth,
              height: window.innerHeight,
              method: 'default'// 微信的兼容性，可以在微信上正常使用
            });
   this.rendition.display();

//电子书手势操作
this.rendition.on('touchstart', event => { //点击屏幕时
this.touchStartX = event.changedTouches[0].clientX; //点击的横向x轴位置
this.touchStartTime = event.timeStamp; //点击时间
}

 this.rendition.on('touchend', event => { //移开屏幕时
              event.stopPropagation();
              const offsetX = event.changedTouches[0].clientX - this.touchStartX; //移动范围
              const touchTime = event.timeStamp - this.touchStartTime; //点击时间范围
              //监听左右滑动事件，修改页面
              if(touchTime < 500 && offsetX > 40 ){ 
                this.prevPage();
              } else if (touchTime < 500 && offsetX < -40 ){
                this.nextPage();
              } else {
                this.showTitleAndMenu() //判断是否显示标题和菜单栏
              }
            });
            //阅读器的向前增加一页
            prevPage() {
            this.rendition.prev();
            this.hideTitleAndMenu();
          },
          //阅读器的向后增加一页
          nextPage() {
            this.rendition.next();
            this.hideTitleAndMenu();
          }, 
}

export function gotoStoreHome(vue) {
  vue.$router.push({
    path: '/store/home'
 
``` })
}



### 新增底部编辑组件

新增组件【ShelfFooter.vue】组件

判断在编辑模式下显示，并且新增transition 动画属性，添加显示动画

      move ( e ) {
        let offsetY = 0;
        if (this.firstOffsetY) {
          offsetY = e.changedTouches[ 0 ].clientY - this.firstOffsetY;
          this.setOffsetY (offsetY);
        } else {
          this.firstOffsetY = e.changedTouches[ 0 ].clientY;
        }
        e.preventDefault ();
        e.stopPropagation ();
      },
      moveStart ( e ) {
        this.touchStartX = e.changedTouches[ 0 ].clientX;
        this.touchStartTime = e.timeStamp;
      },
      moveEnd ( e ) {
        this.setOffsetY (0);
        this.firstOffsetY = 0;
        const offsetX = e.changedTouches[ 0 ].clientX - this.touchStartX;
        const touchTime = e.timeStamp - this.touchStartTime;
        if (touchTime < 500 && offsetX > 40) {
          this.prevPage ();
        } else if (touchTime < 500 && offsetX < -40) {
          this.nextPage ();
        }
      },
      onMaskClick ( e ) {
        const offsetX = e.offsetX;
        const width = window.innerWidth;
        if (offsetX > 0 && offsetX < width * 0.3) {
          this.prevPage ();
        } else if (offsetX > 0 && offsetX > width * 0.7) {
          this.nextPage ();
        } else {
          this.showTitleAndMenu ();
        }
      },

restore () {
        //归位：状态4
        setTimeout (() => {
          this.$refs.ebookBookmark.style.top = `${-this.height}px`;
          this.$refs.ebookBookmark.style.transform = `rotate(0deg)`;
        }, 200);
        if (this.isFlexed) {
          this.setIsBookmark (true);
          this.flexStyle.top=`${this.height}px`;
        } else {
          this.setIsBookmark (false);
        }
      },
      beforeHeight () {
        //恢复状态：状态1
        if (this.isBookmark) {
          this.text = this.$t ('book.pulldownDeleteMark');
          this.markColor = '#0070ff';
          this.isFlexed = true
        } else {
          this.text = this.$t ('book.pulldownAddMark');
          this.markColor = '#333333';
          this.isFlexed = false;
        }
      },
      beforeThreshold ( v ) {
        //未到达临界状态 ,
        this.$refs.ebookBookmark.style.top = `${-v}px`;
        this.beforeHeight ();
        this.flexStyle.top=`${this.height - 28}px`;
        const iconDown = this.$refs.iconDown;
        if (iconDown.style.transform === 'rotate(180deg)') {
          iconDown.style.transform = 'rotate(0deg)';
        }
      },
      afterThreshold ( v ) {
        //超越临界状态
        this.$refs.ebookBookmark.style.top = `${-v}px`;
        if (this.isBookmark) {
          this.text = this.$t ('book.releaseDeleteMark');
          this.markColor = '#333333';
          this.isFlexed = false;
          this.flexStyle.top=`${this.height - 28}px`;
        } else {
          this.text = this.$t ('book.releaseAddMark');
          this.markColor = '#0070ff';
          this.isFlexed = true;
          this.flexStyle.top=`${this.height}px`;
        }
        const iconDown = this.$refs.iconDown;
        if (iconDown.style.transform === '' || iconDown.style.transform === 'rotate(0deg)') {
          iconDown.style.transform = 'rotate(180deg)';
        }
      }

shelfCategory: [], // 书架分类列表数据
currentType: 1 // 书架列表为1，书架分类列表为2

getCategoryList ( title ) {
        const categoryList = this.shelfList.filter (book => book.type === 2 && book.title === title)[ 0 ]
        this.setShelfCategory (categoryList)
    },

props: {
      title: String,
      isShowBack: {
        type: Boolean,
        default: false
      }
    }

computed: {
      item () {
        return this.data.type === 1 ? this.book : ( this.data.type === 2 ? this.category : this.add );
      }

      addBookMark () {
        this.bookmark = getBookmark (this.fileName);
        if ( !this.bookmark) {
          this.bookmark = [];
        }
        const currentLocation = this.currentBook.rendition.currentLocation ();
        const cfiBase = currentLocation.start.cfi.replace (/!.*/, '');
        const cfiStart = currentLocation.start.cfi.replace (/.*!/, '').replace (/\)$/, '');
        const cfiEnd = currentLocation.end.cfi.replace (/.*!/, '').replace (/\)$/, '');
        const cfiRange = `${cfiBase}!,${cfiStart},${cfiEnd})`;
        this.currentBook.getRange (cfiRange).then (range => {
          const text = range.toString ().replace (/\s\s/g, '');
          this.bookmark.map (item => {
            if (item.cfi === currentLocation.start.cfi) return;
          });
          this.bookmark.push ({
            cfi: currentLocation.start.cfi,
            text: text
          });
          saveBookmark (this.fileName, this.bookmark);
        })
      },

 getList() {
        list().then(response => {
          this.list = response.data.data
          this.total = response.data.total
          const category = this.$route.query.category
          const keyword = this.$route.query.keyword
          if (category) {
            // 如果用户传入了分类数据，则从结果中搜索相应的分类数据并进行展示
            const key = Object.keys(this.list).filter(item => item === category)[0]
            const data = this.list[key]
            this.list = {}
            this.list[key] = data
          } else if (keyword) {
            // 如果用户输入了关键字，则通过书名进行关键字匹配（搜索算法）
            Object.keys(this.list).filter(key => {
              this.list[key] = this.list[key].filter(book => book.fileName.indexOf(keyword) >= 0)
              return this.list[key].length > 0
            })
          }
        })
      }

prevSection () {
        if (this.section > 0 && this.bookAvailable) {
          this.setSection (this.section - 1).then (() => {
            this.displaySection ();
          })
        }
      },
      nextSection () {
        if (this.section < this.currentBook.spine.length - 1 && this.bookAvailable) {
          this.setSection (this.section + 1).then (() => {
            this.displaySection ();
          })
        }

refreshLocation () {
      const currentLocation = this.currentBook.rendition.currentLocation ();
      const startCfi = currentLocation.start.cfi;
      const progress = this.currentBook.locations.percentageFromCfi (startCfi);
      this.setProgress (Math.floor (progress * 100));
      this.setSection (currentLocation.start.index);
      saveLocation (this.fileName, startCfi);
    },

  renditionDisplay ( target, cb ) {
      if (target) {
        this.currentBook.rendition.display (target).then (() => {
          this.refreshLocation ();
          if (cb) cb ();
        })
      } else {
        this.currentBook.rendition.display ().then (() => {
          this.refreshLocation ();
          if (cb) cb ();
        })
      }
    },

initRendition () {
        this.rendition = this.book.renderTo ('read', {
          width: window.innerWidth,
          height: window.innerHeight,
          method: 'default'// 微信的兼容性，可以在微信上正常使用
        });
        const location = getLocation (this.fileName);
        this.renditionDisplay (location, () => {
          this.initFontSize ();
          this.initFontFamily ();
          this.initTheme ();
          this.initGlobStyle ();
        });

import CreateAPI from 'vue-create-api';
import Vue from 'vue'
import Toast from "../components/common/Toast";
import Popup from "../components/common/Popup";

Vue.use (CreateAPI);
Vue.createAPI (Toast, true);
Vue.createAPI (Popup, true);
Vue.mixin ({
  methods: {
    toast ( setting ) {
      return this.$createToast ({
        $props: setting
      })
    },
    popup ( setting ) {
      return this.$createPopup ({
        $props: setting
      })
    },
    simpToast ( text ) {
      this.toast ({
        text: text
      }).show ();
    }
}
});

showPrivate () {
        this.popupMenu = this.popup ({
          title: this.isPrivate ? this.$t ('shelf.closePrivateTitle') : this.$t ('shelf.setPrivateTitle'),
          btn: [
            {
              text: this.isPrivate ? this.$t ('shelf.close') : this.$t ('shelf.open'),
              click: () => {
                this.setPrivate ()
              }
            },
            {
              text: this.$t ('shelf.close'),
              click: () => {
                this.toast ({text: '正在取消'}).show ();
                this.hidePopup ()
              }
            },
          ]
        }).show ()
      },
      showDownLoad () {
        this.popupMenu = this.popup ({
          title: this.isDownload ? this.$t ('shelf.removeDownloadTitle') : this.$t ('shelf.setDownloadTitle'),
          btn: [
            {
              text: this.isDownload ? this.$t ('shelf.delete') : this.$t ('shelf.open'),
              click: () => {
                this.setDownload ()
              }
            },
            {
              text: this.$t ('shelf.close'),
              click: () => {
                this.toast ({text: '正在取消'}).show ();
                this.hidePopup ()
              }
            },
          ]
        }).show ()
      },
      showRemove () {
        let title;
        if (this.shelfSelected.length === 1) {
          title = this.$t ('shelf.removeBookTitle').replace ('$1', `《${this.shelfSelected[ 0 ].title}》`)
        } else {
          title = this.$t ('shelf.removeBookTitle').replace ('$1', this.$t ('shelf.selectedBooks'))
        }
        this.popupMenu = this.popup ({
          title: title,
          btn: [
            {
              text: this.$t ('shelf.removeBook'),
              type: 'danger',
              click: () => {
                this.setRemoveSelect ()
              }
            },
            {
              text: this.$t ('shelf.close'),
              click: () => {
                this.toast ({text: '正在取消'}).show ();
                this.hidePopup ()
              }
            },
          ]
        }).show ()
      },

computed: {
      selectedText () {
        const selectedNumber = this.shelfSelected ? this.shelfSelected.length : '0';
        return selectedNumber <= 0 ? this.$t ('shelf.selectBook') : selectedNumber === 1 ? this.$t ('shelf.haveSelectedBook').replace ('$1', selectedNumber) : this.$t ('shelf.haveSelectedBooks').replace ('$1', selectedNumber);
      }
    },

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from './en'
import cn from './cn'
import { getLocale, saveLocale } from '../utils/localStorage'

Vue.use(VueI18n);

const messages = {
  en, cn
};

let locale = getLocale();
if (!locale) {
  locale = 'en';
  saveLocale(locale)
}

const i18n = new VueI18n({
  locale,
  messages
});

export default i18n

@change="onProgressChange($event.target.value)" 
@input="onProgressInput($event.target.value)"

 displayProgress () {
        const cfi = this.currentBook.locations.cfiFromPercentage (this.progress / 100);
        this.currentBook.rendition.display (cfi);
      }

const cfi = this.currentBook.locations.cfiFromPercentage (this.progress / 100);
this.currentBook.rendition.display (cfi);

this.currentBook.locations.cfiFromPercentage (this.progress / 100

    // 1- 鼠标进入
      // 2- 鼠标进入后的移动
      // 3- 鼠标从移动状态松手
      // 4- 鼠标还原
      onMouseMove ( e ) {
        if (this.moveState === 1) {
          this.moveState = 2
        } else if (this.moveState === 2) {
          let offsetY = 0;
          if (this.firstOffsetY) {
            offsetY = e.clientY - this.firstOffsetY;
            this.setOffsetY (offsetY);
          } else {
            this.firstOffsetY = e.clientY;
          }
        }
        e.preventDefault ();
        e.stopPropagation ();
      },
      onMouseEnter ( e ) {
        this.moveState = 1;
        this.moveStateTime = e.timeStamp;
        e.preventDefault ();
        e.stopPropagation ();
      },
      onMouseEnd ( e ) {
        if (this.moveState === 2) {
          this.setOffsetY (0);
          this.firstOffsetY = 0;
          this.moveState = 3;
        };
        const time = e.timeStamp - this.moveStateTime;
        if (time <= 200) {
          this.moveState = 4;
        }
        e.preventDefault ();
        e.stopPropagation ();
      },

 {
    path: '/store',
    component: () => import('../views/store/index'),
    children: [
      {
        path: 'home',
        component: () => import('../views/store/storeHome')
      }
    ]
  }

export const Font_SIZE_LIST= [
  { fontSize : 12 },
  { fontSize : 14 },
  { fontSize : 16 },
  { fontSize : 18 },
  { fontSize : 20 },
  { fontSize : 22 },
  { fontSize : 24 }
];

export const FONT_FAMILY = [
  { font: 'Default' },
  { font: 'Cabin' },
  { font: 'Days One' },
  { font: 'Montserrat' },
  { font: 'Tangerine' }
];

import localForage from 'localforage'

export function setLocalForage(key, data, cb, cb2) {
  localForage.setItem(key, data).then((value) => {
    if (cb) cb(value)
  }).catch(function(err) {
    if (cb2) cb2(err)
  })
}

export function getLocalForage(key, cb) {
  localForage.getItem(key, (err, value) => {
    cb(err, value)
  })
}

export function removeLocalForage(key, cb, cb2) {
  localForage.removeItem(key).then(function() {
    if (cb) cb()
  }).catch(function(err) {
    if (cb2) cb2(err)
  })
}

export function clearLocalForage(cb, cb2) {
  localForage.clear().then(function() {
    if (cb) cb()
  }).catch(function(err) {
    if (cb2) cb2(err)
  })
}

export function lengthLocalForage(cb) {
  localForage.length().then(
    numberOfKeys => {
      if (cb) cb(numberOfKeys)
      // console.log(numberOfKeys)
    }).catch(function(err) {
      if (err) {}
    // console.log(err)
  })
}

export function iteratorLocalForage() {
  localForage.iterate(function(value, key, iterationNumber) {
    // console.log([key, value])
  }).then(function() {
    // console.log('Iteration has completed')
  }).catch(function(err) {
    if (err) {}
    // console.log(err)
  })
}

export function support() {
  const indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || null
  if (indexedDB) {
    return true
  } else {
    return false
  }
}

export function download ( book, onSuccess, onError, onProgress ) {
  if ( !onProgress) {
    onProgress = onError;
  }
  return axios.create ({
    baseURL: process.env.VUE_APP_EPUB_URL,
    method: 'get',
    responseType: 'blob',
    timeout: 180 * 1000,
    onDownloadProgress: progressEvent => {
      if (onProgress) onProgress (progressEvent)
    }
  }).get (`${book.categoryText}/${book.fileName}.epub`).then (res => {
    const blob = new Blob ([res.data]);
    setLocalForage (book.filename, blob, () => {
      if (onSuccess) onSuccess (book)
    }, err => {
      if (onError) onError (err)
    })
    if (onSuccess) onSuccess (res)
  }).catch (err => {
    if (onError) onError (err)
  })
}

async downloadSelectedBook () {
        for (let i = 0; i < this.shelfSelected.length; i++) {
          await this.downloadBook (this.shelfSelected[ i ]).then (book => {
            book.cache = true;
          })
        }
      },
      downloadBook ( book ) {
        let text = '';
        const toast = this.toast ({
          text
        });
        toast.continueShow ();
        return new Promise (( resolve, reject ) => {
          download (book, () => {
            toast.remove ();
            resolve (book)
          }, progressEvent => {
            const process = Math.floor (progressEvent.loaded / progressEvent.total * 100) + '%';
            text = this.$t ('shelf.progressDownload').replace ('$1', `${book.fileName}.epub(${process})`);
            toast.updateText (text);
          })
        })
      },

removeSelectedBook () {
        Promise.all (this.shelfSelected.map (book => this.removeBook (book))).then (books => {
          books.map (book => {
            book.cache = false;
          });
          saveBookShelf (this.shelfList);
          this.simpToast (this.$t ('shelf.removeDownloadTitle'));
        })
      },
      removeBook ( book ) {
        return new Promise (( resolve, reject ) => {
          removeLocalStorage (`${book.categoryText}/${book.fileName}`);
          removeLocalForage (`${book.fileName}`, resolve, reject);
          resolve (book)
        })
      },

moveToGroup(group) {
        this.setShelfList(this.shelfList
          .filter(book => {
            if (book.itemList) {
              book.itemList = book.itemList.filter(subBook => this.shelfSelected.indexOf(subBook) < 0)
            }
            return this.shelfSelected.indexOf(book) < 0
          }))
          .then(() => {
            if (group && group.itemList) {
              group.itemList = [...group.itemList, ...this.shelfSelected]
            }
            group.itemList.forEach((item, index) => {
              item.id = index + 1
            })
            this.simpleToast(this.$t('shelf.moveBookInSuccess').replace('$1', group.title))
            this.onComplete()
          })
      },

 createNewGroup() {
        if (!this.newGroupName || this.newGroupName.length === 0) {
          return
        }
        if (this.showNewGroup) {
          this.shelfCategory.title = this.newGroupName
          this.onComplete()
        } else {
          const group = {
            id: this.shelfList[this.shelfList.length - 2].id + 1,
            itemList: [],
            selected: false,
            title: this.newGroupName,
            type: 2
          };
          let list = removeAddFromShelf(this.shelfList)
          list.push(group)
          list = appendAddToShelf(list)
          this.setShelfList(list).then(() => {
            this.moveToGroup(group)
          })
        }
      },

export function addCss ( href ) {
  const link = document.createElement ('link');
  link.setAttribute ('rel', 'stylesheet');
  link.setAttribute ('type', 'text/css');
  link.setAttribute ('href', href);
  document.getElementsByTagName ('head')[ 0 ].appendChild (link);
}


export function removeCss ( href ) {
  const links = document.getElementsByTagName ('link');
  for (let i = links.length; i >= 0; i--) {
    const link = links[ i ];
    if (link && link.getAttribute ('href') && link.getAttribute ('href') === href) {
      link.parentNode.removeChild (link);
    }
  }
}

export function removeAllCss () {
  removeCss (`${process.env.VUE_APP_RES_URL}/theme/theme_default.css`);
  removeCss (`${process.env.VUE_APP_RES_URL}/theme/theme_gold.css`);
  removeCss (`${process.env.VUE_APP_RES_URL}/theme/theme_eye.css`);
  removeCss (`${process.env.VUE_APP_RES_URL}/theme/theme_night.css`);
}

  home ().then (response => {
        if (response && response.status === 200) {
          const data = response.data;
          const randomIndex = Math.floor (Math.random () * data.random.length);
          this.random = data.random[ randomIndex ];
          this.banner = data.banner;
          this.guessYouLike = data.guessYouLike;
          this.recommend = data.recommend;
          this.featured = data.featured;
          this.categoryList = data.categoryList;
          this.categories = data.categories;
        }

init () {
        // 获取电子书书名
        this.fileName = this.$route.query.fileName;
        // 获取电子书分类
        this.categoryText = this.$route.query.category;
        if (this.fileName) {
          // 请求API，获取电子书详情数据
          detail ({
            fileName: this.fileName
          }).then (response => {
            if (response.status === 200 && response.data.error_code === 0 && response.data.data) {
              const data = response.data.data
              console.log (data);
              // 保存电子书详情数据
              this.bookItem = data
              // 获取封面数据
              this.cover = this.bookItem.cover
              // 获取rootFile数据
              let rootFile = data.rootFile
              if (rootFile.startsWith ('/')) {
                rootFile = rootFile.substring (1, rootFile.length)
              }
              // 根据rootFile拼接出opf文件路径
              this.opf = `${process.env.VUE_APP_EPUB_OPF_URL}/${this.fileName}/${rootFile}`
              // 解析电子书
              this.parseBook (this.opf)
            } else {
              // 请求失败时打印错误提示
              this.showToast (response.data.msg)
            }
          })
        }
      },

semiCircleStyle ( item, dir ) {
        return {
          backgroundColor: `rgba(${item.r},${item.g},${item.b})`,
          backgroundSize: item.backgroundSize,
          backgroundImage: dir === 'left' ? item.imgLeft : item.imgRight,
        }
      },
      rotate ( index, type ) {
        const item = flapCardList[ index ];
        let dom;
        if (type === 'front') {
          dom = this.$refs.right[ index ]
        } else {
          dom = this.$refs.left[ index ]
        }
        dom.style.transform = `rotateY(${item.rotateDegree}deg)`;
        dom.style.backgroundColor = `rgb(${item.r},${item._g},${item.b})`
      },
      flapCardRotate () {
        const frontFlapCard = this.flapCardList[ this.front ];
        const backFlapCard = this.flapCardList[ this.back ];
        frontFlapCard.rotateDegree += 10;
        frontFlapCard._g -= 5;
        backFlapCard.rotateDegree -= 10;
        if (backFlapCard.rotateDegree < 90) {
          backFlapCard._g += 5;
        }
        if (frontFlapCard.rotateDegree === 90 && backFlapCard.rotateDegree === 90) {
          backFlapCard.zIndex += 2;
        }
        this.rotate (this.front, 'front');
        this.rotate (this.back, 'back');
        if (frontFlapCard.rotateDegree === 180 && backFlapCard.rotateDegree === 0) {
          this.next ();
        }
      },
      next () {
        const frontFlapCard = this.flapCardList[ this.front ];
        const backFlapCard = this.flapCardList[ this.back ];
        frontFlapCard.rotateDegree = 0;
        frontFlapCard._g = frontFlapCard.g;
        backFlapCard.rotateDegree = 0;
        backFlapCard._g = backFlapCard.g;
        this.rotate (this.front, 'front');
        this.rotate (this.back, 'back');
        this.front++;
        this.back++;
        const len = this.flapCardList.length;
        if (this.front >= len) {
          this.front = 0
        }
        if (this.back >= len) {
          this.back = 0;
        }
        //z-index
        // 100 -> 96
        // 99 ->100
        // 98 ->99
        // 97 -> 98
        this.flapCardList.forEach (( item, index ) => {
          item.zIndex = 100 - ( ( index - this.front + len ) % len );
        });
        this.prepare ();
      },
      prepare () {
        const backFlapCard = this.flapCardList[ this.back ];
        backFlapCard.rotateDegree = 180;
        backFlapCard._g = backFlapCard.g - 5 * 9;
        this.rotate (this.back, 'back');
      },
      reset () {
        this.front = 0;
        this.back = 1;
        flapCardList.forEach (( item, index ) => {
          item.zIndex = 100 - index;
          item._g = item.g;
          item.rotateDegree = 0;
          this.rotate (index, 'left');
          this.rotate (index, 'right');
        })
      },
      startFlapCardAnimate () {
        this.prepare ();
        this.task = setInterval (() => {
          this.flapCardRotate ();
        }, this.intervalTime)
      },
      stopFlapAnimate () {
        if (this.task) {
          clearInterval (this.task);
        }
        this.reset ()
      }

 doSearch ( q ) {
        return Promise.all (
          this.currentBook.spine.spineItems.map (item => item.load (this.currentBook.load.bind (this.currentBook)).then (item.find.bind (item, q)).finally (item.unload.bind (item)))
        ).then (results => Promise.resolve ([].concat.apply ([], results)));
      },

seach () {
        if (this.searchText !== '' && this.searchText.length > 0) {
          this.currentBook.ready.then (() => {
            this.doSearch (this.searchText).then (result => {
              this.searchList = result;
              this.searchList.map (item => {
                item.excerpt = item.excerpt.replace (this.searchText, `<span class="content-search-text">${this.searchText}</span>`);
                return item;
              });
            })
          })
        }
      }

switchChapters ( navigation, highLight = false ) {
        this.renditionDisplay (navigation, () => {
          this.hideTitleAndMenu ();
          if (highLight) {
            this.currentBook.rendition.annotations.highlight (navigation);
          }
        });
      },

mounted () {
      this.task = setInterval (() => {
        this.$refs.mask.forEach (( item, index ) => {
          const mask = this.$refs.mask[ index ];
          const line = this.$refs.line[ index ];
          let maskWidth = this.maskWidth[ index ];
          let lineWidth = this.lineWidth[ index ];
          if (index === 0) {
            if (this.add && maskWidth.value < 56) {
              maskWidth.value++;
              lineWidth.value--
            } else if ( !this.add && lineWidth.value < 56) {
              maskWidth.value--;
              lineWidth.value++
            }
          } else {
            if (this.add && maskWidth.value < 56) {
              let preMaskWidth = this.maskWidth[ index - 1 ];
              if (preMaskWidth.value >= 28) {
                maskWidth.value++
                lineWidth.value--
              }
            } else if ( !this.add && lineWidth.value < 56) {
              let preLineWidth = this.lineWidth[ index - 1 ];
              if (preLineWidth.value >= 28) {
                maskWidth.value--
                lineWidth.value++
              }
            }
          }
          mask.style.width = `${px2rem (maskWidth.value)}rem`;
          mask.style.flex = `0 0 ${px2rem (maskWidth.value)}rem`;
          line.style.width = `${px2rem (lineWidth.value)}rem`;
          line.style.flex = `0 0 ${px2rem (lineWidth.value)}rem`;
          if (index === this.maskWidth.length - 1) {
            if (this.add) {
              if (maskWidth.value === 56) {
                this.end = true
              }
            } else {
              if (maskWidth.value === 0) {
                this.end = true
              }
            }
          }
          if (this.end) {
            this.add = !this.add;
            this.end = false
          }
        })
      }, 5)
    },

    watch: {
      offsetY ( offsetY ) {
        if (offsetY > 0) {
          this.hideTitle ();
          this.showShadow ();
        } else {
          this.showTitle ();
          this.hideShadow ();
        }
      },
      hotSearchOffsetY ( offsetY ) {
        if (offsetY > 0) {
          this.showShadow ();
        } else {
          this.hideShadow ();
        }
      }
    },
    data () {
      return {
        searchText: '',
        titleVisible: true,
        shadowVisible: false,
        hotSearchVisible: false
      }
    },
    methods: {
      back () {
        this.hideHotSearchVisible ();
      },
      hideHotSearchVisible () {
        this.hotSearchVisible = false;
        if (this.offsetY > 0) {
          this.hideTitle ();
          this.showShadow ();
        } else {
          this.showTitle ();
          this.hideShadow ();
        }
      },
      showHotSearchVisible () {
        this.hideTitle ();
        this.hideShadow ();
        this.hotSearchVisible = true;
        this.$nextTick (() => {
          this.$refs.hotSearch.reset ()
        });
      },
      showTitle () {
        this.titleVisible = true
      },
      hideTitle () {
        this.titleVisible = false
      },
      hideShadow () {
        this.shadowVisible = false
      },
      showShadow () {
        this.shadowVisible = true;
      }
    },