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

添加讲书

Browse Source
This commit is contained in:
@fawn-nine
2023-09-26 17:46:03 +08:00
parent d27325394c
commit 63cbc9da2f
3 changed files with 910 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
pages/talkBook/talkBook.vue Normal file
View File

@@ -0,0 +1,167 @@
<template>
<view class="container">
<view class="header">
<!-- 顶部导航栏 -->
<z-nav-bar title="讲书"></z-nav-bar>
</view>
<view class="tip">
<text>请选择要查看的书籍：</text>
</view>
<view class="mainContainer">
<view class="item" v-if="bookList.length > 0">
<u-row gutter="16" justify="flex-start" >
<u-col span="4" v-for="(item,index) in bookList" :key="index">
<view>
<view class="videoBox demo-layout bg-purple" @click="toDetail(item)">
<image v-if="item.images != ''" :src="item.images" mode="scaleToFill"></image>
<image v-else src="../../static/icon/wufeng.jpg" mode="scaleToFill"></image>
</view>
<text class="bookName">{{item.name}}</text>
</view>
</u-col>
</u-row>
</view>
<u-divider v-else text="暂无数据"></u-divider>
<view style="width: 100%;">
<view v-if="status==0" style="text-align: center;">
<u-loading-icon style="display: inline-block;"></u-loading-icon>
<font style='vertical-align: super;margin-left: 10px;font-size: 26rpx;color: #909399;'>努力加载中</font>
</view>
<view v-if="status==1">
<u-divider text="全部加载完成"></u-divider>
</view>
</view>
</view>
<!-- 评价对话框 -->
<music-play :playData="playData"></music-play>
</view>
</template>
<script>
import $http from '@/config/requestConfig.js';
// import emotion from '@/bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue';
import musicPlay from '@/components/music.vue'
import { data } from 'jquery';
import {
mapState
} from 'vuex';
export default {
data() {
return {
loadingNow : false,
playData:{},
windowWidth:0,
bookid:null,
productInfo:{},
page:1,
bookList:[],
pageSize:9,
total:0,
totalPage:0,
status:3,
shupingList:[],
bfaid:null,
}
},
onPullDownRefresh() {
console.log('下拉刷新了')
uni.stopPullDownRefresh();
},
onReachBottom() {
this.loadingNow = true
// if(this.page < this.total){
// this.page++
// console.log('加载',this.page)
// this.status = 0
// this.getBookCom()
// }else{
// this.status = 1
// console.log('加载完成了',this.page)
// return
// }
},
onLoad(e) {
this.windowWidth = uni.getSystemInfoSync().windowWidth;
console.log(e,'onload')
this.bookid = e.bookid
// this.getProDetail(e)
this.getBooks()
},
computed:{
...mapState(['userInfo']),
},
methods: {
getBooks(){
this.$http
.post('book/teach/getTeachBooks',{
'limit': 9,
'page': this.page
})
.then(res => {
console.log(res,'讲书列表')
if(res.code == 0 && res.page.records.length > 0){
this.bookList = res.page.records
this.totalPage = res.page.pages
this.status = 3
console.log(this.bookList,'this.bookList')
}else{
this.bookList = []
this.totalPage = 0
}
}).catch(e => {
console.log(e,'e')
});
},
// 书评详情
toDetail(val){
console.log(val,'val')
uni.navigateTo({
url:'./talkBookML?bookid='+val.id
})
},
},
components:{
musicPlay
}
}
</script>
<style lang="scss" scoped>
.tip{
padding: 20rpx; background-color: #fff;
text{ font-size: 36rpx;}
}
.flexbox{display: flex;}
.container{padding: 10px;}
.bookName {
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
font-size: 30rpx;
color: #333;
padding: 10rpx 0;
}
uni-image {
width: auto !important;
height: 350rpx;
}
.listenList {
padding: 10rpx;
box-sizing: border-box;
width: calc(100% - 10rpx);
}
.u-row {
flex-wrap: wrap;
}
.u-col {
overflow: hidden;
margin-bottom: 20rpx;
}
.mb30{margin-bottom: 30rpx; overflow: hidden;}
</style>

197
pages/talkBook/talkBookDetail.vue Normal file
View File

