152 lines
3.9 KiB
Vue
152 lines
3.9 KiB
Vue
<template>
|
|
<page-meta><navigation-bar :title="$tt('navBar.classification')" title-align="center" background-color="#F1F3F9"
|
|
front-color="#000000" /></page-meta>
|
|
<view class="trend-detail">
|
|
<view class="main-wrap">
|
|
<div class="title">{{trendObject.title}}</div>
|
|
<div class="info-wrap">
|
|
<span class="name">{{trendObject.author}}</span>
|
|
<span class="time">{{trendObject.createTime}}</span>
|
|
</div>
|
|
|
|
<view class="content">
|
|
<rich-text :nodes="trendObject.content"></rich-text>
|
|
</view>
|
|
<u--text v-if="isShow" :text="$tt('message.noContent')" customStyle="margin:auto;"></u--text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import projectConfig from '@/env.config.js';
|
|
import { getNewsDetail } from '@/apis/modules/trend';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
newsId: '',
|
|
trendObject: {
|
|
createTime: '2022-01-01',
|
|
author: ''
|
|
},
|
|
isShow: false
|
|
};
|
|
},
|
|
onLoad: function(option) {
|
|
this.newsId = option.newsId;
|
|
},
|
|
onShow() {
|
|
this.getTrendFunc();
|
|
},
|
|
methods: {
|
|
/**
|
|
* 转换富文本的图片最大为100%
|
|
* 转换行内样式的双引号问题
|
|
*/
|
|
formatRichText(html) {
|
|
//控制小程序中图片大小
|
|
let that = this;
|
|
let baseurl = projectConfig.baseUrl.replace(/\/prod-api\//gi, '');
|
|
console.log('baseurl', baseurl);
|
|
// 双引号改为单引号
|
|
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(/<br[^>]*\/>/gi, '');
|
|
newContent = newContent.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function(matchs, capture) {
|
|
return "<img style='max-width:100%;height:auto;border-radius:5px; display:block' src='" +
|
|
baseurl + capture + "'/>";
|
|
});
|
|
|
|
// 替换为单引号
|
|
var stylePattern = /style="[^=>]*"[\s+\w+=|>]/g;
|
|
return newContent.replace(stylePattern, function(matches) {
|
|
return matches.replace(/<["]*>/g, "'");
|
|
});
|
|
},
|
|
getTrendFunc() {
|
|
const params = { newsId: this.newsId };
|
|
getNewsDetail(params).then(res => {
|
|
this.trendObject = res.data;
|
|
this.trendObject.content = this.formatRichText(this.trendObject.content);
|
|
console.log('content:', this.trendObject.content);
|
|
this.trendObject.imgUrl = projectConfig.baseUrl + this.trendObject.imgUrl;
|
|
if (JSON.stringify(this.trendObject) == '{}') {
|
|
this.isShow = true;
|
|
} else {
|
|
this.isshow = false;
|
|
}
|
|
})
|
|
.catch(e => {
|
|
console.log(e);
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.trend-detail {
|
|
height: calc(100vh - 88rpx);
|
|
overflow: hidden;
|
|
background: $uni-bg-color-grey;
|
|
|
|
|
|
.main-wrap {
|
|
height: 100%;
|
|
padding: 38rpx 44rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: $uni-bg-color;
|
|
margin-top: 16rpx;
|
|
|
|
.title {
|
|
font-weight: 400;
|
|
font-size: 40rpx;
|
|
color: #000000;
|
|
line-height: 26px;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.info-wrap {
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
line-height: 20px;
|
|
text-align: left;
|
|
font-style: normal;
|
|
padding: 22rpx 0 36rpx 0;
|
|
|
|
.name {}
|
|
|
|
.time {
|
|
margin-left: 32rpx;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
line-height: 26px;
|
|
text-align: justify;
|
|
color: #666;
|
|
padding-bottom: 232rpx;
|
|
|
|
img {
|
|
max-width: 100% !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |