|
|
|
@ -17,9 +17,8 @@ |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<view class="text" v-html="form.mainBody"> |
|
|
|
|
<!-- <rich-text :nodes="form.mainBody"></rich-text> --> |
|
|
|
|
<u-parse :content="form.mainBody" /> |
|
|
|
|
<view class="text"> |
|
|
|
|
<u-parse :content="form.mainBody" ></u-parse> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<view v-if="form.fileList" class="files"> |
|
|
|
@ -45,6 +44,9 @@ |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
components: { |
|
|
|
|
uParse |
|
|
|
|
}, |
|
|
|
|
onShow() { |
|
|
|
|
const pages = getCurrentPages() |
|
|
|
|
const { options } = pages[pages.length - 1] |
|
|
|
@ -59,8 +61,13 @@ |
|
|
|
|
title: '加载中' |
|
|
|
|
}) |
|
|
|
|
findById(this.id).then(({ message }) => { |
|
|
|
|
const imgStr= this.convert(message.mainBody) |
|
|
|
|
// message.mainBody = this.getVideo(imgStr) |
|
|
|
|
const str = message.mainBody |
|
|
|
|
const newStyle = 'width: 85% !important; height: auto;'; |
|
|
|
|
const regex = /(<img[^>]*?\s+style=")([^"]*)("[^>]*?>)/g; |
|
|
|
|
const newStr = str.replace(regex, `$1${newStyle}$3`); |
|
|
|
|
const brStr = str.replace(/\r\n/g,"<br />") |
|
|
|
|
const videoStr = this.replaceAllVideoTagStyles(brStr, "width: 95%; height: 450rpx;display: block;margin:0 auto") |
|
|
|
|
const imgStr = videoStr.replace(regex, `$1${newStyle}$3`); |
|
|
|
|
message.mainBody = imgStr |
|
|
|
|
this.form = message |
|
|
|
|
uni.hideLoading() |
|
|
|
@ -68,42 +75,33 @@ |
|
|
|
|
uni.hideLoading() |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
convert (options) { |
|
|
|
|
let str = options.replace(/<img[^>]*>/gi, function (match, capture) { |
|
|
|
|
return match.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig, 'style="width:90%;margin: 0 auto;height:auto;"') // 替换style |
|
|
|
|
}) |
|
|
|
|
console.log(str) |
|
|
|
|
return str |
|
|
|
|
getAllVideoTagIndices(str) { |
|
|
|
|
const regex = /<video.*?>.*?<\/video>/gs; |
|
|
|
|
const indices = []; |
|
|
|
|
let match; |
|
|
|
|
while ((match = regex.exec(str)) !== null) { |
|
|
|
|
indices.push(match.index); |
|
|
|
|
} |
|
|
|
|
return indices; |
|
|
|
|
}, |
|
|
|
|
// 富文本视频解析 |
|
|
|
|
getVideo(data) { |
|
|
|
|
let videoList = []; |
|
|
|
|
let videoReg = /<video.*?(?:>|\/>)/gi; //匹配到字符串中的 video 标签 |
|
|
|
|
let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; //匹配到字符串中的 video 标签 的路径 |
|
|
|
|
let arr = data.match(videoReg) || []; // arr 为包含所有video标签的数组 |
|
|
|
|
let articleList = data.split('</video>') // 把字符串 从视频标签分成数组 |
|
|
|
|
arr.forEach((item, index) => { |
|
|
|
|
var src = item.match(srcReg); |
|
|
|
|
console.log(src) |
|
|
|
|
videoList.push(src[1]) //所要显示的字符串中 所有的video 标签 的路径 |
|
|
|
|
}) |
|
|
|
|
let needArticleList = []; |
|
|
|
|
articleList.forEach((item, index) => { |
|
|
|
|
if (item != "" && item != undefined) { // 常见的标签渲染 |
|
|
|
|
needArticleList.push({ |
|
|
|
|
type: 'rich-text', |
|
|
|
|
value: item + "</video>" |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
let articleListLength = articleList.length; // 插入到原有video 标签位置 |
|
|
|
|
if (index < articleListLength && videoList[index] != undefined) { |
|
|
|
|
needArticleList.push({ |
|
|
|
|
type: 'video', |
|
|
|
|
value: videoList[index] |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
return needArticleList |
|
|
|
|
|
|
|
|
|
// 将字符串中指定位置的video标签的style属性替换为新的样式 |
|
|
|
|
replaceVideoTagStyle(str, index, newStyle) { |
|
|
|
|
const startIndex = str.indexOf("<video", index); |
|
|
|
|
const endIndex = str.indexOf("</video>", startIndex) + 7; |
|
|
|
|
const videoTag = str.substring(startIndex, endIndex); |
|
|
|
|
const newVideoTag = videoTag.replace(/style="(.*?)"/, `style="${newStyle}"`); |
|
|
|
|
return str.substring(0, startIndex) + newVideoTag + str.substring(endIndex); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
// 将字符串中所有video标签的style属性替换为新的样式 |
|
|
|
|
replaceAllVideoTagStyles(str, newStyle) { |
|
|
|
|
const indices = this.getAllVideoTagIndices(str); |
|
|
|
|
let newStr = str; |
|
|
|
|
for (let i = indices.length - 1; i >= 0; i--) { |
|
|
|
|
newStr = this.replaceVideoTagStyle(newStr, indices[i], newStyle); |
|
|
|
|
} |
|
|
|
|
return newStr; |
|
|
|
|
}, |
|
|
|
|
// 下载附件 |
|
|
|
|
download(item) { |
|
|
|
@ -138,6 +136,7 @@ |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
|
@import url("/components/gaoyia-parse/parse.css"); |
|
|
|
|
.wrap { |
|
|
|
|
padding: 30rpx; |
|
|
|
|
background-color: #fff; |
|
|
|
|