47-完成咨询详情页面

<template>
    <view class='news_detail'>
        <text class='title'>{{detail.title}}</text>
        <view class='info'>
            <text>发表时间:{{detail.add_time | formatDate}}</text>
            <text>浏览：{{detail.click}}</text>
        </view>
        <view class='content'>
            {{detail.content}}
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                id:0,
                detail:{}
            };
        },
        methods:{
            async getNewsDetail(){
                const res = await this.$myRequest({
                    url:'/api/getnew/'+this.id
                })
                this.detail = res.data.message[0]
            }
        },
        onLoad(options){
            this.id = options.id
            this.getNewsDetail()
        }
    }
</script>
<style lang="scss">
.news_detail{
    font-size: 25rpx;
    padding:20rpx;;
    .title{
        text-align: center;
        width:710rpx;
        display: block;
        margin:20 0rpx;
    }
    .info{
        display: flex;
        justify-content: space-between;
        margin:30rpx;
    }
}
</style>

在main.js文件里面加入js全局变量

import Vue from 'vue'
import App from './App'
import { myRequest} from './util/api.js'
Vue.prototype.$myRequest = myRequest   //全局方法
Vue.filter('formatDate',(date)=>{
    const nDate = new Date(date)
    const year = nDate.getFullYear().toString().padStart(2,0)
    const month = nDate.getMonth().toString().padStart(2,0)
    const day = nDate.getDay().toString().padStart(2,0)
    return year+'-'+month+'-'+day
})
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App
})
app.$mount()

加入富文本解析html标签

    <view class='content'>
            <rich-text :nodes='detail.content'></rich-text>
        </view>Vue