117 lines
2.4 KiB
Vue
117 lines
2.4 KiB
Vue
|
||
<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>
|