
<template>
	<view class="noticeLayout">
		<view class="title">
			<view class="tag">
				<!-- <uni-tag text="置顶" :inverted="true" type="error" /> -->
				<uni-tag text="置顶" :inverted="true" type="error" v-if="detail.select"></uni-tag>
			</view>
			<view class="font">{{detail.title}}</view>
		</view>
		
		<view class="info">
			<view class="item">{{detail.author}}</view>
			<view class="item">
				<uni-dateformat :date="detail.publish_date" format="yyyy-MM-dd hh:mm:ss"></uni-dateformat>
			</view>
		</view>
		
		<view class="content">
			<!-- 内容区域 -->
			<!-- 对于富文本（<rich-text>），我们不能直接在页面进行展示。
			需要利用组件<rich-text :node="富文本链接">进行展示 -->
			<!-- <rich-text :nodes="detail.content"></rich-text> -->
			
			<!-- 或者是利用插件商城的其他插件 -->
			<mp-html :content="detail.content" />

		</view>
		
		<view class="count">
			阅读数量:{{detail.view_count}}
		</view>
		
	</view>
</template>

<script setup>
import { apiNoticeDetail } from "@/api/apis.js"
import {ref} from "vue"
import {onLoad} from "@dcloudio/uni-app"
const detail = ref({})
const noticeId = ref('')
const noticeName = ref('')
// let noticeId
onLoad((e)=>{
	console.log(e);
	noticeId.value = e.id
	noticeName.value = e.name
	// 注意，必须先获得这个id，才能进行getNoticeDetail()操作
	uni.setNavigationBarTitle({
		title:noticeName.value
	})
	getNoticeDetail()
})

const getNoticeDetail = async () =>{
	let res = await apiNoticeDetail({id:noticeId.value});
	detail.value = res.data
	console.log(res);
	
}


</script>

<style lang="scss" scoped>
.noticeLayout{
	padding: 30rpx;
	.title{
		 display: flex;
		 align-items: center;
		 font-size: 40rpx;
		 color: #111;
		 line-height: 1.6em;
		 padding-bottom: 30rpx;
		
		 .tag{
			 // // width: 50rpx;
			 // height: 100rpx;
			 // font-size: 20rpx;
			 // color: #e3a7a8;
			 // padding: 10rpx;
			 // border: 1px solid #e3a7a8;
			 //缩小0.8倍
			 transform: scale(0.8);
			 //缩小的起始点
			 transform-origin: left center;
			 flex-shrink: 0;
		 }
		 .font{
			 // font-size: 40rpx;
			 // color: #0b0b0b;
			 padding-left: 4rpx;
		 }
	}
	
	.info{
		display: flex;
		align-items: center;
		color: #999;
		font-size: 28rpx;
		.item{
			padding-left: 20rpx;
		}
	}
	.content{
		padding: 50rpx 0;
	}
	
	.count{
		color: #999;
		font-size: 28rpx;
	}
}

</style>
