zm/nuttyreading-html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0309 听书

Browse Source
This commit is contained in:
@fawn-nine
2023-03-09 17:13:31 +08:00
parent aeed8684b1
commit 45cb5d66f7
8 changed files with 367 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
pages/bookShop/classify.vue
View File

@@ -9,7 +9,7 @@
:activeStyle="{color: '#303133',fontWeight: 'bold', transform: 'scale(1.01)'}"></u-tabs>
</view>
</view>
<view class="search_box" @click="onPageJump('./searchFor')">
<view class="search_box" @click="onPageJump('../peanut/searchFor')">
<text class="icon_search"></text>
<text class="prompt">搜索...</text>
</view>
@@ -36,15 +36,15 @@
</view>
<view class="commodityPrice">
<text class="price" v-if="item.price">￥
<b style="font-size: 40rpx;">{{item.price}}</b><span class="priceTag">折后价</span>
<b style="font-size: 40rpx;">{{item.price}}</b>
<span class="priceTag" v-if="item.activityPrice">原价：￥{{item.activityPrice}}</span>
</text>
<text class="SoldNumber">已售<span>400</span>件</text>
<text class="SoldNumber" v-if="item.sumSales">已售<span>{{item.sumSales}}</span>件</text>
<!-- <text class="icon" @click.stop="addShopCar(item)" v-if="item.productStock">
<u-icon name="shopping-cart" :size="26" color="#eba00b"></u-icon>
</text> -->
<view class="publierInfo">
<span class="c999 f24">张三1著</span><span class="c999 f24">/ xx出版社出版</span>
<view class="publierInfo" v-if="item.author && item.publisher">
<span class="c999 f24">{{item.author}}著</span><span class="c999 f24">/ {{item.publisher}}</span>
</view>
</view>
</view>
@@ -79,13 +79,7 @@
},
// contentButtonClick(e) {
// console.log(e)
// },
// 跳转
onPageJump(url) {
uni.navigateTo({
url: url
});
},
// },
// onLoad(e) {
// //获取一级分类
// this.$http
@@ -104,6 +98,12 @@
...mapState(['userInfo']),
},
methods: {
// 跳转
onPageJump(url) {
uni.navigateTo({
url: url
});
},
// 获取一级分类
getOneLevel() {
this.$http
@@ -123,9 +123,17 @@
if (this.towLevel == '') {
this.commodityList = []
} else {
let newo = {
catId:0,
name:'全部',
parentCid:e.catId
}
this.towLevel.splice(0,0,newo)
// this.getCategoryList(res.list[0])
// console.log(this.towLevel, 'towLevel')
this.getCategoryList(res.list[0])
}
})
},
@@ -372,9 +380,9 @@
.priceTag {
flex-direction: row;
color: #f56c6c;
color: #999;
display: inline-block;
zoom: .7;
zoom: .8;
margin-left: 6rpx;
margin-bottom: 6px;
}

12
pages/bookShop/commodityDetail.vue
View File

@@ -30,15 +30,17 @@
<u-row customStyle="margin-bottom: 10px">
<u-col span="6"><span>书名：{{productInfo.productName}}</span></u-col>
<u-col span="6" v-if="productInfo.author"><span>作者：{{productInfo.author}}</span></u-col>
</u-row>
<u-row>
<u-col span="6" v-if="productInfo.publisher"><span>出版社：{{productInfo.publisher}}</span></u-col>
<u-col span="6" v-if="productInfo.pubDate"><span>出版时间：{{ productInfo.pubDate | formatDate }}</span></u-col>
<u-col span="6" v-if="productInfo.pubDate"><span>出版时间：{{ productInfo.pubDate | formatDate }}</span></u-col>
</u-row>
<u-row>
<u-col span="6" v-if="productInfo.format"><span>开本：{{productInfo.format}}</span></u-col>
<u-col span="6" v-if="productInfo.pageNum"><span>页数：{{productInfo.pageNum}}</span></u-col>
</u-row>
<u-row>
<u-col span="6" v-if="productInfo.quality"><span>内文用纸材质：{{productInfo.quality}}</span></u-col>
</u-row>

101
pages/bookShop/settlement.vue
View File

