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.

160 lines
3.8 KiB

3 years ago
<template>
3 years ago
<view class="article-box">
<view class="article-header">
<view class="headline">{{ detail.title }}</view>
<view class="acea-row">
<view class="header-img"><image :src="detail.authorLogo"></image></view>
<view class="">
<view class="release-auth">{{ detail.author }}</view>
<view class="acea-row">
<view class="fz24 acea-row row-middle">
<image
src="../../../static/images/eye.png"
class="eye-icon"
></image>
<text>{{ detail.visit }}</text>
</view>
<view class="fz24">{{ detail.formatTime }}</view>
</view>
</view>
</view>
</view>
<view class="content">
<view class="explain-box"
>转载声明本文由云快讯收录观点仅代表作者本人不代表云快讯立场云快讯不对所包含的准确性可靠性或完整性提供任何明示请自行承担任何责任</view
>
<rich-text :nodes="detail.content"></rich-text>
</view>
</view>
3 years ago
</template>
<script>
import { getArticleDetail } from "@/api/home";
3 years ago
export default {
data() {
return {
id: this.id,
detail: {},
};
},
onShareAppMessage() {
return {
title: this.detail.title,
imageUrl: this.detail.imageInput,
path: "/pages/life/articleDetail/index?id=" + this.detail.id,
success(res) {
uni.showToast({
title: "分享成功",
});
},
fail(res) {
uni.showToast({
title: "分享失败",
icon: "none",
});
},
};
},
methods: {
getArticleDetail() {
getArticleDetail({ id: this.id }).then((res) => {
res.data.content = this.formatRichText(res.data.content);
this.detail = res.data;
});
},
formatRichText(html) {
let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
match = match
.replace(/style="[^"]+"/gi, "")
.replace(/style='[^']+'/gi, "");
match = match
.replace(/width="[^"]+"/gi, "")
.replace(/width='[^']+'/gi, "");
match = match
.replace(/height="[^"]+"/gi, "")
.replace(/height='[^']+'/gi, "");
return match;
});
newContent = newContent.replace(
/style="[^"]+"/gi,
function (match, capture) {
match = match
.replace(/width:[^;]+;/gi, "max-width:100%;")
.replace(/width:[^;]+;/gi, "max-width:100%;");
return match;
}
);
newContent = newContent.replace(
/\<img/gi,
'<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"'
);
return newContent;
},
},
onLoad: function (option) {
this.id = this.$yroute.query.id;
this.getArticleDetail();
},
};
3 years ago
</script>
<style lang="less">
3 years ago
.article-box {
width: 100%;
min-height: 100vh;
.article-header {
padding: 0 40rpx;
}
.headline {
font-size: 32rpx;
color: #333333;
padding-top: 20rpx;
margin-bottom: 30rpx;
font-weight: 500;
}
.header-img {
width: 72rpx;
height: 72rpx;
margin-right: 20rpx;
image {
width: 100%;
height: 100%;
border-radius: 25px;
}
}
.release-auth {
font-size: 32rpx;
color: #333;
line-height: 44rpx;
margin-bottom: 6rpx;
}
.fz24 {
font-size: 24rpx;
color: #707070;
margin-right: 20rpx;
}
.eye-icon {
width: 24rpx;
height: 24rpx;
margin-right: 8rpx;
}
.content {
width: 100%;
padding: 24rpx;
overflow: hidden;
}
.explain-box {
width: 100%;
padding: 12rpx 34rpx;
background: #e3e3e3;
color: #999;
font-size: 24rpx;
line-height: 38rpx;
border-radius: 12rpx;
margin-bottom: 12rpx;
}
}
3 years ago
</style>