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

音频样式bug修复

Browse Source
This commit is contained in:
@fawn-nine
2023-10-09 16:51:26 +08:00
parent c6bff04039
commit 04c821ff48
1 changed files with 55 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
pages/talkBook/talkBookDetail.vue
View File

@@ -4,9 +4,10 @@
<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.author.authorName" :action="audioAction" controls></audio>
</view>
<audio style="text-align: left; overflow: hidden;" :src="talkBookDetail.voices"
poster="../../static/icon/home_icon_0.png" :name="talkBookDetail.title"
:author="bookInfo.author.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">
@@ -14,14 +15,15 @@
</view>
<view class="tuijin" v-if="!isBuy && bookInfo.productId != null">
<p>觉得这本书还不错？</p>
<view class="flexbox" style="justify-content: space-between; border: 1px solid #55aa7f; padding: 10rpx; border-radius: 10rpx;">
<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 style=" display: inline-block; margin-top: 40rpx;">{{bookInfo.name}}</text><br />
<text>作者：{{bookInfo.author.authorName}}</text>
</view>
</view>
@@ -52,20 +54,22 @@
method: 'pause'
},
audioShow: false,
voicesImg:'',
voicesImg: '',
isBuy: false,
playData: {},
teachId: null, // 讲书id
bookId: null, // 书籍id
bookInfo: {
author:{
authorName:''
author: {
authorName: ''
}
}, // 书籍信息
talkBookDetail: {},
windowWidth: 0,
}
},
onLoad(e) {
this.windowWidth = uni.getSystemInfoSync().windowWidth;
console.log(e, 'onLoad')
this.bookId = e.bookId
this.teachId = e.teachId
@@ -80,14 +84,14 @@
methods: {
...mapMutations(['setUserInfo']),
// 购买
gotoBuy(){
gotoBuy() {
uni.navigateTo({
url: '../bookShop/commodityDetail?id=' + this.bookInfo.productId
url: '../bookShop/commodityDetail?id=' + this.bookInfo.productId
});
},
getBookInfo() {
// 获取书本基本信息
this.$http
this.$http
.post('book/book/getBookInfo', {
'bookId': this.bookId,
'userId': this.userInfo.id
@@ -96,18 +100,18 @@
if (res.code == 0) {
console.log(res, 'res')
this.bookInfo = res.book
if(!this.bookInfo.author || this.bookInfo.author == null){
if (!this.bookInfo.author || this.bookInfo.author == null) {
this.bookInfo.author = {
'authorName' : '未知'
'authorName': '未知'
}
console.log(this.bookInfo.author.authorName,'this.bookInfo.author.authorName')
console.log(this.bookInfo.author.authorName, 'this.bookInfo.author.authorName')
}
//console.log(this.bookInfo.author.authorName,'this.bookInfo.author.authorName')
this.voicesImg = res.book.images
// this.bookInfo.name = res.book.name
this.isBuy = res.book.isBuy
console.log(this.voicesImg,'this.voicesImg')
console.log(this.voicesImg, 'this.voicesImg')
// this.freeChapterCount = res.book.freeChapterCount
} else {
console.log(res.msg)
@@ -128,7 +132,7 @@
if (res.code == 0) {
console.log(res, 'res')
this.talkBookDetail = res.bookTeach
// this.isBuy = res.book.isBuy
// this.freeChapterCount = res.book.freeChapterCount
} else {
@@ -163,27 +167,38 @@
.voices {
margin: 10rpx auto;
text-align: center;
}
/deep/ .uni-audio-name {
// white-space: wrap !important;
width: 340rpx;
}
.title {
font-size: 30rpx;
color: #55aa7f;
font-weight: bold;
margin-bottom: 10px;
margin: 40rpx 0;
}
.time{
text-align: right; font-size: 24rpx; margin-top: 20rpx; color: #999;
.time {
text-align: right;
font-size: 24rpx;
margin-top: 20rpx;
color: #999;
}
.content {
font-size: 28rpx; text-align:justify;
font-size: 28rpx;
text-align: justify;
color: #666;
line-height: 48rpx;
}
.tuijin {
font-size: 26rpx;
margin-top: 20rpx;
.img {
@@ -198,15 +213,25 @@
}
p {
font-size: 28rpx; margin-bottom: 20rpx;
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;
}}
.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>