2021-12-25

作者: 李先生1818 | 来源:发表于2021-12-25 17:54 被阅读0次

【早安心语】
幸福日记
《句句成章》39 看了想笑
2021-12-25
《金吾生〈庄子发微〉日课23.2021-12-25》
初三圣诞节
2022-01-08《中国古建筑二十讲》
第399篇｜【岁月守候】明天就是新的一年，我为所有亲人祈福！
写给先生（119）
2021-12-25圣诞节开始写书，为什么要写书？因为这是我的使

<template>
  <div class="ebook">
    <title-bar :ifTitleAndMenuShow="ifTitleAndMenuShow"></title-bar>
    <div class="read-wrapper">
      <p class="progressVal">{{this.progressVal>=0 ? progressVal+'%' : 'Loading...'}}</p>
      <div id='read'>
        <Loading :isShowLoading = 'isShowLoading' ></Loading>

      </div>
<!--      <div class="mask">-->
<!--        <div class="left" @click="prevPage"></div>-->
<!--        <div class="center" @click="toggleTitleAndMenu"></div>-->
<!--        <div class="right" @click="nextPage"></div>-->
<!--      </div>-->
    </div>

    <menu-bar
      :ifTitleAndMenuShow="ifTitleAndMenuShow"
      :fontSizeList="fontSizeList"
      :defaultFontSize="defaultFontSize"
      @setFontSize="setFontSize"
      :themeList="themeList"
      :defaultTheme="defaultTheme"
      @setTheme="setTheme"
      :bookAvailable="bookAvailable"
      @onProgressChange="onProgressChange"
      :progress='progressVal'
      :navigation="navigation"
      @jumpTo="jumpTo"
      ref="menuBar"
    ></menu-bar>
  </div>
</template>