@@ -0,0 +1,197 @@
<template>
<view>
<z-nav-bar :title="bookInfo.name+'-讲书'"></z-nav-bar>
<view class="mainContent">
<view class="title">{{talkBookDetail.title}}</view>
<view class="voices" v-if="talkBookDetail.voices != '' && audioShow">
<audio style="text-align: left" :src="talkBookDetail.voices" poster="../../static/icon/fengziIcon.jpg"
:name="talkBookDetail.title" :author="bookInfo.authorName" :action="audioAction" controls></audio>
</view>
<view class="content" v-if="talkBookDetail.content != ''" v-html="talkBookDetail.content"></view>
<view class="content" v-else></view>
<view class="time">
<text>{{talkBookDetail.createTime}}</text>
</view>
<view class="tuijin" v-if="!isBuy">
<p>觉得这本书还不错？</p>
<view class="flexbox" style="justify-content: space-between; border: 1px solid #55aa7f; padding: 10rpx; border-radius: 10rpx;">
<view class="flexbox">
<view class="img">
<image v-if="bookInfo.images != ''" :src="bookInfo.images" mode="aspectFit"></image>
<image v-else src="../../static/icon/wufeng.jpg" mode="aspectFit"></image>
</view>
<view>
<text style=" display: inline-block; margin-top: 40rpx;">{{bookInfo.name}}</text><br/>
<text>作者：{{bookInfo.authorName}}</text>
</view>
</view>
<view class="btn" @click="gotoBuy()">
<text>立即购买</text>
</view>
</view>
</view>
<!-- <view class="opbtn flexbox">
<view class="">上一章</view>
<view class="">下一章</view>
</view> -->
</view>
<music-play :playData="playData"></music-play>
</view>
</template>
<script>
import musicPlay from '@/components/music.vue'
import {
mapState,
mapMutations
} from 'vuex';
export default {
data() {
return {
audioAction: {
method: 'pause'
},
audioShow: false,
voicesImg:'',
isBuy: false,
playData: {},
teachId: null, // 讲书id
bookId: null, // 书籍id
bookInfo: {}, // 书籍信息
talkBookDetail: {},
}
},
onLoad(e) {
console.log(e, 'onLoad')
this.bookId = e.bookId
this.teachId = e.teachId
},
onShow() {
this.getBookInfo()
this.getTalkBookDetail()
},
computed: {
...mapState(['userInfo'])
},
methods: {
...mapMutations(['setUserInfo']),
// 购买
gotoBuy(){
uni.navigateTo({
url: '../bookShop/settlementBook?type=2&list=' + this.bookId
});
},
getBookInfo() {
// 获取书本基本信息
this.$http
.post('book/book/appinfo/' + this.bookId + '/' + this.userInfo.id)
.then(res => {
if (res.code == 0) {
console.log(res, 'res')
this.bookInfo = res.book
this.voicesImg = res.book.images
// this.bookInfo.name = res.book.name
this.isBuy = res.book.isBuy
console.log(this.voicesImg,'this.voicesImg')
// this.freeChapterCount = res.book.freeChapterCount
} else {
console.log(res.msg)
}
console.log(res, '书籍基本信息')
}).catch((error) => {
console.log(error)
})
},
// 获取讲书详情
getTalkBookDetail() {
this.audioShow = false
this.$http
.post('book/teach/getTeachDetail', {
'teachId': this.teachId
})
.then(res => {
if (res.code == 0) {
console.log(res, 'res')
this.talkBookDetail = res.bookTeach
// this.isBuy = res.book.isBuy
// this.freeChapterCount = res.book.freeChapterCount
} else {
console.log(res.msg)
}
this.audioShow = true
console.log(res, '讲书信息')
}).catch((error) => {
console.log(error)
this.audioShow = true
})
},
},
components: {
musicPlay
},
}
</script>
<style scoped lang="scss">
.mainContent {
margin: 20rpx 10rpx;
padding: 20rpx;
background-color: #fff;
border-radius: 10rpx;
}
.flexbox {
display: flex;
}
.voices {
margin: 10rpx auto;
text-align: center;
}
.title {
font-size: 30rpx;
color: #55aa7f;
font-weight: bold;
margin-bottom: 10px;
}
.time{
text-align: right; font-size: 24rpx; margin-top: 20rpx; color: #999;
}
.content {
font-size: 28rpx; text-align:justify;
color: #666;
line-height: 48rpx;
}
.tuijin {
font-size: 26rpx;
margin-top: 20rpx;
.img {
width: 150rpx;
height: 150rpx;
overflow: hidden;
}
image {
height: 150rpx;
width: 100%;
}
p {
font-size: 28rpx; margin-bottom: 20rpx;
color: #55aa7f;
}
}
.btn{ margin-right: 20rpx;
text{ display: inline-block; margin-top:52rpx; font-size: 30rpx;
padding: 5px 8px;
background: #55aa7f; color: #fff;
border-radius: 5px;
}}
// .opbtn{font-size: 14rpx;}
</style>

