@@ -7,7 +7,7 @@
-- >
< template >
< view style = "height: 100%;" >
<!-- 仅用于计算 （ 结构和样式请和阅读页一致 ） -- >
<!-- 仅用于计算 （ 结构和样式请和阅读页一致 ） 1 -- >
< view class = "container hidden" >
< view class = "chapter" > 章节名 < / view >
< view id = "content" class = "content" >
@@ -62,16 +62,17 @@
@scrolltoupper ="scrolltoupper" @scrolltolower ="scrolltolower" @scroll ="scroll" >
< view class = "content" >
< view class = "inner-box" : style = "{ height: `${innerHeight}px` }" v-if = "verticalData.canRead" >
< view >
< view style = "text-indent: 2em;" v-for = "(item, index) in verticalData.text" :key="index" :class="highlight === index ? 'highlight' : ''" >
< p
class = "book-inner" : class = "highlight === index ? 'highlight' : ''"
v-for = "( item, index) in verticalData.text" :key="index" v-html="item.picAndWord "
class = "book-inner"
v-html = "item.content "
: style = "{
fontWeight: item.level == 2 ? 'bold' : item.level == 3 ? 'bold' : '',
fontSize: `${fontSize}px`,
lineHeight: `${lineHeight * fontSize}px`,
color: `${colorList[background - 1]}`
}" > < / p >
< img style = "max-width: 90%;" v-if = "item.otherContent != '' && item.otherContent != null" :src="item.otherContent" >
< / view >
< / view >
< view
@@ -95,10 +96,12 @@
< / view >
<!-- 横向翻页 -- >
< view class = "across" v-else >
< view class = "across" v-else
<!-- 阅读页 （ 结构和样式请和仅用于计算元素一致 ） -- >
< view class = "chantong" v-if = "!isSimulation" >
< ! - - 上一页 - - >
< view class = "container" : class = "{ container0: background === 1, container1: background === 2 }" : style = "{
< view class = "container mypages " : class = "{ container0: background === 1, container1: background === 2 }" : style = "{
zIndex: turnType == 0 && pageBackRef.before ? 100: 102,
transform: turnType == 0 && pageBackRef.before ? 'translate(0, 0)' : `translate${prePage.pageTranslate[turnType]}`,
transition: `transform ${showAnimation ? turnPageTime : 0}s`,
@@ -140,7 +143,7 @@
< / view >
<!-- 本页 -- >
< view ref = "curPageRef" class = "container"
< view ref = "curPageRef" class = "container mypages "
: class = "{ container0: background === 1, container1: background === 2 }" : style = "{
zIndex: 101,
transform: `translate${curPage.pageTranslate[turnType]}`,
@@ -185,8 +188,8 @@
< / view >
<!-- 下一页 -- >
< view class = "container" : class = "{ container0: background === 1, container1: background === 2 }" : style = "{
<!-- 下一页 -- >
< view class = "container mypages " : class = "{ container0: background === 1, container1: background === 2 }" : style = "{
zIndex: 100,
transform: `translate${nextPage.pageTranslate[turnType]}`,
transition: `transform ${showAnimation ? turnPageTime : 0}s`,
@@ -221,7 +224,28 @@
< / view >
< / view >
< / view >
< / view >
<!-- 仿真翻页 -- >
< view v-show = "isSimulation" class="flipbook-viewport"
:rect = "rect"
:change:rect = "updateRenderData"
:SimulationText = "SimulationText"
:change:SimulationText = "updateSimulationText"
@touchend ="openEnd"
>
< view class = "container across" >
< view class = "flipbook" id = "flipbook" >
< view style = "background-color: #fff;" v-for = "(item, index) in SimulationText" :key="index" >
< view class = "chapter" > { { curPage . chapterName } } < / view >
< p v-for = "(item1, index1) in item" :key="index1" v-html="item1.list"
: class = "{'highlight': highlight == item1.paragraph ? true : false, 'jushou': item1.class == 'jushou' ? true : false}"
: style = "{fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px`, color: `${colorList[background - 1]}`, transform: `translateY(0px)` }"
> < / p >
< / view >
< / view >
< / view >
< / view >
<!-- end -- >
<!-- 模拟页面背景 -- >
< view class v -if = ' turnType = = 0 & & ! pageBackRef.before ' : style = "[{ transition: `${pageBackRef.transition}`,
width: `${pageBackRef.width}`,right: `${pageBackRef.right}` }]" class = "pageback_container" >
@@ -257,7 +281,6 @@
@touchend.stop >
< view : style = "{ height: `${statusBarHeight}px` }" > < / view >
< view class = "head" >
< image class = "backiconfont" @click ="back" src = "../../static/icon/back.svg" mode = "aspectFit" > < / image >
< / view >
< / view >
@@ -269,8 +292,8 @@
< ! - - 章节进度条 - - >
< view class = "progress-box" >
< text @click ="goPreChapter" > 上一章 < / text >
< view style = "flex: 1;height: 100%;padding: 8px 0;" >
< text style = "" @click ="goPreChapter" > 上一章 < / text >
< view style = "flex: 1;height: 100%;padding: 8px 0; padding-left:3px;padding-right:3px; margin-top: 16px; " >
< slider :value = "curChapter.chapterIndex" activeColor = "#000" :block-size = "20"
: max = "directoryList.length - 1" @changing ="slideChanging" @change ="slideChange" / >
< / view >
@@ -327,6 +350,8 @@
@click ="changeTurnType(2)" > 上下平移 < / view >
< view class = "icon" : class = "{ active: turnType === 3 }" style = "padding: 5px 8px; margin-bottom: 6px;"
@click ="changeTurnType(3)" > 上下滑动 < / view >
< view class = "icon" : class = "{ active: turnType === 4 }" style = "padding: 5px 8px; margin-bottom: 6px;"
@click ="changeTurnType(4)" > 仿真翻页 < / view >
< / view >
< / view >
< view class = "item" >
@@ -358,23 +383,43 @@
< u-popup :show = "imgsShow" :round = "10" @close ="imgsShow=false" >
< view class = "tanchu" v-if = "newchapterImgList" >
< text class = "chapterImgTitle" > 当前章节共 { { newchapterImgList . length } } 张图片 < / text >
< scroll-view class = "scroll-view_H" scroll -x = " true " scroll -left = " 120 " @scrolltolower ="toRight" >
< scroll-view class = "scroll-view_H" scroll -x = " true " @scrolltolower ="toRight" >
< view v-for = "(item,index) in newchapterImgList" class="scroll-view-item_H" >
< view class = "imgBox" >
< view style = "height:90%" @click ="clickImg(newchapterImgList,index)" >
< img :src = "item" alt = "" height = "100%" > < / view >
<!-- < text class = "nothingShow" v-if = "index == newchapterImgList.length-1" > 已最后一张图片 < / text > - - >
< text style = "font-size: 24rpx; color: #666;" > 第 { { index + 1 } } 张 < / text >
< / view >
< / view >
< / scroll-view >
< / view >
< / u-popup >
< u-popup :show = "setShow" :round = "10" @close ="setShow = false" >
< view class = "setMenu" >
< u-grid :border = "false" col = "2" @click ="clickSet" >
< u -grid -item v-for = "(baseListItem,baseListIndex) in baseList"
:key = "baseListIndex" >
< u-icon
:customStyle = "{paddingTop:20+'rpx'}"
:name = "baseListItem.name"
:size = "30"
> < / u-icon >
< text class = "grid-text" style = "color: #666;" > { { baseListItem . title } } < / text >
< / u-grid-item >
< / u-grid >
< / view >
< / u-popup >
< / view >
< / template >
< script >
import battery from '../../components/battery/battery.vue'
import virtualList from '../../components/virtualList/virtualList.vue'
// 引入翻页效果动画
//import $ from 'jquery'
import {
dateToStr
} from '../../utils/utils.js'
@@ -382,6 +427,7 @@
mapState
} from 'vuex' ;
import $http from '../../config/requestConfig' ;
let copyBookText = [ ]
let preText = [ ]
let nextText = [ ]
@@ -395,6 +441,15 @@
} ,
data ( ) {
return {
baseList : [ {
name : 'photo' ,
title : '章节图片'
} ,
{
name : 'setting' ,
title : '阅读器设置'
}
] ,
imgsShow : false ,
nothingShow : false ,
// 本章图片列表
@@ -546,7 +601,7 @@
biaodian : [ '， , ':' , '、' , ';' , '。' , '.' ] , //匹配的标点
maxFontSize : 30 , //最大字体大小，
minFontSize : 14 , //最小字体大小，
turnType : 0 , //翻页方式
turnType : 4 , //翻页方式
NumCol : '' , // 一章多少行
colSize : '' , // 一行多少字
fontSize : '' , //字体大小，
@@ -593,7 +648,15 @@
} ,
topChange : 0 ,
scroll _end : false ,
musicPlaying : false // 正在播放音频
musicPlaying : false , // 正在播放音频
// 仿真翻页参数
width : uni . getSystemInfoSync ( ) . windowWidth ,
height : '800px' ,
text : 'hello' ,
isSimulation : true , // 仿真翻页模式
SimulationText : [ ] , // 仿真翻页内容数组
hasSimulationText : false ,
setShow : true ,
}
} ,
@@ -612,6 +675,14 @@
this . setStorage ( )
} ,
onReady ( ) {
// console.log('------------------------------')
// 单页禁止测滑返回
// #ifdef APP-PLUS
let currentWebview = this . $mp . page . $getAppWebview ( ) //获取当前页面的webview对象
currentWebview . setStyle ( { popGesture : 'none' } )
// #endif
} ,
onHide ( ) {
this . setStorage ( )
} ,
@@ -626,8 +697,30 @@
return this . currentPage / ( this . curChapter . totalPage - 1 )
} ,
... mapState ( [ 'userInfo' ] ) ,
rect ( ) {
return {
width : this . width ,
height : this . height ,
}
} ,
} ,
methods : {
openStart ( e ) {
// console.log(4444,e)
} ,
openEnd ( e ) {
let delta = 0
let that = this
delta = e . changedTouches [ 0 ] . clientX - this . touchStartX ;
if ( e . changedTouches [ 0 ] . clientX <= this . windowWidth / 3 * 2 && e . changedTouches [ 0 ] . clientX >= this . windowWidth / 3 ) { //点击屏幕中间1/3为呼出菜单
// this.showMenu()
this . setShow = true
//this.menuShow = true
// console.log(this.menuShow)
}
} ,
clickImg ( item , index ) {
// 点击图片
let imgarr = this . newchapterImgList . map ( item => item )
@@ -638,36 +731,24 @@
urls : imgarr
} )
} ,
clickSet ( name ) {
// 点击图片
if ( name == 0 ) {
this . imgsShow = true
} else if ( name == 1 ) {
this . showMenu ( )
}
this . setShow = false
// this.$refs.uToast.success(`点击了第${name}个`)
// console.log(name,'imgarr')
} ,
toRight ( ) {
this . nothingShow = true
} ,
showImgHandle ( ) {
this . imgsShow = true
} ,
scroll : function ( e ) {
// this.oldType = "Vertical"
// setTimeout(() => {
// //console.log(e.detail)
// this.topChange = e.detail.scrollTop
// },2000)
// this.scrollTop = e.detail.scrollTop
// this.scrollTop1 = e.detail.scrollTop
// 计算当前的page
// this.page = parseInt(e.detail.scrollTop / (this.NumCol * this.lineHeight * this.fontSize))
// this.scroll_end = false;
// const that = this;
// this.scrollTop = e.detail.scrollTop;
// clearTimeout(timer);
// var timer = setTimeout(function(){
// if( e.detail.scrollTop === that.scrollTop ){
// that.scroll_end = true;
// console.log(that.scroll_end,"是否结束",e.detail.scrollTop, "data", that.scrollTop )
// clearTimeout(timer);
// timer = null; // 处理回收
// }
// }, 500)
} ,
bookMessage ( ) {
this . $http
. post ( 'book/book/appinfo/' + this . bookId _mark + '/' + this . userInfo . id )
@@ -772,7 +853,7 @@
this . newchapterImgList = arr3
// console.log(this.newchapterImgList, 'newchapterImgList')
copyBookText = arr
// console.log(copyBookText,'copyBook Text')
// console.log(this.SimulationText,'Simulation Text')
this . getSizePage ( NumCol )
} ,
mpforGet ( colSize , NumCol ) {
@@ -907,7 +988,9 @@
}
arr . push ( newArr )
copyBookText = arr // 每一页显示的内容
console . log ( copyBookText , 'copyBookText' )
this . SimulationText = arr
this . hasSimulationText = true
console . log ( this . SimulationText , 'SimulationText' )
} ,
setStorage ( ) {
@@ -2489,6 +2572,12 @@
this . turnType = turnType ;
uni . setStorageSync ( 'turnType' , this . turnType )
}
if ( turnType == 4 ) {
// 逼真翻页方式
this . isSimulation = true
} else {
this . isSimulation = false
}
if ( turnType == 3 ) {
this . isVerticalHua = true
// 如果正在播放音频 则暂停掉
@@ -2783,7 +2872,7 @@
* 购买书籍接口
**/
buyBook ( ) {
//在回调中调用this.initPage()刷新本页
//在回调中调用this.initPage()刷新本页1
uni . showToast ( {
title : '跳转至购买页面，如果未登陆则跳转登陆' ,
icon : 'none'
@@ -2802,10 +2891,54 @@
}
}
< / script >
< script lang = "renderjs" module = "turnjs" >
import '@/utils/jquery.min.1.7.js' ;
import turn from '@/utils/turn.js' ;
export default {
data ( ) {
return {
width : '' ,
height : '' ,
SimulationText : [ ] ,
}
} ,
mounted ( ) {
// this.onTurn();
} ,
methods : {
updateRenderData ( newVal , oldVal ) {
let {
width ,
height
} = newVal ;
this . width = width ;
this . height = height ;
} ,
updateSimulationText ( newVal , oldVal ) {
//this.onTurn();
this . SimulationText = newVal
console . log ( '更新数组' , newVal )
if ( newVal . length > 0 ) this . onTurn ( ) ;
} ,
onTurn ( ) {
$ ( "#flipbook" ) . turn ( {
autoCenter : true ,
display : 'single' ,
height : this . height ,
width : this . width ,
elevation : 50 ,
gradients : true ,
} ) ;
}
}
}
< / script >
< style lang = "scss" scoped >
@ import url ( "@/pages/yRead/iconfont.css" ) ;
# flipbook {
view { p { padding : 0 10 px ; } }
}
. setMenu { text - align : center ; padding : 20 px 10 px }
. showImgs { float : right ; padding - right : 3 px ; margin - right : 10 px ;
width : 30 px ; font - size : 15 px ;
border : 1 px solid # 6 aa84f ;
@@ -2813,6 +2946,8 @@
line - height : 30 px ;
/* color: red; */
border - radius : 15 px ; }
. chapterImgTitle { display : block ; ; color : # 636363 ; text - align : center ; font - size : 30 rpx ; margin : 10 px 0 ; }
. scroll - view _H {
white - space : nowrap ;
@@ -2855,7 +2990,7 @@
height : 100 % ;
}
}
. nothingShow { display : block ; height : 10 % ; font - size : 24 rpx ; color : # 636363 ; margin : 10 px 0 ; text - align : center ; }
. nothingShow { display : block ; font - size : 24 rpx ; color : # 666 ; margin : 10 px 0 ; text - align : center ; }
. listenitem {
width : 150 rpx ;
height : 150 rpx ;
@@ -2950,7 +3085,7 @@
padding : 0 px 0 ;
height : 96 % ;
width : 100 % ;
background - color : # fff ;
background - color : # f7faf9 ;
overflow : hidden ;
. chapter {
@@ -3000,7 +3135,7 @@
}
. container0 {
background - color : # fff ;
background - color : # f7faf9 ;
background - size : 100 % 100 % ;
}
@fawn-nine