@@ -39,7 +39,7 @@
<view class="itemPrice">
<text>￥{{item.price*item.productAmount}}</text>
<u-number-box v-model="item.productAmount" @change="valChange($event, item)" :input-width="50"
:input-height="20" :min="1" :max="item.productStock" integer @overlimit='overlimit'></u-number-box>
:input-height="20" :min="1" :max="item.productStock" integer ></u-number-box>
</view>
</view>
</view>
@@ -72,29 +72,39 @@
<view class="zhif_radio">
<u-radio-group v-model="payType">
<view style="width: 100%;">
<view v-for="(item, index) in paylist" @click="choseType(item.id)" class="zhif_xuanx">
<view v-for="(item, index) in paylist" class="zhif_xuanx">
<image :src="item.img"></image>
{{item.title}}
<span v-if="item.id == 4" style="color: #bbb; margin-left: 10px;">{{userMes.peanutCoin}}疯币可用</span>
<span @click.stop="buPoint" style="color: #bf0c0c; margin-left: 10px;" v-if="item.id == 4" class="chongBtn">去充值</span>
<u-radio :key="index" activeColor="#fe6e09" :name='item.id'
style="float: right;margin-top: 5rpx;"></u-radio>
style="float: right;margin-top: 5rpx;" ></u-radio>
</view>
</view>
</u-radio-group>
</view>
</view>
<view class="footer">
<view class="commodityPrice">
<view class="footer" >
<view class="commodityPrice" v-if="payType != 4">
<span style="color: #666;margin-right: 10rpx; font-size: 15px;">实付款: </span>
<span>￥</span>{{realPrice}}
</view>
<view class="operate" @click="goBuyJie">
<view class="commodityPrice" v-if="payType == 4">
<span style="color: #666;margin-right: 10rpx; font-size: 15px;">实付款: </span>
{{realPrice}}<span>疯币</span>
</view>
<view class="operate" @click="goBuyJie" v-if="payType != 4">
<view class="goBuy">
立即支付
</view>
</view>
</view>
<view class="operate" @click="goPoinBuy" v-if="payType == 4">
<view class="goBuy">
立即支付
</view>
</view>
</view>
<!-- 地址弹出 -->
<u-popup :show="dizhiShow" :round="10" @close="dizhiShow=false">
<view class="tanchu">
@@ -185,6 +195,7 @@
shangIDNum: 0,
cartIDNum: [],
cartList: [],
userMes:{}, // 用户信息
amount:null, // 商品总价
addressList: [],
adressMoRen: {},
@@ -206,7 +217,12 @@
title: '支付宝',
id: 1,
img: '../../static/icon/pay_1.png'
}
},
{
title: '疯币购买',
id: 4,
img: '../../static/icon/oder_chong.png'
}
// {
// title: '微信',
// id: 2,
@@ -231,19 +247,41 @@
// this.getYunFei()
},
onShow() {
onShow() {
if (this.typeId == 1) {
this.getCartList()
} else if (this.typeId == 0) {
this.getShangList(this.shangIDNum);
}
// this.getUserAddress()
this.getData()
},
computed: {
...mapState(['userInfo']),
},
methods: {
// 充值疯币
buPoint() {
uni.navigateTo({
url: '../peanut/reCharge'
});
},
getData() {
let that = this
// 获取个人信息
// 用户详情
if (this.userInfo.id != undefined) {
this.$http
.post('book/user/info/' + this.userInfo.id)
.then(res => {
this.userMes = res.user
// consol.log(this.userMes.peanutCoin,'呼呼')
if (this.userMes.vip != 0) {
this.typeFen = 2
}
});
}
},
// 获取地址列表
getUserAddress() {
this.$http
@@ -264,7 +302,18 @@
}
})
},
goPoinBuy(){
if(this.realPrice > this.userMes.peanutCoin){
uni.showToast({
title:'疯币不足，请充值',
icon: 'error',
duration: 2000
})
return
}else{
this.goBuyJie()
}
},
// 获取优惠券列表
getCourpe() {
let proId = ''
@@ -470,7 +519,7 @@
city: this.adressMoRen.areaidpathtext.split(' ')[1], //市
district: this.adressMoRen.areaidpathtext.split(' ')[2], //区
address: this.adressMoRen.useraddress, //地址
paymentMethod: this.payType, //支付方式 1支付宝，2微信，3ios内购
paymentMethod: this.payType, //支付方式 2支付宝，1微信，3ios内购 4，疯币购买
orderMoney: this.totalPrice, //订单金额
realMoney: this.realPrice, //实收金额
shippingMoney: this.farePrice, //运费
@@ -482,8 +531,7 @@
products: xiaBiao, //订单列表
orderType: "order", //订单类型
addressId:this.adressMoRen.addressid // 地址ID
}
}
$http.request({
url: "book/buyorder/save",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
@@ -500,6 +548,8 @@
image: '../../static/icon/ic_close.png'
});
} else {
if(this.payType != 4){
// 常规支付
uni.showToast({
title: "正在支付",
icon: "loading"
@@ -534,6 +584,18 @@
}, 1000)
}
})
}else{
// 疯币支付
uni.showToast({
title: "购买成功",
icon: "success"
});
setTimeout(() => {
uni.navigateTo({
url: './orderList'
});
}, 1000)
}
}
@@ -875,4 +937,13 @@
border-color: #fd6004;
}
}
.chongBtn {
background-color: #54a966;
color: #fff !important;
margin-left: 20rpx;
border-radius: 10rpx;
padding: 2rpx 10rpx;
font-size: 20rpx;
display: inline-block;
}
</style>