546
pages/talkBook/talkBookML.vue Normal file
View File

@@ -0,0 +1,546 @@
<template>
<!--父组件-->
<view class="container">
<!-- <view class="mini"></view> -->
<view>
<z-nav-bar title="讲书目录"></z-nav-bar>
<!-- 基本信息 -->
<view class="book_neir">
<view class="flexbox info">
<view class="item">
<image class="bn_img" v-if="bookInfo.images != ''" :src="bookInfo.images" mode="widthFix">
</image>
<image class="bn_img" style="border:1px solid #eee" v-else src="../../static/icon/wufeng.jpg"
mode="widthFix"></image>
</view>
<!-- <img :src="bookInfo.images" class="bn_img"> -->
<view class="item">
<!-- <b class="leiXing" v-if="bookInfo.isVip==1" style="background: #c79119;">VIP</b>
<b class="leiXing" v-if="bookInfo.isVip==2" style="background: #c74119;">付费</b> -->
<view class="bn_nes">
<view style="font-weight: bold;margin-bottom: 30rpx;">
{{bookInfo.name}}
</view>
<view
style="color: #9b9b9b;font-size: 28rpx;margin:20rpx 0 0 0;max-width: 400rpx;line-height: 38rpx;">
<p @click="onAuCHJump(bookInfo.authorId,1)" style="margin-bottom: 20rpx;">
{{bookInfo.authorName}} [著] >
</p>
<p @click="onAuCHJump(item.id,2)" v-for="item in this.bookInfo.publisherNIList">
{{item.title}} >
</p>
</view>
<view class="tags">
<uni-tag class="tag" @click="toMore()" :inverted="true" text="书评"
type="success"></uni-tag>
<!-- 1:打卡，2不打卡 -->
<uni-tag @click="gotoclock()" v-if="bookInfo.clockIn == 1" class="tag" :inverted="true"
text="签到" type="warning"></uni-tag>
</view>
</view>
</view>
</view>
</view>
<!-- end -->
<view class="playList" v-if="libLIst.length > 0">
<view class="item" v-for="(item,index) in libLIst" :key="index">
<view>
<view @click="toDetail(item)" class="flexbox muluitem">
<span>{{item.title}}</span>&nbsp;&nbsp;
<view >
<uni-tag v-if="item.voices != ''" class="tag" size="small" :inverted="true" text="音频"
type="success" /></view>
<view ><uni-tag v-if="item.content != ''" class="tag" size="small" :inverted="true" text="文字"
type="primary" /></view>
<!-- <image class="playingFig" src="/static/playingGif.gif" mode="aspectFill"></image> -->
</view>
</view>
</view>
</view>
<u-divider v-else text="暂无讲书目录"></u-divider>
<music-play :playData="playData"></music-play>
<!-- <z-navigation></z-navigation> -->
</view>
</view>
</template>
<script>
// import textScroll from '@/components/textScroll/index.vue'
// import cxAdudioPlay from '@/components/cx-audio-play/cx-audio-play.vue'
import musicPlay from '@/components/music.vue'
import $http from '../../config/requestConfig';
import {
mapState,
mapMutations
} from 'vuex';
export default {
components: {
// cxAdudioPlay,
// textScroll,
musicPlay
},
data() {
return {
isBuy: false, // true 已购买，false 未购买
playData: {},
stopPlay: false, // 关闭音频
jia: false, // 下一I首
forceRefresh: true,
current: 0,
bookInfo: {}, // 书籍详情
bookid: null, // 书籍id
playid: null, // 正在播放的章节id
playchapName: '', // 正在播放的章节名称
playIndex: null, // 正在播放的序号值
onlineH: { // 线上的历史听书
playIndex: null, // 存储的播放index
time: 0, // 存储的播放秒数
},
currentTime: {
time: 0,
flag: ''
},
freeChapterCount: 0, // 免费章节数
pageTab: [{
name: '正在播放'
},
{
name: '播放列表'
}
],
fengImg: '', // 播放封面
libLIst: [
// {
// name:"第二章",
// url: 'https://ehh-private-01.oss-cn-beijing.aliyuncs.com/2023/07/14/6c6d7f7b947c4dc18881e8682b4dc36a2ce742.mp3'
// },
], // 书籍目录
videoList: [], //音频文件
BsNav: [ //倍数-自定义
{
id: 1.0,
bs: '1.0'
}, {
id: 1.5,
bs: '1.5'
}, {
id: 2.0,
bs: '2.0'
}
],
orderPlayBtn: false, // 是否开启按顺序播放
LibVisible: false,
boardRemark: '',
StyleSheet: 'font-size:36rpx; text-align:center',
jian: false, // 上一曲切换
}
},
//第一次加载
onLoad(e) {
console.log('------------------')
// 隐藏原生的tabbar
console.log(e, 'e')
uni.hideTabBar();
this.bookid = e.bookid
//console.log(this.userInfo.playFlag,'this.userInfo.playFlag')
this.getLibList()
this.getBookInfo()
},
created() {
},
onShow() {
// console.log(this.userInfo.orderPlayBtn,'初始化')
if (this.userInfo.orderPlayBtn != undefined) {
this.orderPlayBtn = this.userInfo.orderPlayBtn
}
},
computed: {
...mapState(['userInfo'])
},
methods: {
...mapMutations(['setUserInfo']),
// 查看本书更多书评
toMore(val) {
console.log(val, 'val')
uni.navigateTo({
url: '../comments/comments?bookid=' + this.bookid,
});
},
// 去打卡
gotoclock() {
uni.navigateTo({
url: '../clock/clock?bookid=' + this.bookid,
});
},
getBookInfo() {
// 获取书本基本信息
this.$http
.post('book/book/appinfo/' + this.bookid + '/' + this.userInfo.id)
.then(res => {
if (res.code == 0) {
console.log(res, 'res')
this.bookInfo = res.book
// this.isBuy = res.book.isBuy
// this.freeChapterCount = res.book.freeChapterCount
} else {
console.log(res.msg)
}
console.log(res, 'res基本信息')
}).catch((error) => {
console.log(error)
})
},
// 详细
toDetail(item) {
console.log('点击了', item)
uni.navigateTo({
url: './talkBookDetail?teachId=' + item.teachId +"&bookId="+item.bookId
});
},
// 信息介绍跳转
onAuCHJump(id, e) {
uni.navigateTo({
url: '../eBook/bookMessage?Id=' + id + '&typ=' + e
});
},
// 获取章节列表
getLibList() {
this.$http
.post('book/teach/getBookTeachItems', {
'bookId': this.bookid,
'limit': 10,
'page': 1
// 'userid': this.userInfo.id,
// 'bookid':
// 'id': this.playid
})
.then(res => {
if (res.code == 0) {
console.log(res, 999)
if (res.page.records.length > 0) {
this.libLIst = res.page.records
// this.fengImg = res.images
} else {
this.libLIst = []
// uni.showToast({
// title:'暂无可听章节哦~',
// icon:'none'
// })
// setTimeout(()=>{
// uni.navigateBack({ // 返回上一页
// delta: 1
// });
// },2000)
}
}
}).catch((e) => {
console.log(e.msg)
})
},
// 获取音频数据
listen(e, index) {
console.log(this.currentTime, 'this.currentTime')
// console.log(e,'playchapName')
this.playid = e.chapterId
this.playIndex = index
this.playchapName = e.chapterName
this.playIndex >= this.libLIst.length - 1 ? this.jia = true : this.jia = false
this.playIndex > 0 ? this.jian = true : this.jian = false
// console.log(this.jian,45454545)
this.forceRefresh = false
this.$http
.post('book/bookchaptercontent/appBooksChapterContent', {
'userId': this.userInfo.id,
'bookid': this.bookid,
'id': this.playid
})
.then(res => {
//this.tmpChapter.text = res.bookCatalogue
if (res.code == 0) {
// console.log(res)
if (res.bookCatalogue.voices[0] != null && res.bookCatalogue.voices[0].length > 15) {
// console.log('走这')
this.videoList = []
this.boardRemark = res.bookCatalogue.chapter[0]
this.fengImg = res.image
this.videoList.push({
'recorPath': res.bookCatalogue.voices[0]
})
console.log(res.bookCatalogue.voices[0], 'path')
this.forceRefresh = true
} else {
this.forceRefresh = true
uni.showToast({
title: '暂无可播放音频,加载下一章',
icon: 'none',
duration: 2000
})
setTimeout(() => {
if (this.playIndex + 1 >= this.libLIst.length) {
// this.stopPlay = true
uni.showToast({
title: '本书已全部播放完毕',
icon: 'none',
duration: 2000
})
} else {
this.listen(this.libLIst[this.playIndex], this.playIndex)
}
}, 2000)
}
}
}).catch((e) => {})
},
// 下一首
xiayishou() {
console.log('加载下一首')
if (this.playIndex + 1 <= this.libLIst.length - 1) {
this.playIndex += 1
this.saveRate(0)
this.currentTime.time = 0
this.currentTime.flag = ''
this.listen(this.libLIst[this.playIndex], this.playIndex)
} else {
this.jia = false
uni.showToast({
title: "音频已经播放完毕！",
icon: "none"
})
}
},
TabChange(e) {
// tab 切换
this.current = e.index
// console.log(e)
}
},
// watch:{
// list: {
// handler (newName, oldName) {
// console.log(newName)
// },
// immediate: true
// }
// }
}
</script>
<style lang="less">
.muluitem{
span{
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
}
.playingFig {
width: 100rpx;
height: 100rpx;
display: inline-block;
vertical-align: middle;
}
.price {
margin-top: 160rpx;
overflow: hidden;
.light {
font-size: 50rpx;
font-weight: bold;
color: #f05654;
}
}
.tags {
.tag {
margin-left: 0;
margin-right: 10rpx;
}
}
.charType {
display: inline;
width: 20px !important;
}
.graytitle {
color: #999;
}
.yigoumai {
background-color: #ffc773;
}
.shiting {
background-color: #f47983;
}
.playing {
color: #1daa5c;
}
.chaoshi {
background-color: #1daa5c;
}
.home_nar {
margin: 30rpx 0;
justify-content: space-between;
}
.hn_cl_tit {
width: 48%;
text-align: center;
border-radius: 20rpx;
padding-top: 10rpx;
// line-height: 110upx;
display: flex;
align-content: center;
justify-content: center;
image {
width: 80upx;
height: 80upx;
display: inline-block;
// margin: 0 auto;
// margin: 0 20rpx;
}
text {
height: 100upx;
display: inline-block;
line-height: 80upx;
color: #fff;
font-size: 38rpx;
}
}
.flexbox {
display: flex;
}
.book_neir {
margin-top: 80rpx;
padding: 20rpx;
.bn_img {
width: 300rpx !important;
}
}
.info {
overflow: hidden;
width: 100%;
}
.book_neir {
margin: 20rpx 0 0 0;
position: relative;
.item {
display: inline-block;
float: left;
width: 50%;
overflow: hidden;
}
.bn_img {
float: left;
width: 250upx;
height: 320upx;
}
.bn_nes {
float: left;
font-size: 36rpx;
margin-left: 40rpx;
view {
margin: 20rpx 0 0 0;
}
}
.leiXing {
display: block;
padding: 5rpx 10rpx;
border-radius: 10rpx;
text-align: center;
color: #fff;
font-weight: normal;
background: #27b386;
position: absolute;
left: -15upx;
top: 10upx;
font-size: 16rpx;
}
}
.container {
background-color: #fff;
}
.playTitle {
width: 80%;
margin: 20rpx auto;
margin-top: 50rpx;
}
.libTitle {
font-size: 40rpx;
margin: 40rpx 0;
display: block;
text-align: center;
}
.tanchu {
padding: 40rpx 30rpx 40rpx 30rpx;
}
.playList {
padding: 20rpx;
color: #666;
}
.playList .item {
display: block;
line-height: 80rpx;
white-space: nowrap;
overflow-x: hidden;
font-size: 36rpx;
text-overflow: ellipsis;
}
.tag {
margin-left: 20rpx;
}
.playNow {
color: #27b386;
}
.pageTabBox {
width: 150px;
margin: 20rpx auto;
font-size: 60rpx;
}
.cxAdudioPlay {
position: fixed;
bottom: 150rpx;
left: 0;
}
</style>