96 lines
1.9 KiB
Vue
96 lines
1.9 KiB
Vue
<!-- 文章页 -->
|
|
<template>
|
|
<view>
|
|
<view class="article-all">
|
|
<view class="article-title">
|
|
{{ data.title }}
|
|
</view>
|
|
<view class="article-tip">
|
|
<text class="tip-time">{{ getDate(data.createtime) }}</text>
|
|
<text class="tip-readCount">阅读 {{ data.view }}</text>
|
|
</view>
|
|
<view class="article-content">
|
|
<u-parse :html="data.text"></u-parse>
|
|
</view>
|
|
</view>
|
|
<view class="share">
|
|
<button open-type="share">
|
|
<u-icon name="share" color="#666666" size="45rpx"></u-icon>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
data:{
|
|
title: '标题',
|
|
view: 597,
|
|
createtime: 1729935783000,
|
|
content: '<p>内容</p>',
|
|
}
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
if(options.title) uni.setNavigationBarTitle({title: options.title});
|
|
if(options.id) this.getData(options.id);
|
|
},
|
|
methods: {
|
|
// 获取文章详情
|
|
async getData(id){
|
|
let res = await this.$api.getSingleArticle(id);
|
|
if(res?.success){
|
|
this.data = res.data;
|
|
}
|
|
},
|
|
// 时间格式化
|
|
getDate(date){
|
|
const showDate = new Date(date);
|
|
return `${showDate.getFullYear()}-${showDate.getMonth()+1}-${showDate.getDate()} ${showDate.getHours()}:${showDate.getMinutes()}:${showDate.getSeconds()}`;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.article-all{
|
|
padding: 30rpx 40rpx 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-bottom: 140rpx;
|
|
.article-title{
|
|
color: #000;
|
|
font-weight: bold;
|
|
font-size: 40rpx;
|
|
}
|
|
.article-tip{
|
|
color: #afb1af;
|
|
font-size: 25rpx;
|
|
margin: 20rpx 0;
|
|
.tip-time{
|
|
margin-right: 25rpx;
|
|
}
|
|
}
|
|
.article-content{
|
|
flex: 1;
|
|
}
|
|
}
|
|
.share{
|
|
background-color: #fff;
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 120rpx;
|
|
box-shadow: -1px -4px 8px 0px rgba(100, 100, 111, 0.12);
|
|
button{
|
|
width: 100%;
|
|
height: 120rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
</style>
|