@@ -51,13 +51,15 @@
<!-- 垂直翻页 -- >
<!-- @ click = "showMenu" -- >
< view class = "vertical" v-if = "isVertical" >
< view class = "vertical" v-if = "isVerticalHua " >
< view class = "verticalbox" : class = "{ container0: background === 1, container1: background === 2 }"
@click ="showMenu" >
< ! - - 章节名 - - >
< view class = "chapter" > { { verticalData . chapterName } } < / view >
< view class = "chapter" >
{ { verticalData . chapterName } }
< / view >
< scroll-view :scroll-anchoring = "true" scroll -y = " true " :scroll-top = "scrollTop" scroll -with -animation = " true " style = "height: 600px; "
@scrolltoupper ="scrolltoupper" @scrolltolower ="scrolltolower" @scroll ="scroll" @touchend ="touchEnd" @touchstart ="touchStart" >
@scrolltoupper ="scrolltoupper" @scrolltolower ="scrolltolower" @scroll ="scroll" >
< view class = "content" >
< view class = "inner-box" : style = "{ height: `${innerHeight}px` }" v-if = "verticalData.canRead" >
< view >
@@ -146,7 +148,9 @@
boxShadow: showShadow && turnType === 0 ? '0 0 10px 0 rgba(0,0,0,.4)' : ''
}" @touchstart ="touchStart" @touchend ="touchEnd" @touchmove ="touchMove" @touchcancel ="touchcancel" >
< ! - - 章节名 - - >
< view class = "chapter" > { { curPage . chapterName } } < / view >
< view class = "chapter" > { { curPage . chapterName } }
< uni-icons v-if = "newchapterImgList && newchapterImgList.length > 0" id="showImgs" @click="showImgHandle" class="showImgs" type="images" size="20" > < / uni -icons >
< / view >
< view class = "content" >
< view class = "inner-box" : style = "{ height: `${innerHeight}px` }" v-if = "curPage.canRead" >
< view class = "book-inner" >
@@ -312,14 +316,18 @@
< view class = "line" : class = "{ lineActive: lineHeight === 2 }" v-for = "i in 3" :key="i" > < / view >
< / view >
< / view >
< view class = "item" >
< view class = "item-name" > 翻页 < / view >
< view class = "icon" : class = "{ active: turnType === 0 }" style = "padding: 5px 8px;"
< view class = "item" >
< view class = "item-name" style = "display: block; width: 45px;" > 翻页 < / view >
< view style = "display: flex; flex-grow: 1" class = "item_wrap" >
< view class = "icon" : class = "{ active: turnType === 0 }" style = "padding: 5px 8px; margin-bottom: 6px;"
@click ="changeTurnType(0)" > 覆盖 < / view >
< view class = "icon" : class = "{ active: turnType === 1 }" style = "padding: 5px 8px;"
< view class = "icon" : class = "{ active: turnType === 1 }" style = "padding: 5px 8px; margin-bottom: 6px; "
@click ="changeTurnType(1)" > 左右平移 < / view >
< ! - - < view class = "icon" : class = "{ active: turnType === 2 }" style = "padding: 5px 8px;"
@click ="changeTurnType(2)" > 上下平移 < / view > - - >
< view class = "icon" : class = "{ active: turnType === 2 }" style = "padding: 5px 8px; margin-bottom: 6px; "
@click ="changeTurnType(2)" > 上下平移 < / view >
< view class = "icon" : class = "{ active: turnType === 3 }" style = "padding: 5px 8px; margin-bottom: 6px;"
@click ="changeTurnType(3)" > 上下滑动 < / view >
< / view >
< / view >
< view class = "item" >
< view class = "item-name" > 背景 < / view >
@@ -346,6 +354,21 @@
< / virtual -list >
< / view >
< / view >
<!-- 图片弹窗 -- >
< 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" >
< 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 > - - >
< / view >
< / view >
< / scroll-view >
< / view >
< / u-popup >
< / view >
< / template >
@@ -362,6 +385,8 @@
let copyBookText = [ ]
let preText = [ ]
let nextText = [ ]
let imglist = [ ]
// var music = uni.createInnerAudioContext();
export default {
components : {
@@ -370,6 +395,11 @@
} ,
data ( ) {
return {
imgsShow : false ,
nothingShow : false ,
// 本章图片列表
chapterImgList : [ ] ,
newchapterImgList : [ ] ,
preChapterTotal : null ,
nextChapterTotal : null ,
// preBookText = []
@@ -524,7 +554,7 @@
lineHeight : '' , //行高, 注意是fontSize的倍数
background : '' , //背景
colorList : [ '#000' , '#666' ] , //与背景对应的字体颜色
highlight : "" , // 字体高亮
highlight : "null " , // 字体高亮
fhighlight : false , // 左右的高亮
chapterProgress : 0 , //‘章节进度条’的参数
progressTouched : false , //是否正在点击‘章节进度条’
@@ -543,6 +573,7 @@
isBuy : 0 ,
isVip : 0 ,
} ,
isVerticalHua : false ,
speedTrue : false , //判断是否更新进度
speedData : {
bookId : 0 ,
@@ -560,6 +591,9 @@
width : 0 ,
before : false
} ,
topChange : 0 ,
scroll _end : false ,
musicPlaying : false // 正在播放音频
}
} ,
@@ -594,14 +628,45 @@
... mapState ( [ 'userInfo' ] ) ,
} ,
methods : {
clickImg ( item , index ) {
// 点击图片
let imgarr = this . newchapterImgList . map ( item => item )
console . log ( imgarr , 'imgarr' )
this . imgsShow = false
uni . previewImage ( {
current : index ,
urls : imgarr
} )
} ,
toRight ( ) {
this . nothingShow = true
} ,
showImgHandle ( ) {
this . imgsShow = true
} ,
scroll : function ( e ) {
// this.oldType = "Vertical"
// console.log(e.detail)
// 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
@@ -661,11 +726,14 @@
let arr = [ ] //数组每一项代表一行
// console.log(copyBookText,'拆分前')
let isbiaodian = false
this . chapterImgList = [ ]
copyBookText . map ( ( res , index ) => {
res . picAndWord = '' + res . picAndWord
if ( res . picAndWord . length > colSize - 2 ) {
res . content = '' + res . content
// console.log(res.picAndWord)
if ( res . content . length > colSize - 2 ) {
//colSize - 2 段落首行空格
// 判断是否下一行以标点开始
let nextString = res . picAndWord . substr ( colSize - 2 , 1 )
let nextString = res . content . substr ( colSize - 2 , 1 )
let haveBiao = 0
for ( var i = 0 ; i < this . biaodian . length ; i ++ ) {
if ( nextString == this . biaodian [ i ] ) {
@@ -673,14 +741,36 @@
}
}
//console.log(haveBiao, nextString, 'isbiaodian')
arr . push ( { 'paragraph' : index , 'list' : res . picAndWord . substr ( 0 , colSize - 2 - haveBiao ) , 'level' : 0 , class : 'jushou' } )
let text = res . picAndWord . substr ( colSize - 2 - haveBiao )
arr . push ( { 'paragraph' : index , 'list' : res . content . substr ( 0 , colSize - 2 - haveBiao ) , 'level' : 0 , class : 'jushou' } )
let text = res . content . substr ( colSize - 2 - haveBiao )
that . aginForget ( text , arr , colSize , index )
} else {
arr . push ( { 'paragraph' : index , list : res . picAndWord . substr ( 0 , colSize - 2 ) , 'level' : 0 , class : 'jushou' } )
arr . push ( { 'paragraph' : index , list : res . content . substr ( 0 , colSize - 2 ) , 'level' : 0 , class : 'jushou' } )
}
let picAndWord = res . otherContent
// let reg = new RegExp('(?<=(img src="))[^"]*?(?=")/gi)')
//let RegEx = /(?<=(img src="))[^"]*?(?=")/gims
// let imgArr = picAndWord.match(reg)
let imgArr = picAndWord
// let imgArr = picAndWord.match(/src*?\/g)
this . chapterImgList [ index ] = imgArr
} )
// 过滤图片数据
let arr3 = [ ]
this . chapterImgList . map ( ( item , index ) =>
{
if ( item != null && item != '' ) {
// console.log(item,'item')
arr3 . push ( item )
}
}
)
this . newchapterImgList = arr3
console . log ( this . newchapterImgList , 'newchapterImgList' )
copyBookText = arr
// console.log(copyBookText,'copyBookText')
this . getSizePage ( NumCol )
@@ -691,10 +781,10 @@
// console.log(copyBookText,'拆分前')
let isbiaodian = false
preText . map ( ( res , index ) => {
res . picAndWord = '' + res . picAndWord
if ( res . picAndWord . length > colSize - 2 ) {
res . content = '' + res . content
if ( res . content . length > colSize - 2 ) {
// 判断是否下一行以标点开始
let nextString = res . picAndWord . substr ( colSize - 2 , 1 )
let nextString = res . content . substr ( colSize - 2 , 1 )
let haveBiao = 0
for ( var i = 0 ; i < this . biaodian . length ; i ++ ) {
if ( nextString == this . biaodian [ i ] ) {
@@ -702,12 +792,12 @@
}
}
//console.log(haveBiao, nextString, 'isbiaodian')
arr . push ( { 'paragraph' : index , 'list' : res . picAndWord . substr ( 0 , colSize - 2 - haveBiao ) , 'level' : 0 , class : 'jushou' } )
let text = res . picAndWord . substr ( colSize - 2 - haveBiao )
arr . push ( { 'paragraph' : index , 'list' : res . content . substr ( 0 , colSize - 2 - haveBiao ) , 'level' : 0 , class : 'jushou' } )
let text = res . content . substr ( colSize - 2 - haveBiao )
that . aginForget ( text , arr , colSize , index )
} else {
arr . push ( { 'paragraph' : index , list : res . picAndWord . substr ( 0 , colSize - 2 ) , 'level' : 0 , class : 'jushou' } )
arr . push ( { 'paragraph' : index , list : res . content . substr ( 0 , colSize - 2 ) , 'level' : 0 , class : 'jushou' } )
}
} )
preText = arr
@@ -720,10 +810,10 @@
// console.log(copyBookText,'拆分前')
let isbiaodian = false
nextText . map ( ( res , index ) => {
res . picAndWord = '' + res . picAndWord
if ( res . picAndWord . length > colSize - 2 ) {
res . content = '' + res . content
if ( res . content . length > colSize - 2 ) {
// 判断是否下一行以标点开始
let nextString = res . picAndWord . substr ( colSize - 2 , 1 )
let nextString = res . content . substr ( colSize - 2 , 1 )
let haveBiao = 0
for ( var i = 0 ; i < this . biaodian . length ; i ++ ) {
if ( nextString == this . biaodian [ i ] ) {
@@ -731,12 +821,12 @@
}
}
//console.log(haveBiao, nextString, 'isbiaodian')
arr . push ( { 'paragraph' : index , 'list' : res . picAndWord . substr ( 0 , colSize - 2 - haveBiao ) , 'level' : 0 , class : 'jushou' } )
let text = res . picAndWord . substr ( colSize - 2 - haveBiao )
arr . push ( { 'paragraph' : index , 'list' : res . content . substr ( 0 , colSize - 2 - haveBiao ) , 'level' : 0 , class : 'jushou' } )
let text = res . content . substr ( colSize - 2 - haveBiao )
that . aginForget ( text , arr , colSize , index )
} else {
arr . push ( { 'paragraph' : index , list : res . picAndWord . substr ( 0 , colSize - 2 ) , 'level' : 0 , class : 'jushou' } )
arr . push ( { 'paragraph' : index , list : res . content . substr ( 0 , colSize - 2 ) , 'level' : 0 , class : 'jushou' } )
}
} )
nextText = arr
@@ -770,10 +860,10 @@
// console.log(copyBookText,'拆分前')
let isbiaodian = false
this . tmpChapter . text . map ( ( res , index ) => {
res . picAndWord = '' + res . picAndWord
if ( res . picAndWord . length > colSize - 2 ) {
res . content = '' + res . content
if ( res . content . length > colSize - 2 ) {
// 判断是否下一行以标点开始
let nextString = res . picAndWord . substr ( colSize - 2 , 1 )
let nextString = res . content . substr ( colSize - 2 , 1 )
let haveBiao = 0
for ( var i = 0 ; i < this . biaodian . length ; i ++ ) {
if ( nextString == this . biaodian [ i ] ) {
@@ -781,12 +871,12 @@
}
}
//console.log(haveBiao, nextString, 'isbiaodian')
arr . push ( { 'paragraph' : index , 'list' : res . picAndWord . substr ( 0 , colSize - 2 - haveBiao ) , 'level' : 0 , class : 'jushou' } )
let text = res . picAndWord . substr ( colSize - 2 - haveBiao )
arr . push ( { 'paragraph' : index , 'list' : res . content . substr ( 0 , colSize - 2 - haveBiao ) , 'level' : 0 , class : 'jushou' } )
let text = res . content . substr ( colSize - 2 - haveBiao )
that . aginForget ( text , arr , colSize , index )
} else {
arr . push ( { 'paragraph' : index , list : res . picAndWord . substr ( 0 , colSize - 2 ) , 'level' : 0 , class : 'jushou' } )
arr . push ( { 'paragraph' : index , list : res . content . substr ( 0 , colSize - 2 ) , 'level' : 0 , class : 'jushou' } )
}
} )
this . tmpChapter . text = arr
@@ -960,6 +1050,9 @@
if ( this . turnType == 2 ) {
this . isVertical = true ;
}
if ( this . turnType == 3 ) {
this . isVerticalHua = true ;
}
if ( typeof this . turnType !== 'number' ) {
this . turnType = 0
}
@@ -1214,14 +1307,18 @@
if ( this . music . src ) {
setTimeout ( ( ) => {
this . music . play ( ) ; //执行播放
this . musicPlaying = true
} , 150 )
}
// 音频播放结束
this . music . onEnded ( ( ) => {
this . musicPlaying = false
if ( this . domIndex == this . domList . length - 1 ) {
console . log ( '全部音频播放完毕' ) ;
} else {
console . log ( '音频播放结束2' ) ;
this . addDomIndex ( )
}
} ) ;
@@ -1241,13 +1338,12 @@
return
}
} )
console . log ( paragraphindex , this . domIndex )
//return
if ( this . domIndex > paragraphindex ) {
this . goNextPage ( )
}
} , 2 000)
} , 1 000)
} ,
// 暂停事件
@@ -1255,19 +1351,22 @@
this . isPause = ! this . isPause
if ( this . isPause ) {
this . music . pause ( )
this . musicPlaying = false
} else {
this . music . play ( )
this . musicPlaying = true
}
} ,
// 关闭听书
offAudio ( ) {
this . music . stop ( ) ;
// this.domIndex = 0;
this . highlight = "" ;
this . highlight = "null " ;
this . fhighlight = false
this . isAudioMenu = false ;
this . isPause = false ;
this . music = null ;
this . musicPlaying = false
} ,
/**
@@ -1617,6 +1716,7 @@
* 触摸结束
**/
touchEnd ( e ) {
console . log ( e , 'e' )
this . isTouch = false
this . showAnimation = true
this . showShadow = false
@@ -1626,9 +1726,6 @@
delta = e . changedTouches [ 0 ] . clientX - this . touchStartX ;
} else {
delta = e . changedTouches [ 0 ] . clientY - this . touchStartY ;
console . log ( delta , '触摸结束' )
this . scrollTop += - delta
console . log ( this . scrollTop , 'scrollTop' )
this . page = parseInt ( this . scrollTop / ( this . NumCol * this . lineHeight * this . fontSize ) )
console . log ( this . page , 'page' )
//this.getNowReadIndex()
@@ -1640,8 +1737,9 @@
this . goPrePage ( )
}
} else if ( e . changedTouches [ 0 ] . clientX > this . windowWidth / 3 * 2 ) { //点击屏幕右1/3为下一页
this . goNextPage ( )
//if(e.changedTouches[0].clientY > 100){ // 显示弹窗
e . changedTouches [ 0 ] . clientY > 100 ? this . goNextPage ( ) : ''
//}
} else if ( e . changedTouches [ 0 ] . clientX <= this . windowWidth / 3 * 2 && e . changedTouches [ 0 ] . clientX >=
this
. windowWidth / 3 ) { //点击屏幕中间1/3为呼出菜单
@@ -1752,7 +1850,7 @@
plus . navigator . setFullscreen ( false ) ;
// #endif
this . menuShow = true ;
if ( this . music == null ) {
if ( this . music == null && ! this . isVerticalHua ) {
this . musicManuShow = true ;
} else {
this . musicManuShow = false ;
@@ -2387,22 +2485,32 @@
if ( turnType === this . turnType ) {
return
} else {
if ( this . oldType == "Vertical" ) {
// 从垂直改成’覆盖’ 或者 ’左右’
this . goToPage ( this . page + 1 )
this . oldType == null
}
this . showAnimation = false
this . turnType = turnType ;
uni . setStorageSync ( 'turnType' , this . turnType )
}
if ( turnType == 2 ) {
this . oldType = "Vertical"
// 获取当前的domIndex
this . getNowReadIndex ( )
this . isVertical = true
if ( turnType == 3 ) {
this . isVerticalHua = true
// 如果正在播放音频 则暂停掉
if ( this. musicPlaying ) {
//console.log('正在播放音频')
this . music . pause ( )
this . highlight = "null" ;
this . isAudioMenu = false
}
uni . showModal ( {
title : '提示' ,
showCancel : false ,
content : '当前阅读模式下,无听书功能,如想体验听书功能,请切换其他模式,并且阅读进度与其他模式不共享。' ,
success : function ( res ) {
if ( res . confirm ) {
console . log ( '用户点击确定' ) ;
}
}
} )
} else {
this . isVertical = false
this . isVerticalHua = false
}
} ,
@@ -2555,7 +2663,7 @@
preText = this . tmpChapter . text
this . mpcounlSystemInfo ( )
this . preChapterTotal = Math . floor ( preText . length / this . NumCol ) + 1
console. log ( this . preChapterTotal, '上一章内容页数')
// console.log(this. preChapterTotal, '上一章内容页数')
// 处理数据
//
@@ -2578,7 +2686,7 @@
nextText = this . tmpChapter . text
this . nextmpcounlSystemInfo ( )
this . nextChapterTotal = Math . floor ( nextText . length / this . NumCol ) + 1
console. log ( this . nextChapterTotal, '下一章内容页数')
// console.log(this. nextChapterTotal, '下一章内容页数')
} else {
this . nextChapter = {
ready : true ,
@@ -2683,16 +2791,38 @@
}
} ,
beforeDestroy ( ) {
if ( this . musicPlaying ) {
this . music . pause ( )
}
} ,
onHide ( ) {
if ( this . musicPlaying ) {
this . music . pause ( )
}
}
}
< / script >
< style lang = "scss" scoped >
@ import url ( "@/pages/yRead/iconfont.css" ) ;
. showImgs { float : right ; padding - right : 3 px ; }
. chapterImgTitle { display : block ; ; color : # 636363 ; text - align : center ; font - size : 30 rpx ; margin : 10 px 0 ; }
. scroll - view _H {
white - space : nowrap ;
width : 100 % ;
. scroll - view - item _H {
display : inline - block ;
width : 100 % ;
//height: 300rpx;
//line-height: 300rpx;
text - align : center ;
font - size : 36 rpx ;
}
. imgBox {
height : 500 rpx ; overflow : hidden ; padding : 10 px ;
// img{height: 300rpx !important; width: unset;}
}
}
. scroll - Y { height : 600 px ; }
page {
position : relative ;
@@ -2718,7 +2848,7 @@
height : 100 % ;
}
}
. nothingShow { display : block ; height : 10 % ; font - size : 24 rpx ; color : # 636363 ; margin : 10 px 0 ; text - align : center ; }
. listenitem {
width : 150 rpx ;
height : 150 rpx ;
@@ -3103,4 +3233,5 @@
height : 300 rpx ;
}
. jushou { text - indent : 2 em ; }
. item _wrap { flex - wrap : wrap ; }
< / style >