zm/nuttyreading-html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0317

Browse Source
This commit is contained in:
@fawn-nine
2023-03-17 18:12:24 +08:00
parent ffa17b7630
commit 8aabbd6bf5
6 changed files with 201 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

265
pages/yRead/angbook.vue
View File

@@ -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 // 正在播放音频
}
},
@@ -593,15 +627,46 @@
},
...mapState(['userInfo']),
},
methods: {
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
}
@@ -1168,7 +1261,7 @@
if (page == 0) {
// return this.scrollTop = 0
this.domIndex = 0
this.createAudio()
this.createAudio()
this.musicManuShow = false
this.isAudioMenu = true
}else{
@@ -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()
}
});
@@ -1240,14 +1337,13 @@
paragraphindex = item.paragraph
return
}
})
console.log(paragraphindex, this.domIndex)
})
//return
if(this.domIndex > paragraphindex){
this.goNextPage()
}
},2000)
},1000)
},
// 暂停事件
@@ -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
@@ -1625,10 +1725,7 @@
if (this.turnType === 0 || this.turnType === 1) {
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')
delta = e.changedTouches[0].clientY - this.touchStartY;
this.page = parseInt(this.scrollTop / (this.NumCol * this.lineHeight * this.fontSize))
console.log(this.page, 'page')
//this.getNowReadIndex()
@@ -1636,12 +1733,13 @@
if ((delta < 0.8 && delta > -0.8)) { //部分手机点击屏幕时无法做到delta===0
if (e.changedTouches[0].clientX < this.windowWidth / 3) { //点击屏幕左1/3为上一页
if (!this.prePage.isCover) {
if (!this.prePage.isCover) {
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;
@@ -2386,23 +2484,33 @@
changeTurnType(turnType) {
if (turnType === this.turnType) {
return
} else {
if (this.oldType == "Vertical") {
// 从垂直改成’覆盖’ 或者 ’左右’
this.goToPage(this.page + 1)
this.oldType == null
}
} else {
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: 3px;}
.chapterImgTitle{display: block; ;color: #636363; text-align: center; font-size: 30rpx; margin: 10px 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: 36rpx;
}
.imgBox{
height: 500rpx; overflow: hidden; padding:10px;
// img{height: 300rpx !important; width: unset;}
}
}
.scroll-Y{height: 600px;}
page {
position: relative;
@@ -2718,7 +2848,7 @@
height: 100%;
}
}
.nothingShow{display: block; height: 10%; font-size: 24rpx; color: #636363; margin: 10px 0; text-align: center;}
.listenitem {
width: 150rpx;
height: 150rpx;
@@ -3103,4 +3233,5 @@
height: 300rpx;
}
.jushou{text-indent: 2em;}
.item_wrap{flex-wrap: wrap;}
</style>