921 lines
29 KiB
Vue
921 lines
29 KiB
Vue
<template>
|
||
<view class="novelReading_content">
|
||
<!-- <u-navbar :title="navbarTitle" @rightClick="rightClick" :autoBack="true" :fixed="true" :bgColor="mainBodyBg"
|
||
:titleStyle="{ color: navigationBarTitleTextColor }" :leftIconColor="navigationBarTitleTextBackColor"
|
||
:shadow="true" :safeAreaInsetTop="true" :placeholder="true" /> -->
|
||
<!-- @tap="handelShowStepUp" -->
|
||
<view class="novelReading_body" :style="`background:${bodyReadingBg}`">
|
||
<!-- -->
|
||
<view class="novelReading_main_con">
|
||
<yingbing-ReadPage style="height: 100%;" ref="yingbingReadPage" :footerShow="true"
|
||
:page-type="charactersPageType" :font-size="newCharactersSize" :enableClick="true"
|
||
:line-height="defaultCharactersLineHeight" :color="novelContentColor" :bg-color="bodyReadingBg"
|
||
:slide="20" :enablePreload="false" @loadmore="loadmoreContent" @preload="preloadContent"
|
||
@change="currentChange" @setCatalog="setCatalog" @clickme="clickme" @clickher="clickher"
|
||
@clickTo="handelShowStepUp" :clickOption="{width:200,height: 400,left:'auto',top:'auto'}">
|
||
</yingbing-ReadPage>
|
||
</view>
|
||
</view>
|
||
<view class="u_popup_all">
|
||
<u-popup :show="tabBarPopupShow" mode="bottom" :overlay="false" zIndex="6" :bgColor="bodyReadingBg">
|
||
<view class="my_tabBar_Reading" :style="`background:${bodyReadingBg}`">
|
||
<view class="tabBar_Reading_item">
|
||
<view class="reading_item_icon" @tap="handelDirectoryPopup">
|
||
<image class="is_images" :src="barPopupIcon[novelMainTypeColor].directory_icon"></image>
|
||
</view>
|
||
<view class="reading_item_name" :style="`color:${tabBarTextColor}`">目录</view>
|
||
</view>
|
||
<view class="tabBar_Reading_item">
|
||
<view class="reading_item_icon" @tap="toBookshelf">
|
||
<image class="is_images" :src="barPopupIcon[novelMainTypeColor].bookshelf_icon"></image>
|
||
</view>
|
||
<view class="reading_item_name" :style="`color:${tabBarTextColor}`">书城</view>
|
||
</view>
|
||
<view class="tabBar_Reading_item" @tap="handelSteUpPopup">
|
||
<view class="reading_item_icon">
|
||
<image class="is_images" :src="barPopupIcon[novelMainTypeColor].step_up_icon"></image>
|
||
</view>
|
||
<view class="reading_item_name" :style="`color:${tabBarTextColor}`">设置</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<u-popup :show="readingPopupshow" mode="bottom" :overlay="false" zIndex="4" bgColor="transparent">
|
||
<view class="reading_schedule_box" :style="`background:${bodyReadingBg}`">
|
||
<view class="reading_schedule_body">
|
||
<view class="_previous_chapter"
|
||
:style="`color:${previousChapterBbuttonTextColor};background:${previousChapterBbuttonBg}`"
|
||
@tap="previousChapter">
|
||
上一章
|
||
</view>
|
||
<view class="_next_chapter"
|
||
:style="`color:${nextChapterBbuttonTextColor};background:${nextChapterBbuttonBg}`"
|
||
@tap="nextChapter">下一章
|
||
</view>
|
||
</view>
|
||
<view style="height: 140rpx" />
|
||
</view>
|
||
</u-popup>
|
||
<u-popup :show="stepUpPopupShow" mode="bottom" :overlay="false" bgColor="transparent" zIndex="5">
|
||
<view class="step_up_box" :style="`background:${bodyReadingBg}`">
|
||
<view class="step_up_box_body">
|
||
<view class="step_up_item">
|
||
<view class="step_up_item_name" :style="`color:${dialogTextColor}`">背景</view>
|
||
<view :class="[`step_up_item_bg`, novelMainTypeColor == 'F3EFE9' ? 'activeBlack' : '']"
|
||
style="background: #f3efe9" @tap="changNovelMainType('F3EFE9')"></view>
|
||
<view :class="[`step_up_item_bg`, novelMainTypeColor == 'CCD9E2' ? 'activeBlack' : '']"
|
||
style="background: #ccd9e2" @tap="changNovelMainType('CCD9E2')"></view>
|
||
<view :class="[`step_up_item_bg`, novelMainTypeColor == '333333' ? 'activeWhite' : '']"
|
||
@tap="changNovelMainType('333333')">
|
||
<image class="is_images" :src="setUpModeBlack" />
|
||
</view>
|
||
</view>
|
||
<view class="step_up_item mt40rpx">
|
||
<view class="step_up_item_name" :style="`color:${dialogTextColor}`">字号</view>
|
||
<view class="step_up_item_text_bg"
|
||
:style="`color:${dialogTextColor};background:${dialogATextBg}`"
|
||
@tap="reduceCharactersSize">
|
||
A-</view>
|
||
<view class="step_up_item_text_bg"
|
||
:style="`color:${dialogTextColor};background:${dialogATextBg}`"
|
||
@tap="addCharactersSize">A+
|
||
</view>
|
||
<view class="step_up_item_text_bg"
|
||
:style="`color:${dialogTextColor};background:${dialogATextBg}`"
|
||
@tap="handelCharactersSize">
|
||
默认</view>
|
||
</view>
|
||
</view>
|
||
<view style="height: 140rpx" />
|
||
</view>
|
||
</u-popup>
|
||
<u-popup :show="directoryPopupShow" @close="directoryPopupClose" mode="right" :safeAreaInsetTop="true">
|
||
<view class="directory_popup_box">
|
||
<scroll-view scroll-y="true" @scrolltoupper="directoryPopupUpper"
|
||
@scrolltolower="directoryPopupLower" :show-scrollbar="false" class="directory_scroll_y">
|
||
<view class="_popup_box_item" v-for="m in directoryList" :key="m.id" @tap="handelDirectoryItem">
|
||
<view :class="['_item_name', readDirectoryActive == m.chapterorder ? 'active' : '']">
|
||
{{ m.chaptername }}
|
||
</view>
|
||
<view v-if="m.isvip" class="_item_chapter_lock">
|
||
<image class="is_images" src="/static/images/chapter_lock.png"></image>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</u-popup>
|
||
<u-popup :show="purchaseFullShow" @close="purchaseFullClose" mode="bottom" overlayStyle="top:44px">
|
||
<view class="purchaseFull_popup_box" :style="`background:${bodyReadingBg}`">
|
||
<view>
|
||
<CommBookLeftRigth :bookTips="bookInfo.category_name" :bookName="bookInfo.title"
|
||
:bookImage="bookInfo.cover" :bookIntroduction="`${readChapterInfoObj.allprice}书币`" />
|
||
</view>
|
||
<view class="purchaseFull_popup_btn_box">
|
||
<view class="purchaseFull_popup_btn" @tap="handelPurchaseFull">需要全本购买</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<u-modal :show="balanceShow" :title="balanceTitle" content='余额不足,请充值...'
|
||
:showCancelButton="!readChapterFlag" @confirm="balanceConfirm" @cancel="balanceCancel" />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import setUpReadingColorAll from './setUpReadingColorAll.js';
|
||
import bookshelf_333 from '@/static/images/novelReading/bookshelf_333.png';
|
||
import directory_333 from '@/static/images/novelReading/directory_333.png';
|
||
import step_up_333 from '@/static/images/novelReading/step_up_333.png';
|
||
import bookshelf_ccd9e2 from '@/static/images/novelReading/bookshelf_ccd9e2.png';
|
||
import step_up_ccd9e2 from '@/static/images/novelReading/step_up_ccd9e2.png';
|
||
import directory_ccd9e2 from '@/static/images/novelReading/directory_ccd9e2.png';
|
||
import bookshelf_f3efe from '@/static/images/novelReading/bookshelf_f3efe.png';
|
||
import directory_f3efe9 from '@/static/images/novelReading/directory_f3efe9.png';
|
||
import step_up_f3efe from '@/static/images/novelReading/step_up_f3efe.png';
|
||
import set_up_mode_black from '@/static/images/novelReading/set_up_mode_black.png';
|
||
import recharge_empty from '@/static/images/recharge_empty.png'
|
||
import config from '@/config/index';
|
||
import {
|
||
isGetSystemInfo
|
||
} from '@/utils/systemInfo.js';
|
||
import {
|
||
myGetStorage,
|
||
mySetStorage
|
||
} from '@/utils/storage/index.js';
|
||
import myData from './data.js';
|
||
import CommBookLeftRigth from '@/components/commBookLeftRigth/index.vue'
|
||
export default {
|
||
components: {
|
||
CommBookLeftRigth
|
||
},
|
||
data() {
|
||
return {
|
||
navbarTitle: '小说阅读页面',
|
||
novelMainTypeColor: '',
|
||
setUpColorAll: {},
|
||
navigationBarTitleTextColor: '',
|
||
mainBodyBg: '',
|
||
navigationBarTitleTextBackColor: '',
|
||
previousChapterBbuttonBg: '',
|
||
previousChapterBbuttonTextColor: '',
|
||
nextChapterBbuttonBg: '',
|
||
nextChapterBbuttonTextColor: '',
|
||
bodyReadingHeight: 0,
|
||
scrollReadingHeight: 0,
|
||
// 内容背景
|
||
bodyReadingBg: '',
|
||
// 底部安全区
|
||
// bottomSecureHeight: 0,
|
||
tabBarPopupShow: false,
|
||
readingPopupshow: false,
|
||
stepUpPopupShow: false,
|
||
purchaseFullShow: false,
|
||
balanceShow: false,
|
||
balanceTitle: '下一章，付费章节',
|
||
// bar 的icon
|
||
barPopupIcon: {},
|
||
dialogTextColor: '',
|
||
progressBg: '',
|
||
progressActiveBg: '',
|
||
setUpModeBlack: '',
|
||
dialogATextBg: '',
|
||
novelContentColor: '',
|
||
// 目录信息
|
||
booksDirectorySid: '2387',
|
||
bookInfo: {},
|
||
booksDirectoryPage: 1,
|
||
newBooksDirectoryPage: [],
|
||
directoryList: [],
|
||
// directoryPopupHeight: 0,
|
||
directoryPopupShow: false,
|
||
// 小说信息
|
||
novelReadingContentText: [],
|
||
charactersPageType: 'real',
|
||
defaultCharactersSize: 28,
|
||
newCharactersSize: 28,
|
||
defaultCharactersLineHeight: 20,
|
||
readDirectoryActive: '',
|
||
computeRichText: '',
|
||
computeRichTextWidth: 0,
|
||
refresherTriggered: false,
|
||
readChapterid: '',
|
||
readChapterFlag: false,
|
||
readChapterInfoObj: {},
|
||
readChapterLastid: '',
|
||
readChapterNextid: '',
|
||
refresherEnabled: true,
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
this.booksDirectorySid = options.sid;
|
||
this.navbarTitle = options.n;
|
||
this.readChapterid = options.id;
|
||
},
|
||
onShow() {
|
||
const bookSid = this.booksDirectorySid;
|
||
const data = {
|
||
sid: bookSid,
|
||
}
|
||
uni.$u.http.post('/bookdetails', data).then((res) => {
|
||
uni.hideLoading();
|
||
if (res.status == 1) {
|
||
const info = res.data.info;
|
||
const cover = info.cover.includes('http') ? info.cover : `${config.baseUrl}${info.cover}`;
|
||
this.bookInfo = {
|
||
...info,
|
||
cover
|
||
};
|
||
}
|
||
}).catch((err) => {
|
||
uni.hideLoading();
|
||
})
|
||
this.isGetUserRead();
|
||
},
|
||
methods: {
|
||
async isGetUserRead() {
|
||
const booksDirectorySid = this.booksDirectorySid;
|
||
const booksDirectoryPage = this.booksDirectoryPage;
|
||
const readChapterid = this.readChapterid ? this.readChapterid : '';
|
||
// this.readDirectoryActive = '3';
|
||
// await this.isGetDirectory(booksDirectorySid, booksDirectoryPage);
|
||
const readChapterInfoObj = await this.isGetBookInfo(readChapterid, '', true);
|
||
this.novelReadingContentText = [readChapterInfoObj];
|
||
this.readDirectoryActive = readChapterInfoObj.chapterorder;
|
||
this.readChapterLastid = readChapterInfoObj.lastid;
|
||
this.readChapterNextid = readChapterInfoObj.nextid;
|
||
this.$refs.yingbingReadPage.init({
|
||
contents: [readChapterInfoObj],
|
||
start: 0,
|
||
currentChapter: readChapterInfoObj.chapterorder
|
||
})
|
||
},
|
||
isGetBookInfo(chapterId, statusType, isShowLoading = false) {
|
||
return new Promise((resolve) => {
|
||
const booksDirectorySid = this.booksDirectorySid;
|
||
const novelReadingContentText = this.novelReadingContentText;
|
||
if (isShowLoading) {
|
||
uni.showLoading({
|
||
title: '加载中...'
|
||
});
|
||
}
|
||
const data = {
|
||
sid: booksDirectorySid,
|
||
};
|
||
if (chapterId) {
|
||
data.id = chapterId;
|
||
}
|
||
uni.$u.http.post('/read', data).then((res) => {
|
||
uni.hideLoading();
|
||
if (res.status == 1) {
|
||
const resData = res.data;
|
||
const is_novel_content = resData.novel_content.replace(/<\/p>/g, '\n')
|
||
const readChapterInfoObj = {
|
||
...resData,
|
||
content: is_novel_content.replace(/<p>/g, ''),
|
||
isStart: resData.lastid == '' ? true : false,
|
||
isEnd: resData.nextid == '' ? true : false,
|
||
chapter: resData.chapterorder,
|
||
title: resData.chaptername,
|
||
isTtitle: resData.title
|
||
// richTextNodes: `<h3>${res.data.chaptername}</h3></br>${res.data.novel_content}`
|
||
// richTextNodes: `<h3>${res.data.chaptername}</h3></br>${res.data.novel_content}`
|
||
};
|
||
this.readChapterInfoObj = readChapterInfoObj;
|
||
if (readChapterInfoObj.chackpay == 1) {
|
||
resolve(readChapterInfoObj);
|
||
} else if (readChapterInfoObj.chackpay == 2) {
|
||
this.balanceShow = true;
|
||
this.balanceTitle = '下一章，付费章节';
|
||
if (isShowLoading) {
|
||
this.readChapterFlag = true;
|
||
}
|
||
} else if (readChapterInfoObj.chackpay == 3) {
|
||
this.purchaseFullShow = true;
|
||
if (isShowLoading) {
|
||
this.readChapterFlag = true;
|
||
}
|
||
}
|
||
}
|
||
}).catch((err) => {
|
||
uni.hideLoading();
|
||
console.log(err, '========');
|
||
});
|
||
})
|
||
|
||
},
|
||
async loadmoreContent(chapter, callback) {
|
||
console.log(chapter, "*****************")
|
||
const newReadDirectoryActive = this.readDirectoryActive;
|
||
const newReadChapterLastid = this.readChapterLastid;
|
||
const newNovelReadingContentText = this.novelReadingContentText;
|
||
const newReadChapterNextid = this.readChapterNextid;
|
||
console.log(newNovelReadingContentText,"newNovelReadingContentText")
|
||
// const itemTemp = newNovelReadingContentText.filter((m) => m.chapter == parseInt(chapter + 1));
|
||
// console.log(itemTemp,itemTemp[0].lastid, "itemTempitemTempitemTemp")
|
||
if (newReadDirectoryActive != 1) {
|
||
if (chapter < newReadDirectoryActive) {
|
||
// const readChapterInfoObj = await this.isGetBookInfo(itemTemp[0].lastid);
|
||
const readChapterInfoObj = await this.isGetBookInfo(newReadChapterLastid);
|
||
console.log(readChapterInfoObj, "上一章")
|
||
this.novelReadingContentText = [...newNovelReadingContentText, readChapterInfoObj];
|
||
this.readDirectoryActive = chapter;
|
||
// this.readChapterLastid = readChapterInfoObj.lastid;
|
||
// this.readChapterNextid = readChapterInfoObj.nextid;
|
||
callback('success', readChapterInfoObj)
|
||
}
|
||
if (chapter > newReadDirectoryActive) {
|
||
// const readChapterInfoObj = await this.isGetBookInfo(itemTemp[0].nextid);
|
||
const readChapterInfoObj = await this.isGetBookInfo(newReadChapterNextid);
|
||
console.log(readChapterInfoObj, "下一章")
|
||
this.novelReadingContentText = [readChapterInfoObj, ...newNovelReadingContentText];
|
||
this.readDirectoryActive = chapter;
|
||
// this.readChapterLastid = readChapterInfoObj.lastid;
|
||
// this.readChapterNextid = readChapterInfoObj.nextid;
|
||
callback('success', readChapterInfoObj)
|
||
}
|
||
}
|
||
},
|
||
currentChange(pageInfo) {
|
||
const novelReadingContentText = this.novelReadingContentText;
|
||
const chapter = pageInfo.chapter;
|
||
const itemTemp = novelReadingContentText.filter((m) => m.chapter == chapter);
|
||
this.readChapterLastid = itemTemp[0].lastid;
|
||
this.readChapterNextid = itemTemp[0].nextid;
|
||
},
|
||
previousChapter() {
|
||
const readChapterLastid = this.readChapterLastid
|
||
if (!readChapterLastid) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: "已经是第一章了"
|
||
})
|
||
return
|
||
}
|
||
this.isGetBookInfo(readChapterLastid, 'previousChapter');
|
||
},
|
||
nextChapter() {
|
||
const readChapterNextid = this.readChapterNextid;
|
||
if (!readChapterNextid) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: "已经是最后一章了~"
|
||
})
|
||
return
|
||
}
|
||
this.isGetBookInfo(readChapterNextid, 'nextChapter');
|
||
},
|
||
handelDirectoryItem(row) {},
|
||
handelShowStepUp() {
|
||
this.tabBarPopupShow = !this.tabBarPopupShow;
|
||
this.readingPopupshow = !this.readingPopupshow;
|
||
this.stepUpPopupShow = false;
|
||
},
|
||
handelDirectoryPopup() {
|
||
// this.directoryPopupShow = true;
|
||
const readChapterInfoObj = this.readChapterInfoObj;
|
||
const readDirectoryActive = this.readDirectoryActive;
|
||
uni.navigateTo({
|
||
url: `/pages/bookRecommendList/bookRecommendList?sid=${readChapterInfoObj.sid}&t=${readChapterInfoObj.title}&c=${readDirectoryActive}`
|
||
})
|
||
},
|
||
directoryPopupClose() {
|
||
// this.directoryPopupShow = false;
|
||
// const readChapterInfoObj = this.readChapterInfoObj;
|
||
// uni.navigateTo({
|
||
// url: `/pages/bookRecommendList/bookRecommendList?sid=${readChapterInfoObj.sid}&t=${readChapterInfoObj.title}&c=${readChapterInfoObj.chapterorder}`
|
||
// })
|
||
},
|
||
purchaseFullClose() {
|
||
const readChapterFlag = this.readChapterFlag;
|
||
if (readChapterFlag) {
|
||
return;
|
||
}
|
||
this.purchaseFullShow = false;
|
||
},
|
||
handelSteUpPopup() {
|
||
this.stepUpPopupShow = true;
|
||
},
|
||
balanceConfirm() {
|
||
uni.navigateTo({
|
||
url: `/pages/voucherCenter/index`
|
||
})
|
||
},
|
||
balanceCancel() {
|
||
this.balanceShow = false;
|
||
},
|
||
handelPurchaseFull() {
|
||
const readChapterInfoObj = this.readChapterInfoObj;
|
||
uni.showLoading({
|
||
title: '加载中...'
|
||
});
|
||
const data = {
|
||
sid: readChapterInfoObj.sid,
|
||
id: readChapterInfoObj.id,
|
||
allprice: readChapterInfoObj.allprice,
|
||
};
|
||
uni.$u.http.post('/buyall', data).then((res) => {
|
||
uni.hideLoading();
|
||
if (res.status == 1) {
|
||
if (res.data.status == 2) {
|
||
this.balanceShow = true;
|
||
this.balanceTitle = '';
|
||
}
|
||
}
|
||
}).catch((err) => {
|
||
uni.hideLoading();
|
||
});
|
||
},
|
||
// 切换页面颜色
|
||
changNovelMainType(type) {
|
||
|
||
this.novelMainTypeColor = type;
|
||
this.initPage(type);
|
||
const novelMainObj = myGetStorage('novelMainObj') || '{}';
|
||
const obj = {
|
||
...JSON.parse(novelMainObj),
|
||
novelMainTypeColor: type,
|
||
}
|
||
mySetStorage('novelMainObj', JSON.stringify(obj));
|
||
},
|
||
// 字体减小
|
||
reduceCharactersSize() {
|
||
const newCharactersSize = this.newCharactersSize;
|
||
this.newCharactersSize = newCharactersSize - 2;
|
||
const novelMainObj = myGetStorage('novelMainObj') || '{}';
|
||
const obj = {
|
||
...JSON.parse(novelMainObj),
|
||
charactersSize: newCharactersSize - 2,
|
||
}
|
||
mySetStorage('novelMainObj', JSON.stringify(obj));
|
||
},
|
||
// 字体加大
|
||
addCharactersSize() {
|
||
const newCharactersSize = this.newCharactersSize;
|
||
this.newCharactersSize = newCharactersSize + 2;
|
||
const novelMainObj = myGetStorage('novelMainObj') || '{}';
|
||
const obj = {
|
||
...JSON.parse(novelMainObj),
|
||
charactersSize: newCharactersSize + 2,
|
||
}
|
||
mySetStorage('novelMainObj', JSON.stringify(obj));
|
||
},
|
||
// 恢复默认字体大小
|
||
handelCharactersSize() {
|
||
const defaultCharactersSize = this.defaultCharactersSize;
|
||
this.newCharactersSize = defaultCharactersSize;
|
||
const novelMainObj = myGetStorage('novelMainObj') || '{}';
|
||
const obj = {
|
||
...JSON.parse(novelMainObj),
|
||
charactersSize: defaultCharactersSize,
|
||
}
|
||
mySetStorage('novelMainObj', JSON.stringify(obj));
|
||
},
|
||
// 目录划到了最上边
|
||
directoryPopupUpper() {
|
||
const isBooksDirectoryPage = this.booksDirectoryPage;
|
||
const newBooksDirectoryPage = this.newBooksDirectoryPage;
|
||
if (isBooksDirectoryPage > 1 && newBooksDirectoryPage.indexOf(isBooksDirectoryPage) == -1) {
|
||
const booksDirectorySid = this.booksDirectorySid;
|
||
const booksDirectoryPage = isBooksDirectoryPage - 1;
|
||
this.booksDirectoryPage = booksDirectoryPage;
|
||
this.isGetDirectory(booksDirectorySid, booksDirectoryPage, 'upper');
|
||
}
|
||
},
|
||
// 目录划到了最下边
|
||
directoryPopupLower() {
|
||
const isBooksDirectoryPage = this.booksDirectoryPage;
|
||
const booksDirectorySid = this.booksDirectorySid;
|
||
const booksDirectoryPage = isBooksDirectoryPage + 1;
|
||
const newBooksDirectoryPage = [...this.newBooksDirectoryPage, booksDirectoryPage];
|
||
this.newBooksDirectoryPage = newBooksDirectoryPage;
|
||
this.booksDirectoryPage = booksDirectoryPage;
|
||
this.isGetDirectory(booksDirectorySid, booksDirectoryPage, 'lower');
|
||
},
|
||
isGetDirectory(sid, page, type) {
|
||
uni.showLoading({
|
||
title: '加载中...'
|
||
});
|
||
const data = {
|
||
sid,
|
||
page
|
||
};
|
||
uni.$u.http.post('/getDirectory', data).then((res) => {
|
||
uni.hideLoading();
|
||
if (res.status == 1) {
|
||
const directory = res.data.directory;
|
||
let columnsLabel = '';
|
||
if (type == 'upper') {
|
||
this.directoryList = [...directory, ...this.directoryList];
|
||
} else if (type == 'lower') {
|
||
this.directoryList = [...this.directoryList, ...directory];
|
||
} else {
|
||
this.directoryList = directory;
|
||
}
|
||
}
|
||
}).catch((err) => {
|
||
uni.hideLoading();
|
||
console.log(err, '========');
|
||
});
|
||
},
|
||
initPage(novelMainTypeColor) {
|
||
const mainBodyBg = setUpReadingColorAll[novelMainTypeColor].mainBodyBg;
|
||
this.navigationBarTitleTextColor = setUpReadingColorAll[novelMainTypeColor].navigationBarTitleTextColor;
|
||
this.mainBodyBg = mainBodyBg;
|
||
this.bodyReadingBg = mainBodyBg;
|
||
this.dialogTextColor = setUpReadingColorAll[novelMainTypeColor].dialogTextColor;
|
||
this.progressBg = setUpReadingColorAll[novelMainTypeColor].progressBg;
|
||
this.progressActiveBg = setUpReadingColorAll[novelMainTypeColor].progressActiveBg;
|
||
this.setUpModeBlack = set_up_mode_black;
|
||
this.dialogATextBg = setUpReadingColorAll[novelMainTypeColor].dialogATextBg;
|
||
this.tabBarTextColor = setUpReadingColorAll[novelMainTypeColor].tabBarTextColor;
|
||
this.novelContentColor = setUpReadingColorAll[novelMainTypeColor].novelContentColor;
|
||
this.navigationBarTitleTextBackColor = setUpReadingColorAll[novelMainTypeColor]
|
||
.navigationBarTitleTextBackColor;
|
||
this.previousChapterBbuttonBg = setUpReadingColorAll[novelMainTypeColor].previousChapterBbuttonBg;
|
||
this.previousChapterBbuttonTextColor = setUpReadingColorAll[novelMainTypeColor]
|
||
.previousChapterBbuttonTextColor;
|
||
this.nextChapterBbuttonBg = setUpReadingColorAll[novelMainTypeColor].nextChapterBbuttonBg;
|
||
this.nextChapterBbuttonTextColor = setUpReadingColorAll[novelMainTypeColor].nextChapterBbuttonTextColor;
|
||
},
|
||
rightClick() {
|
||
uni.navigateBack();
|
||
},
|
||
toBookshelf() {
|
||
uni.reLaunch({
|
||
url: `/pages/bookCity/bookCity/index`
|
||
})
|
||
}
|
||
},
|
||
onPullDownRefresh() {
|
||
// const isReadDirectoryActive = this.readDirectoryActive;
|
||
// if(isReadDirectoryActive == 0) {
|
||
// uni.showToast({
|
||
// icon:'none',
|
||
// title:"已经是第一章了"
|
||
// })
|
||
// uni.stopPullDownRefresh()
|
||
// return
|
||
// }
|
||
// const readDirectoryActive = isReadDirectoryActive- 1;
|
||
// const novelReadingContentText = this.myData[readDirectoryActive];
|
||
// this.novelReadingContentText = [novelReadingContentText, ...this.novelReadingContentText];
|
||
// // setTimeout(() => {
|
||
// this.computeRichText = this.myData[readDirectoryActive].content;
|
||
// // this.readDirectoryActive = readDirectoryActive;
|
||
// const query = uni.createSelectorQuery().in(this);
|
||
// this.$nextTick(() => {
|
||
// query.select(`#compute_rich_text`).boundingClientRect((data) => {
|
||
// this.isScrollTop = parseInt(data.height) - 30;
|
||
// }).exec();
|
||
// });
|
||
// uni.stopPullDownRefresh()
|
||
},
|
||
created() {
|
||
const novelMainObj = myGetStorage('novelMainObj') || '{}';
|
||
const novelMainTypeColor = JSON.parse(novelMainObj).novelMainTypeColor || 'F3EFE9';
|
||
const {
|
||
screenHeight = 0, statusBarHeight = 0, windowHeight = 0, devicePixelRatio, windowBottom, windowWidth,
|
||
screenWidth
|
||
} = isGetSystemInfo();
|
||
// this.myData = myData;
|
||
this.computeRichTextWidth = windowWidth;
|
||
this.novelMainTypeColor = novelMainTypeColor;
|
||
this.newCharactersSize = JSON.parse(novelMainObj).charactersSize || 28;
|
||
this.bodyReadingHeight = screenHeight - statusBarHeight - devicePixelRatio * 22;
|
||
// 不需要
|
||
// this.scrollReadingHeight = screenHeight - statusBarHeight - devicePixelRatio * 38;
|
||
// this.scrollReadingHeight = windowHeight - (screenWidth / 375) * 54;
|
||
// // #ifdef APP-PLUS
|
||
// this.directoryPopupHeight = screenHeight - statusBarHeight;
|
||
// // #endif
|
||
// // #ifdef H5 || MP-WEIXIN
|
||
// this.directoryPopupHeight = screenHeight - statusBarHeight - devicePixelRatio * 22;
|
||
// // #endif
|
||
|
||
// this.bottomSecureHeight = screenHeight - windowHeight;
|
||
this.setUpColorAll = setUpReadingColorAll;
|
||
this.barPopupIcon = {
|
||
'F3EFE9': {
|
||
bookshelf_icon: bookshelf_f3efe,
|
||
directory_icon: directory_f3efe9,
|
||
step_up_icon: step_up_f3efe
|
||
},
|
||
'CCD9E2': {
|
||
bookshelf_icon: bookshelf_ccd9e2,
|
||
directory_icon: directory_ccd9e2,
|
||
step_up_icon: step_up_ccd9e2
|
||
},
|
||
'333333': {
|
||
bookshelf_icon: bookshelf_333,
|
||
directory_icon: directory_333,
|
||
step_up_icon: step_up_333
|
||
}
|
||
};
|
||
this.initPage(novelMainTypeColor);
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.is_images {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.mt40rpx {
|
||
margin-top: 40rpx;
|
||
}
|
||
|
||
.novelReading_content::v-deep.u-navbar__content__title {
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.novelReading_content::v-deep.u-navbar--fixed {
|
||
box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.novelReading_content::v-deep.z-paging-content {
|
||
position: relative;
|
||
}
|
||
|
||
#compute_rich_text {
|
||
position: fixed;
|
||
top: 1500px;
|
||
padding: 32rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.novelReading_content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
|
||
.novelReading_body {
|
||
flex: 1;
|
||
width: 100%;
|
||
|
||
.novelReading_main_con {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
height: 100%;
|
||
// // padding: 32rpx 32rpx;
|
||
padding-bottom: constant(safe-area-inset-bottom);
|
||
/* 兼容 iOS 设备 */
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
/* 兼容 iPhone X 及以上设备 */
|
||
padding-top: var(--status-bar-height);
|
||
/* 兼容 iOS 设备 */
|
||
// padding-top:var(–status-bar-height);
|
||
box-sizing: border-box;
|
||
|
||
.novelReading_main {
|
||
flex: 1;
|
||
width: 100%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
|
||
.novelReading_characters_scroll {
|
||
width: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
box-sizing: border-box;
|
||
|
||
.read_chapter {
|
||
padding: 40rpx 0;
|
||
}
|
||
|
||
.novelReading_characters_main {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.reading_schedule_box {
|
||
width: 100%;
|
||
height: 82rpx;
|
||
// padding: 40rpx;
|
||
// box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.2);
|
||
border-radius: 40rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
}
|
||
|
||
.u_popup_all {
|
||
flex: 0;
|
||
}
|
||
}
|
||
|
||
.my_tabBar_Reading {
|
||
width: 100%;
|
||
height: 140rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 40rpx;
|
||
box-sizing: border-box;
|
||
border-top: 1rpx solid #d6d2ce;
|
||
// padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS 设备 */
|
||
// padding-bottom: env(safe-area-inset-bottom); /* 兼容 iPhone X 及以上设备 */
|
||
|
||
.tabBar_Reading_item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.reading_item_icon {
|
||
width: 34rpx;
|
||
height: 34rpx;
|
||
}
|
||
|
||
.reading_item_name {
|
||
font-size: 30rpx;
|
||
line-height: 1;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.reading_schedule_box {
|
||
width: 100%;
|
||
box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.2);
|
||
border-radius: 40rpx;
|
||
|
||
.reading_schedule_body {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 100%;
|
||
padding: 40rpx;
|
||
box-sizing: border-box;
|
||
background: transparent;
|
||
|
||
._previous_chapter {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 192rpx;
|
||
height: 82rpx;
|
||
font-size: 34rpx;
|
||
line-height: 1;
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
._next_chapter {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 442rpx;
|
||
height: 82rpx;
|
||
font-size: 34rpx;
|
||
line-height: 1;
|
||
border-radius: 12rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.step_up_box {
|
||
width: 100%;
|
||
box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.2);
|
||
border-radius: 40rpx;
|
||
|
||
.step_up_box_body {
|
||
width: 100%;
|
||
padding: 40rpx 24rpx;
|
||
box-sizing: border-box;
|
||
background: transparent;
|
||
|
||
.step_up_item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.step_up_item_name {
|
||
line-height: 1;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.step_up_item_bg {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 188rpx;
|
||
height: 74rpx;
|
||
border-radius: 37rpx;
|
||
box-sizing: border-box;
|
||
border: 2rpx solid transparent;
|
||
}
|
||
|
||
.step_up_item_text_bg {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 188rpx;
|
||
height: 74rpx;
|
||
border-radius: 37rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.step_up_item_bg.activeBlack {
|
||
border-color: #1a1a1a;
|
||
}
|
||
|
||
.step_up_item_bg.activeWhite {
|
||
border-color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.reading_schedule_slider::v-deep.uni-slider-handle-wrapper {
|
||
height: 60rpx;
|
||
border-radius: 30rpx;
|
||
|
||
.uni-slider-track {
|
||
border-radius: 30rpx;
|
||
}
|
||
}
|
||
|
||
.directory_popup_box {
|
||
position: relative;
|
||
width: 560rpx;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
|
||
.directory_scroll_y {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
padding-left: 32rpx;
|
||
padding-right: 32rpx;
|
||
box-sizing: border-box;
|
||
padding-bottom: constant(safe-area-inset-bottom);
|
||
/* 兼容 iOS 设备 */
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
/* 兼容 iPhone X 及以上设备 */
|
||
|
||
._popup_box_item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 120rpx;
|
||
border-bottom: 1rpx solid #f2f2f2;
|
||
|
||
._item_name {
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
line-height: 1;
|
||
}
|
||
|
||
._item_name.active {
|
||
color: #ff728f;
|
||
}
|
||
|
||
._item_chapter_lock {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.purchaseFull_popup_box {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 50rpx 32rpx;
|
||
|
||
.purchaseFull_popup_btn_box {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: 50rpx;
|
||
|
||
.purchaseFull_popup_btn {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 640rpx;
|
||
height: 84rpx;
|
||
font-size: 30rpx;
|
||
color: #fff;
|
||
background: linear-gradient(to top, #FBA676, #E95E32);
|
||
border-radius: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
</style> |