xmhjc-applet/pages/home/ArticleDetails.vue

<template>
	<view class="ArticleDetails">
		<view class="Articletitle">
            {{ info.title }}
        </view>
        <view class="subtitle">
            <view class="subtitle_left">
                <view class="subtitle_left_item">
                    {{info.columnIdName}}
                    <text style="color: #fff;margin: 0 10rpx;">{{ '|' }}</text> 
                    {{info.subIdName}}
                </view>
                <!-- <view class="subtitle_left_item">{{info.subIdName}}</view> -->
            </view>
            <view class="subtitle_right">
                <u--image width="40rpx" height="40rpx" src="/static/index/iconm_shitu.png" ></u--image>
                {{ info.views || 0 }}
            </view>
        </view>
        <view class="time">
            {{ info.time }}
        </view>
        <view class="vHtml" v-if="!showVido">
            <u-parse class="vHtml" :content="info.content"></u-parse>
        </view>
        <view class="videoBox" v-else>
            <!-- 视频组件 -->
            <video style="width: 710rpx;" :src="info.videoUrl"></video>
        </view>
        <view class="linebox">

        </view>
        <view>
            <!-- 评论组件 -->
            <comment :topicId="info.id"></comment>
        </view>
	</view>
</template>

<script>
import comment from '@/pages/components/comment.vue'
import {getArticleDetailByOpen} from '@/http/api/common.js'
export default {
    data() {
        return {
            info:{
                title:'',
                readNum:999,
                time:'',
                content:'',
                columnIdName:'',
                subIdName:'',
                videoUrl:'',
                id:''
            },
            showVido:false
        }
    },
    components: {
        comment
    },
    async onLoad(e) {
        if (e?.id != '') {
            await this.initData(e?.id)
        }else{
            uni.showToast({
                title: '参数错误',
                duration: 2000
            });
        }
    },
    onShow() {
        
    },
    computed:{
        
    },
    methods: {
        async initData(id){
            let query = {
                id:id
            }
            
            //获取文章详情
            let res =  await getArticleDetailByOpen(query)
            if (res.data.code == 200) {
                this.info = res.data.data

                if (this.info.subIdName == '视频资讯') {
                    this.info.videoUrl = this.info.videoList[0].fileUrl
                    this.showVido = true
                }else{
                    this.showVido = false
                }
                
            }
        }
    }
}
</script>

<style>
.ArticleDetails{
    width: 750rpx;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 20rpx;
}
.Articletitle{
    width: 710rpx;
    height: 112rpx;
    font-size: 40rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    color: #333333;
    line-height: 56rpx;

    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;

}
.subtitle{
    width: 710rpx;
    height: 48rpx;
    display: flex;
    margin-top: 33rpx;
    justify-content: space-between;
}
.subtitle_left{
    width: 304rpx;
    height: 48rpx;
    display: flex;
}
.subtitle_left_item{
    width: 300rpx;
    height: 48rpx;
    margin-left: 4rpx;
    background: #EAF0FF;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    text-align: center;
    font-size: 28rpx;
    font-weight: 400;
    color: #46A6FF;
    line-height: 40rpx;
}
.subtitle_right{
    width: 85rpx;
    height: 48rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #999999;
    display: flex;
}

.time{
    width: 300rpx;
    height: 33rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #999999;
    line-height: 40rpx;

    margin-top: 20rpx;
    margin-bottom: 40rpx;
}
.vHtml{
    width: 710rpx;
    line-height: 48rpx;
}
.vHtml >>> img {
    vertical-align: middle;
    border-style: none;
    width: 100%;
    height: auto;
    border-radius: 16rpx;
    margin:40rpx 0 ;
}
.vHtml >>> p {
    margin-top: 30rpx;
    margin-bottom: 30rpx;
}

.vHtml >>> h1{
    margin-top: 30rpx;
    margin-bottom: 30rpx;
}

.videoBox{
    width: 710rpx;
    margin: 24rpx 0;
}
.linebox{
    width: 750rpx;
    height: 100rpx;
    border-bottom: 30rpx solid #EEEEEE;
    margin-left: -18rpx;
}
</style>