1135 lines
34 KiB
Vue
1135 lines
34 KiB
Vue
<template>
|
||
<view class="novelReading_content">
|
||
<view class="novelReading_body" :style="`background:${bodyReadingBg}`">
|
||
<!-- @setCatalog="setCatalog" @clickme="clickme" @clickher="clickher" @preload="preloadContent"-->
|
||
<view class="novelReading_main_con">
|
||
<view class="novelReading_main_read"
|
||
:style="`background:${theFirstTime ? 'rgba(0,0,0,0.8)' :'transparent'};top:${mainReadTipsTop};bottom:${mainReadIsVipBottom ? mainReadIsVipBottom : mainReadTipsBottom}`">
|
||
<view class="main_read_item read_item_last" @tap="pageLsatTurning">
|
||
<text v-if="theFirstTime">上一页</text>
|
||
</view>
|
||
<view v-if="theFirstTime" class="main_read_item read_item_centre" @tap="handelShowStepUp">
|
||
<view class="tips">点击中间</view>
|
||
<view class="name">显示菜单</view>
|
||
</view>
|
||
<view v-else class="main_read_item" @tap="handelShowStepUp"></view>
|
||
<view class="main_read_item read_item_next" @tap="pageNextTurning">
|
||
<text v-if="theFirstTime">下一页</text>
|
||
</view>
|
||
</view>
|
||
<!-- @clickTo="handelShowStepUp" -->
|
||
<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"
|
||
:clickOption="{width:200,height: 400,left:'auto',top:'auto'}" :topGap="0" :bottomGap="20"
|
||
@change="currentChange">
|
||
<template slot="test">
|
||
<view class="balance_con">
|
||
<rich-text class="balance_con_rich_text"
|
||
:style="`color:${novelContentColor};font-size:${newCharactersSize}px;`"
|
||
:nodes="readChapterInfoObj.isContent"></rich-text>
|
||
<view class="balance_recharge_option"></view>
|
||
<view class="balance_recharge" :style="`background:${bodyReadingBg}`">
|
||
<view class="balance_tips" :style="`color:${novelContentColor}`">
|
||
<view v-if="readChapterInfoObj.chackpay == 2">
|
||
<view v-if="token" class="insufficient_funds" sstyle="margin-bottom:8rpx;">
|
||
书币余额不足</view>
|
||
<view class="">
|
||
<text>付费章节，需要购买。</text>
|
||
<text>{{readChapterInfoObj.price}}</text>
|
||
<text>书币</text>
|
||
</view>
|
||
</view>
|
||
<view v-if="readChapterInfoObj.chackpay == 3">
|
||
<text>付费章节，需要全本购买。</text>
|
||
<text>{{readChapterInfoObj.allprice}}</text>
|
||
<text>书币</text>
|
||
</view>
|
||
</view>
|
||
<view class="balance_btn_all">
|
||
<view v-if="!token" class="purchaseFull_popup_btn" @click="toPathLogin">新用户登录</view>
|
||
<view v-else-if="readChapterInfoObj.chackpay == 2" class="purchaseFull_popup_btn"
|
||
@click="toBalanceConfirm">去充值</view>
|
||
<view v-else-if="readChapterInfoObj.chackpay == 3" class="purchaseFull_popup_btn"
|
||
@click="handelPurchaseFull">需要全本购买
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</yingbing-ReadPage>
|
||
</view>
|
||
</view>
|
||
<view class="u_popup_all">
|
||
<u-popup :show="navbarPopupShow" mode="top" :overlay="false" bgColor="transparent" z-index="60">
|
||
<u-navbar :title="bookInfo.title" @rightClick="rightClick" :autoBack="true" :fixed="false"
|
||
:bgColor="mainBodyBg" :titleStyle="{ color: navigationBarTitleTextColor }"
|
||
:leftIconColor="navigationBarTitleTextBackColor" :shadow="true" :safeAreaInsetTop="true"
|
||
:placeholder="true" />
|
||
</u-popup>
|
||
<u-popup :show="readingPopupshow" mode="bottom" :overlay="false" z-index="61" bgColor="transparent"
|
||
:safeAreaInsetBottom="false">
|
||
<view class="reading_schedule_box" :style="`background:${bodyReadingBg}`">
|
||
<view class="reading_schedule_body">
|
||
<view class="_previous_chapter"
|
||
:style="`color:${previousChapterBbuttonTextColor};background:${previousChapterBbuttonBg}`"
|
||
@tap="upperNextChapter('upper')">
|
||
上一章
|
||
</view>
|
||
<view class="_next_chapter"
|
||
:style="`color:${nextChapterBbuttonTextColor};background:${nextChapterBbuttonBg}`"
|
||
@tap.prevent="upperNextChapter('next')">下一章
|
||
</view>
|
||
</view>
|
||
<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>
|
||
</view>
|
||
</u-popup>
|
||
<u-popup :show="stepUpPopupShow" mode="bottom" :overlay="false" bgColor="transparent" zIndex="62"
|
||
:safeAreaInsetBottom="false">
|
||
<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 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="handelPageType('real')">仿真</view>
|
||
<view class="step_up_item_text_bg"
|
||
:style="`color:${dialogTextColor};background:${dialogATextBg}`"
|
||
@tap="handelPageType('cover')">平移
|
||
</view>
|
||
<view class="step_up_item_text_bg"></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> -->
|
||
</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 CommBookLeftRigth from '@/components/commBookLeftRigth/index.vue'
|
||
export default {
|
||
components: {
|
||
CommBookLeftRigth
|
||
},
|
||
data() {
|
||
return {
|
||
token: '',
|
||
novelMainTypeColor: '',
|
||
setUpColorAll: {},
|
||
navigationBarTitleTextColor: '',
|
||
mainBodyBg: '',
|
||
navigationBarTitleTextBackColor: '',
|
||
previousChapterBbuttonBg: '',
|
||
previousChapterBbuttonTextColor: '',
|
||
nextChapterBbuttonBg: '',
|
||
nextChapterBbuttonTextColor: '',
|
||
// 内容背景
|
||
bodyReadingBg: '',
|
||
// 底部安全区
|
||
// bottomSecureHeight: 0,
|
||
readingPopupshow: false,
|
||
stepUpPopupShow: false,
|
||
purchaseFullShow: false,
|
||
navbarPopupShow: false,
|
||
// bar 的icon
|
||
barPopupIcon: {},
|
||
dialogTextColor: '',
|
||
progressBg: '',
|
||
progressActiveBg: '',
|
||
setUpModeBlack: '',
|
||
dialogATextBg: '',
|
||
novelContentColor: '',
|
||
// 目录信息
|
||
booksDirectorySid: '2387',
|
||
bookInfo: {},
|
||
booksDirectoryPage: 1,
|
||
newBooksDirectoryPage: [],
|
||
directoryList: [],
|
||
// directoryPopupHeight: 0,
|
||
directoryPopupShow: false,
|
||
// 小说信息
|
||
novelReadingContentText: [],
|
||
charactersPageType: 'real',
|
||
defaultCharactersSize: 26,
|
||
newCharactersSize: 26,
|
||
defaultCharactersLineHeight: 20,
|
||
readDirectoryActive: '',
|
||
readChapterid: '',
|
||
readChapterInfoObj: {},
|
||
readChapterLastid: '',
|
||
readChapterNextid: '',
|
||
theFirstTime: true,
|
||
mainReadTipsTop: 0,
|
||
mainReadTipsBottom: 0,
|
||
mainReadIsVipBottom: 0
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
this.booksDirectorySid = options.sid;
|
||
this.readChapterid = options.id;
|
||
this.isGetUserRead();
|
||
},
|
||
onShow() {
|
||
const token = myGetStorage('token');
|
||
const theFirstTime = myGetStorage('theFirstTime');
|
||
this.token = token;
|
||
this.theFirstTime = theFirstTime ? false : true;
|
||
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();
|
||
})
|
||
},
|
||
methods: {
|
||
async isGetUserRead() {
|
||
const booksDirectorySid = this.booksDirectorySid;
|
||
const booksDirectoryPage = this.booksDirectoryPage;
|
||
const readChapterid = this.readChapterid ? this.readChapterid : '';
|
||
this.isGetReadChapter(readChapterid);
|
||
// const newReadChapterInfoObj = await this.isGetBookInfo(readChapterid);
|
||
// this.novelReadingContentText = [newReadChapterInfoObj];
|
||
// this.readDirectoryActive = newReadChapterInfoObj.chapterorder;
|
||
// this.readChapterLastid = newReadChapterInfoObj.lastid;
|
||
// this.readChapterNextid = newReadChapterInfoObj.nextid;
|
||
// this.$refs.yingbingReadPage.init({
|
||
// contents: [newReadChapterInfoObj],
|
||
// start: 0,
|
||
// currentChapter: newReadChapterInfoObj.chapterorder
|
||
// })
|
||
},
|
||
isGetBookInfo(chapterId) {
|
||
return new Promise((resolve) => {
|
||
const booksDirectorySid = this.booksDirectorySid;
|
||
const novelReadingContentText = this.novelReadingContentText;
|
||
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><\/p>/g, '\n');
|
||
const isContent = is_novel_content.replace(/<p>/g, '');
|
||
const isContent2 = isContent.replace(/<\/p>/g, '');
|
||
const readChapterInfoObj = {
|
||
...resData,
|
||
content: isContent2,
|
||
isContent: isContent2,
|
||
isStart: resData.lastid == '' ? true : false,
|
||
isEnd: resData.nextid == '' ? true : false,
|
||
chapter: resData.chapterorder,
|
||
title: resData.chaptername,
|
||
isTitle: resData.title
|
||
// richTextNodes: `<h3>${res.data.chaptername}</h3></br>${res.data.novel_content}`
|
||
};
|
||
resolve(readChapterInfoObj);
|
||
}
|
||
}).catch((err) => {
|
||
uni.hideLoading();
|
||
console.log(err, '========');
|
||
});
|
||
})
|
||
},
|
||
async loadmoreContent(chapter, callback) {
|
||
const newNovelReadingContentText = this.novelReadingContentText;
|
||
const newReadDirectoryActive = this.readDirectoryActive;
|
||
const newReadChapterLastid = this.readChapterLastid;
|
||
const newReadChapterNextid = this.readChapterNextid;
|
||
const newReadChapterInfoObj = this.readChapterInfoObj;
|
||
let chapterId = '';
|
||
if (chapter < newReadDirectoryActive) {
|
||
chapterId = newReadChapterLastid;
|
||
} else if (chapter > newReadDirectoryActive) {
|
||
chapterId = newReadChapterNextid
|
||
}
|
||
const resTemp = await this.isGetBookInfo(chapterId);
|
||
let newReadInfoObj = this.isBooksObj(resTemp);
|
||
callback('success', newReadInfoObj);
|
||
const sortArr = this.handelReadList([newReadInfoObj]);
|
||
this.novelReadingContentText = sortArr;
|
||
},
|
||
currentChange(pageInfo) {
|
||
const novelReadingContentText = this.novelReadingContentText;
|
||
const chapter = pageInfo.chapter;
|
||
this.readDirectoryActive = chapter;
|
||
novelReadingContentText.forEach((m) => {
|
||
if (m.chapter == chapter) {
|
||
this.readChapterLastid = m.lastid;
|
||
this.readChapterNextid = m.nextid;
|
||
this.readChapterInfoObj = m;
|
||
if (m.isvip == 1) {
|
||
this.mainReadIsVipBottom = '360rpx';
|
||
} else {
|
||
this.mainReadIsVipBottom = 0;
|
||
}
|
||
}
|
||
})
|
||
},
|
||
pageLsatTurning() {
|
||
const theFirstTime = this.theFirstTime;
|
||
if (theFirstTime) {
|
||
this.handelTheFirstTime();
|
||
} else {
|
||
this.$refs.yingbingReadPage.pagePrev();
|
||
}
|
||
this.readingPopupshow = false;
|
||
this.navbarPopupShow = false;
|
||
this.stepUpPopupShow = false;
|
||
},
|
||
pageNextTurning() {
|
||
const newReadChapterInfoObj = this.readChapterInfoObj;
|
||
const theFirstTime = this.theFirstTime;
|
||
if (theFirstTime) {
|
||
this.handelTheFirstTime();
|
||
} else {
|
||
if (newReadChapterInfoObj.isvip == 1) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '当前章节未解锁,暂不支持跳章节观看',
|
||
})
|
||
return;
|
||
}
|
||
this.$refs.yingbingReadPage.pageNext();
|
||
};
|
||
this.readingPopupshow = false;
|
||
this.navbarPopupShow = false;
|
||
this.stepUpPopupShow = false;
|
||
},
|
||
upperNextChapter(type) {
|
||
const newReadChapterLastid = this.readChapterLastid;
|
||
const newReadChapterNextid = this.readChapterNextid;
|
||
const newReadChapterInfoObj = this.readChapterInfoObj;
|
||
let chapterId = '';
|
||
if (type == 'upper') {
|
||
chapterId = newReadChapterLastid;
|
||
} else if (type == 'next') {
|
||
if (newReadChapterInfoObj.isvip == 1) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '当前章节未解锁,暂不支持跳章节观看',
|
||
})
|
||
return;
|
||
}
|
||
chapterId = newReadChapterNextid;
|
||
}
|
||
this.isGetReadChapter(chapterId);
|
||
},
|
||
isBooksObj(booksObj) {
|
||
let newBooksObj = {}
|
||
if (booksObj.chackpay == 1) {
|
||
newBooksObj = {
|
||
...booksObj
|
||
}
|
||
}
|
||
if (booksObj.chackpay == 2 || booksObj.chackpay == 3) {
|
||
const custom = [`slot:test`];
|
||
newBooksObj = {
|
||
...booksObj,
|
||
custom,
|
||
content: '',
|
||
}
|
||
}
|
||
return newBooksObj;
|
||
},
|
||
handelReadList(list) {
|
||
const newNovelReadingContentText = this.novelReadingContentText;
|
||
const data = [];
|
||
list.forEach((m) => {
|
||
const obj = newNovelReadingContentText.find((j) => {
|
||
return m.id == j.id
|
||
})
|
||
if (!obj) {
|
||
data.push(m)
|
||
}
|
||
})
|
||
const sortArr = [...newNovelReadingContentText, ...data]
|
||
sortArr.sort((a, b) => {
|
||
return a.chapter - b.chapter
|
||
})
|
||
return sortArr;
|
||
},
|
||
async isGetReadChapter(chapterId, type) {
|
||
let lastObj = {};
|
||
let nextObj = {};
|
||
let newReadInfoObj = {};
|
||
let contents = [];
|
||
const newNovelReadingContentText = this.novelReadingContentText;
|
||
const resTemp = await this.isGetBookInfo(chapterId);
|
||
if (resTemp.lastid) {
|
||
const lastItem = newNovelReadingContentText.find((m) => {
|
||
return m.id == resTemp.lastid
|
||
});
|
||
if (lastItem) {
|
||
lastObj = lastItem;
|
||
} else {
|
||
const resLastObj = await this.isGetBookInfo(resTemp.lastid);
|
||
lastObj = this.isBooksObj(resLastObj);
|
||
}
|
||
}
|
||
newReadInfoObj = this.isBooksObj(resTemp);
|
||
contents.push(newReadInfoObj);
|
||
if (resTemp.nextid) {
|
||
const nextItem = newNovelReadingContentText.find((m) => m.id == resTemp.nextid);
|
||
if (nextItem) {
|
||
nextObj = nextItem;
|
||
} else {
|
||
const resNextObj = await this.isGetBookInfo(resTemp.nextid);
|
||
nextObj = this.isBooksObj(resNextObj);
|
||
}
|
||
contents.push(nextObj);
|
||
}
|
||
const sortArr = this.handelReadList(contents);
|
||
this.novelReadingContentText = sortArr
|
||
this.readChapterInfoObj = newReadInfoObj;
|
||
this.$refs.yingbingReadPage.init({
|
||
contents: sortArr,
|
||
start: 0,
|
||
currentChapter: newReadInfoObj.chapter,
|
||
})
|
||
this.readDirectoryActive = newReadInfoObj.chapterorder;
|
||
this.readChapterLastid = newReadInfoObj.lastid;
|
||
this.readChapterNextid = newReadInfoObj.nextid;
|
||
},
|
||
handelDirectoryItem(row) {},
|
||
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) {
|
||
console.log("购买失败")
|
||
}
|
||
}
|
||
}).catch((err) => {
|
||
uni.hideLoading();
|
||
});
|
||
},
|
||
handelShowStepUp() {
|
||
const theFirstTime = this.theFirstTime;
|
||
if (theFirstTime) {
|
||
this.handelTheFirstTime();
|
||
} else {
|
||
this.readingPopupshow = !this.readingPopupshow;
|
||
this.navbarPopupShow = !this.navbarPopupShow;
|
||
this.stepUpPopupShow = false;
|
||
}
|
||
},
|
||
handelTheFirstTime() {
|
||
// const theFirstTime = this.theFirstTime;
|
||
// if (theFirstTime) {
|
||
this.theFirstTime = false;
|
||
mySetStorage('theFirstTime', '1');
|
||
// }
|
||
},
|
||
handelDirectoryPopup() {
|
||
// this.directoryPopupShow = true;
|
||
const readChapterInfoObj = this.readChapterInfoObj;
|
||
const readDirectoryActive = this.readDirectoryActive;
|
||
uni.navigateTo({
|
||
url: `/pages/bookRecommendList/bookRecommendList?sid=${readChapterInfoObj.sid}&t=${readChapterInfoObj.isTitle}&c=${readDirectoryActive}`
|
||
})
|
||
},
|
||
toPathLogin() {
|
||
const readChapterInfoObj = this.readChapterInfoObj;
|
||
const readDirectoryActive = this.readDirectoryActive;
|
||
uni.navigateTo({
|
||
url: `/pages/login/login?sid=${readChapterInfoObj.sid}&i=${readChapterInfoObj.id}&c=${readDirectoryActive}&to=1`
|
||
})
|
||
},
|
||
// directoryPopupClose() {
|
||
// this.directoryPopupShow = false;
|
||
// },
|
||
handelSteUpPopup() {
|
||
this.stepUpPopupShow = true;
|
||
},
|
||
toBalanceConfirm() {
|
||
uni.navigateTo({
|
||
url: `/pages/voucherCenter/index`
|
||
})
|
||
},
|
||
|
||
// 切换页面颜色
|
||
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 - 1;
|
||
const novelMainObj = myGetStorage('novelMainObj') || '{}';
|
||
const obj = {
|
||
...JSON.parse(novelMainObj),
|
||
charactersSize: newCharactersSize - 1,
|
||
}
|
||
mySetStorage('novelMainObj', JSON.stringify(obj));
|
||
},
|
||
// 字体加大
|
||
addCharactersSize() {
|
||
const newCharactersSize = this.newCharactersSize;
|
||
this.newCharactersSize = newCharactersSize + 1;
|
||
const novelMainObj = myGetStorage('novelMainObj') || '{}';
|
||
const obj = {
|
||
...JSON.parse(novelMainObj),
|
||
charactersSize: newCharactersSize + 1,
|
||
}
|
||
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));
|
||
this.$refs.yingbingReadPage.refresh();
|
||
},
|
||
handelPageType(type) {
|
||
this.charactersPageType = type;
|
||
this.readingPopupshow = false;
|
||
this.navbarPopupShow = false;
|
||
this.stepUpPopupShow = false;
|
||
},
|
||
// // 目录划到了最上边
|
||
// 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`
|
||
})
|
||
}
|
||
},
|
||
watch: {
|
||
// 阅读菜单
|
||
readingPopupshow(newVal) {
|
||
if (newVal) {
|
||
// this.mainReadTipsBottom = `calc(constant(safe-area-inset-bottom) + ${300}rpx)`;
|
||
this.mainReadTipsBottom = `${300}rpx`;
|
||
} else {
|
||
this.mainReadTipsBottom = 0;
|
||
}
|
||
},
|
||
// 导航栏
|
||
navbarPopupShow(newVal) {
|
||
if (newVal) {
|
||
this.mainReadTipsTop = '44px';
|
||
} else {
|
||
this.mainReadTipsTop = 0;
|
||
}
|
||
},
|
||
// 设置阅读样式
|
||
stepUpPopupShow(newVal) {
|
||
if (newVal) {
|
||
this.mainReadTipsBottom = `${408}rpx`;
|
||
} else {
|
||
this.mainReadTipsBottom = 0;
|
||
}
|
||
}
|
||
},
|
||
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.novelMainTypeColor = novelMainTypeColor;
|
||
this.newCharactersSize = JSON.parse(novelMainObj).charactersSize || 26;
|
||
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;
|
||
}
|
||
|
||
|
||
/deep/.balance_con {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
position: relative;
|
||
|
||
|
||
.balance_con_rich_text {
|
||
width: 100%;
|
||
height: 80%;
|
||
line-height: 2;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.balance_recharge_option {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 560rpx;
|
||
background: rgba(243, 239, 233, 0.7);
|
||
filter: blur(10px);
|
||
}
|
||
|
||
.balance_recharge {
|
||
position: fixed;
|
||
bottom: 0rpx;
|
||
left: 0;
|
||
width: 100%;
|
||
box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.2);
|
||
height: 360rpx;
|
||
border-radius: 24rpx 24rpx 0 0;
|
||
padding: 32rpx;
|
||
box-sizing: border-box;
|
||
|
||
.balance_tips {
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.balance_btn_all {
|
||
margin-top: 32rpx;
|
||
|
||
.purchaseFull_popup_btn {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 84rpx;
|
||
font-size: 30rpx;
|
||
color: #fff;
|
||
background: linear-gradient(to top, #FBA676, #E95E32);
|
||
border-radius: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.novelReading_content /deep/.u-navbar {
|
||
box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.novelReading_content /deep/.u-navbar__content__title {
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.novelReading_content /deep/.u-navbar--fixed {
|
||
box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.novelReading_content /deep/.z-paging-content {
|
||
position: relative;
|
||
}
|
||
|
||
.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%;
|
||
position: relative;
|
||
// // 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_read {
|
||
display: flex;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 50;
|
||
padding-bottom: constant(safe-area-inset-bottom);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
padding-top: var(--status-bar-height);
|
||
box-sizing: border-box;
|
||
|
||
.main_read_item {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
// background-color: #ff728f;
|
||
color: #fff;
|
||
}
|
||
|
||
.read_item_last,
|
||
.read_item_next {
|
||
font-size: 46rpx;
|
||
}
|
||
|
||
.read_item_centre {
|
||
border-left-style: solid;
|
||
border-right-style: solid;
|
||
border-left-width: 2rpx;
|
||
border-right-width: 2rpx;
|
||
border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0) 100%) 1;
|
||
border-image-slice: 2;
|
||
|
||
.tips {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.name {
|
||
font-size: 46rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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;
|
||
padding-bottom: constant(safe-area-inset-bottom);
|
||
/* 兼容 iOS 设备 */
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
/* 兼容 iPhone X 及以上设备 */
|
||
|
||
.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: 80rpx;
|
||
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;
|
||
padding-bottom: constant(safe-area-inset-bottom);
|
||
/* 兼容 iOS 设备 */
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
/* 兼容 iPhone X 及以上设备 */
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |