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

完成听书 不带图片

Browse Source
This commit is contained in:
@fawn-nine
2023-03-10 17:56:57 +08:00
parent 45cb5d66f7
commit 53d4af542a
3 changed files with 556 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
pages/eBook/bookContent.vue
View File

@@ -258,7 +258,8 @@
.then(res => {
this.bookMessage = res.book
this.bokMesDet.bookId = res.book.id
this.bokMesDet.bookName = res.book.name
this.bokMesDet.bookName = res.book.name,
this.bokMesDet.images = res.book.images
if (this.bookMessage.isSale == 1) {
this.buysignContent = '您确定要花费' + this.bookMessage.salePrice + '疯币购买' + this.bokMesDet
.bookName + '吗？'

244
pages/yRead/angbook.vue
View File

@@ -14,7 +14,7 @@
<view class="inner-box" :style="{ height: `${innerHeight}px` }">
<view class="book-inner" id="preChapter"
:style="{ fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px` }">
<p v-for="(item, index) in preChapter.text" :key="index" v-html="item.picAndWord"></p>
<p v-for="(item, index) in preChapter.text" :key="index" v-html="item.picAndWord"></p>
</view>
</view>
</view>
@@ -109,10 +109,8 @@
<view class="content">
<!-- 内层class="inner-box"利用innerHeight将内容截取至整行，防止文字不完整的情况出现 -->
<view class="inner-box" :style="{ height: `${innerHeight}px` }" v-if="prePage.canRead">
<!-- 最里层class="book-inner"的用于获取文本总高度，计算总页数，注意不可以overflow:hidden -->
<view class="book-inner" >
<!-- 最里层class="book-inner"的用于获取文本总高度，计算总页数，注意不可以overflow:hidden -->
<view class="book-inner" >
<p v-for="(item, index) in curPage.text" v-html="item.list" :key="index"
:class="highlight === item.paragraph ? 'highlight' : ''"
:style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px`, color: `${colorList[background - 1]}`, transform: `translateY(0px)` }"></p>
@@ -154,9 +152,9 @@
<view class="book-inner" >
<!-- <pre>
{{curPage.text}}
</pre> -->
</pre> -->
<p v-for="(item, index) in curPage.text" v-html="item.list" :key="index"
:class="highlight === item.paragraph ? 'highlight' : ''"
:class="{'highlight': highlight == item.paragraph ? true : false, 'jushou': item.class == 'jushou' ? true : false}"
:style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px`, color: `${colorList[background - 1]}`, transform: `translateY(0px)` }"></p>
</view>
@@ -194,9 +192,11 @@
<view class="chapter">{{ nextPage.chapterName }}</view>
<view class="content">
<view class="inner-box" :style="{ height: `${innerHeight}px` }" v-if="nextPage.canRead">
<view class="book-inner" v-for="(item, index) in nextPage.text" :key="index"
:style="{ fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px`, color: `${colorList[background - 1]}`, transform: `translateY(0)` }">
{{ item }}
<view class="book-inner" >
<p v-for="(item, index) in nextPage.text" v-html="item.list" :key="index"
:class="{'highlight': highlight == item.paragraph ? true : false, 'jushou': item.class == 'jushou' ? true : false}"
:style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px`, color: `${colorList[background - 1]}`, transform: `translateY(0px)` }"></p>
</view>
</view>
<view
@@ -359,7 +359,9 @@
mapState
} from 'vuex';
import $http from '../../config/requestConfig';
let copyBookText = []
let copyBookText = []
let preText = []
let nextText = []
// var music = uni.createInnerAudioContext();
export default {
components: {
@@ -368,6 +370,9 @@
},
data() {
return {
preChapterTotal : null,
nextChapterTotal :null,
// preBookText = []
oldReadSpeed: { // 本地初始阅读进度
precent: null,
updateReadId: null
@@ -508,6 +513,7 @@
directoryShowBefore: false, // 目录渲染
turnPageTime: .5, //翻页动画时间
biaodian : ['，',':','、',';','。','.'], //匹配的标点
maxFontSize: 30, //最大字体大小，px
minFontSize: 14, //最小字体大小，px
turnType: 0, //翻页方式
@@ -632,46 +638,179 @@
}
})
},
mpcounlSystemInfo() {
let that = this;
uni.getSystemInfo({
success: async function(res) {
let screenHeight = res.screenHeight - res.statusBarHeight; //屏幕高度-状态栏高度
let screenWidth = res.screenWidth;
that.NumCol = Math.floor((screenHeight - 50) / (that.fontSize * that
.lineHeight)) - 1 //一屏总行 30为panding值
console.log('一屏总行', that.NumCol)
that.colSize = Math.floor((screenWidth - 20) / that.fontSize) //一行最多排多少个字
await that.mpforGet(that.colSize - 1, that.NumCol)
}
})
},
nextmpcounlSystemInfo() {
let that = this;
uni.getSystemInfo({
success: async function(res) {
let screenHeight = res.screenHeight - res.statusBarHeight; //屏幕高度-状态栏高度
let screenWidth = res.screenWidth;
that.NumCol = Math.floor((screenHeight - 50) / (that.fontSize * that
.lineHeight)) - 1 //一屏总行 30为panding值
console.log('一屏总行', that.NumCol)
that.colSize = Math.floor((screenWidth - 20) / that.fontSize) //一行最多排多少个字
await that.nextmpforGet(that.colSize - 1, that.NumCol)
}
})
},
// 拆分数据
forGet(colSize, NumCol) {
let that = this
let arr = [] //数组每一项代表一行
// console.log(copyBookText,'拆分前')
// console.log(copyBookText,'拆分前')
let isbiaodian = false
copyBookText.map((res, index) => {
res.picAndWord = ' ' + res.picAndWord
if (res.picAndWord.length > colSize) {
arr.push({'paragraph':index,'list':res.picAndWord.substr(0, colSize), 'level':0})
let text = res.picAndWord.substr(colSize)
res.picAndWord = '' + res.picAndWord
if (res.picAndWord.length > colSize - 2) {
// 判断是否下一行以标点开始
let nextString = res.picAndWord.substr(colSize-2, 1)
let haveBiao = 0
for (var i=0; i < this.biaodian.length; i++) {
if(nextString == this.biaodian[i]) {
haveBiao = 1
}
}
//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 )
that.aginForget(text, arr, colSize, index)
} else {
arr.push({'paragraph':index,list:res.picAndWord.substr(0, colSize), 'level':0})
arr.push({'paragraph':index,list:res.picAndWord.substr(0, colSize - 2), 'level':0, class:'jushou'})
}
})
copyBookText = arr
// console.log(copyBookText,'copyBookText')
this.getSizePage(NumCol)
},
mpforGet(colSize, NumCol) {
let that = this
let arr = [] //数组每一项代表一行
// console.log(copyBookText,'拆分前')
let isbiaodian = false
preText.map((res, index) => {
res.picAndWord = '' + res.picAndWord
if (res.picAndWord.length > colSize - 2) {
// 判断是否下一行以标点开始
let nextString = res.picAndWord.substr(colSize-2, 1)
let haveBiao = 0
for (var i=0; i < this.biaodian.length; i++) {
if(nextString == this.biaodian[i]) {
haveBiao = 1
}
}
//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 )
that.aginForget(text, arr, colSize, index)
} else {
arr.push({'paragraph':index,list:res.picAndWord.substr(0, colSize - 2), 'level':0, class:'jushou'})
}
})
preText = arr
// console.log(copyBookText,'copyBookText')
// this.getSizePage(NumCol)
},
nextmpforGet(colSize, NumCol) {
let that = this
let arr = [] //数组每一项代表一行
// console.log(copyBookText,'拆分前')
let isbiaodian = false
nextText.map((res, index) => {
res.picAndWord = '' + res.picAndWord
if (res.picAndWord.length > colSize - 2) {
// 判断是否下一行以标点开始
let nextString = res.picAndWord.substr(colSize-2, 1)
let haveBiao = 0
for (var i=0; i < this.biaodian.length; i++) {
if(nextString == this.biaodian[i]) {
haveBiao = 1
}
}
//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 )
that.aginForget(text, arr, colSize, index)
} else {
arr.push({'paragraph':index,list:res.picAndWord.substr(0, colSize - 2), 'level':0, class:'jushou'})
}
})
nextText = arr
// console.log(copyBookText,'copyBookText')
// this.getSizePage(NumCol)
},
//获取后面的字符，再去计算能放几行
aginForget(text, arr, colSize, index) {
let that = this;
let strBR = "</br>"
if (text.length > colSize) {
arr.push({'paragraph':index,'list':text.substr(0, colSize), 'level':0})
let newText = text.substr(colSize)
let nextString = text.substr(colSize, 1)
let haveBiao = 0
for (var i=0; i < this.biaodian.length; i++) {
if(nextString == this.biaodian[i]) {
haveBiao = 1
}
}
arr.push({'paragraph':index,'list':text.substr(0, colSize - haveBiao), 'level':0, class:''})
let newText = text.substr(colSize - haveBiao)
that.aginForget(newText, arr, colSize, index)
} else {
arr.push({'paragraph':index,'list':text.substr(0, colSize),'level':0})
arr.push({'paragraph':index,'list':text.substr(0, colSize),'level':0, class:''})
// arr.push(strBR)
}
},
tmpforGet(colSize, NumCol) {
let that = this
let arr = [] //数组每一项代表一行
// console.log(copyBookText,'拆分前')
let isbiaodian = false
this.tmpChapter.text.map((res, index) => {
res.picAndWord = '' + res.picAndWord
if (res.picAndWord.length > colSize - 2) {
// 判断是否下一行以标点开始
let nextString = res.picAndWord.substr(colSize-2, 1)
let haveBiao = 0
for (var i=0; i < this.biaodian.length; i++) {
if(nextString == this.biaodian[i]) {
haveBiao = 1
}
}
//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 )
that.aginForget(text, arr, colSize, index)
} else {
arr.push({'paragraph':index,list:res.picAndWord.substr(0, colSize - 2), 'level':0, class:'jushou'})
}
})
this.tmpChapter.text = arr
// console.log(copyBookText,'copyBookText')
this.getSizePage(NumCol)
},
// 计算章节页数
getSizePage(NumCol) {
let that = this;
let arr = [],
newArr = []
copyBookText = copyBookText.filter((item, index) => {
if (item == '' || item == ' ' || item == ' ') {
} else {
@@ -714,7 +853,7 @@
progress: this.progress
})
// 将进度存到数据库
//this.saveReadRateUl()
this.saveReadRateUl()
//this.updateReadRateUl() // 更新进度
}
// oldReadSpeed:{ // 本地初始阅读进度
@@ -1099,16 +1238,26 @@
});
},
// 加载下一条音频
addDomIndex(page) {
addDomIndex() {
this.domIndex += 1
//console.log(this.domIndex, '下一条domIndex')
//console.log(this.curPage.text, '最大值')
setTimeout(()=>{
this.createAudio()
if(this.domIndex > this.curPage.text[this.curPage.length -1].paragraph){
console.log(this.curPage.text[this.curPage.length -1].paragraph)
let paragraphindex = 0
//if(this.domIndex > this.curPage.text[this.curPage.length -1].paragraph){
this.curPage.text.map((item, index) => {
if(index == this.curPage.text.length - 1 ){
paragraphindex = item.paragraph
return
}
})
console.log(paragraphindex, this.domIndex)
//return
if(this.domIndex > paragraphindex){
this.goNextPage()
}
}
},2000)
},
@@ -1142,10 +1291,12 @@
const query = uni.createSelectorQuery().in(this);
query.select('#preChapter').boundingClientRect(data => {
let height = data.height;
// let height = copyBookText.height;
// #ifdef APP-PLUS || MP-WEIXIN
height = Math.round(height * this.pixelRatio) / this.pixelRatio
// #endif
this.preChapter.totalPage = Math.ceil(height / this.innerHeight) || 1
// #endif
// this.preChapter.totalPage = Math.floor(height / this.innerHeight) || 1
this.preChapter.totalPage = this.preChapterTotal
this.preChapter.ready = true //章节准备完毕
if (this.waitForPre) { //发生在用户翻至上一章，但是上一章数据未准备完毕时
uni.hideLoading() //把loading关掉
@@ -1180,7 +1331,8 @@
// #ifdef APP-PLUS || MP-WEIXIN
height = Math.round(height * this.pixelRatio) / this.pixelRatio
// #endif
this.nextChapter.totalPage = Math.ceil(height / this.innerHeight) || 1
//this.nextChapter.totalPage = Math.ceil(height / this.innerHeight) || 1
this.nextChapter.totalPage = this.nextChapterTotal
this.nextChapter.ready = true //章节准备完毕
if (this.waitForNext) { //发生在用户翻至下一章，但是下一章数据未准备完毕时
uni.hideLoading() //把loading关掉
@@ -1435,7 +1587,7 @@
`(0,${this.windowHeight+delta}px)`
]
}
} else if (this.preChapter.ready) { //上一章已经准备好了
} else if (this.preChapter.ready) { //上一章已经准备好了
this.prePage = {
ready: this.preChapter.ready,
chapterName: this.preChapter.chapterName,
@@ -1717,10 +1869,10 @@
this.currentPage -= 1
if (this.currentPage === -1) { //翻至上一章了
showChapter = true
this.currentPage = this.preChapter.totalPage - 1
this.currentPage = this.preChapter.totalPage - 1
this.chapterRotate('pre')
}
console.log(copyBookText,'goPrePage////////////////////////////////')
let cur = [].concat(this.curPage.pageTranslate)
let pre = [].concat(this.prePage.pageTranslate)
this.goToPage(this.currentPage)
@@ -1780,6 +1932,7 @@
**/
goNextPage() {
if (this.nextPage.isEnd) { //如果翻至本书末尾
alery('到头了')
uni.showToast({
title: '跳转推荐页',
icon: 'none'
@@ -1907,7 +2060,9 @@
this.nextChapter = Object.assign({}, this.curChapter)
this.curChapter = Object.assign({}, this.preChapter)
copyBookText = this.curChapter.text;
this.counlSystemInfo()
this.counlSystemInfo()
console.log(copyBookText, '跳转到上一章')
// this.preChapter.text =
if (this.curChapter.chapterIndex !== 0) {
this.preChapter = {
ready: false,
@@ -1996,7 +2151,7 @@
setTimeout(() => {
this.getThreeChapter(this.curChapter.chapterIndex - 1)
// this.counlSystemInfo()
console.log(copyBookText,'翻页后')
console.log(copyBookText,'翻页后//////////////')
uni.hideLoading()
}, 300)
} else {
@@ -2155,7 +2310,7 @@
title: '加载中'
})
await this.getThreeChapter(index.id)
this.counlSystemInfo()
//this.counlSystemInfo()
this.goToPage(0)
this.scrollTop = 0
// this.domIndex = 1
@@ -2396,17 +2551,25 @@
text: this.tmpChapter.text,
canRead: this.tmpChapter.canRead
}
copyBookText = this.curChapter.text;
copyBookText = this.curChapter.text;
this.counlSystemInfo()
this.domIndex = 0;
if (this.curChapter.chapterIndex !== 0) {
if (this.curChapter.chapterIndex !== 0) {
await this.getOneChapter(this.directoryList[Number(index) - 1].chapterId)
//this.mpcounlSystemInfo
this.preChapter = {
chapterIndex: Number(index) - 1,
chapterName: this.directoryList[Number(index) - 1].name,
text: this.tmpChapter.text,
canRead: this.tmpChapter.canRead
}
preText = this.tmpChapter.text
this.mpcounlSystemInfo()
this.preChapterTotal = Math.floor(preText.length / this.NumCol) + 1
console.log(this.preChapterTotal,'上一章内容页数')
// 处理数据
//
} else {
this.preChapter = {
ready: true,
@@ -2423,6 +2586,10 @@
text: this.tmpChapter.text,
canRead: this.tmpChapter.canRead
}
nextText = this.tmpChapter.text
this.nextmpcounlSystemInfo()
this.nextChapterTotal = Math.floor(nextText.length / this.NumCol) + 1
console.log(this.nextChapterTotal,'下一章内容页数')
} else {
this.nextChapter = {
ready: true,
@@ -2946,4 +3113,5 @@
width: 100%;
height: 300rpx;
}
.jushou{text-indent: 2em;}
</style>