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

1

Browse Source
This commit is contained in:
@fawn-nine
2023-03-03 12:11:23 +08:00
commit f8e1a3015b
502 changed files with 57308 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

511
pages/yRead/cus-audio-play.vue Normal file
View File

@@ -0,0 +1,511 @@
<template>
<view v-if="audioShow==1" class="page">
<view class="back_btn">
<text class="iconfont icon-fanhui" @tap='pageBack'></text>
</view>
<!-- <cus-navbar id="navbar" title="" titleColor="#fff" bgColor="transparent" @back="hide"></cus-navbar> -->
<view class="top-box" :style="{paddingTop:`${navbarH}px`,marginTop:`-${navbarH}px`}">
<image class="default-cover cover" :src="detail.cover" mode="scaleToFill" @tap="prompthandle"></image>
<view class="book-name" @tap="prompthandle">
<text>{{this.AS_book[0].booktitle}}</text>
<text class="iconfont icon-jinrujiantou"></text>
</view>
<view class="chapter-name" @tap="prompthandle">{{this.AS_book[0].bookchapt}}</view>
<view class="schedule-box">
<view class="rate"></view>
<span class="time" @tap="prompthandle">{{'10:40'}}/{{'12:11'}}</span>
</view>
</view>
<view class="button-box">
<button @tap="prompthandle"><text class="iconfont icon-step-backward side"></text></button>
<!-- <button><text class="iconfont icon-pausecircle-fill center"></text></button> -->
<button @tap="prompthandle"><text class="iconfont icon-playcircle-fill center"></text></button>
<button @tap="prompthandle"><text class="iconfont icon-step-forward side"></text></button>
</view>
<!-- <view class="button-box">
<button @tap="prompthandle">
<text class="iconfont icon-xiazai1 sub-icon"></text>
<text class="sub-text">下载</text>
</button>
<button @tap="prompthandle">
<text class="iconfont icon-shu sub-icon"></text>
<text class="sub-text">加入书架</text>
</button>
<button @tap="prompthandle">
<text class="iconfont icon-xianshishijian sub-icon"></text>
<text class="sub-text">定时</text>
</button>
<button @tap="prompthandle">
<text class="iconfont icon-kuaisushezhi sub-icon"></text>
<text class="sub-text">语速</text>
</button>
<button @tap="prompthandle">
<text class="iconfont icon-menu sub-icon"></text>
<text class="sub-text">658章</text>
</button>
</view> -->
<!-- <view class="bottom-btn">
<button @tap="prompthandle">
<text class="dot">AI朗读</text>
<text>成熟大叔音</text>
<text class="iconfont icon-jinrujiantou"></text>
</button>
<button @tap="prompthandle">阅读原文</button>
</view> -->
</view>
<!-- <view id="_drag_button" class="drag text-sm flex justify-start align-center"
:style="'left:'+left+'px;top:'+top+'px;'" @click.stop.prevent="click" @touchmove.stop.prevent="touchmove"
@touchend="touchend"
:class="[!isMove?'transition':'', open?'margin-left animation-slide-left':'animation-slide-right']">
<view v-if="open" class="flex justify-start align-center openDrag">
<view class="audio-title margin-lr-sm">
<view id="title" class="animation" :style="{animationDuration: `${animateDuration}s`}">{{title}}</view>
</view>
<view class="iconfont margin-lr-sm" :class="pause?'icon-kaishi':'icon-zantingtingzhi'" @tap="tapPause">
</view>
<view class="cuIcon-close margin-lr-sm" @tap="tapClose"></view>
</view>
<view v-else class="cuIcon-right margin-lr-xs padding-left-sm" @tap="tapOpen"></view>
</view> -->
</template>
<script>
export default {
props: {
bookId: {
type: String,
default: ''
},
bookName: {
type: String,
default: '从特种兵开始融合万物'
},
chapterName: {
type: String,
default: '第10章犀利的改变'
},
content: {
type: String,
default: ''
},
styleBottom: {
type: Number,
default: 0
},
audioShow: {
type: Number,
required: true
},
playData: {
type: Array,
required: true
},
AS_book: {
type: Array,
default: ''
},
},
data() {
return {
navbarH: this.$NavBar,
visible: true,
promptList: ['呀！不能用', '咦？还是不行', '哈哈哈哈哈，这个也不行', '没想到吧，都不行！'],
promptIndex: 0,
// open: true,
// top: 0,
// left: 0,
// width: 0,
// height: 0,
// offsetWidth: 0,
// offsetHeight: 0,
// windowWidth: 0,
// windowHeight: 0,
// isMove: true,
// edge: 10,
// pause: false,
// audioPlay: false,
// audio: [],
// curAudio: null,
// audioIndex: 0,
// animateDuration: 4,
}
},
computed: {
detail() {
let readHistorys = {
'cover': "http://img.1391.com/api/v1/bookcenter/cover/1/3449780/3449780_fc9244d1c821436d88fb9a7f5b1ea7f5.jpg/"
}
// let idx = readHistorys.findIndex(item => item._id === this.bookId)
return readHistorys
}
},
mounted() {
// const sys = uni.getSystemInfoSync();
// this.windowWidth = sys.windowWidth;
// this.windowHeight = sys.windowHeight;
// if (sys.windowTop) {
// this.windowHeight += sys.windowTop;
// }
// this.getComponentHeight();
// this.toRead();
// this.tapOpen();
},
beforeDestroy() {
this.hide()
// this.tapClose();
},
methods: {
show() {
this.visible = true
},
hide() {
this.visible = false
},
pageBack() {
this.$emit('showValue', 0);
},
prompthandle() {
uni.hideToast()
uni.showToast({
icon: 'none',
title: this.promptList[this.promptIndex % 4]
})
this.promptIndex += 1
}
// getComponentHeight() {
// const query = uni.createSelectorQuery().in(this);
// query.select('#_drag_button').boundingClientRect(data => {
// if (data != null) {
// this.width = data.width;
// this.height = data.height;
// this.offsetWidth = data.width / 2;
// this.offsetHeight = data.height / 2;
// this.top = this.windowHeight - this.height - this.edge - this.styleBottom;
// }
// }).select('#title').boundingClientRect(data => {
// if (data.width > 159) { //计算文本长度
// this.animateDuration = (4 * data.width / 159).toFixed(2) //动画过渡时间
// console.log(this.animateDuration)
// }
// }).exec();
// },
// toRead() {
// this.audioPlay = !this.audioPlay;
// console.log(this.audioPlay)
// if (this.audioPlay) {
// let content = this.content.replace(/<[^>]+>/g, '').replace(/&nbsp;/g, '')
// this.audio = [this.title, ...content.split('。')]
// this.subFunc();
// } else {
// this.curAudio.pause()
// }
// },
// async subFunc() {
// if (this.audioIndex < this.audio.length) {
// this.curAudio = await this.$Voice({
// voiceSet: {
// tex: this.audio[this.audioIndex]
// },
// returnAudio: true
// })
// this.curAudio.onPlay(() => {
// console.log('音频开始播放了')
// })
// this.curAudio.play();
// this.curAudio.onEnded(() => {
// this.curAudio = null;
// this.audioIndex++;
// this.subFunc();
// })
// } else {
// this.tapClose();
// }
// },
// click() {
// this.$emit('btnClick');
// },
// touchmove(e) {
// // 单指触摸
// if (e.touches.length !== 1) {
// return false;
// }
// this.isMove = true;
// let clientY = e.touches[0].clientY - this.offsetHeight;
// // #ifdef H5
// clientY += this.height;
// // #endif
// let edgeBottom = this.windowHeight - this.height - this.edge - this.styleBottom;
// // 上下触及边界
// if (clientY < this.edge) {
// this.top = this.edge;
// } else if (clientY > edgeBottom) {
// this.top = edgeBottom;
// } else {
// this.top = clientY;
// }
// },
// touchend(e) {
// this.isMove = false;
// },
// tapOpen() {
// this.open = true;
// setTimeout(() => {
// this.open = false;
// }, 5000)
// },
// tapPause() {
// this.pause = !this.pause;
// if (this.pause) {
// this.curAudio.pause();
// } else {
// this.curAudio.play();
// }
// },
// tapClose() {
// if (this.curAudio) {
// this.curAudio.stop();
// this.curAudio.destroy();
// this.curAudio = null;
// this.animationData = {}
// // 为了在每个页面都可以监听语音播报悬浮窗
// this.$set(this.$audioDrag, 'show', false)
// this.$set(this.$audioDrag, 'title', null)
// this.$set(this.$audioDrag, 'content', null)
// }
// },
}
}
</script>
<style lang="scss" scoped>
@import url('@/pages/yRead/font.css');
.page {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1024;
background-color: #405568;
.back_btn{
color: #FFFFFF;
background-color: #586A78;
padding: 7px 7px 7px 13px;
}
.top-box {
color: #FFFFFF;
background-color: #586A78;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
.cover {
margin-top: 24px;
width: 115px;
height: 163px;
border-radius: 4px;
}
.book-name {
margin-top: 12px;
color: #B8C9D0;
font-size: 14px;
line-height: 16px;
text {
display: inline-block;
vertical-align: middle;
}
}
.chapter-name {
margin-top: 15px;
font-size: 18px;
font-weight: bold;
}
.schedule-box {
position: relative;
margin-top: 24px;
width: 100%;
height: 1px;
background-color: #94A1AA;
.rate {
width: 80%;
height: 1px;
background-color: #FFFFFF;
}
.time {
position: absolute;
left: 80%;
height: 20px;
line-height: 20px;
padding: 0 7px;
border-radius: 13px;
background-color: #FEFEFF;
color: #8D8D8F;
font-size: 9px;
transform: translate(-50%, -50%);
}
}
}
.button-box {
margin-top: 24px;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
button {
line-height: 1;
background-color: transparent;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text {
color: #FFFFFF;
white-space: nowrap;
}
.side {
font-size: 34px;
}
.center {
font-size: 63px;
}
.sub-icon {
font-size: 24px;
color: #CBD8E2;
}
.sub-text {
margin-top: 6px;
font-size: 12px;
color: #CBD8E2;
}
}
}
.bottom-btn {
margin-top: 27px;
display: flex;
justify-content: space-around;
align-items: center;
button {
$color: #FFFFFF;
height: 40px;
padding: 0 20px;
color: $color;
background-color: #546776;
font-size: 14px;
border-radius: 40px;
display: flex;
justify-content: center;
align-items: center;
.dot {
position: relative;
padding-right: 17px;
&::after {
content: "";
position: absolute;
top: 50%;
right: 6px;
width: 3px;
height: 3px;
background-color: $color;
border-radius: 50%;
}
}
.icon-jinrujiantou {
margin-left: 20px;
}
}
}
}
// .drag {
// background-color: rgba(0, 0, 0, 0.5);
// box-shadow: 0 0 6rpx rgba(0, 0, 0, 0.4);
// color: $uni-text-color-inverse;
// height: 100rpx;
// position: fixed;
// z-index: 999999;
// &.transition {
// transition: left .3s ease, top .3s ease;
// }
// .audio-title {
// width: 300rpx;
// max-width: 300rpx;
// overflow: hidden;
// white-space: nowrap;
// .animation {
// display: inline-block;
// white-space: nowrap;
// animation: 5s wordsLoop linear 0s infinite;
// }
// @keyframes wordsLoop {
// from {
// transform: translateX(300rpx)
// }
// to {
// transform: translateX(calc(-100%))
// }
// }
// }
// .openDrag {
// animation: dragShow 1s forwards;
// }
// @keyframes dragShow {
// to {
// visibility: visible;
// opacity: 1;
// transform: translateX(0);
// }
// }
// }
</style>