|
@@ -11,9 +11,26 @@
|
|
|
chapterTitle
|
|
chapterTitle
|
|
|
}}</text>
|
|
}}</text>
|
|
|
</list-item>
|
|
</list-item>
|
|
|
- <list-item type="content" onclick="showOrHidePop" show="{{!!content}}">
|
|
|
|
|
|
|
+ <!-- <list-item type="content" onclick="showOrHidePop" show="{{!!content}}">
|
|
|
<text class="book-text" style="{{contentStyle}}">{{ content }}</text>
|
|
<text class="book-text" style="{{contentStyle}}">{{ content }}</text>
|
|
|
|
|
+ </list-item> -->
|
|
|
|
|
+ <list-item type="content" show="{{!!content}}" onclick="showOrHidePop">
|
|
|
|
|
+ <div class="doc-page">
|
|
|
|
|
+ <richtext scene="book" if="showRich" style="{{contentStyle}}" @splitpage="pageEndFunction" id="book" @pagechanged="pageChangeFunction">
|
|
|
|
|
+ {{ content }}</richtext>
|
|
|
|
|
+ <text if="{{totalPage > 0}}" class="index-class">{{ currentPage }} / {{ totalPage }} </text>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <!-- <swiper class="swiper" loop="{{false}}" index="{{currentPage}}"
|
|
|
|
|
+ onchange="pageChange" indicator="{{ false }}">
|
|
|
|
|
+ <text class="book-text swiper-item" for="(index,item) in pages"
|
|
|
|
|
+ style="{{contentStyle}}">{{item}}</text>
|
|
|
|
|
+ </swiper> -->
|
|
|
</list-item>
|
|
</list-item>
|
|
|
|
|
+ <!-- <list-item type="content" onclick="showOrHidePop" show="{{!!content}}">
|
|
|
|
|
+ <div style="width: 100%;justify-content: flex-end;">
|
|
|
|
|
+ <text >{{ currentPage+1 }}/ {{ pages.length }}</text>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </list-item> -->
|
|
|
<list-item type="btns">
|
|
<list-item type="btns">
|
|
|
<div class="bottom-bar">
|
|
<div class="bottom-bar">
|
|
|
<text
|
|
<text
|
|
@@ -85,14 +102,14 @@
|
|
|
<text
|
|
<text
|
|
|
class="btn"
|
|
class="btn"
|
|
|
onclick="sizeChange('minus')"
|
|
onclick="sizeChange('minus')"
|
|
|
- disabled="{{userSetting.fontsize <= 40}}"
|
|
|
|
|
|
|
+ disabled="{{userSetting.fontsize <= 30}}"
|
|
|
>A-</text
|
|
>A-</text
|
|
|
>
|
|
>
|
|
|
<text class="size">{{ userSetting.fontsize }}</text>
|
|
<text class="size">{{ userSetting.fontsize }}</text>
|
|
|
<text
|
|
<text
|
|
|
class="btn"
|
|
class="btn"
|
|
|
onclick="sizeChange('plus')"
|
|
onclick="sizeChange('plus')"
|
|
|
- disabled="{{userSetting.fontsize >= 70}}"
|
|
|
|
|
|
|
+ disabled="{{userSetting.fontsize >= 50}}"
|
|
|
>A+</text
|
|
>A+</text
|
|
|
>
|
|
>
|
|
|
</div>
|
|
</div>
|
|
@@ -127,6 +144,8 @@ import texttoaudio from '@service.texttoaudio'
|
|
|
import { getBookContent } from '../../assets/data/book-content.js'
|
|
import { getBookContent } from '../../assets/data/book-content.js'
|
|
|
import { contentsData } from '../../assets/data/contents.js'
|
|
import { contentsData } from '../../assets/data/contents.js'
|
|
|
import fetch from '@system.fetch'
|
|
import fetch from '@system.fetch'
|
|
|
|
|
+import device from '@system.device'
|
|
|
|
|
+
|
|
|
export default {
|
|
export default {
|
|
|
public: {
|
|
public: {
|
|
|
bookId: 1,
|
|
bookId: 1,
|
|
@@ -135,15 +154,20 @@ export default {
|
|
|
total: 120
|
|
total: 120
|
|
|
},
|
|
},
|
|
|
private: {
|
|
private: {
|
|
|
- // content: "这里是完整的小说文本内容...", // 完整小说内容
|
|
|
|
|
|
|
+ totalPage: 0,
|
|
|
|
|
+ index: 0,
|
|
|
|
|
+ showRich:false,
|
|
|
|
|
+ componentName: 'richtext',
|
|
|
|
|
+ screenHeight:1000,
|
|
|
|
|
+ screenWidth: 720,
|
|
|
pages: [], // 分页后的内容数组
|
|
pages: [], // 分页后的内容数组
|
|
|
- currentPage: 0, // 当前页码
|
|
|
|
|
- content: '',
|
|
|
|
|
|
|
+ currentPage: 1, // 当前页码
|
|
|
|
|
+ content: '',// 完整小说内容
|
|
|
chapterTitle: '',
|
|
chapterTitle: '',
|
|
|
showPop: false,
|
|
showPop: false,
|
|
|
showCategory:false,
|
|
showCategory:false,
|
|
|
userSetting: {
|
|
userSetting: {
|
|
|
- fontsize: 40,
|
|
|
|
|
|
|
+ fontsize: 30,
|
|
|
bgColor: '#EAEAEF',
|
|
bgColor: '#EAEAEF',
|
|
|
nightMode: false,
|
|
nightMode: false,
|
|
|
fontFamily: 'default'
|
|
fontFamily: 'default'
|
|
@@ -183,11 +207,20 @@ export default {
|
|
|
return {
|
|
return {
|
|
|
fontFamily: this.userSetting.fontFamily,
|
|
fontFamily: this.userSetting.fontFamily,
|
|
|
color: this.userSetting.nightMode ? 'rgb(126,129,134)' : '#000000',
|
|
color: this.userSetting.nightMode ? 'rgb(126,129,134)' : '#000000',
|
|
|
- fontSize: this.userSetting.fontsize
|
|
|
|
|
|
|
+ fontSize: this.userSetting.fontsize + 'px',
|
|
|
|
|
+ height:this.screenHeight + 'px',
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
async onInit() {
|
|
async onInit() {
|
|
|
|
|
+ var that = this
|
|
|
|
|
+ device.getInfo({
|
|
|
|
|
+ success: function(ret) {
|
|
|
|
|
+ that.screenHeight = (ret.screenHeight * 1 - 500) || 1100
|
|
|
|
|
+ that.screenWidth = ret.screenWidth * 1
|
|
|
|
|
+ console.log(`handling success, brand = ${ ret.screenHeight } ${ ret.screenWidth }`)
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
//搜索优化
|
|
//搜索优化
|
|
|
this.$page.setMeta({
|
|
this.$page.setMeta({
|
|
|
title: this.bookTitle,
|
|
title: this.bookTitle,
|
|
@@ -206,28 +239,9 @@ export default {
|
|
|
const res = await $apis.common.novelChapterPage({chapter: this.chapterId, novelId: this.bookId})
|
|
const res = await $apis.common.novelChapterPage({chapter: this.chapterId, novelId: this.bookId})
|
|
|
let infos = res.data.result.list[0]
|
|
let infos = res.data.result.list[0]
|
|
|
this.chapterTitle = infos.chapterName
|
|
this.chapterTitle = infos.chapterName
|
|
|
- this.content = this.getTxtContent(infos.content)
|
|
|
|
|
|
|
+ this.getTxtContent(infos.content)
|
|
|
console.log('this.content',this.content)
|
|
console.log('this.content',this.content)
|
|
|
- // this.getTxtContent('https://ytnovels.oss-cn-shanghai.aliyuncs.com/novels/2025/01945026620890304513-1752828963340.txt')
|
|
|
|
|
},
|
|
},
|
|
|
- // 分页函数
|
|
|
|
|
- paginateContent() {
|
|
|
|
|
- const CONTENT_PER_PAGE = 300; // 每页字符数(根据实际调整)
|
|
|
|
|
- let pages = [];
|
|
|
|
|
-
|
|
|
|
|
- // 简单分页逻辑
|
|
|
|
|
- for (let i = 0; i < this.content.length; i += CONTENT_PER_PAGE) {
|
|
|
|
|
- pages.push(this.content.substring(i, i + CONTENT_PER_PAGE));
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- this.pages = pages;
|
|
|
|
|
- console.log('pages',this.pages)
|
|
|
|
|
- },
|
|
|
|
|
-
|
|
|
|
|
- // 翻页事件处理
|
|
|
|
|
- pageChange(e) {
|
|
|
|
|
- this.currentPage = e.index;
|
|
|
|
|
- },
|
|
|
|
|
// 解析TXT文件的主方法
|
|
// 解析TXT文件的主方法
|
|
|
getTxtContent(url) {
|
|
getTxtContent(url) {
|
|
|
console.log('url',url)
|
|
console.log('url',url)
|
|
@@ -238,8 +252,22 @@ export default {
|
|
|
if (res.code === 200) {
|
|
if (res.code === 200) {
|
|
|
// 处理文本编码
|
|
// 处理文本编码
|
|
|
const text = this.decodeData(res.data);
|
|
const text = this.decodeData(res.data);
|
|
|
- this.content = text;
|
|
|
|
|
- this.paginateContent();
|
|
|
|
|
|
|
+ this.content = formatText(text);
|
|
|
|
|
+ this.showRich = false
|
|
|
|
|
+ setTimeout(()=>{
|
|
|
|
|
+ this.showRich = true
|
|
|
|
|
+ },50)
|
|
|
|
|
+ // this.paginateContent()
|
|
|
|
|
+ // 格式化文本:为每行添加p标签
|
|
|
|
|
+ function formatText(text) {
|
|
|
|
|
+ const lines = text.split('\n');
|
|
|
|
|
+ return lines.map(line => {
|
|
|
|
|
+ // 跳过空行
|
|
|
|
|
+ if (line.trim() === '') return '';
|
|
|
|
|
+ return `<p>${line}</p>`;
|
|
|
|
|
+ }).join('');
|
|
|
|
|
+ }
|
|
|
|
|
+ console.log('this.content',this.content)
|
|
|
} else {
|
|
} else {
|
|
|
console.error('请求失败:', res.code);
|
|
console.error('请求失败:', res.code);
|
|
|
}
|
|
}
|
|
@@ -293,10 +321,9 @@ export default {
|
|
|
const res = await $apis.common.novelChapterPage({chapter: this.chapterId, novelId: this.bookId})
|
|
const res = await $apis.common.novelChapterPage({chapter: this.chapterId, novelId: this.bookId})
|
|
|
let infos = res.data.result.list[0]
|
|
let infos = res.data.result.list[0]
|
|
|
this.chapterTitle = infos.chapterName
|
|
this.chapterTitle = infos.chapterName
|
|
|
- this.content = this.getTxtContent(infos.content)
|
|
|
|
|
- // this.content = await getBookContent(this.bookId, this.chapterId)
|
|
|
|
|
- // this.chapterTitle = contentsData[this.bookId][this.chapterId - 1]
|
|
|
|
|
|
|
+ this.getTxtContent(infos.content)
|
|
|
this.$element('list').scrollTo({ index: 0 })
|
|
this.$element('list').scrollTo({ index: 0 })
|
|
|
|
|
+ this.currentPage = 1
|
|
|
},
|
|
},
|
|
|
goToContents() {
|
|
goToContents() {
|
|
|
$utils.route2theUrl('pages/contents', {
|
|
$utils.route2theUrl('pages/contents', {
|
|
@@ -318,6 +345,14 @@ export default {
|
|
|
$utils.routerBack()
|
|
$utils.routerBack()
|
|
|
},
|
|
},
|
|
|
sizeChange(type) {
|
|
sizeChange(type) {
|
|
|
|
|
+ if(type == 'minus' && this.userSetting.fontsize <=30 || type == 'plus' && this.userSetting.fontsize >=50){
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ // if(this.currentPage != 0){ //
|
|
|
|
|
+ // $utils.showToast('请回到第一页后再调整')
|
|
|
|
|
+ // return
|
|
|
|
|
+ // }
|
|
|
|
|
+ // this.paginateContent()
|
|
|
if (type === 'plus') this.userSetting.fontsize = this.userSetting.fontsize+ 2
|
|
if (type === 'plus') this.userSetting.fontsize = this.userSetting.fontsize+ 2
|
|
|
else this.userSetting.fontsize = this.userSetting.fontsize - 2
|
|
else this.userSetting.fontsize = this.userSetting.fontsize - 2
|
|
|
this.saveUserSettings()
|
|
this.saveUserSettings()
|
|
@@ -356,22 +391,53 @@ export default {
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
}
|
|
}
|
|
|
|
|
+ },
|
|
|
|
|
+ pageChangeFunction(evt) {
|
|
|
|
|
+ // 获取当前页数
|
|
|
|
|
+ this.currentPage = evt.curpage
|
|
|
|
|
+ },
|
|
|
|
|
+ pageEndFunction(evt) {
|
|
|
|
|
+ this.totalPage = evt.totalpage
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="less">
|
|
<style lang="less">
|
|
|
@import '../../assets/styles/index.less';
|
|
@import '../../assets/styles/index.less';
|
|
|
-/* .swiper {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 1500px;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .swiper-item {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- padding: 20px;
|
|
|
|
|
- } */
|
|
|
|
|
|
|
+
|
|
|
|
|
+.doc-page {
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ /* background-color: #ebcda3; */
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.index-class {
|
|
|
|
|
+ position: fixed;
|
|
|
|
|
+ font-size: 30px;
|
|
|
|
|
+ color: grey;
|
|
|
|
|
+ left: 50px;
|
|
|
|
|
+ bottom: 10px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.rich-text {
|
|
|
|
|
+ font-size: 22px;
|
|
|
|
|
+ margin: 24px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.index-wrapper {
|
|
|
|
|
+ width: 100px;
|
|
|
|
|
+ height: 100px;
|
|
|
|
|
+ /* background-color: red; */
|
|
|
|
|
+}
|
|
|
|
|
+.swiper {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 1100px;
|
|
|
|
|
+}
|
|
|
|
|
+.swiper-item {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ padding: 20px;
|
|
|
|
|
+}
|
|
|
.stack-wrapper {
|
|
.stack-wrapper {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
height: 100%;
|
|
height: 100%;
|
|
@@ -388,12 +454,13 @@ export default {
|
|
|
.g22kjdgy{
|
|
.g22kjdgy{
|
|
|
color: #ffffff;
|
|
color: #ffffff;
|
|
|
}
|
|
}
|
|
|
- .book-text {
|
|
|
|
|
|
|
+ /* .book-text {
|
|
|
margin: @gap-3 0;
|
|
margin: @gap-3 0;
|
|
|
- }
|
|
|
|
|
|
|
+ } */
|
|
|
}
|
|
}
|
|
|
.btn-bottom {
|
|
.btn-bottom {
|
|
|
.btn-primary;
|
|
.btn-primary;
|
|
|
|
|
+ margin: 0 @gap-2;
|
|
|
flex: 1;
|
|
flex: 1;
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
}
|
|
}
|