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.
114 lines
2.3 KiB
114 lines
2.3 KiB
4 years ago
|
<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>
|