You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
2.3 KiB
113 lines
2.3 KiB
<template> |
|
<view class="article-detail-index"> |
|
<view class="article-title">{{detail.title}}</view> |
|
<view class="author-box acea-row row-middle"> |
|
<view class="charge-type">免费</view> |
|
<view class="add-time">{{detail.addTime}}</view> |
|
<view>·{{detail.author}}</view> |
|
</view> |
|
<view class="d-line"></view> |
|
<view class="audio-box"> |
|
<luchAudio :src="detail.audio" :play.sync="audioPlay"></luchAudio> |
|
</view> |
|
<view class="content-box"> |
|
<rich-text :nodes="detail.content"></rich-text> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { getArticleDetails } from '@/api/knowledge'; |
|
import luchAudio from '@/components/luch-audio/luch-audio.vue'; |
|
export default{ |
|
components: { luchAudio }, |
|
data(){ |
|
return { |
|
id:8, |
|
current: { |
|
poster: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png', |
|
name: '致爱丽丝', |
|
author: '暂无', |
|
src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3', |
|
}, |
|
audioAction: { |
|
method: 'pause' |
|
}, |
|
detail:null, |
|
audioPlay:true |
|
} |
|
}, |
|
created() { |
|
|
|
getArticleDetails(this.id).then((res)=>{ |
|
console.log(res) |
|
if(res.success){ |
|
this.detail = res.data |
|
var music = null; |
|
music = uni.createInnerAudioContext(); //创建播放器对象 |
|
music.src= res.data.audio; //选择播放的音频 |
|
music.play(); //执行播放 |
|
} |
|
}) |
|
}, |
|
mounted() { |
|
// console.log(this.menuList) |
|
}, |
|
methods:{ |
|
|
|
} |
|
} |
|
</script> |
|
|
|
<style lang="less" scoped> |
|
.article-detail-index{ |
|
width: 100%; |
|
box-sizing: border-box; |
|
padding: 32rpx; |
|
background: #fff; |
|
.d-line{ |
|
width: 100%; |
|
position: absolute; |
|
height: 1px; |
|
background: #ECECEC; |
|
top: 228rpx; |
|
left: 0; |
|
} |
|
.article-title{ |
|
font-size: 40rpx; |
|
font-weight: 500; |
|
color: #333333; |
|
line-height: 56rpx; |
|
} |
|
.author-box{ |
|
font-size: 24rpx; |
|
color: #999; |
|
padding: 20rpx 0 30rpx; |
|
// border-bottom: 1px solid #ECECEC; |
|
.charge-type{ |
|
min-width: 60rpx; |
|
height: 34rpx; |
|
line-height: 32rpx; |
|
color: #6E85EB; |
|
text-align: center; |
|
background: #EDEFF8; |
|
border-radius: 4rpx; |
|
border: 1px solid #6E85EB; |
|
padding: 0 6rpx; |
|
font-size: 22rpx; |
|
margin-right: 20rpx; |
|
box-sizing: border-box; |
|
} |
|
} |
|
.audio-box{ |
|
margin: 30rpx 0 40rpx; |
|
audio{ |
|
width: 100%; |
|
} |
|
} |
|
.content-box{ |
|
width: 100%; |
|
overflow: hidden; |
|
} |
|
} |
|
</style>
|
|
|