<template>
|
<view>
|
<view class="banner">
|
<image class="banner-img" :src="article.url"></image>
|
</view>
|
<view class="banner-title">{{article.title}}</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: this.$store.state.piAPI + "",
|
}
|
},
|
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;
|
if (that.article.createTime != null) {
|
that.article.createTime = that.article.createTime.substring(0, 11);
|
}
|
that.content = that.article.content;
|
if (that.article.videoUrl) {
|
that.video = true;
|
that.content = '<video src="' + that.article.videoUrl + '"></video>';
|
}
|
//详情标题
|
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 {
|
position: relative;
|
left: 20rpx;
|
overflow: hidden;
|
width: 90%;
|
z-index: 11;
|
|
font-size: 40rpx;
|
font-family: PingFang SC;
|
font-weight: bold;
|
color: #000000;
|
line-height: 47rpx;
|
|
}
|
|
.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>
|
