95 lines
2.1 KiB
Vue
95 lines
2.1 KiB
Vue
|
<template>
|
||
|
|
<NavBar />
|
||
|
|
<view class="container">
|
||
|
|
<view class="title">
|
||
|
|
<PageTitle :title="$t('menu.news')" />
|
||
|
|
</view>
|
||
|
|
<Spin v-show="loading" />
|
||
|
|
<view class="content" v-if="detail">
|
||
|
|
<view class="news-title">{{ detail.title }}</view>
|
||
|
|
<view class="news-desc">
|
||
|
|
<image class="icon" src="/static/clock.svg"></image>
|
||
|
|
<text>{{ detail.release_time }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="news-content" v-html="detail.content"></view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
import { getNewsDetail } from '@/services/news';
|
||
|
|
// #ifndef H5
|
||
|
|
import * as cheerio from 'cheerio';
|
||
|
|
// #endif
|
||
|
|
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
id: undefined,
|
||
|
|
detail: undefined,
|
||
|
|
loading: false
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleImages(htmlContent) {
|
||
|
|
// #ifdef H5
|
||
|
|
var parser = new DOMParser();
|
||
|
|
var doc = parser.parseFromString(htmlContent, 'text/html');
|
||
|
|
var images = doc.getElementsByTagName('img');
|
||
|
|
Array.from(images).forEach(function(img) {
|
||
|
|
var width = img.getAttribute("width");
|
||
|
|
if (!isNaN(parseFloat(width)) && parseFloat(width) > 200) {
|
||
|
|
img.setAttribute('width', '100%');
|
||
|
|
img.setAttribute('height', 'auto');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return doc.documentElement.innerHTML;
|
||
|
|
// #endif
|
||
|
|
|
||
|
|
// #ifndef H5
|
||
|
|
const $ = cheerio.load(htmlContent);
|
||
|
|
const images = $('img')
|
||
|
|
Array.from(images).forEach(function(img) {
|
||
|
|
var width = $(img).attr('width')
|
||
|
|
if (!isNaN(parseFloat(width)) && parseFloat(width) > 200) {
|
||
|
|
$(img).attr('width', '100%');
|
||
|
|
$(img).attr('height', 'auto');
|
||
|
|
}
|
||
|
|
})
|
||
|
|
return $.html();
|
||
|
|
// #endif
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad(options) {
|
||
|
|
const { id } = options;
|
||
|
|
this.id = id;
|
||
|
|
this.loading = true;
|
||
|
|
getNewsDetail({ id })
|
||
|
|
.then((resp) => {
|
||
|
|
if (resp.code == 0) {
|
||
|
|
if (resp.data.content) {
|
||
|
|
resp.data.content = this.handleImages(resp.data.content)
|
||
|
|
}
|
||
|
|
this.detail = resp.data;
|
||
|
|
}
|
||
|
|
this.loading = false;
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
this.loading = false;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import './detail.scss';
|
||
|
|
</style>
|
||
|
|
<style>
|
||
|
|
.news-content {
|
||
|
|
width: 100%;
|
||
|
|
overflow-y: auto;
|
||
|
|
word-wrap: break-word;
|
||
|
|
}
|
||
|
|
</style>
|