<template>
|
<view>
|
<view class="banner">
|
<image class="banner-img" :src="article.url"></image>
|
<view class="banner-title">{{article.title}}</view>
|
</view>
|
|
<view class="article-meta">
|
<view class="article-author">{{article.sourceName}}</view>
|
<text class="article-text">发表于</text>
|
<text class="article-time">{{article.createTime}}</text>
|
</view>
|
|
|
<view class="article-content">
|
<!-- <video id="myVideo" class="video" v-if="video" :src="article.videoUrl" muted="false" @error="videoErrorCallback"></video> -->
|
<u-parse :content="content" @navigate="navigate"></u-parse>
|
</view>
|
|
</view>
|
</template>
|
|
<script>
|
import uParse from "@/components/feng-parse/parse.vue"
|
|
export default {
|
components:{
|
uParse
|
},
|
data() {
|
return {
|
content:"",
|
article:{},
|
video:false,
|
pathUrl:"http://s16s652780.51mypc.cn/api",
|
}
|
},
|
onLoad(event) {
|
var that = this;
|
this.article = JSON.parse(decodeURIComponent(event.detailData));
|
//获取资讯详信息
|
uni.request({
|
url: that.pathUrl+'/article/article/detail?id='+this.article.id,
|
method:'GET',
|
success: (res) => {
|
that.article = res.data.data;
|
that.content = that.article.content;
|
if(that.article.videoUrl){
|
that.video = true;
|
}
|
console.log(that.article,121);
|
console.log(that.article.videoUrl,123);
|
//详情标题
|
uni.setNavigationBarTitle({
|
title: that.article.title
|
});
|
}
|
});
|
|
},
|
//创建视频
|
onReady: function () {
|
this.videoContext = uni.createVideoContext("myVideo");
|
},
|
methods: {
|
videoErrorCallback: function(e) {
|
console.log(e)
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.banner {
|
height: 360upx;
|
overflow: hidden;
|
position: relative;
|
background-color: #ccc;
|
}
|
.banner-img {
|
width: 100%;
|
}
|
.banner-title {
|
max-height: 84upx;
|
overflow: hidden;
|
position: absolute;
|
left: 30upx;
|
bottom: 30upx;
|
width: 90%;
|
font-size: 32upx;
|
font-weight: 400;
|
line-height: 42upx;
|
color: white;
|
z-index: 11;
|
}
|
|
.article-meta{
|
// background-color: #007AFF;
|
width: 100%;
|
height: 80rpx;
|
font-size: 24rpx;
|
color: #808080;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
position: relative;
|
left: 20rpx;
|
// justify-content: center;
|
// font-weight: 550;
|
|
|
.article-author{
|
letter-spacing: 1px;
|
float: left;
|
}
|
|
.article-text{
|
position: relative;
|
left: 15px;
|
}
|
|
.article-time{
|
position: relative;
|
left: 30px;
|
}
|
}
|
|
.article-content{
|
position: relative;
|
left: 3%;
|
bottom: 2%;
|
width: 94%;
|
margin-bottom: 20px;
|
// border-bottom: 1px solid rgba(128,128,128,0.1);
|
|
// .video{
|
// width: 100%;
|
// }
|
}
|
</style>
|