6
pages/eBook/bookContent.vue
View File

@@ -402,11 +402,9 @@
onPageJump(url) {
uni.navigateTo({
url: url
});
});
},
// 电子书阅读跳转
onBokReadJump(e) {
const that = this;
@@ -474,7 +472,7 @@
// 充值疯币
buPoint() {
uni.navigateTo({
url: '../../peanut/reCharge'
url: '../peanut/reCharge'
});
},

6
pages/peanut/home.vue
View File

@@ -66,7 +66,7 @@
</view>
<!-- 限时秒杀 -->
<view class="limited" v-if="seckillList!=null">
<view class="limited" v-if="seckillList!=null">
<view class="limitedSymbol">
<image src="../../static/icon/shopping_xsh.png"></image>
</view>
@@ -266,7 +266,8 @@
this.$http
.get(`book/shopseckill/getSeckillProd`)
.then(res => {
this.seckillList = res.list
//this.seckillList = res.list
this.seckillList = null
})
// 获取精选商品
@@ -309,7 +310,6 @@
url: '../eBook/bookContent?Id=' + e.bookid
});
},
// 商品详情页
goDetail(id) {
uni.navigateTo({

106
pages/peanut/opeVip.vue
View File

@@ -47,7 +47,7 @@
</view>
<view class="vip_chong">
<view class="vc_title">服务类型</view>
<view class="vc_xiang">
<view class="vc_xiang">
<view v-for="(item, index) in vcList" @click="chosPric(item)"
:class="stepsVc.priceTypeId == item.priceTypeId?'Tab_vc vc_price':'vc_price'">
<view class="pr_tm">{{item.description}}</view>
@@ -66,6 +66,8 @@
<view v-for="(item, index) in paylist" @click="choseType(item.id)" class="vf_xuanx">
<image :src="item.img"></image>
{{item.title}}
<span v-if="item.id == 4" style="color: #bbb; margin-left: 10px;">{{userMes.peanutCoin}}疯币可用</span>
<span @click.stop="buPoint" style="color: #bf0c0c; margin-left: 10px;" v-if="item.id == 4" class="chongBtn">去充值</span>
<u-radio :key="index" activeColor="#fe6e09" :name='item.id'
style="float: right;margin-top: 5rpx;"></u-radio>
</view>
@@ -76,7 +78,7 @@
<view class="agree_wo">* 我已阅读并同意《会员服务协议》</view>
<view class="vip_btn">
<view @click="kaiVip">立即开通会员</view>
<view @click="goPoinBuy">立即开通会员</view>
</view>
</view>
</template>
@@ -95,12 +97,19 @@
return {
stepsVc: {},
vcList: [],
payType: 2,
paylist: [{
title: '支付宝',
id: 1,
img: '../../static/icon/pay_1.png'
}
userMes:{},
payType: 4,
paylist: [
// {
// title: '支付宝',
// id: 1,
// img: '../../static/icon/pay_1.png'
// },
{
title: '疯币充值',
id: 4,
img: '../../static/icon/oder_chong.png'
}
// {
// title: '微信',
// id: 2,
@@ -117,6 +126,7 @@
},
//页面显示
onShow() {
this.getDataPoint()
// 隐藏原生的tabbar
uni.hideTabBar();
},
@@ -125,6 +135,40 @@
},
//方法
methods: {
goPoinBuy(){
if(this.stepsVc.money > this.userMes.peanutCoin){
uni.showToast({
title:'疯币不足，请充值',
icon: 'error',
duration: 2000
})
return
}else{
this.kaiVip()
}
},
// 充值疯币
buPoint() {
uni.navigateTo({
url: '../peanut/reCharge'
});
},
getDataPoint() {
let that = this
// 获取个人信息
// 用户详情
if (this.userInfo.id != undefined) {
this.$http
.post('book/user/info/' + this.userInfo.id)
.then(res => {
this.userMes = res.user
// consol.log(this.userMes.peanutCoin,'呼呼')
if (this.userMes.vip != 0) {
this.typeFen = 2
}
});
}
},
// 获取会员类型
getData() {
let that = this
@@ -151,7 +195,7 @@
that.payType = e
},
// 开通vip
// 开通vip 常规支付
kaiVip() {
let that = this
@@ -165,7 +209,6 @@
orderStatus: 0, //订单状态
orderType: "vip", //订单类型
}
$http.request({
url: "book/buyorder/rechargeSave",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
@@ -175,6 +218,8 @@
},
}).then(res => {
if (res.code == 0) {
console.log(res)
if(that.payType != 4){
setPay({
typePay: 'alipay',
subject: 'vip',
@@ -195,6 +240,37 @@
});
}
})
}else{
console.log(that.userMes)
this.$http
.post('book/user/openVipByVirtualCoin', {
'configId': that.stepsVc.priceTypeId,
'userId': that.userMes.id,
'orderSn':res.orderSn
})
.then(res => {
if(res.code == 0){
console.log(res, 'res')
uni.showToast({
title: "充值成功",
icon:'success',
duration:2000
});
setTimeout(()=>{
uni.navigateTo({
url: '../bookShop/orderList'
});
},1000)
}
})
}
}else{
uni.showToast({
title: "下单失败",
icon:'Error',
duration:2000
});
}
})
@@ -214,7 +290,15 @@
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.chongBtn {
background-color: #54a966;
color: #fff !important;
margin-left: 20rpx;
border-radius: 10rpx;
padding: 2rpx 10rpx;
font-size: 20rpx;
display: inline-block;
}
.vip_top {
// background-color: #2c271d;
background-image: url('../../static/icon/mine_back.png');

291
pages/yRead/angbook.vue
View File

@@ -55,13 +55,14 @@
<view class="verticalbox" :class="{ container0: background === 1, container1: background === 2 }"
@click="showMenu">
<!-- 章节名 -->
<view class="chapter">{{ verticalData.chapterName }}</view>
<scroll-view scroll-y="true" :scroll-top="scrollTop" scroll-with-animation="true" style="height: 600px;"
@scrolltoupper="scrolltoupper" @scrolltolower="scrolltolower" @scroll="scroll">
<view class="content">
<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" @touchend="touchEnd" @touchstart="touchStart">
<view class="content">
<view class="inner-box" :style="{ height: `${innerHeight}px` }" v-if="verticalData.canRead">
<view>
<p class="book-inner" :class="highlight === index ? 'highlight' : ''"
<p
class="book-inner" :class="highlight === index ? 'highlight' : ''"
v-for="(item, index) in verticalData.text" :key="index" v-html="item.picAndWord"
:style="{
fontWeight: item.level == 2 ? 'bold' : item.level == 3 ? 'bold' : '',
@@ -109,14 +110,15 @@
<!-- 内层class="inner-box"利用innerHeight将内容截取至整行，防止文字不完整的情况出现 -->
<view class="inner-box" :style="{ height: `${innerHeight}px` }" v-if="prePage.canRead">
<!-- 最里层class="book-inner"的用于获取文本总高度，计算总页数，注意不可以overflow:hidden -->
<view class="book-inner" v-for="(item, index) in prePage.text" :key="index" v-html="item"
:style="{
fontWeight: item.level == 2 ? 'bold' : item.level == 3 ? 'bold' : '',
fontSize: `${fontSize}px`,
lineHeight: `${lineHeight * fontSize}px`,
color: `${colorList[background - 1]}`,
transform: `translateY(0)`
}"></view>
<view class="book-inner" >
<p v-for="(item, index) in curPage.text" v-html="item.list" :key="index"
:class="highlight === item.paragraph ? 'highlight' : ''"
:style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px`, color: `${colorList[background - 1]}`, transform: `translateY(0px)` }"></p>
</view>
</view>
<view
style="display:flex;flex-flow: column;justify-content: center;align-items: center;height: 100%;"
@@ -149,9 +151,14 @@
<view class="chapter">{{ curPage.chapterName }}</view>
<view class="content">
<view class="inner-box" :style="{ height: `${innerHeight}px` }" v-if="curPage.canRead">
<view class="book-inner" :class="fhighlight== true ? 'fhighlight' : ''"
v-for="(item, index) in curPage.text" :key="index" v-html="item"
:style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px`, color: `${colorList[background - 1]}`, transform: `translateY(0px)` }">
<view class="book-inner" >
<!-- <pre>
{{curPage.text}}
</pre> -->
<p v-for="(item, index) in curPage.text" v-html="item.list" :key="index"
:class="highlight === item.paragraph ? 'highlight' : ''"
:style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px`, color: `${colorList[background - 1]}`, transform: `translateY(0px)` }"></p>
</view>
</view>
<view
@@ -247,8 +254,7 @@
<view :style="{ height: `${statusBarHeight}px` }"></view>
<view class="head">
<image class="backiconfont" @click="back" src="../../static/icon/back.svg" mode="aspectFit"></image>
<!-- <text decode="true">&lt;</text> -->
<image class="backiconfont" @click="back" src="../../static/icon/back.svg" mode="aspectFit"></image>
</view>
</view>
<!-- 菜单主体 -->
@@ -312,8 +318,8 @@
@click="changeTurnType(0)">覆盖</view>
<view class="icon" :class="{ active: turnType === 1 }" style="padding: 5px 8px;"
@click="changeTurnType(1)">左右平移</view>
<view class="icon" :class="{ active: turnType === 2 }" style="padding: 5px 8px;"
@click="changeTurnType(2)">上下平移</view>
<!-- <view class="icon" :class="{ active: turnType === 2 }" style="padding: 5px 8px;"
@click="changeTurnType(2)">上下平移</view> -->
</view>
<view class="item">
<view class="item-name">背景</view>
@@ -366,6 +372,7 @@
precent: null,
updateReadId: null
},
scrollTop1:0,
bookName: '我是书名',
bookId: 1,
bookId_mark: '',
@@ -581,13 +588,24 @@
...mapState(['userInfo']),
},
methods: {
// scroll1: function(e) {
// // console.log(e)
// // this.old.scrollTop = e.detail.scrollTop
// },
// upper: function(e) {
// console.log(e)
// },
// lower: function(e) {
// console.log(e)
// },
// view的滑动事件
scroll: function(e) {
// this.oldType = "Vertical"
// console.log(e)
this.scrollTop = e.detail.scrollTop
// console.log(e.detail)
// this.scrollTop = e.detail.scrollTop
// this.scrollTop1 = e.detail.scrollTop
// 计算当前的page
this.page = parseInt(e.detail.scrollTop / (this.NumCol * this.lineHeight * this.fontSize))
// this.page = parseInt(e.detail.scrollTop / (this.NumCol * this.lineHeight * this.fontSize))
},
bookMessage() {
@@ -618,31 +636,33 @@
// 拆分数据
forGet(colSize, NumCol) {
let that = this
let arr = [] //数组每一项代表一行
let arr = [] //数组每一项代表一行
// console.log(copyBookText,'拆分前')
copyBookText.map((res, index) => {
res.picAndWord = ' ' + res.picAndWord
if (res.picAndWord.length > colSize) {
arr.push(res.picAndWord.substr(0, colSize))
arr.push({'paragraph':index,'list':res.picAndWord.substr(0, colSize), 'level':0})
let text = res.picAndWord.substr(colSize)
that.aginForget(text, arr, colSize)
that.aginForget(text, arr, colSize, index)
} else {
arr.push(res.picAndWord.substr(0, colSize))
arr.push({'paragraph':index,list:res.picAndWord.substr(0, colSize), 'level':0})
}
})
copyBookText = arr
// console.log(copyBookText,'copyBookText')
this.getSizePage(NumCol)
},
//获取后面的字符，再去计算能放几行
aginForget(text, arr, colSize) {
aginForget(text, arr, colSize, index) {
let that = this;
let strBR = "</br>"
if (text.length > colSize) {
arr.push(text.substr(0, colSize))
let newText = text.substr(colSize)
that.aginForget(newText, arr, colSize)
arr.push({'paragraph':index,'list':text.substr(0, colSize), 'level':0})
let newText = text.substr(colSize)
that.aginForget(newText, arr, colSize, index)
} else {
arr.push(text.substr(0, colSize))
arr.push({'paragraph':index,'list':text.substr(0, colSize),'level':0})
// arr.push(strBR)
}
},
@@ -669,7 +689,7 @@
}
arr.push(newArr)
copyBookText = arr // 每一页显示的内容
// console.log(copyBookText,'copyBookText')
console.log(copyBookText,'copyBookText')
},
setStorage() {
@@ -852,7 +872,7 @@
this.history.chapterIndex = 0
}
await this.getThreeChapter(this.history.chapterIndex)
this.counlSystemInfo()
// this.counlSystemInfo()
let page = Math.floor((this.curChapter.totalPage - 1) * this.history.progress)
this.goToPage(page)
uni.hideLoading()
@@ -904,12 +924,12 @@
setTimeout(() => {
const query = uni.createSelectorQuery().in(this);
query.select('#curChapter').boundingClientRect(data => {
let height = data.height;
let height = data.height;
// #ifdef APP-PLUS || MP-WEIXIN
height = Math.round(height * this.pixelRatio) / this.pixelRatio
// #endif
this.curChapter.totalPage = Math.ceil(height / this.innerHeight) || 1
// this.curChapter.totalPage = Math.floor(height / this.innerHeight) || 1
this.curChapter.totalPage = copyBookText.length
this.curChapter.ready = true //章节准备完毕
resolve()
}).exec();
@@ -973,25 +993,6 @@
this.down = false
}, 300)
},
/**
* 滑动事件
**/
onScroll(e) {
this.sliderValue = Number(((e.detail.scrollTop / (this.contentHeight - (this.windowHeight - 100))) * 100))
if (!isAudioMenu) {
this.scrollTop = e.detail.scrollTop
}
let page = Number(((e.detail.scrollTop / (this.contentHeight - (this.windowHeight - 100))) * 100))
// console.log(page,66)
// if(page != this.page){
// console.log(page,66)
// this.goToPage(page) // 跳转到制定页面
// }
},
/**
* 听书事件
**/
@@ -1007,21 +1008,19 @@
})
if (this.domList.length > 0) {
console.log('读取到数据，继续执行');
} else {
console.log('读取到的数据为空，进行赋值');
this.domList = data;
}
// this.getNowReadIndex()
this.createAudio()
this.musicManuShow = false
this.isAudioMenu = true
this.getNowReadIndex()
// this.$nextTick(()=>{
// this.createAudio()
// })
}).exec();
},
getNowReadIndex() {
let progress = this.progress //记录阅读进度用于调整字体后跳转
getNowReadIndex() {
let progress = this.progress //记录阅读进度用于调整字体后跳转
// let page = Math.floor((this.curChapter.totalPage - 1) * progress)
let page = 0
let history = uni.getStorageSync('history')
@@ -1029,61 +1028,60 @@
page = 0
} else {
page = Math.floor((this.curChapter.totalPage - 1) * progress)
}
}
// console.log(this.curChapter.totalPage, 'curChapter')
// 通过page 判断当前读到了哪里
// console.log(page+1, '当前页')
// console.log(copyBookText[page][0],'顶部第一句话')
let nowRead = copyBookText[page][0]
let nowReadIndex = 0
let nowRead = copyBookText[page][0].list
console.log(nowRead,'顶部第一句话')
//let nowReadIndex = 0
//console.log(page,'page')
if (page == 0) {
// return this.scrollTop = 0
this.domIndex = 0
this.createAudio()
this.musicManuShow = false
this.isAudioMenu = true
}else{
let found = false
this.verticalData.text.forEach((item, itemIndex) => {
if (item.content.indexOf(copyBookText[page][0]) != -1) {
if (page == 1) {
return this.scrollTop = 0
} else {
let topOfsset = Number(this.fontSize * this.NumCol * this.lineHeight * page)
this.scrollTop = topOfsset
}
return nowReadIndex = itemIndex
// console.log(copyBookText[page][0][0],'copyBookText')
//console.log(item.content,'item')
if (item.content.indexOf(nowRead) != -1) {
// 找到了
console.log(item.number,'找到了')
found = true
this.domIndex = itemIndex
this.createAudio()
this.musicManuShow = false
this.isAudioMenu = true
return
}
})
// console.log(this.scrollTop,'距离顶部距离')
this.domIndex = nowReadIndex
// this.scrollTop = Number((this.NumCol * this.lineHeight * this.fontSize * this.page) / 100)
if(!found){
uni.showToast({
title:'未找到音频',
icon:'none',
duration:2000
})
}
}
},
// 创建音频
createAudio() {
this.domList.map((item, index) => {
if (item.top >= this.scrollTop && this.scrollTop >= item.bottom) {
return this.domIndex = index
}
}
)
console.log('读到的位置', this.domIndex);
this.music = uni.createInnerAudioContext()
this.music.src = this.verticalData.text[this.domIndex].voices; // static文件夹下的音频地址
console.log(this.verticalData.text, '文本')
// 找到对应dom
console.log(this.scrollTop, '滚动后的top值')
console.log(this.verticalData.text, '文本')
// 找到符合条件的dom
console.log('domList', this.domList)
console.log('scrollTop', this.scrollTop)
// 获取当前的页码
//let page = Math.ceil(((this.scrollTop / (this.windowHeight - 100)) * 10)) - 1
//console.log(page,'当前的页码')
//this.goToPage(page)
console.log('domList', this.domList)
// 给对应dom高亮
this.highlight = this.domIndex
this.fhighlight = true
console.log('highlight', this.highlight);
console.log('domIndex', this.domIndex);
console.log('domIndex', this.domIndex);
// 判断是否有src
if (this.music.src) {
setTimeout(() => {
@@ -1101,9 +1099,18 @@
});
},
// 加载下一条音频
addDomIndex() {
addDomIndex(page) {
this.domIndex += 1
this.createAudio()
//console.log(this.domIndex, '下一条domIndex')
//console.log(this.curPage.text, '最大值')
setTimeout(()=>{
this.createAudio()
if(this.domIndex > this.curPage.text[this.curPage.length -1].paragraph){
console.log(this.curPage.text[this.curPage.length -1].paragraph)
this.goNextPage()
}
},2000)
},
// 暂停事件
audioPause() {
@@ -1204,6 +1211,7 @@
this.touchStartX = e.touches[0].clientX;
this.touchY = e.touches[0].clientY;
this.touchStartY = e.touches[0].clientY;
// console.log(touchStartY, '触摸开始')
if (this.turnType === 0) {
// this.$refs.pageBackRef.$el.style.transition = 'unset'
@@ -1263,12 +1271,10 @@
this.touchY = e.touches[0].clientY;
// console.log(this.delta, 'delta')
}
if (this.next && this.nextPage.ready) { //首次翻下一页之后
if (this.nextPage.isEnd) {
return
}
// 限制边界
if (delta > 0) {
delta = 0
@@ -1479,7 +1485,12 @@
delta = e.changedTouches[0].clientX - this.touchStartX;
} else {
delta = e.changedTouches[0].clientY - this.touchStartY;
console.log(delta, '触摸')
console.log(delta, '触摸结束')
this.scrollTop += -delta
console.log(this.scrollTop, 'scrollTop')
this.page = parseInt(this.scrollTop / (this.NumCol * this.lineHeight * this.fontSize))
console.log(this.page, 'page')
//this.getNowReadIndex()
}
if ((delta < 0.8 && delta > -0.8)) { //部分手机点击屏幕时无法做到delta===0
@@ -1788,6 +1799,7 @@
}
this.currentPage += 1
let showChapter = false
console.log(this.currentPage,this.curChapter.totalPage)
if (this.currentPage === this.curChapter.totalPage) { //翻至下一章了
showChapter = true
this.currentPage = 0
@@ -1867,15 +1879,17 @@
if (type === 'next') {
this.preChapter = Object.assign({}, this.curChapter)
this.curChapter = Object.assign({}, this.nextChapter)
console.log(this.curChapter)
copyBookText = this.curChapter.text;
console.log(this.curChapter.chapterIndex, 'chapterIndex')
copyBookText = this.curChapter.text;
this.counlSystemInfo()
console.log(copyBookText,1111111111)
if (this.curChapter.chapterIndex !== this.directoryList.length - 1) { //最后一章是根据目录列表长度判断
this.nextChapter = {
ready: false,
chapterIndex: this.curChapter.chapterIndex + 1,
chapterName: this.directoryList[this.curChapter.chapterIndex + 1].name,
}
}
await this.getOneChapter(this.directoryList[this.curChapter.chapterIndex + 1].chapterId)
this.$set(this.nextChapter, 'text', this.tmpChapter.text)
this.$set(this.nextChapter, 'canRead', this.tmpChapter.canRead)
@@ -1884,14 +1898,16 @@
this.nextChapter = {
ready: true,
isEnd: true
}
}
}
}
this.getThreeChapter(this.curChapter.chapterIndex)
}
if (type === 'pre') {
this.nextChapter = Object.assign({}, this.curChapter)
this.curChapter = Object.assign({}, this.preChapter)
copyBookText = this.curChapter.text;
this.counlSystemInfo()
copyBookText = this.curChapter.text;
this.counlSystemInfo()
if (this.curChapter.chapterIndex !== 0) {
this.preChapter = {
ready: false,
@@ -1902,12 +1918,14 @@
this.$set(this.preChapter, 'text', this.tmpChapter.text)
this.$set(this.preChapter, 'canRead', this.tmpChapter.canRead)
this.calcPreChapter()
} else {
} else {
this.preChapter = {
ready: true,
isCover: true
}
}
}
this.getThreeChapter(this.curChapter.chapterIndex)
}
},
@@ -1970,7 +1988,6 @@
})
return
}
if (this.isVertical) {
if (this.curChapter.chapterIndex > 0) {
uni.showLoading({
@@ -1978,7 +1995,8 @@
})
setTimeout(() => {
this.getThreeChapter(this.curChapter.chapterIndex - 1)
this.counlSystemInfo()
// this.counlSystemInfo()
console.log(copyBookText,'翻页后')
uni.hideLoading()
}, 300)
} else {
@@ -2012,6 +2030,7 @@
this.currentPage = page
this.showAnimation = false
console.log(page, '======>')
// console.log(copyBookText[page],'当前页')
this.$nextTick(function() {
this.curPage = {
ready: this.curChapter.ready,
@@ -2029,20 +2048,7 @@
})
// console.log(copyBookText[page][0],'顶部第一句话')
let nowRead = copyBookText[page][0]
let nowReadIndex = 0
this.verticalData.text.forEach((item, itemIndex) => {
if (item.content.indexOf(copyBookText[page][0]) != -1) {
if (page == 1) {
return this.scrollTop = 0
} else {
let topOfsset = Number(this.fontSize * this.NumCol * this.lineHeight * page)
this.scrollTop = topOfsset
}
return nowReadIndex = itemIndex
}
})
// console.log(this.scrollTop,'翻页后的顶部距离')
let nowReadIndex = 0
this.domIndex = nowReadIndex
this.setStorage() // 设置缓存
if (this.currentPage === 0) {
@@ -2248,7 +2254,6 @@
}
if (turnType == 2) {
this.oldType = "Vertical"
// 获取当前的domIndex
this.getNowReadIndex()
this.isVertical = true
@@ -2345,6 +2350,7 @@
})
.then(res => {
this.tmpChapter.text = res.bookCatalogue
// console.log(this.tmpChapter.text,'tmpChapter')
})
.catch(() => {
// 此处是网络连接失败的逻辑
@@ -2389,9 +2395,9 @@
chapterName: this.directoryList[Number(index)].name,
text: this.tmpChapter.text,
canRead: this.tmpChapter.canRead
}
console.log(this.verticalData)
}
copyBookText = this.curChapter.text;
this.counlSystemInfo()
this.domIndex = 0;
if (this.curChapter.chapterIndex !== 0) {
await this.getOneChapter(this.directoryList[Number(index) - 1].chapterId)
@@ -2409,6 +2415,7 @@
}
if (this.curChapter.chapterIndex !== this.directoryList.length - 1) {
await this.getOneChapter(this.directoryList[Number(index) + 1].chapterId)
this.nextChapter = {
chapterIndex: Number(index) + 1,
@@ -2424,7 +2431,7 @@
}
await this.calcCurChapter()
await this.calcPreChapter()
await this.calcNextChapter()
await this.calcNextChapter()
},
/*
获取进度
@@ -2530,7 +2537,7 @@
<style lang="scss" scoped>
@import url("@/pages/yRead/iconfont.css");
.scroll-Y{height: 600px;}
page {
position: relative;
width: 100%;
@@ -2627,16 +2634,16 @@
.inner-box {
.book-inner {}
.highlight {
}
}
}
.highlight {
color: #e5d6a0 !important;
// padding: 10rpx 20rpx;
// border-radius: 10rpx;
// background-color: #cbcbcb;
}
}
}
}
.fhighlight {}
.container {