翻页效果

This commit is contained in:
@fawn-nine
2023-04-04 17:25:50 +08:00
parent dea49e6385
commit 9f63a8a989
8 changed files with 11608 additions and 119 deletions

View File

@@ -19,7 +19,7 @@
"prompt" : "template",
"template" : {
"title" : "用户协议和隐私政策",
"message" : "请你务必审慎阅读、充分理解“隐私政策”各条款,包括但不限于:为了更好的向你提供服务,我们需要收集你的设备标识、操作日志等信息用于分析、优化应用性能。<br/>  你可阅读<a href='https://www.twin-ui.com'>《用户协议》</a>和<a href='https://www.twin-ui.com'>《隐私政策》</a>了解详细信息。如果你同意,请点击下面按钮开始接受我们的服务。",
"message" : "请你务必审慎阅读、充分理解“隐私政策”各条款,包括但不限于:为了更好的向你提供服务,我们需要收集你的设备标识、操作日志等信息用于分析、优化应用性能。<br/>  你可阅读<a href='https://main.nuttyreading.com/agreement.html'>《用户协议》</a>和<a href='https://main.nuttyreading.com/privacy.html'>《隐私政策》</a>了解详细信息。如果你同意,请点击下面按钮开始接受我们的服务。",
"buttonAccept" : "同意",
"buttonRefuse" : "暂不同意"
}

View File

