接收上页面传递id及rech-text富文本使用

上页面

<template>
    <view class="notify-bg">
        <view @click="openinfo(item.id)" class="notify between" v-for="(item,index) in model">
            <view class="notify-l">
                <text class="size30">{{item.title ? item.title : ''}}</text>
                <text class="size24">{{item.addTime ? item.addTime : ''}}</text>
            </view>
            <view class="notify-r">
                <img :src="item.imageInput">
            </view>
        </view>
        
    </view>
</template>

<script>
    import server from '@/api/index.js'
    export default {
        data() {
            return {
                model:[]
            };
        },
        onLoad() {
            this.getarticleList();
        },
        methods: {
            getarticleList(){
                server.getarticleList().then(res => {
                    this.model = res;
                    console.log('111',this.model);
                })
            },
            openinfo(id) {
                console.log('---1---',id)
                uni.navigateTo({
                    url: '/components/RichText/RichText?id='+id
                })
            }
        }
    }
</script>

<style lang="less">
    .notify-bg {
        width: calc(100% - 60rpx);
        margin-left: 30rpx;

        .notify {
            height: 206rpx;
            border-bottom: 1rpx solid #ddd;
            padding-top: 30rpx;

            .notify-l {
                text:nth-child(1) {
                    font-weight: 500;
                    color: #333333;
                    line-height: 42px;
                    letter-spacing: 1px;
                    display: block;
                }

                text:nth-child(2) {
                    color: #999999;
                    line-height: 33px;
                    letter-spacing: 1px;
                    display: block;
                }
            }

            .notify-r {
                width: 280rpx;
                height: 158rpx;
                border-radius: 10rpx;
                overflow: hidden;

                img {
                    width: 280rpx;
                    height: 158rpx;
                }
            }
        }
    }
</style>

富文本页面接收上页面传递id及富文本使用

<template>
    <view>
        <view class="richtext start-wrap">
            <text class="size36">{{model.title}}</text>
            <text class="size24">{{model.addTime}}</text>
            <view class="richtext-img">
                <img :src="model.imageInput">
            </view>
            <view class="size28">
                <rich-text :nodes="change(model.content)"></rich-text>
            </view>
        </view>
    </view>
</template>

<script>
    import server from '@/api/index.js'
    export default {
        data() {
            return {
                model:{
                    id:null,
                    content:''
                }
            };
        },
        onLoad(option) {
            this.getarticleDetails(option.id);//接收到上个页面传递过来的id
            console.log('+++',option.id);
            this.model.id = parseInt(option.id);
            console.log('111',this.model.id);
        },
        methods:{
            getarticleDetails(id){
                server.getarticleDetails(id).then(res => {
                    this.model = res;
                    console.log('222',this.model)
                    this.model.content = res.content//获取到后台传递富文本内容
                })
            },
            change(data){
                if(data){
                    let html = data.replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1')
                    .replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<img$1')
                    .replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1')
                    .replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/ig, '<img$1')
                    .replace(/<img([\s\w"-=\/\.:;]+)/ig, '<img style="width: 100%;" $1');
                    return html
                }
            }
        }
    }
</script>

<style lang="less">
    .richtext{
        width: calc(100% - 60rpx);
        margin-left: 30rpx;
        padding-top: 30rpx;
        padding-bottom: 87rpx;
        .richtext-img{
            width: 100%;
            height: 390rpx;
            overflow: hidden;
            margin-top: 30rpx;
            margin-bottom: 30rpx;
            img{
                width: 100%;
                height: 390rpx;
            }
        }
        text:nth-child(1){
            width: 100%;
            font-weight: 500;
            color: #333333;
            line-height: 50rpx;
            letter-spacing: 2rpx;
        }
        text:nth-child(2){
            width: 100%;
            color: #999999;
            line-height: 33rpx;
            letter-spacing: 1rpx;
        }
        text:nth-child(3){
            width: 100%;
            color: #333333;
            line-height: 40rpx;
            letter-spacing: 1rpx;
        }
    }
</style>