lanan-repair/pages/home/content.vue
2024-09-27 18:42:50 +08:00

76 lines
1.9 KiB
Vue

<template>
<view class="container">
<VNavigationBar titleColor="rgba(0,0,0,0.9)" backgroundColor="#fff" title="活动内容"></VNavigationBar>
<!-- &lt;!&ndash; #ifdef MP-WEIXIN &ndash;&gt;-->
<!-- <v-navigation-bar background-color="rgba(255,255,255,1)" title-color="rgba(0,0,0,0)" title="活动内容"></v-navigation-bar>-->
<!-- &lt;!&ndash; #endif &ndash;&gt;-->
<!-- <web-view :src="richTextHtml"></web-view>-->
<div class="body">
<rich-text style="width: 100%" :nodes="richTextHtml | formatRichText" />
</div>
</view>
</template>
<script>
import request from "../../utils/request";
import config from '@/config'
import parser from 'rich-text-parser'
import VNavigationBar from "../../components/VNavigationBar.vue";
export default {
name: "content",
components: {VNavigationBar},
data() {
return {
richTextHtml: ''
};
},
filters: {
formatRichText(html) { // 控制小程序中图片大小
console.log(html)
const nodes = parser.getRichTextJson(html)
return nodes.children
}
},
onLoad(data) {
const id = data.id;
this.getRichTextHtml(id)
},
methods:{
async getRichTextHtml(id){
try {
const res = await request({
url: '/userClient/banner/getById?id=' + id,
method: 'get'
})
const data = res.data
this.richTextHtml = data.content
// this.richTextHtml = data.content.replace(/(<img[^>]+src=")([^":]*?)(")/g, (match, p1, p2, p3) => {
// return `${p1}${config.baseImageUrl}/${p2}${p3}`;
// });
// this.richTextHtml = `data:text/html;charset=utf-8,${encodeURIComponent(this.richTextHtml)}`
}catch {}
}
}
}
</script>
<style scoped lang="scss">
.container {
height: 100%;
display: flex;
flex-direction: column;
.body{
flex: 1;
height: 0;
overflow: auto;
}
}
img{
width: 100%;
height: auto;
}
</style>