<!--
|
* @Descripttion: 品宣内容详情
|
* @version: 1.0.0
|
* @Author: huangpan
|
* @Date: 2021-09-28 11:21:44
|
-->
|
<template>
|
<div class="brand_pub_detial">
|
<nav-bar :title="title || articleData.publicity.publicityName" :shadow="false" :autoBack="false"
|
leftIcon="arrow-left" @clickRight="clickShare" @clickLeft="clickLeft"
|
v-if="getQueryVariable('flag')">
|
<div slot="right" class="right-icon"></div>
|
</nav-bar>
|
<div style="background-color: #fff; overflow-y: auto" v-if="articleData" :style="htmlHeight">
|
<div class="content" :style="{
|
'margin-top': getQueryVariable('flag') && articleId ? '44px' : '0',
|
}">
|
<div class="article_title pdl pdr">
|
{{ articleData.articleName }}
|
</div>
|
<div class="time_row row-end coloum-center">
|
<div class="font24 text99">
|
{{ articleData.publishTime }}
|
</div>
|
</div>
|
<video v-if="!articleData.articleContent && articleData.articleType == '2'" ref="video"
|
:id="'video'" class="video_item" width="100%" height="280"
|
:src="videoUrl(articleData)" :poster="poster(articleData)" x5-video-player-type="h5"
|
x5-video-orientation="landscape" controls autoplay="false"
|
controlslist='nodownload'></video>
|
<div v-if="articleData.articleContent" @click="getImg($event)" class="articel-con">
|
<div v-html="getContent" v-lazy-container="{ selector: 'img'}"></div>
|
</div>
|
</div>
|
</div>
|
<preview-image :imgUrl="imgUrl" @handleBack="handleBack"></preview-image>
|
<div class="download-btn" @click="goApp()" v-if="!getQueryVariable('flag')">
|
下载APP
|
</div>
|
<!-- 微信引导提示 -->
|
<guide-open :openStatus.sync="openStatus"></guide-open>
|
</div>
|
</template>
|
|
<script>
|
import { getArticleDetial } from '@/api/brandPublicity/index'
|
import previewImage from '@/components/preview-image/index.vue'
|
// import newPopupShare from '@/components/pop-up/new-uni-popup-share.vue'
|
import guideOpen from '@/components/pop-up/guideOpen.vue'
|
import { closeLoading, showLoading } from '@/utils/loading.js'
|
var baseUrl = process.env.VUE_APP_H5_URL
|
export default {
|
name: 'brandPubDetial',
|
components: {
|
previewImage,
|
// newPopupShare,
|
guideOpen
|
},
|
data() {
|
return {
|
articleId: '',
|
title: '内容详情',
|
isShow: true,
|
articleData: {
|
publicity: {}
|
},
|
imgUrl: '',
|
openStatus: false,
|
htmlHeight: {
|
height: '0px'
|
}
|
}
|
},
|
computed: {
|
getContent() {
|
const _this = this
|
let newTxt = ''
|
if (_this.articleData.articleContent) {
|
var reg = new RegExp('<oembed url', 'g')
|
var reg1 = new RegExp('</oembed>', 'g')
|
const newStr = _this.articleData.articleContent.replace(
|
reg,
|
"<video autoplay='false' controls controlslist='nodownload' x5-video-player-type='h5' x5-video-orientation='landscape' src"
|
)
|
let txt = newStr.replace(reg1, '</video>');
|
txt = txt.replace(/<img([\s\S]*?)src\s*=\s*(['"])([\s\S]*?)\2([^>]*)>/gi, '<img$1data-src=$2$3$2$4>');
|
const results = new DOMParser().parseFromString(txt, 'text/html')
|
if (results.getElementsByTagName('video').length > 0) {
|
const _node = results.getElementsByTagName('video')[0]
|
newTxt = txt.replace('<video', `<video controlslist='nodownload' poster=${_node.src}?x-oss-process=video/snapshot,t_0,f_jpg`)
|
}
|
// let _src = document.getElementsByTagName("img");
|
// _this.$nextTick(()=>{
|
// if(_src && _src.length > 0){
|
// _src.forEach((item,index)=>{
|
// item["v-lazy"] = `${item.src}`
|
// })
|
// }
|
// })
|
return newTxt || txt
|
} else {
|
return ''
|
}
|
},
|
poster: function () {
|
return (item) => {
|
return (
|
(JSON.parse(item.articleFile) && JSON.parse(item.articleFile).poster) ||
|
`${JSON.parse(item.articleFile).video}?x-oss-process=video/snapshot,t_0,f_jpg`
|
)
|
}
|
},
|
videoUrl: function () {
|
return (val) => {
|
return val.articleFile
|
? JSON.parse(val.articleFile) && JSON.parse(val.articleFile).video
|
: ''
|
}
|
}
|
},
|
mounted() {
|
if (this.getQueryVariable('articleId')) {
|
this.articleId = this.getQueryVariable('articleId')
|
this.getInfo()
|
}
|
this.getHtmlHeight()
|
},
|
methods: {
|
// 获取新闻详细信息
|
getInfo() {
|
const _this = this
|
const params = {
|
articleId: _this.articleId
|
}
|
showLoading(0)
|
getArticleDetial({ params }).then((res) => {
|
if (res.code === '0') {
|
_this.articleData = res.data
|
if (
|
_this.articleData.articleContent &&
|
_this.articleData.articleContent.indexOf('video') != -1
|
) {
|
let txt = _this.articleData.articleContent.replace(
|
'<video',
|
'<video autoplay="false" controlslist="nodownload" controls="controls" style="width:100%;"'
|
)
|
txt = txt.replace('figure', 'div')
|
_this.articleData.articleContent = txt
|
}
|
closeLoading(0)
|
} else {
|
_this.$toast.fail(res.msg)
|
}
|
}).catch(() => {
|
_this.$toast.fail('请求失败')
|
})
|
},
|
checkFull() {
|
var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled
|
if (isFull === undefined) isFull = false
|
return isFull
|
},
|
getImg($event) {
|
const url = $event.target.currentSrc
|
let reg = /\.(png|jpg|jpeg|gif)$/;
|
if (url && reg.test(url)) {
|
this.setImgSize('yes')
|
this.imgUrl = url
|
}
|
},
|
handleBack() {
|
this.setImgSize('no')
|
this.imgUrl = ''
|
},
|
setImgSize(bool) {
|
var mvp = document.getElementById('testViewport')
|
// 可以缩放
|
const newMate = `width=device-width,initial-scale=1.0,maximum-scale=2.0,minimum-scale=1.0,user-scalable=${bool},viewport-fit=cover`
|
mvp.setAttribute('content', newMate)
|
},
|
// 打开分享面板
|
clickShare() {
|
const _this = this
|
const params = {
|
// type: _name === "wx" ? 0 : 1, //0-好友 1-朋友圈
|
title: this.articleData.articleName,
|
imgurl: `${baseUrl}/frame.png`,
|
url: `${baseUrl}/brandPubDetial?articleId=${_this.articleId}`
|
}
|
if (this.$root.isIos) {
|
window.webkit.messageHandlers.iosShare.postMessage(JSON.stringify(params))
|
} else {
|
if (window.wlyxls) {
|
window.wlyxls.openShareWindow(JSON.stringify(params))
|
}
|
}
|
},
|
// 下载app
|
goApp() {
|
var isWeixin = this.is_weixin()
|
// 判断是否在微信内置浏览器打开
|
if (isWeixin) {
|
this.openStatus = true
|
} else {
|
location.href = this.$store.getters.androidUrl
|
}
|
},
|
is_weixin() {
|
var ua = window.navigator.userAgent.toLowerCase()
|
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
|
return true
|
} else {
|
return false
|
}
|
},
|
// 返回上一页
|
clickLeft() {
|
if (window.wlyxls) {
|
// navigateBack 返回 navigateClose关闭
|
window.wlyxls.navigateBack('')
|
} else if (window.webkit) {
|
window.webkit.messageHandlers.iosBrowserPop.postMessage('')
|
} else {
|
this.$router.go(-1)
|
}
|
},
|
// 获取url参数
|
getQueryVariable(variable) {
|
var query = window.location.search.substring(1)
|
var vars = query.split('&')
|
for (var i = 0; i < vars.length; i++) {
|
var pair = vars[i].split('=')
|
if (pair[0] == variable) {
|
return pair[1]
|
}
|
}
|
return false
|
},
|
getHtmlHeight() {
|
const htmlHeight = window.innerHeight + 'px'
|
this.$set(this.htmlHeight, 'height', htmlHeight)
|
}
|
}
|
}
|
</script>
|
<style lang="less">
|
.download-btn {
|
position: absolute;
|
top: 35px;
|
right: 0;
|
// z-index: 101;
|
background: #e49e14;
|
color: #fff;
|
padding: 12px 28px;
|
font-size: 26px;
|
border-top-left-radius: 28px;
|
border-bottom-left-radius: 28px;
|
}
|
.brand_pub_detial {
|
position: relative;
|
/deep/.text-small {
|
font-size: 26px !important;
|
}
|
/deep/.text-tiny {
|
font-size: 22px !important;
|
}
|
/deep/.text-big {
|
font-size: 44px !important;
|
}
|
/deep/.text-huge {
|
font-size: 56px !important;
|
}
|
.content {
|
margin-left: 20px;
|
margin-right: 20px;
|
video {
|
// object-fit: fill;
|
margin-top: 20px;
|
}
|
}
|
.top_view {
|
background-color: #ffffff !important;
|
}
|
.name_box {
|
background: #7f1d1e;
|
border-radius: 2px;
|
color: #ffffff;
|
width: 100px;
|
line-height: 44px;
|
}
|
|
/deep/.wxParse {
|
width: auto;
|
margin: 20px;
|
padding-bottom: 20px;
|
overflow-x: hidden;
|
z-index: 1001;
|
}
|
|
/deep/uni-image {
|
div {
|
background-position: 0% 0% !important;
|
}
|
}
|
|
.article_title {
|
text-align: center;
|
font-size: 40px;
|
font-weight: bold;
|
line-height: 54px;
|
margin-top: 120px;
|
}
|
.videoStyle {
|
width: 100%;
|
height: 280px;
|
}
|
}
|
.articel-con {
|
p {
|
line-height: 60px;
|
margin-bottom: 20px;
|
font-size: 32px;
|
}
|
P:last-child {
|
margin-bottom: 0;
|
}
|
.image {
|
width: 700px;
|
margin: 0 auto;
|
}
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.right-icon {
|
background: url("../../assets/images/fx.png") no-repeat;
|
background-size: 36px 36px;
|
width: 36px;
|
height: 36px;
|
}
|
._top {
|
padding-top: 20px;
|
}
|
</style>
|
