konggang-dingtalkH5/code/src/views/company/productDetail.vue

<template>
    <div class="content">
        <div class="title">
            <div class="logo">
                <img :src="logo" alt=""/>
            </div>
            <div class="name">
                {{ name }}
            </div>
        </div>
        <div v-if="titleUrl">
            <img :src="titleUrl" alt="logo" class="detail-img"/>
        </div>
        <div class="fwb" style="text-align: left;" v-html="company"></div>
    </div>
</template>

<script>
    export default {
        components: {
            // uParse
        },
        mounted() {
            console.log(this.$route.query);
            this.getRich(this.$route.query.id);
            this.titleUrl = this.$route.query.imgUrl;
            this.logo = this.$route.query.logo;
            this.name = this.$route.query.name;
        },
        data() {
            return {
                company: "",
                titleUrl:'',
                logo:'',
                name: '',
                shareBaseUrl:"https://kiq.xazhima.com/",
            };
        },
        methods: {
            replaceImg(html) {
                let that = this;
                return html.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi,function (match, capture) {
                        if(capture.includes('http')){
                            return (
                                "<img src=" + capture +' style="max-width:100%;height:auto;display:block;margin:10px 0;"/>'
                            );
                        }else {
                            return (
                                "<img src=" + that.shareBaseUrl + capture +' style="max-width:100%;height:auto;display:block;margin:10px 0;"/>'
                            );
                        }
                    }
                );
            },
            getRich(ids) {
                this.$api.totalApi.richHtmlProductApi(ids).then(res=>{
                    if (res.status === 200) {
                        this.company = this.replaceImg(res.data);
                    }
                })
            },
        },
    };
</script>

<style scoped>
    .content {
        padding: 4%;
        font-size: 16px;
    }
    .title {
        display: flex;
        align-items: center;
        border-radius: 5px;
        margin-bottom: 10px;
        box-shadow: rgba(0, 0, 0, 0.35) 0 3px 7px;
        padding:5px;}
    .logo img {
        width: 50px;
        height: 50px;
        margin: 0 15px;
    }
    .detail-img {
        width: 100%;
        height: 200px;
        object-fit: contain;
        margin-bottom: 10px;
    }
</style>