321 lines
7.3 KiB
Vue
321 lines
7.3 KiB
Vue
<template>
|
|
<view class="page">
|
|
<view class="content">
|
|
<view class="news-title">{{bean.newsContentTitle}}</view>
|
|
<view class="news-type">
|
|
<view class="type">发布时间:{{bean.newsContentPublishTime}}</view>
|
|
<view class="type">来源:{{bean.newsContentResource}}</view>
|
|
</view>
|
|
<view class="news-content">
|
|
<rich-text :nodes="bean.newsContentContent"></rich-text>
|
|
</view>
|
|
<!-- 图文新闻 -->
|
|
<block v-if="'2'==bean.newsContentType">
|
|
<swiper class="swiper" :autoplay="true" indicator-color="#E4E4E4" style="margin-top: 30rpx;"
|
|
indicator-active-color="#009749" :circular="true">
|
|
<swiper-item class="swiper-item" v-for="(item, index) in bean.fileList" :key="index"
|
|
@click="showImg(item)">
|
|
<view class="img-box">{{index+1}}/{{bean.fileList.length}}</view>
|
|
<image :lazy-load="true" :src="imgUrl+item.contentFileFileId" mode="scaleToFill"></image>
|
|
<view class="title">
|
|
<text>{{item.contentFileText}}</text>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</block>
|
|
<!-- 音频新闻 -->
|
|
<block v-else-if="'3'==bean.newsContentType">
|
|
<view v-for="(item,index) in bean.fileList" :key="index" style="margin-top: 30rpx;">
|
|
<audio style="text-align: left" :src="imgUrl+item.contentFileFileId"
|
|
poster="/static/images/ic_audio_poster" :name="item.contentFileText" controls></audio>
|
|
</view>
|
|
</block>
|
|
<!-- 视频新闻 -->
|
|
<block v-else-if="'4'==bean.newsContentType">
|
|
<view style="margin-top: 30rpx;">
|
|
<video :title="currentTitle" :src="imgUrl+currentVideoUrl" style="width: 100%;"></video>
|
|
<view class="video-category-box">
|
|
<view class="video-tab-title">目录</view>
|
|
<scroll-view scroll-x="true" class="video-tab-box">
|
|
<view v-for="(item,index) in bean.fileList" :key="index" @click="changeVideo(item)"
|
|
class="video-tab" :class="currentVideoUrl == item.contentFileFileId? 'tab-active':''">
|
|
{{index+1}}
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="video-title">
|
|
<view class="h-line"></view>
|
|
<view class="h-txt">视频详情</view>
|
|
</view>
|
|
<view class="video-txt">{{currentTitle}}</view>
|
|
</view>
|
|
</block>
|
|
<!-- 文章新闻 -->
|
|
<block v-else>
|
|
<block v-if="bean.newsContentCoverList">
|
|
<view style="margin-top: 30rpx;" v-for="(item,index) in bean.newsContentCoverList" :key="index">
|
|
<image :src="imgUrl+item.contentCoverId" mode="widthFix" style="width: 100%;"></image>
|
|
</view>
|
|
</block>
|
|
|
|
</block>
|
|
</view>
|
|
<pageLoading v-if=" showPageLoading"></pageLoading>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import pageLoading from '@/components/loading/pageLoading.vue';
|
|
export default {
|
|
components: {
|
|
pageLoading
|
|
},
|
|
data() {
|
|
return {
|
|
newsId: '',
|
|
showPageLoading: true,
|
|
bean: {},
|
|
imgUrl: this.$api.common.imgUrl,
|
|
currentVideoUrl: '',
|
|
currentTitle: ''
|
|
}
|
|
},
|
|
onShow() {},
|
|
onLoad(res) {
|
|
this.newsId = res.id
|
|
console.log(this.newsId)
|
|
this.getNewsDetail()
|
|
},
|
|
methods: {
|
|
showImg(item) {
|
|
var url = this.imgUrl + item.contentFileFileId
|
|
uni.previewImage({
|
|
urls: [url]
|
|
})
|
|
},
|
|
changeVideo(item) {
|
|
this.currentVideoUrl = item.contentFileFileId;
|
|
this.currentTitle = item.contentFileText;
|
|
},
|
|
getNewsDetail() {
|
|
console.log('获取详情')
|
|
var _self = this;
|
|
_self.$app.request({
|
|
url: _self.$api.news.getNewsDetail + _self.newsId,
|
|
method: 'GET',
|
|
dataType: 'json',
|
|
success: res => {
|
|
console.log(res)
|
|
if (res) {
|
|
if (res.newsContentType == '4') {
|
|
_self.currentVideoUrl = res.fileList[0].contentFileFileId
|
|
_self.currentTitle = res.fileList[0].contentFileText
|
|
console.log(_self.currentTitle)
|
|
}
|
|
var regex = new RegExp('<img', 'gi');
|
|
res.newsContentContent = res.newsContentContent.replace(regex,
|
|
`<img style="max-width:100%;min-width:100%;"`);
|
|
_self.bean = res
|
|
} else {
|
|
_self.$alert('网络错误')
|
|
|
|
}
|
|
},
|
|
fail: res => {
|
|
_self.$alert('网络错误')
|
|
},
|
|
complete: res => {
|
|
_self.showPageLoading = false
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
page {
|
|
height: 100%;
|
|
}
|
|
|
|
.page {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
overflow: auto;
|
|
height: 100%;
|
|
}
|
|
|
|
.content {
|
|
flex: 1;
|
|
height: 100rpx;
|
|
padding: 35rpx;
|
|
}
|
|
|
|
.news-title {
|
|
font-size: 48px;
|
|
font-family: Microsoft YaHei;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
line-height: 70px;
|
|
}
|
|
|
|
.news-type {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
margin-top: 30rpx;
|
|
|
|
.type {
|
|
|
|
font-size: 24px;
|
|
font-family: Microsoft YaHei;
|
|
font-weight: 400;
|
|
color: #919191;
|
|
line-height: 40px;
|
|
}
|
|
|
|
.type:nth-of-type(n+2) {
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.news-content {
|
|
margin-top: 30rpx;
|
|
font-size: 32rpx;
|
|
font-family: Microsoft YaHei;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
line-height: 53rpx
|
|
}
|
|
|
|
/*幻灯片广告 */
|
|
.swiper {
|
|
height: 800rpx;
|
|
|
|
image {
|
|
height: 800rpx;
|
|
width: 100%;
|
|
border-radius: 15rpx;
|
|
//box-shadow: 0 0 12px #dddee1;
|
|
}
|
|
|
|
.current {
|
|
width: 98%;
|
|
height: 800rpx;
|
|
transition: all 0.2s ease-in 0s;
|
|
}
|
|
|
|
.swiper-item {
|
|
position: relative;
|
|
|
|
image {
|
|
height: 800rpx;
|
|
width: 100%;
|
|
border-radius: 15rpx;
|
|
//box-shadow: 0 0 12px #dddee1;
|
|
}
|
|
|
|
.title {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
background-color: #202020b5;
|
|
justify-content: center;
|
|
width: 100%;
|
|
|
|
text {
|
|
display: flex;
|
|
align-items: center;
|
|
//background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
|
|
//background-image: linear-gradient(90deg,rgba(255, 181, 19,.8),rgba(255, 181, 19,.2));
|
|
color: #fff;
|
|
display: -webkit-box;
|
|
text-overflow: ellipsis;
|
|
word-break: break-all;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
font-size: 34rpx;
|
|
padding: 14rpx 20rpx;
|
|
max-width: 610rpx;
|
|
line-height: 1.3;
|
|
border-radius: 5rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.video-tab {
|
|
width: fit-content;
|
|
display: inline-block;
|
|
text-align: center;
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.tab-active {
|
|
background: #53B584;
|
|
color: #fff;
|
|
}
|
|
|
|
.img-box {
|
|
color: #53B584;
|
|
background: #ffffffcf;
|
|
position: absolute;
|
|
top: 20rpx;
|
|
right: 20rpx;
|
|
padding: 10rpx;
|
|
border-radius: 50%;
|
|
font-size: 28rpx;
|
|
z-index: 10;
|
|
|
|
}
|
|
|
|
.video-title {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
margin-top: 20rpx;
|
|
|
|
.h-line {
|
|
height: 40rpx;
|
|
width: 10rpx;
|
|
background: #53B584;
|
|
}
|
|
|
|
.h-txt {
|
|
font-size: 32rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
|
|
.video-txt {
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.video-category-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #393939;
|
|
margin-top: -18rpx;
|
|
}
|
|
|
|
.video-tab-title {
|
|
font-size: 32rpx;
|
|
color: white;
|
|
}
|
|
|
|
.video-tab-box {
|
|
white-space: nowrap;
|
|
border-top: 1rpx solid white;
|
|
border-bottom: 1rpx solid white;
|
|
color: white;
|
|
padding: 5rpx;
|
|
}
|
|
</style>
|