uniapp deatail頁面

<template>
    <view class="content">
        <view class="banner" auto-focus>
            <image class="banner-img" v-for="(item,index) in banner.image_url" :key="index" :src="$host+'storage/'+ item"></image>
            <view class="title-area">
                <text class="title-text">{{banner.title}}</text>
            </view>
        </view>
        <view class="article-meta">
            <text class="article-meta-text article-author">{{banner.source}}</text>
            <text class="article-meta-text article-text">發表於</text>
            <text class="article-meta-text article-time">{{banner.datetime}}</text>
        </view>
        <view class="article-content">
            <rich-text :nodes="content" style="font-size: 14px;"></rich-text>
        </view>
        <view class="article-content">
            <view v-if="!hascomm" class="article-content">
                {{comm_text}}
            </view>
            <view v-if="hascomm" class="article-content">
                <view>評論{{comm_count}}</view>
                <view v-for="(comm,index) in comm">

                    <view>{{comm.uname}}:{{comm.con}}</view>
                    <view v-if="comm.child">
                        <view class="child-comm" v-for="(child_comm,c) in comm.child">{{child_comm.uname}}:{{child_comm.con}}</view>
                    </view>
                </view>
            </view>
            <view class="uni-textarea">
                <textarea placeholder-style="color:#F76260" placeholder="請發表你的評論吧" />
                </view>
            
        </view>
    </view>
</template>

<script>
    import htmlParser from '@/common/html-parser'

    const FAIL_CONTENT = '<p>獲取信息失敗1</p>';
     

    function parseImgs(nodes) {
        nodes.forEach(node => {
            if (
                node.name === 'img' &&
                node.attrs &&
                node.attrs['data-img-size-val']
            ) {
                const sizes = node.attrs['data-img-size-val'].split(',')
                const width = uni.upx2px(720 * 0.9)
                const height = parseInt(width * (sizes[1] / sizes[0]))
                node.attrs.style = `width:${width};height:${height};`
            }
            if (Array.isArray(node.children)) {
                parseImgs(node.children)
            }
        })
        return nodes
    }

    export default {
        data() {
            return {
                banner: {},
                content: [],
                hascomm:false,
                comm_count:0,
                comm_text: '暫無評論, 快來搶沙發吧'
            }
        },
        onShareAppMessage() {
            return {
                title: this.banner.title,
                path: '/pages/detail/detail?query=' + JSON.stringify(this.banner)
            }
        },
        onLoad(event) {
            // 目前在某些平臺參數會被主動 decode，暫時這樣處理。

            this.load(event.query);
        },
        methods: {
            parseImg(nodes) {
                nodes.forEach(node => {
                    if (
                        node.name === 'img' &&
                        node.attrs
                    ) {
                        const src = 'http://inews.io' + node.attrs.src
                        node.attrs.src = src
                        node.attrs.style = `max-width:100%;`
                    }
                    if (Array.isArray(node.children)) {
                        this.parseImg(node.children)
                    }
                })
                return nodes
            },
            load(e) {
                var p = decodeURIComponent(e);
                try {
                    this.banner = JSON.parse(p);
                } catch (error) {
                    this.banner = JSON.parse(p);
                }

                uni.setNavigationBarTitle({
                    title: this.banner.title
                });
                this.requestParams = {
                    newsid: this.banner.newsid
                }
                this.getDetail();
            },
            getDetail() {
                uni.request({
                    header: {
                        'content-type': 'application/x-www-form-urlencoded'
                    },
                    method: 'POST',
                    url: this.$host + 'uniapi/detail',
                    data: this.requestParams,
                    success: (result) => {
                        let content = FAIL_CONTENT
                        console.log(result.data.comm.length);
                        if (result.statusCode == 200) {
                            content = result.data.content.content
                            if (result.data.comm.length != 0) {
                                this.comm_count = result.data.comm.length
                                this.comm = result.data.comm
                                this.hascomm = true 
                            } 
                        }
                        const nodes = htmlParser(content);
                        // #ifdef APP-PLUS-NVUE
                        parseImgs(nodes)
                        // #endif
                        this.parseImg(nodes)
                        this.content = nodes

                    }
                });
            }
        }
    }
</script>

<style>
    /* #ifndef APP-PLUS */
    page {
        min-height: 100%;
    }

    /* #endif */

    .banner {
        height: 180px;
        position: relative;
        background-color: #ccc;
        flex-direction: row;
        overflow: hidden;
    }

    .banner-img {
        flex: 1;
    }

    .title-area {
        position: absolute;
        left: 15px;
        right: 15px;
        bottom: 15px;
        z-index: 11;
    }

    .title-text {
        font-size: 16px;
        font-weight: 400;
        line-height: 20px;
        lines: 2;
        color: #ffffff;
        overflow: hidden;
    }

    .article-meta {
        padding: 10px 15px;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .article-meta-text {
        color: gray;
    }

    .article-text {
        font-size: 12px;
        line-height: 25px;
        margin: 0 10px;
    }

    .article-author {
        font-size: 15px;
    }

    .article-time {
        font-size: 15px;
    }

    .article-content {
        font-size: 15px;
        padding: 0 15px;
        margin-bottom: 15px;
        overflow: hidden;
    }
    .child-comm{
        font-size: 13px;
        padding-left: 30px;
        overflow: hidden;
    }

    /* #ifdef H5 */

    .article-content {
        line-height: 1.8;
    }

    .article-content img {
        max-width: 100%;
    }

    /* #endif */
</style>