<template>
    <view class="content">
        <view class="While title">
            {{ detailsData.title }}
            <view class="time">
                <view class="time-number">{{ detailsData.created_at }}</view>
                游览数：{{ detailsData.clicks }}
            </view>
        </view>
        <view class="While article">
            <rich-text :nodes="contentData"></rich-text>
        </view>
    </view>
</template>

<script>
    import {
    	artiicle
    } from '@/apis/interfaces/mall'
	export default {
		data() {
			return {
				detailsData : '',  //文章数据信息
                contentData : '',  //文章内容
			};
		},
        onLoad() {
            // 获取商品详情数据
            this.detailsInfo();
        },
        methods: {
            // 商品详情数据
            detailsInfo() {
            	artiicle(this.$Route.query.id).then(res => {
                    this.detailsData = res
                    this.contentData = res.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
            	}).catch(err => {
            		uni.showToast({
            			title: err.message,
            			icon: "none"
            		})
            	})
            },
            
            // 新增尿酸弹出
            popClick() {
                this.popShow = !this.popShow
            }
        }
	}
</script>

<style lang="scss">
    .content{
    	overflow: hidden;
    	background: #f3f4f6;
    }
    
    .While {
        border-radius: 10rpx;
        margin-bottom: 30rpx;
        background-color: #FFFFFF;
        padding:30rpx;
        box-sizing: border-box;
        box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: .05);
    }
    
    .title {
        font-weight: 600;
        line-height: 52rpx;
        font-size: 34rpx;
        .time {
            font-weight: normal;
            font-size: 28rpx;
            color: #919191;
            margin-top: 10rpx;
            display: flex;
            .time-number {
                flex: 1;
            }
        }
    }
    
    .article {
        line-height: 52rpx;
        font-size: 30rpx;
    }
</style>
