shjz-applet/pagesA/news/detail.vue

100 lines
2.6 KiB
Vue
Raw Permalink Normal View History

2022-08-12 10:25:42 +00:00
<template>
2022-08-18 07:26:31 +00:00
<view v-if="isLoading">
2022-08-12 10:25:42 +00:00
<!-- 头部 -->
<status-nav navBarTitle="新闻资讯" :marginBottom="0"></status-nav>
<!-- 资讯详情 -->
<view class="news-detail pad-sx25 pad-zy25 border-box" :style="{'min-height':screenHeight-statusHeight-50+'px'}">
<view class="title font28 bold">{{newsDetail.title}}</view>
<view class="info flex">
<view class="look flex">
<view class="icon flex"><image src="/static/icon/icon-click.png" mode="widthFix" style="width: 21rpx; height: 15rpx;"></image></view>
<view class="font22 opacity-07">浏览 {{newsDetail.click}}</view>
</view>
<view class="time flex">
<view class="icon flex"><image src="/static/icon/icon-time.png" mode="widthFix" style="width: 20rpx;height: 20rpx;"></image></view>
<view class="font22 opacity-07">发布时间{{newsDetail.time}}</view>
</view>
</view>
<view class="content font24">
2022-08-18 07:26:31 +00:00
<rich-text :nodes="content"></rich-text>
2022-08-12 10:25:42 +00:00
</view>
</view>
<!-- 尾部 -->
<foot-tab :current="99"></foot-tab>
</view>
</template>
<script>
export default {
data() {
return {
screenHeight:uni.getSystemInfoSync().screenHeight,
statusHeight:uni.getSystemInfoSync().statusBarHeight,
newsDetail:[], //资讯详情
2022-08-18 07:26:31 +00:00
content:'',//文章内容
isLoading:false,
2022-08-12 10:25:42 +00:00
}
},
onLoad(op) {
2022-08-18 07:26:31 +00:00
if(op.id){
// 获取资讯详情
this.getNewsDetail(op.id);
}
2022-08-12 10:25:42 +00:00
},
methods: {
// 获取资讯详情
2022-08-18 07:26:31 +00:00
getNewsDetail(id){
uni.showLoading({
title:'加载中'
})
this.$requst.post('/api/common/news-detail',{id:id}).then(res=>{
if(res.code==0){
console.log(res,'资讯详情');
let obj = {
title:res.data.title,
click:res.data.view,
time:res.data.create_time.slice(0,10).split('-').join('.')
}
this.newsDetail = obj;
this.content = this.$toolAll.tools.escape2Html(res.data.content);
uni.hideLoading();
this.isLoading = true;
}
})
2022-08-12 10:25:42 +00:00
},
}
}
</script>
<style scoped>
.news-detail{
background-color: #ffffff;
padding-bottom: 120rpx;
}
.news-detail .title{
line-height: 1.5;
}
.news-detail .info{
align-items: center;
width: 100%;
height: 40rpx;
padding: 6rpx 0 15rpx;
margin-top: 6rpx;
border-bottom: 2rpx solid #ededed;
}
.news-detail .info>view{
align-items: center;
margin-right: 30rpx;
}
.news-detail .info>view>.icon{
align-items: center;
margin-right: 8rpx;
}
.news-detail .info>view>.icon>image{
margin-top: 4rpx;
}
.news-detail .content{
line-height: 1.6;
padding-top: 20rpx;
color: rgba(38,38,38,.9);
text-align: justify;
}
</style>