<template>
<navigationBar title='资讯详情' />
<!-- 公共背景图 -->
<publicContext />
<image v-if="newsLists.img" class="fengmian" :src="$imgUrl + newsLists.img"></image>
<video v-if="newsLists.video" class="fengmian" :src="$imgUrl + newsLists.video"></video>
<view class="center" v-html="newsLists.content">{{newsLists.content}}</view>
<view class="pinglun">
<view>
<image v-if='isShare' src="/Apages/static/img/icon07.png"></image>
<image v-else src="/Apages/static/img/icon08.png"></image>
<view>{{newsLists.share_num}}</view>
</view>
<view>
<image v-if='!newsLists.collection' src="/Apages/static/img/icon09.png"></image>
<image v-else src="/Apages/static/img/icon10.png"></image>
<view>{{newsLists.collection_num}}</view>
</view>
<view>
<image v-if='!newsLists.like' src="/Apages/static/img/icon11.png"></image>
<image v-else src="/Apages/static/img/icon12.png"></image>
<view>{{newsLists.like_num}}</view>
</view>
</view>
<view class="commentBox">
<view class="title">评论({{newsCommentListArr.length}})</view>
<view class="comment" v-for="(item,index) in newsCommentListArr" :key="index">
<view class="name">{{item.user.nickname}}:</view>
<view class="txt">{{item.content}}</view>
</view>
</view>
<view class="inputBox">
<view class="input">
<u--input
placeholder="单行输入"
prefixIcon="edit-pen"
prefixIconStyle="font-size: 22px;color: #909399"
></u--input>
</view>
<view class="buttom">发送</view>
</view>
</template>
<script>
export default{
data(){
return{
isShare:true,
newsLists:{},
newsCommentListArr:[],
page:1
}
},
onReachBottom(){//do sth
console.log('触底了哦')
this.onNewsCommentList(this.newsLists.id)
},
onLoad(p) {
this.onNewsList(p.id);
this.onNewsCommentList(p.id)
},
methods:{
onNewsList(id){
this.$http(this.$api.newsDetail,{id:id,api_token:uni.getStorageSync('token')}).then(res=>{
console.log(res,'咨询详情');
this.newsLists = res.data.data;
})
},
onNewsCommentList(id){
this.$http(this.$api.newsCommentList,{news_id:id,page:this.page++,pageSize:10}).then(res=>{
console.log(res);
this.newsCommentListArr = [...this.newsCommentListArr,...res.data.data];
})
}
}
}
</script>
<style lang="scss" scoped>
.fengmian{
width: 100%;
height: 400rpx;
}
.center{
// height: 224rpx;
font-size: 28rpx;
font-weight: 400;
text-align: left;
color: #000000;
line-height: 46rpx;
padding: 24rpx;
}
.pinglun{
width: 702rpx;
padding: 24rpx 0;
border-top: 2rpx solid #f2f2f2;
display: flex;
justify-content: space-around;
align-items: center;
view{
display: flex;
justify-content: center;
align-items: center;
image{
width: 32rpx;
height: 32rpx;
margin-right: 8rpx;
}
view{
font-size: 24rpx;
font-weight: 400;
color: #999999;
}
}
}
.commentBox{
width: 702rpx;
margin: 0 auto;
padding-bottom: 100rpx;
.title{
font-size: 30rpx;
font-weight: 500;
color: #333333;
}
.comment{
width: 100%;
display: flex;
justify-content: flex-start;
align-items: flex-start;
padding: 24rpx 0;
border-bottom: 2rpx solid #f2f2f2;
.name{
width: 112rpx;
height: 40rpx;
font-size: 28rpx;
font-weight: 400;
text-align: left;
color: #333333;
line-height: 42rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.txt{
width: 590rpx;
font-size: 28rpx;
font-weight: 400;
text-align: left;
color: #333333;
line-height: 42rpx;
}
}
}
.inputBox{
width: 100%;
height: 92rpx;
background: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
bottom: 0;
left: 0;
.input{
width: 574rpx;
height: 60rpx;
background: #ffffff;
border-radius: 30rpx;
}
::v-deep .u-border{
border-color: #f0f0f0 !important;
}
.buttom{
width: 112rpx;
height: 60rpx;
background: linear-gradient(180deg,#4170bc, #0b5099);
border-radius: 30rpx;
font-size: 28rpx;
font-weight: 400;
text-align: center;
color: #ffffff;
letter-spacing: 0.84rpx;
line-height: 60rpx;
margin-left: 16rpx;
}
}
</style>