You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
177 lines
4.9 KiB
177 lines
4.9 KiB
<template>
|
|
<view class="detail">
|
|
<view class="detail-title">
|
|
{{ detailData.articleTitle }}
|
|
</view>
|
|
<view class="detail-info">
|
|
<view>
|
|
{{ detailData.publishUnitDesc }}
|
|
</view>
|
|
<view>
|
|
{{ detailData.publishDate }}
|
|
</view>
|
|
</view>
|
|
<view class="detail-content">
|
|
<view v-for="(item, index) in detailData.articleContentList" :key="index">
|
|
<view v-if="item.contentType == 'text'" style="text-indent: 0.5rem">
|
|
{{ item.content }}
|
|
</view>
|
|
|
|
<view v-if="item.contentType == 'img'" style="text-align: center; margin: 20rpx 0">
|
|
<image mode="widthFix" :src="item.content" style="width: 80%" />
|
|
</view>
|
|
|
|
<view v-if="item.contentType == 'rich_text'" class="rich-text">
|
|
<rich-text :nodes="item.content"></rich-text>
|
|
</view>
|
|
|
|
<view v-if="item.contentType == 'file'" class="content-file">
|
|
<image src="/static/data/images/fujian.png" />
|
|
<text @click="downloadFile" :data-value="item">{{ item.fileName }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="detail-foot">标签:{{ detailData.tags }}</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { articledetail } from '../../utils/api/customerApi.js';
|
|
import parse from 'mini-html-parser2';
|
|
import { corpId } from '../../utils/global';
|
|
export default {
|
|
data() {
|
|
return {
|
|
articleId: null,
|
|
gridId: null,
|
|
detailData: null
|
|
};
|
|
},
|
|
async onLoad(option) {
|
|
this.setData({
|
|
articleId: option.id,
|
|
gridId: option.gridId
|
|
});
|
|
const { data } = await articledetail({
|
|
articleId: this.articleId,
|
|
gridId: this.gridId
|
|
});
|
|
this.setData({
|
|
detailData: data
|
|
});
|
|
this.detailData.articleContentList.forEach((e) => {
|
|
if (e.contentType == 'rich_text') {
|
|
const contentNext = this.cookRichContent(e.content);
|
|
console.log(contentNext);
|
|
parse(contentNext, (err, nodes) => {
|
|
if (!err) {
|
|
e.content = nodes;
|
|
this.setData({
|
|
detailData: this.detailData
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
methods: {
|
|
//处理后端传来的富文本
|
|
cookRichContent(content) {
|
|
if (content.startsWith('<!DOCTYPE html>\n<html>\n<head>\n</head>\n<body>\n') && content.endsWith('\n</body>\n</html>')) {
|
|
content = content.slice(45, -16);
|
|
}
|
|
content = content
|
|
.replace(/ /g, '\xA0')
|
|
.replace(/”/g, '\xA0')
|
|
.replace(/“/g, '\xA0')
|
|
.replace(/·/g, '\xA0')
|
|
.replace(/…/g, '\xA0')
|
|
.replace(/<img/gi, '<img style="height:auto;max-width:100%;"');
|
|
return content;
|
|
},
|
|
|
|
downloadFile(e) {
|
|
const { value } = e.target.dataset;
|
|
uni.saveFileToDingTalk({
|
|
url: value.content,
|
|
// 文件在第三方服务器地址
|
|
name: value.fileName,
|
|
success: (res) => {
|
|
const { data } = res;
|
|
uni.previewFileInDingTalk({
|
|
corpId: corpId,
|
|
spaceId: data[0].spaceId,
|
|
fileId: data[0].fileId,
|
|
fileName: data[0].fileName,
|
|
fileSize: 1024,
|
|
fileType: 'pdf'
|
|
});
|
|
},
|
|
fail: (err) => {
|
|
uni.alert({
|
|
content: JSON.stringify(err)
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
.detail {
|
|
width: 100vw;
|
|
min-height: 100vh;
|
|
padding: 30rpx;
|
|
background-color: #fff;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.detail-title {
|
|
font-size: 50rpx;
|
|
}
|
|
|
|
.detail-info {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin: 30rpx 0;
|
|
}
|
|
.detail-info view {
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
.detail-foot {
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
margin: 30rpx 0;
|
|
}
|
|
|
|
.content-file {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
margin: 20rpx 0;
|
|
}
|
|
|
|
.content-file image {
|
|
height: 30rpx;
|
|
width: 30rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.rich-text {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
user-select: all;
|
|
-moz-user-select: all;
|
|
-webkit-user-select: all;
|
|
-ms-user-select: all;
|
|
-ms-user-select: all;
|
|
}
|
|
|
|
.rich-text image,
|
|
.rich-text img {
|
|
width: 80%;
|
|
}
|
|
</style>
|
|
|