980 lines
31 KiB
Vue
980 lines
31 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" />
|
|
<view class="novelReading_body" :style="`background:${bodyReadingBg}`" @tap="handelShowStepUp">
|
|
<view class="novelReading_main_con">
|
|
<!-- :style="`height:${bodyReadingHeight}px;`" -->
|
|
<!-- :refresher-enabled="true" upper-threshold="200" @refresherrefresh="refresherrefresh" :scroll-top="isScrollTop" -->
|
|
<view class="novelReading_main">
|
|
<!-- @refresherpulling="refresherpulling" -->
|
|
<!-- :scroll-top="isScrollTop" :scroll-into-view="`richText_${readDirectoryActive}`" @scrolltoupper="charactersToupper"-->
|
|
<scroll-view scroll-y="true" :scroll-top="isScrollTop" @scrolltolower="charactersLower"
|
|
:refresher-enabled="true" @scroll="charactersScroll" @refresherrefresh="refresherrefresh"
|
|
class="novelReading_characters_scroll" lower-threshold="10"
|
|
:refresher-triggered="refresherTriggered">
|
|
<view class="novelReading_characters_main"
|
|
:style="`color:${novelContentColor};font-size:${newCharactersSize}rpx;line-height:${defaultCharactersLineHeight};`"
|
|
v-for="m in novelReadingContentText" :key="m.id" :data-chapterorder="m.chapterorder"
|
|
:data-lastid="m.lastid" :data-nextid="m.nextid">
|
|
<!-- <rich-text :nodes="m.content" :ref="`richText_${m.id}`"></rich-text> -->
|
|
<!-- <rich-text :nodes="`<h3>${m.chaptername}</h3></br>${m.novel_content}`"
|
|
:ref="`richText_${m.id}`"></rich-text> -->
|
|
<rich-text :nodes="`${m.richTextNodes}`" :ref="`richText_${m.id}`"></rich-text>
|
|
<!-- recharge_empty -->
|
|
</view>
|
|
<!-- <view v-if="readChapterInfoObj.chackpay == 2" class="read_chapter">
|
|
<view class=""
|
|
:style="`color:${novelContentColor};font-size:${newCharactersSize}rpx;line-height:${defaultCharactersLineHeight};`">
|
|
<h3>{{readChapterInfoObj.chaptername}}</h3>
|
|
</view>
|
|
<u-empty icon="/static/images/recharge_empty.png" text="余额不足,请充值..." />
|
|
</view> -->
|
|
</scroll-view>
|
|
</view>
|
|
<!-- <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> -->
|
|
</view>
|
|
<view id="compute_rich_text"
|
|
:style="`width:${computeRichTextWidth}px;color:${novelContentColor};font-size:${newCharactersSize}rpx;line-height:${defaultCharactersLineHeight}`">
|
|
<rich-text :nodes="computeRichText"></rich-text>
|
|
</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: [],
|
|
defaultCharactersSize: 46,
|
|
newCharactersSize: 46,
|
|
defaultCharactersLineHeight: 2,
|
|
readDirectoryActive: '',
|
|
myData: [],
|
|
computeRichText: '',
|
|
computeRichTextWidth: 0,
|
|
isScrollTop: 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 booksDirectoryPage = this.booksDirectoryPage;
|
|
// const newBooksDirectoryPage = [...this.newBooksDirectoryPage, booksDirectoryPage];
|
|
// this.newBooksDirectoryPage = newBooksDirectoryPage;
|
|
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);
|
|
await this.isGetBookInfo(readChapterid, '', true);
|
|
},
|
|
isGetBookInfo(chapterId, statusType, isShowLoading = false) {
|
|
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 readChapterInfoObj = {
|
|
...res.data,
|
|
richTextNodes: `<h3>${res.data.chaptername}</h3></br>${res.data.novel_content}`
|
|
};
|
|
this.readChapterInfoObj = readChapterInfoObj;
|
|
if (readChapterInfoObj.chackpay == 1) {
|
|
this.isScrollTop = 0.01;
|
|
if (statusType == 'refresherrefresh') {
|
|
this.novelReadingContentText = [readChapterInfoObj, ...novelReadingContentText];
|
|
this.computeRichText = readChapterInfoObj.richTextNodes;
|
|
const query = uni.createSelectorQuery().in(this);
|
|
this.$nextTick(() => {
|
|
query.select(`#compute_rich_text`).boundingClientRect((data) => {
|
|
this.isScrollTop = parseInt(data.height) - 20;
|
|
}).exec();
|
|
});
|
|
this.refresherTriggered = false;
|
|
} else if (statusType == 'charactersLower') {
|
|
this.novelReadingContentText = [...novelReadingContentText, readChapterInfoObj];
|
|
} else if (statusType == 'nextChapter') {
|
|
this.novelReadingContentText = [readChapterInfoObj];
|
|
this.readDirectoryActive = readChapterInfoObj.chapterorder;
|
|
this.readChapterLastid = readChapterInfoObj.lastid;
|
|
this.readChapterNextid = readChapterInfoObj.nextid;
|
|
this.$nextTick(() => {
|
|
this.isScrollTop = 0;
|
|
})
|
|
} else if (statusType == 'previousChapter') {
|
|
this.novelReadingContentText = [readChapterInfoObj];
|
|
this.readDirectoryActive = readChapterInfoObj.chapterorder;
|
|
this.readChapterLastid = readChapterInfoObj.lastid;
|
|
this.readChapterNextid = readChapterInfoObj.nextid;
|
|
this.$nextTick(() => {
|
|
this.isScrollTop = 0;
|
|
})
|
|
} else {
|
|
this.novelReadingContentText = [readChapterInfoObj];
|
|
this.readDirectoryActive = readChapterInfoObj.chapterorder;
|
|
this.readChapterLastid = readChapterInfoObj.lastid;
|
|
this.readChapterNextid = readChapterInfoObj.nextid;
|
|
}
|
|
} 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, '========');
|
|
});
|
|
},
|
|
refresherrefresh() {
|
|
const readChapterInfoObj = this.readChapterInfoObj;
|
|
const readChapterLastid = this.readChapterLastid;
|
|
this.refresherTriggered = true;
|
|
if (!readChapterLastid) {
|
|
setTimeout(() => {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: "已经是第一章了"
|
|
})
|
|
this.refresherTriggered = false;
|
|
}, 1000)
|
|
return
|
|
}
|
|
this.isGetBookInfo(readChapterLastid, 'refresherrefresh');
|
|
},
|
|
charactersLower() {
|
|
const readChapterNextid = this.readChapterNextid;
|
|
// if (readChapterInfoObj.chackpay != 1) {
|
|
// return
|
|
// }
|
|
if (!readChapterNextid) {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: "已经是最后一章了~"
|
|
})
|
|
return
|
|
}
|
|
this.isGetBookInfo(readChapterNextid, 'charactersLower');
|
|
},
|
|
charactersScroll(e) {
|
|
const bodyReadingHeight = this.bodyReadingHeight;
|
|
const scrollTop = e.detail.scrollTop;
|
|
// this.isScrollTop = scrollTop;
|
|
uni.createSelectorQuery().selectAll('.novelReading_characters_main').boundingClientRect((data) => {
|
|
data.forEach((m) => {
|
|
if (m.top < bodyReadingHeight) {
|
|
this.readDirectoryActive = m.dataset.chapterorder;
|
|
this.readChapterLastid = m.dataset.lastid;
|
|
this.readChapterNextid = m.dataset.nextid;
|
|
}
|
|
});
|
|
}).exec();
|
|
},
|
|
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 || 46;
|
|
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 及以上设备 */
|
|
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 及以上设备 */
|
|
// padding-top: constant(safe-area-inset-top);
|
|
// /* 兼容 iOS 设备 */
|
|
// padding-top: env(safe-area-inset-top);
|
|
// /* 兼容 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> |