@@ -310,8 +310,9 @@ formatRichText (html) { //控制小程序中图片大小
</script>
<style lang="scss" scoped>
.xiangqing {
overflow: hidden;
overflow: hidden; overflow-x: hidden;
img{display: block; max-width: 100%;}
p{max-width: 100%;}
}
.goods_nav {
z-index: 1;

View File

@@ -195,7 +195,7 @@
return {
scrollTop: 0,
list3: [
'../../static/icon/home_ban_1.jpg',
// '../../static/icon/home_ban_1.jpg',
'../../static/icon/home_ban_2.jpg',
'../../static/icon/home_ban_3.jpg',
],

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@@ -57,54 +57,11 @@
<!-- 垂直翻页 -->
<!-- @click="showMenu" -->
<view class="vertical" v-if="isVerticalHua">
<view class="verticalbox" :class="{ container0: background === 1, container1: background === 2 }"
@click="showMenu">
<!-- 章节名 -->
<view class="chapter">
{{ verticalData.chapterName }}
</view>
<scroll-view :scroll-anchoring="true" scroll-y="true" :scroll-top="scrollTop"
scroll-with-animation="true" style="height: 600px; " @scrolltoupper="scrolltoupper"
@scrolltolower="scrolltolower" @scroll="scroll">
<view class="content">
<view class="inner-box" :style="{ height: `${innerHeight}px` }" v-if="verticalData.canRead">
<view style="text-indent: 2em;" v-for="(item, index) in verticalData.text" :key="index"
:class="highlight === index ? 'highlight' : ''">
<p class="book-inner" v-html="item.content" :style="{
fontWeight: item.level == 2 ? 'bold' : item.level == 3 ? 'bold' : '',
fontSize: `${fontSize}px`,
lineHeight: `${lineHeight * fontSize}px`,
color: `${colorList[background - 1]}`
}"></p>
<img style="max-width: 90%;" v-if="item.otherContent != '' && item.otherContent != null"
:src="item.otherContent">
</view>
</view>
<view
style="display:flex;flex-flow: column;justify-content: center;align-items: center;height: 100%;"
v-else>
付费章节
<view style="padding: 5px 15px;background-color: #eee;" @touchstart.stop @touchmove.stop
@touchend.stop="buyBook">去购买</view>
</view>
</view>
</scroll-view>
<view class="bottom-bar">
<!-- 时间 -->
<view>{{ systemTimeStr }}</view>
<!-- 电量 -->
<view>
<battery :level="batteryLevel" :charging="batteryState === 2"></battery>
</view>
</view>
</view>
</view>
<!-- 横向翻页 -->
<view class="across" v-else>
<view class="across" >
<!-- 阅读页结构和样式请和仅用于计算元素一致 -->
<view class="chantong" v-show="!isSimulation">
<view class="chantong" style="display: none;">
<!-- 上一页 -->
<view class="container mypages" :class="{ container0: background === 1, container1: background === 2 }"
:style="{
@@ -190,8 +147,6 @@
<battery :level="batteryLevel" :charging="batteryState === 2"></battery>
</view>
</view>
</view>
<!-- 下一页-->
@@ -234,20 +189,22 @@
</view>
</view>
<!-- 仿真翻页 -->
<view v-show="isSimulation" class="flipbook-viewport"
<view v-if="isSimulation" class="flipbook-viewport"
:rect="rect"
:change:rect="updateRenderData"
:readerSet = "readerSet"
:change:readerSet="updateReaderSet"
:musicItem="musicItem"
:change:musicItem="updateMusic"
:oldReadSpeed="oldReadSpeed"
:change:oldReadSpeed="updateReadPercent"
:SimulationText="SimulationText" :change:SimulationText="updateSimulationText"
:SimulationTextObj="SimulationTextObj" :change:SimulationTextObj="updateSimulationText"
@touchend="turnjs.onClick"
>
<!-- <view class="container across" @touchend="openEnd" @touchstart="openStart"> -->
<view class="container across" >
<view class="flipbook" id="flipbook" >
<div class="hard"><img style="max-width: 100%;" :src="bookFengMian"></div>
<div class="hard" style="text-align: center; display: none; background-color:rgba(255, 255, 255, .6); display: flex; align-items: center; justify-content: center;"><div><img style="max-width:50%; border-radius: 20rpx;" :src="bookFengMian"> <p style="background-color: #fff; color: #666; ">->点击两侧开启阅读<-</p> </div></div>
<!-- <div style="background-color: #fff; padding: 0 10px" v-for="(item, index) in SimulationText" :key="index">
<div class="chapter">{{ curPage.chapterName }}</div>
<p v-for="(item1, index1) in item" :key="index1" v-html="item1.list"
@@ -700,6 +657,7 @@ import { nextTick } from "vue";
freeChapterCount: 0,
isBuy: 0,
isVip: 0,
chapterNum:null, // 阅读章节数
},
isVerticalHua: false,
speedTrue: false, //判断是否更新进度
@@ -727,9 +685,13 @@ import { nextTick } from "vue";
height: '800px',
text: 'hello',
isSimulation: true, // 仿真翻页模式
SimulationText: [], // 仿真翻页内容数组
hasSimulationText: false,
setShow: true, // 设置显示?
SimulationTextObj : { // 仿真翻页内容
'SimulationText' : [],
'fontSize' : '',
'lineHeight':'',
'oldReadPage':0
},
setShow: false, // 设置显示?
clientlast: null, //开始位置
touchNum: 0, //点击次数
touchTime: null, //定时器清除
@@ -738,6 +700,12 @@ import { nextTick } from "vue";
musicIndexDom:0,
highlight: 'null',
musicPlaying:false,
},
readerSet:{
fontSize:'', // 字体大小,
lineHeight:'' ,// 行高注意是fontSize的倍数
page:0,
background:''
}
}
},
@@ -790,7 +758,21 @@ import { nextTick } from "vue";
}
},
// watch: {
// changeBackground: { // 深度监听
// handler(newName, oldName) {
// console.log(newName)
// },
// immediate: true,
// deep: true
// }
// },
methods: {
_changeReaderSeting(){
this.readerSet.fontSize = this.fontSize, //字体大小,
this.readerSet.lineHeight = this.lineHeight //行高注意是fontSize的倍数
},
changeMusicItem(){
this.musicItem.highlight = this.highlight,
this.musicItem.musicIndexDom = this.domIndex,
@@ -827,7 +809,7 @@ import { nextTick } from "vue";
clickImg(item, index) {
// 点击图片
let imgarr = this.newchapterImgList.map(item => item)
console.log(imgarr, 'imgarr')
// console.log(imgarr, 'imgarr')
this.imgsShow = false
uni.previewImage({
current: index,
@@ -868,8 +850,12 @@ import { nextTick } from "vue";
.post('book/book/appinfo/' + this.bookId_mark + '/' + this.userInfo.id)
.then(res => {
this.bookName = res.book.name,
this.bookFengMian = res.book.images
console.log('获取电子书详情', res)
this.bookFengMian = res.book.images,
this.detail.freeChapterCount = res.book.freeChapterCount,
this.detail.isBuy = res.book.isBuy,
this.detail.isVip = res.book.isVip,
this.detail.chapterNum = res.book.chapterNum // 阅读章节数
//console.log('获取电子书详情', res)
});
@@ -1016,7 +1002,6 @@ import { nextTick } from "vue";
})
preText = arr
// console.log(copyBookText,'copyBookText')
// this.getSizePage(NumCol)
},
nextmpforGet(colSize, NumCol) {
let that = this
@@ -1151,9 +1136,14 @@ import { nextTick } from "vue";
}
arr.push(newArr)
copyBookText = arr // 每一页显示的内容
this.SimulationText = []
this.SimulationText = arr
this.hasSimulationText = true
this.SimulationTextObj = {
SimulationText : arr,
fontSize : this.fontSize,
lineHeight : this.lineHeight,
oldReadPage: 0,
background:this.background
}
// this.hasSimulationText = true
console.log(this.SimulationText, 'SimulationText')
},
@@ -1293,6 +1283,8 @@ import { nextTick } from "vue";
if (typeof this.background !== 'number') {
this.background = 1
}
// this.readerSet.background = this.background
this.turnType = uni.getStorageSync('turnType')
if (this.turnType == 2) {
this.isVertical = true;
@@ -1312,7 +1304,9 @@ import { nextTick } from "vue";
this.history = value
}
})
this.$nextTick(()=>{
this._changeReaderSeting()
})
/*****************************************/
/*****************************************/
/*****************************************/
@@ -1344,7 +1338,16 @@ import { nextTick } from "vue";
let page = Math.floor((this.curChapter.totalPage - 1) * this.history.progress)
this.oldReadSpeed.readPage = page
this.goToPage(page)
this.SimulationTextObj.SimulationText = []
this.SimulationTextObj = {
SimulationText : copyBookText,
fontSize : this.fontSize,
lineHeight : this.lineHeight,
oldReadPage: this.oldReadSpeed.readPage,
background:this.background
}
uni.hideLoading()
},
/**
@@ -2448,10 +2451,18 @@ import { nextTick } from "vue";
})
setTimeout(() => {
this.getThreeChapter(this.curChapter.chapterIndex + 1)
// this.SimulationTextObj = {
// SimulationText : copyBookText,
// fontSize : this.fontSize,
// lineHeight : this.lineHeight,
// oldReadPage: 0
// // background:this.background
// }
uni.hideLoading()
this.down = true
this.clearDown()
}, 300)
} else {
uni.showToast({
icon: 'none',
@@ -2526,6 +2537,7 @@ import { nextTick } from "vue";
this.currentPage = page
this.showAnimation = false
console.log(page, '======>')
// console.log(copyBookText[page],'当前页')
this.$nextTick(function() {
this.curPage = {
@@ -2651,6 +2663,14 @@ import { nextTick } from "vue";
title: '加载中'
})
await this.getThreeChapter(index.id)
//this.SimulationTextObj.SimulationText = []
this.SimulationTextObj = {
SimulationText : copyBookText,
fontSize : this.fontSize,
lineHeight : this.lineHeight,
oldReadPage: 0,
background:this.background
}
//this.counlSystemInfo()
this.goToPage(0)
this.scrollTop = 0
@@ -2673,6 +2693,11 @@ import { nextTick } from "vue";
this.counlSystemInfo()
await this.calcCurChapter()
let page = Math.floor((this.curChapter.totalPage - 1) * progress)
this.readerSet = {
fontSize : this.fontSize,
page : page
}
this.oldReadSpeed.readPage = page
this.goToPage(page)
if (this.preChapter.ready && !this.preChapter.isCover) {
this.preChapter.ready = false
@@ -2696,6 +2721,11 @@ import { nextTick } from "vue";
this.counlSystemInfo()
await this.calcCurChapter()
let page = Math.floor((this.curChapter.totalPage - 1) * progress)
this.readerSet = {
fontSize : this.fontSize,
page : page
}
this.oldReadSpeed.readPage = page
this.goToPage(page)
if (this.preChapter.ready && !this.preChapter.isCover) {
this.preChapter.ready = false
@@ -2705,6 +2735,7 @@ import { nextTick } from "vue";
this.nextChapter.ready = false
await this.calcNextChapter()
}
},
/**
@@ -2722,6 +2753,11 @@ import { nextTick } from "vue";
this.counlSystemInfo()
await this.calcCurChapter()
let page = Math.floor((this.curChapter.totalPage - 1) * progress)
this.readerSet = {
lineHeight : this.lineHeight,
page : page
}
this.oldReadSpeed.readPage = page
this.goToPage(page)
if (this.preChapter.ready && !this.preChapter.isCover) {
this.preChapter.ready = false
@@ -2732,6 +2768,7 @@ import { nextTick } from "vue";
await this.calcNextChapter()
}
}
},
@@ -2784,8 +2821,20 @@ import { nextTick } from "vue";
if (background === this.background) {
return
} else {
this.background = background;
uni.setStorageSync('background', this.background)
// this.readerSet.background = background // 修改阅读器背景
this.SimulationTextObj.background = this.background
this.SimulationTextObj.oldReadPage = this.curPage.pageNum
console.log('改变页面背景',this.curPage.pageNum)
// this.SimulationTextObj = {
// SimulationText : this.SimulationTextObj.SimulationText,
// fontSize : this.SimulationText.fontSize,
// lineHeight : this.SimulationText.lineHeight,
// background: this.background,
// page: this.oldReadSpeed.readPage
// }
}
},
@@ -2849,14 +2898,14 @@ import { nextTick } from "vue";
* 获取一章数据
**/
getOneChapter(chapterId, showLoading) {
if (showLoading) {
uni.showLoading({
title: '加载中',
mask: true
})
}
// 检查是否已经购买
// this.bookMessage.isBuy==0&&this.bookMessage.chapterNum==null&&this.bookMessage.freeChapterCount!=0
return this.$http
.post('book/bookchaptercontent/appGetBookChapterContent', {
'userId': this.userInfo.id,
@@ -2866,6 +2915,7 @@ import { nextTick } from "vue";
.then(res => {
this.tmpChapter.text = res.bookCatalogue
// console.log(this.tmpChapter.text,'tmpChapter')
})
.catch(() => {
// 此处是网络连接失败的逻辑
@@ -3054,8 +3104,8 @@ import { nextTick } from "vue";
},
// 接收renderjs发回的数据
onViewClick(options) {
console.log('renderjsCall回调');
console.log(options);
console.log('renderjsCall回调');
console.log(options);
if(options.chapterid == 'next'){ // 下一章
this.goNextChapter()
}else if(options.chapterid == 'prev'){ // 上一章
@@ -3099,14 +3149,27 @@ import { nextTick } from "vue";
lastPage:false,
musicIndexDom:0,
highlight:'null',
musicPlaying:false
musicPlaying:false,
fontSize:'',
lineHeight:'',
containerStyle: ''
}
},
mounted() {
this.onTurn();
},
methods: {
updateMusic(newVal, oldVal){
updateReaderSet(newVal, oldVal){
// 阅读器设置更新
$("#flipbook .paragraph").css({fontSize:newVal.fontSize+"px", lineHeight:newVal.lineHeight*newVal.fontSize+"px"})
console.log(newVal,'阅读器设置更新')
if(newVal.page > 0 && newVal.fontSize !== this.fontSize || newVal.page > 0 && newVal.lineHeight !== this.lineHeight){
$("#flipbook").turn('page',newVal.page+1)
}
// newVal.background == 1 ? this.containerStyle = "#f7faf9" : this.containerStyle = "#000"
// $(".myPage p").css({backgroundColor:this.containerStyle})
},
updateMusic(newVal, oldVal){ //听书
this.highlight = newVal.highlight
this.musicIndexDom = newVal.musicIndexDom
this.musicPlaying = newVal.musicPlaying
@@ -3125,8 +3188,8 @@ import { nextTick } from "vue";
updateReadPercent(newVal, oldVal){
// 获取阅读进度
this.curPage = newVal.readPage
console.log('获取到了阅读的进度page',newVal,this.curPage)
$("#flipbook").turn('page', this.curPage+1)
// console.log('获取到了阅读的进度page',newVal,this.curPage)-
//$("#flipbook").turn('page', this.curPage+1)
},
updateRenderData(newVal, oldVal) {
let {
@@ -3138,24 +3201,28 @@ import { nextTick } from "vue";
},
updateSimulationText(newVal, oldVal) {
$("#flipbook").turn('pages',1) // 内容变化时,保留
$("#flipbook").turn('pages',newVal.length)
$("#flipbook").turn('pages',1) // 内容变化时,保留1页
$("#flipbook").turn('pages',newVal.SimulationText.length)
// this.onTurn();
// this.SimulationText = newVal
console.log('更新数组', $("#flipbook").turn("resize"))
for (var i=0; i<newVal.length;i++) {
console.log('更新数组', newVal)
this.fontSize = newVal.fontSize
this.lineHeight = newVal.lineHeight
newVal.background == 1 ? this.containerStyle = "#f7faf9" : this.containerStyle = "#000"
//$(".myPage p").css({backgroundColor:this.containerStyle})
for (var i=0; i<newVal.SimulationText.length;i++) {
var tagHtml = "";
var conntentHtml = "";
for (var j=0; j<newVal[i].length; j++) {
for (var j=0; j<newVal.SimulationText[i].length; j++) {
var classname = ''
var styleconteent = ''
newVal[i][j].class == 'jushou' ? classname = 'shouhang' : ''
newVal[i][j].class == 'jushou' ? styleconteent = 'text-indent:2em' : ''
conntentHtml += "<p class='paragraph " + classname + " paragraph" + newVal[i][j].paragraph +"' style="+styleconteent+">" + newVal[i][j].list + "</p>"
newVal.SimulationText[i][j].class == 'jushou' ? classname = 'shouhang' : ''
newVal.SimulationText[i][j].class == 'jushou' ? styleconteent = `"text-indent:2em ;font-size:${newVal.fontSize}px; color: #5d5d5d"` : styleconteent = "'font-size:"+newVal.fontSize+"px ; line-height:"+newVal.lineHeight*newVal.fontSize+"px; color: #5d5d5d'"
conntentHtml += "<p class='paragraph " + classname + " paragraph" + newVal.SimulationText[i][j].paragraph +"' style="+styleconteent+">" + newVal.SimulationText[i][j].list + "</p>"
}
var page1 = i+1
var btnStyle = "display: block; padding: 20rpx; border: 1px solid #333; text-align: center;"
var tagHtml = "<div style='background-color:#fff; padding: 0 12px; font-size:18px; line-height:28px'>"+ conntentHtml +"<div style='text-align:center; color:#777'>"+page1+"/"+ newVal.length +"</div></div>";
var tagHtml = "<div style='padding:0 18px; position:relative; background-color:"+this.containerStyle+"; height:inherit'>"+ conntentHtml +"<div style='text-align:center; color:#777 ; position: absolute;bottom: 5px; left: 0;text-align: center; width: 100%;' >"+page1+"/"+ newVal.SimulationText.length +"</div></div>";
// $("#flipbook").append(tagHtml);
if (!$("#flipbook").turn('hasPage', i+2)) {
// Create an element for this page
@@ -3165,11 +3232,14 @@ import { nextTick } from "vue";
element.html(tagHtml);
}
}
// 如果有阅读缓存
if(newVal.oldReadPage>0){
$("#flipbook").turn('page', newVal.oldReadPage+1)
}else{
$("#flipbook").turn('page', 2)
}
},
toprev(){
console.log('点击了')
},
onClick(event, ownerInstance) {
if (event.changedTouches[0].clientX < this.width / 3) { //点击屏幕左1/3为上一页
//console.log('点击了左侧')
@@ -3243,31 +3313,26 @@ import { nextTick } from "vue";
height: this.height,
width: this.width,
elevation: 50,
duration:1000,
duration:500,
gradients: true,
when: {
turning: function(event, page, pageObject) {
// 翻页时
// this.curPage = page
// console.log(event, page, pageObject,this.curPage)
},
}
}, }
});
// $("#flipbook").bind("last", function(event) {
// console.log("You are at the end of the flipbook");
// this.lastPage = true
// });
}
}
}
</script>
<style>
/* .container1{background-color: #000;} */
.buts{width: 100%; display:flex; }
.buts span{display: block; padding: 20rpx; border: 1px solid #333; text-align: center;}
</style>
<style lang="scss" scoped>
@import url("@/pages/yRead/iconfont.css");
// turnjs
/// .shouhang{text-indent: 2em;color: red;}

File diff suppressed because it is too large Load Diff

44
新建 文本文档.txt Normal file
View File

@@ -0,0 +1,44 @@
app 描述疯子读书是一款专业的中医线上读书平台。中医古籍、中医经典各家学说各种中医类型的电子书。疯子读书不止可以看还可以听APP内还具有听书功能解放您的眼睛。
简短概括:一款专业的中医线上读书软件
公司名称:天津众妙之门科技有限公司
隐私政策地址https://main.nuttyreading.com/privacy.html
各个平台账号密码:
天津众妙之门科技有限公司【疯子阅读】
1、阿里云 https://account.aliyun.com/
账号:众妙之门花生享阅
密码FZDS1234fzds
手机18526084267
2、苹果【每年有会费688需要缴纳】
apple idhuashengdingyue@163.com
密码HSDY1234hsdy
账号主体联系人:皮诺曦
3、华为开放平台 https://id1.cloud.huawei.com/
账号18526084267
密码HSXY1234hsxy
4、腾讯应用宝 https://open.qq.com/
huashengdingyue@163.com
账号2711345245
密码HSDY1234hsdy
5、小米
账号13110039505
密码HSXY1234hsxy
绑定邮箱huashengdingyue@163.com
6、百度智能云 https://cloud.baidu.com/
(文字转语音阅读“听书”)
账户:天津众妙之门
密码HSDY1234hsdy
7、快递100
账户名fengzidushu
密码wu751019
8、疯子读书163邮箱
邮箱账号fengzidushu@163.com
邮箱密码FZDS1234fzds
9、微信开放平台
账号fengzidushu@163.com
密码FZDS1234fzds