<script>
import TitleBar from '@/components/TitleBar';
import MenuBar from '@/components/MenuBar';
import Loading from '@/components/Loading';
import Epub from 'epubjs';
const DOWNLOAD_URL = 'static/bookNew.epub'  //载入下载电子书
// const DOWNLOAD_URL = 'http://uat.imss.huawei.com/dzs/ebook333.epub'  //载入下载电子书
global.ePub = Epub;   // 设置全局的ePub对象
/*eslint-disable space-before-funtion-paren */
export default {
  components: {
    TitleBar,
    MenuBar,
    Loading
  },
  data () {
    return {
      progressVal: 0,
      ifTitleAndMenuShow: false,
      isShowLoading:true,
      fontSizeList: [
        {fontSize: 12},
        {fontSize: 14},
        {fontSize: 16},
        {fontSize: 18},
        {fontSize: 20},
        {fontSize: 22},
        {fontSize: 24}
      ],
      defaultFontSize: 16,
      themeList: [
        {
          name: 'default',
          style: {
            body: {
              'color': '#000', background: '#fff'
            }
          }
        },
        {
          name: 'eye',
          style: {
            body: {
              'color': '#000', background: '#ceeaba'
            }
          }
        },
        {
          name: 'night',
          style: {
            body: {
              'color': '#fff', background: '#000'
            }
          }
        },
        {
          name: 'gold',
          style: {
            body: {
              'color': '#000', background: 'rgb(241,236,226)'
            }
          }
        },
      ],
      defaultTheme: 0,
      bookAvailable: false,
      navigation: null,
      name: 'touch',
      Link:'',
      isRead:false, //标记之前是否有阅读记录
      currProgress:null,
      clearLocationChange:null, //清楚定时器
      clearlocalStorageData:null
    }
  },
  mounted () {
    this.Link = this.$route.query.Link;
    let currTheme = localStorage.getItem('currTheme');
    let currFontSize = localStorage.getItem('currFontSize');

    let progressV = localStorage.getItem('currProgress');
    if(progressV === null){ //第一次用电子书
      this.setLocalStorage(0);
      this.currProgress = JSON.parse(localStorage.getItem('currProgress'));
    }else { //非第一次打开电子书
      this.currProgress = JSON.parse(localStorage.getItem('currProgress'));

      var promiss = new Promise((resolve, reject)=>{
        let flag = 0
        this.currProgress.forEach((item,index)=>{
          flag ++;
          if(item.Link === this.Link){ //相等说明以前看过这本书
            console.log(item.Link,789)
            this.isRead = true;
          }
          if(flag === this.currProgress.length){
            resolve(true)
          }
        })
      })
      promiss.then((data)=>{
        console.log(data,this.currProgress)
        if(data && !this.isRead){ //data为true只能说明循环结束,不能说能看过此书
          this.currProgress.push({
            Link:this.Link,
            readInfo:0 ,
            Time:Date.parse(new Date())
          })
          localStorage.setItem('currProgress',JSON.stringify(this.currProgress));
        }
      })

    }

    if (currTheme !== null) {
      this.defaultTheme = currTheme * 1
    } else {
      localStorage.setItem('currTheme', 0)
      this.defaultTheme = 0
    }
    if (currFontSize !== null) {
      this.defaultFontSize = currFontSize * 1;
    } else {
      localStorage.setItem('currFontSize', 16);
      this.defaultFontSize = 16;
    }
    this.$nextTick(() => {
      this.showEpub()
    })
  },
  methods: {
    onLocationChange () {
      let curLocation = this.rendition.currentLocation()
      if(curLocation.start){
        let pro = (Math.floor(this.locations.percentageFromCfi(curLocation.start.cfi) * 10000) / 100);
        this.progressVal = pro>1 ? pro.toFixed(0)*1 : pro.toFixed(1)*1;
      }
    },
    localStorageData(){
      let curLocation = this.rendition.currentLocation();
      this.currProgress = JSON.parse(localStorage.getItem('currProgress'));
      console.log(this.currProgress,1111)
       this.currProgress.forEach((item,index)=>{
          if(item.Link === this.Link){ //修改缓存的页码值
            console.log(item.Link,789)
            if(curLocation.start){
              this.currProgress[index].readInfo = curLocation.start.cfi;
              localStorage.setItem('currProgress',JSON.stringify(this.currProgress));
              // this.setLocalStorage(curLocation.start.cfi);
            }
          }
        })
    },

    setLocalStorage(readInfo){
      localStorage.setItem('currProgress',JSON.stringify([{
        Link:this.Link,
        readInfo:readInfo ,
        Time:Date.parse(new Date())
      }]));

    },
    initReadProgress(){
      this.currProgress = JSON.parse(localStorage.getItem('currProgress'));
      this.currProgress.forEach((item,index)=>{
          if(item.Link === this.Link){ //相等说明以前看过这本书
            this.rendition.display(item.readInfo);
          }
        })
    },


    // 电子书的解析和渲染
    showEpub(){
      let _this = this;
      // 生成Book对象
      // this.book = new Epub('static/epub777777.epub', {openAs: 'epub'})
      this.book = new Epub(this.Link, {openAs: 'epub'})
      console.log(this.$route.query.Link)
      // this.book = new Epub('http://uat.imss.huawei.com/eBook/test/ebook_1.epub',{ openAs: "epub" })
      // 通过Book.renderTo生成Rendition对象
      this.rendition = this.book.renderTo('read', {
        width: window.innerWidth,
        height: window.innerHeight,
        // 兼容iOS
        method: 'default',
        allowScriptedContent: true,
        flow: 'paginated',
        manager: 'continuous',
        snap: true,
      })
        // 通过Rendtion.display渲染电子书
        this.rendition.display()
        // 获取Theme对象
        this.themes = this.rendition.themes
        // 设置默认字体
        this.setFontSize(this.defaultFontSize)
        // 注册主题
        this.registerTheme()
        // 设置默认主题
        this.setTheme(this.defaultTheme)
        // Book对象的钩子函数ready
        this.book.ready.then(() => {
          this.navigation = this.book.navigation
          // 生成Locations对象
          return this.book.locations.generate()
        }).then(result => {
          // 保存locations对象
          this.locations = this.book.locations
          this.isShowLoading = false;
          this.$forceUpdate()
          this.clearLocationChange = setInterval(function(){
            _this.onLocationChange(); //计算当前进度,不是好方法
            // console.log(_this.rendition)
          },1000)
          this.clearlocalStorageData = setInterval(function(){
            _this.localStorageData(); //自动缓存本书当前进度
          },10000)
          if(this.isRead){
            this.initReadProgress(); //跳转之前阅读记录
          }

          // 标记电子书为解析完毕状态
          this.bookAvailable = true
        })
        this.rendition.on('click', (rendition, iframe) => {
          this.toggleTitleAndMenu()
        })
      },

      //翻页功能
      prevPage(){
        // rendition.prev方法实现上一页
        if (this.rendition) {
          this.ifTitleAndMenuShow = false
          this.rendition.prev()
        }
      },
      nextPage(){
        //rendition.next方法实现下一页
        if (this.rendition) {
          this.ifTitleAndMenuShow = false
          this.rendition.next()
        }
      },
      //标题栏和菜单栏
      toggleTitleAndMenu(){
        //切换
        this.ifTitleAndMenuShow = !this.ifTitleAndMenuShow
        if (!this.ifTitleAndMenuShow) {
          //ref 加在子组件上,获取到的是组件实例,可以使用组件的所有方法,this.$refs.(ref值).组件方法,。
          this.$refs.menuBar.hideSetting()
        }
      },
      //设置字体大小切换
      setFontSize(fontSize){
        this.defaultFontSize = fontSize
        localStorage.setItem('currFontSize', fontSize)
        if (this.themes) {
          this.themes.fontSize(fontSize + 'px')
        }
      } ,
      registerTheme()
      {
        this.themeList.forEach(theme => {
          //注册全部主题颜色样式
          this.themes.register(theme.name, theme.style)
        })
      },
      setTheme(index)
      {
        //切换主题
        this.registerTheme()
        this.defaultTheme = index
        this.themes.select(this.themeList[index].name)
        localStorage.setItem('currTheme', index)
        this.$forceUpdate()
      },
      //propress进度条的数值(0-100)
      onProgressChange(progress)
      {
        const percentage = progress / 100;
        const location = percentage > 0 ? this.locations.cfiFromPercentage(percentage) : 0;
        this.rendition.display(location);
      },
      hideTitleAndMenu()
      {
        //隐藏标题栏和菜单栏
        this.ifTitleAndMenuShow = false
        //隐藏菜单栏弹出的设置栏
        this.$refs.menuBar.hideSetting();
        //隐藏目录
        this.$refs.menuBar.hideContent();
      },
      //根据链接跳转到指定位置(目录)
      jumpTo(href)
      {
        this.rendition.display(href);
        this.hideTitleAndMenu();
      },
    },
    beforeDestroy () {
      clearInterval(this.clearLocationChange);
      clearInterval(this.clearlocalStorageData);
    }

}
</script>

<style lang="scss" scoped>
$fontSize: 37.5;
@function px2rem($px) {
  @return ($px / $fontSize) + rem;
}
@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.ebook {
  position: relative;
  .read-wrapper {
    position: relative;
    .progressVal{
      line-height: 0.8rem;
      height: 0.8rem;
      position: absolute;
      bottom: 0;
      right: 10px;
      color: brown;
      z-index: 99;
      font-size: 0.35rem;
      font-weight: bold;
    }
    #read {
      position: relative;
      .menu {
        position: absolute;
        bottom: 3rem;
        width: 1rem;
        right: 0;
        height: 1rem;
        background: red;
        z-index: 9;
      }
    }
    .mask {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      width: 100%;
      height: 100%;
      .left {
        flex: 0 0 px2rem(100);
      }
      .center {
        flex: 1;
      }
      .right {
        flex: 0 0 px2rem(100);
      }
    }
  }
}
/deep/ .epub-container {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  min-width: 100%;
  width: 1px;
  *width: 100%;
}
/deep/ .epub-view {
  overflow: scroll;
  background: greenyellow;
  -webkit-overflow-scrolling: touch;
  min-width: 100%;
  width: 100px;
  *width: 100%;
}
/deep/ iframe {
  overflow: scroll;
  background: pink;
  -webkit-overflow-scrolling: touch;
  min-width: 100%;
  width: 1px;
  *width: 100%;
}



</style>

【早安心语】
【2021-12-25】早安春夏秋冬 You have sneaked, will become a slap...
幸福日记
昨日作息5:00-23:00 2021-12-25 SAT “MY 3 Moments of Joy” （三个开...
《句句成章》39 看了想笑
原创老区游子游子岁月 2021-12-25 09:54 收录于话题 #学会生活懂得快乐 16个句子：留学邻...
2021-12-25
2021-12-25 每日复盘早餐：白粥，莲藕山药排骨汤，鸡蛋午餐：花生浆，香肠，沙糖桔晚餐：老妈那边吃饭 ...
《金吾生〈庄子发微〉日课23.2021-12-25》
《金吾生〈庄子发微〉日课23.2021-12-25》今天是辛丑庚子丁未，冬月廿二，2021-12-25。今日耶诞...
初三圣诞节
2021-12-25 圣诞节相约老地方缺席：董憨憨（向被隔离的警察全家致敬）王多多（我们始终的牵挂）
2022-01-08《中国古建筑二十讲》
缘起 2021-12-25开始看第1个番茄钟8-24/379，全书计划20个。 2022-01-08全书读完，用时...
第399篇｜【岁月守候】明天就是新的一年，我为所有亲人祈福！
口/岁月守候（D114-120/166-172） D114/2021-12-25，星期六，晴 166）过了五十周岁...
写给先生（119）
2021-12-25 晴我想先生啦～圣诞快乐哟～今日开心，被哥哥姐姐们怂恿小酌几杯。这微醺倒是美妙，惹得姑娘...
2021-12-25圣诞节开始写书，为什么要写书？因为这是我的使
2021-12-25圣诞节开始写书，为什么要写书？因为这是我的使命。距离那个平常但特别的日子11.21日已经过了...