You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
507 lines
17 KiB
507 lines
17 KiB
<template>
|
|
<view v-if="$isRight(discover_details)">
|
|
<lf-nav :spreadOut="true" :showIcon="true" title="详情"></lf-nav>
|
|
<view class="lf-p-32">
|
|
<view class="lf-flex">
|
|
<view class="tag-father" @click="$url('/pages/user/my/my?user_id='+discover_details.user_id)">
|
|
<image :src="discover_details.user.avatar" mode="aspectFill" class="head-img"></image>
|
|
<view class="head-tag">V</view>
|
|
</view>
|
|
<view class="lf-flex-column lf-m-l-20">
|
|
<view @click="$url('/pages/user/my/my?user_id='+discover_details.user_id)">
|
|
<text class="lf-font-32 lf-color-black lf-font-bold lf-m-r-15" v-if="discover_details.user.nick_name">{{discover_details.user.nick_name}}</text>
|
|
<text class="lf-font-32 lf-color-black lf-font-bold lf-m-r-15" v-else>{{discover_details.user.mobile_replace}}</text>
|
|
<text class="lf-iconfont icon-xiangyou lf-color-777 lf-text-vertical" style="font-size: 18rpx;"></text>
|
|
</view>
|
|
<view class="lf-font-24 lf-color-777 lf-m-t-15">{{discover_details.updated_at}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="lf-font-28 lf-color-333 lf-m-t-20">
|
|
{{discover_details.content}}
|
|
</view>
|
|
<view class="lf-flex-wrap lf-m-t-20">
|
|
<image v-for="(item,index) in discover_details.attachs" @click.stop="checkPicture(discover_details.attachs,index)" :key="index" class="qzone-img" :src="item.url" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="lf-m-t-30 lf-row-between lf-p-l-50 lf-p-r-50">
|
|
<view class="lf-row-center" @click="addLike(discover_details.id)">
|
|
<text class="lf-iconfont icon-xihuanlike lf-color-price lf-font-40" v-if="discover_details.is_like"></text>
|
|
<text class="lf-iconfont icon-xihuan lf-font-40" v-else></text>
|
|
<text class="lf-font-24 lf-color-777 lf-m-l-10">{{discover_details.likes_count}}</text>
|
|
</view>
|
|
<view class="lf-row-center">
|
|
<text class="lf-iconfont icon-chakan lf-font-40"></text>
|
|
<text class="lf-font-24 lf-color-777 lf-m-l-10">{{discover_details.view_count}}</text>
|
|
</view>
|
|
<view class="lf-row-center">
|
|
<text class="lf-iconfont icon-pinglun- lf-font-40"></text>
|
|
<text class="lf-font-24 lf-color-777 lf-m-l-10">{{discover_details.comments_count}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<self-line/>
|
|
<!-- 评论 -->
|
|
<view class="comment" v-if="commentList.length != 0">
|
|
<view class="lf-color-555 lf-font-24">共 {{discover_details.comments_count}}条评论</view>
|
|
<!-- 评论开始 -->
|
|
<view v-for="(commentitem,commentindex) of commentList" :key="commentindex">
|
|
<view class="lf-m-t-20" @click="applySub(commentitem.user.id,commentitem.id)">
|
|
<view class="lf-flex">
|
|
<view @click="$url('/pages/user/my/my?user_id='+commentitem.user_id)">
|
|
<image class="comment-img" :src="commentitem.user.avatar" v-if="commentitem.user.avatar" mode="aspectFill"></image>
|
|
<image class="comment-img" src="../../static/images/empty.png" v-else mode="aspectFill"></image>
|
|
</view>
|
|
<view class="lf-flex-column lf-m-l-20">
|
|
<view class="lf-color-999 lf-font-24" v-if="commentitem.user.nick_name">{{commentitem.user.nick_name}}</view>
|
|
<view class="lf-color-999 lf-font-24" v-else>{{commentitem.user.mobile_replace}}</view>
|
|
<view>
|
|
<view class="lf-color-black" style="max-width:550rpx;">{{commentitem.content}}<text class="lf-color-999 lf-font-24 lf-m-l-10">{{commentitem.created_at}}</text></view>
|
|
</view>
|
|
</view>
|
|
<view class="lf-m-l-32" style="position: absolute;right:33rpx;">
|
|
<view @click.stop="giveaLike(commentitem.id)">
|
|
<text class="lf-iconfont icon-xihuanlike lf-color-price lf-font-36" v-if="commentitem.is_like"></text>
|
|
<text class="lf-iconfont icon-xihuan lf-font-36" v-else></text>
|
|
</view>
|
|
<view class="lf-color-555 lf-font-24 lf-row-center">{{commentitem.likes_count}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="comment-replay" v-if="$isRight(commentitem.sub)" v-for="(subitem,index2) of commentitem.sub" :key="index2">
|
|
<view class="lf-flex" @click="applySub(subitem.user.id,subitem.parent_id)">
|
|
<view class="lf-flex lf-m-t-30">
|
|
<view @click="$url('/pages/user/my/my?user_id='+subitem.user_id)">
|
|
<image class="comment-img" :src="subitem.user.avatar" v-if="subitem.user.avatar" mode="aspectFill"></image>
|
|
<image class="comment-img" src="../../static/images/empty.png" v-else mode="aspectFill"></image>
|
|
</view>
|
|
<view class="lf-flex-column lf-m-l-20">
|
|
<view class="lf-flex">
|
|
<view class="lf-color-999 lf-font-24 lf-m-r-10" v-if="subitem.user.nick_name">{{subitem.user.nick_name}}</view>
|
|
<view class="lf-color-999 lf-font-24 lf-m-r-10" v-else>{{subitem.user.mobile_replace}}</view>
|
|
<view class="lf-row-center" style="max-width: 446rpx;">
|
|
<text class="lf-color-333 lf-m-r-10">回复</text>
|
|
<text class="lf-font-24 lf-color-999" v-if="subitem.to_user.nick_name">{{subitem.to_user.nick_name}}:</text>
|
|
<text class="lf-font-24 lf-color-999" v-else>{{subitem.to_user.mobile_replace}}:</text>
|
|
</view>
|
|
</view>
|
|
<view style="max-width: 460rpx;">
|
|
<text class="lf-font-26 lf-color-black lf-m-l-10">{{subitem.content}}</text>
|
|
<text class="lf-color-999 lf-font-24 lf-m-l-10">{{subitem.created_at}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="lf-m-t-30" style="position: absolute;right:33rpx;">
|
|
<view @click.stop="giveaLike(subitem.id)">
|
|
<text class="lf-iconfont icon-xihuanlike lf-color-price lf-font-36" v-if="subitem.is_like"></text>
|
|
<text class="lf-iconfont icon-xihuan lf-font-36" v-else></text>
|
|
</view>
|
|
<view class="lf-color-555 lf-font-24 lf-row-center">{{subitem.likes_count}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="lf-font-24 lf-color-777 lf-row-center lf-m-t-40" style="align-items: center;" v-else>
|
|
暂无评论,友好的评论两句吧~
|
|
</view>
|
|
<!-- 底部tab -->
|
|
<view class="comment-tab">
|
|
<view>
|
|
<input class="rom-search" confirm-type="send" type="text" v-if="ifApply" :focus="ifApply" @confirm="applyComment(apply_userid,apply_commentid)" :cursor-spacing="8" v-model="comment" placeholder="说点什么" />
|
|
<input class="rom-search" type="text" confirm-type="send" v-else @confirm="sendComment(discover_details.id)" :cursor-spacing="8" v-model="comment" placeholder="说点什么" />
|
|
</view>
|
|
<view class="lf-row-center">
|
|
<view class="lf-row-center lf-m-r-35" style="align-items: center;justify-content: center;" @click.stop="addLike(discover_details.id)">
|
|
<text class="lf-iconfont icon-xihuanlike lf-color-price lf-font-40" v-if="discover_details.is_like"></text>
|
|
<text class="lf-iconfont icon-xihuan lf-font-40" v-else></text>
|
|
<text class="lf-font-24 lf-color-777 lf-m-l-10">{{discover_details.likes_count}}</text>
|
|
</view>
|
|
<view class="lf-row-center lf-m-r-35" style="align-items: center;justify-content: center;">
|
|
<text class="lf-iconfont icon-chakan lf-font-40"></text>
|
|
<text class="lf-font-24 lf-color-777 lf-m-l-10">{{discover_details.view_count}}</text>
|
|
</view>
|
|
<view class="lf-row-center lf-m-r-35" style="align-items: center;justify-content: center;">
|
|
<text class="lf-iconfont icon-pinglun- lf-font-40"></text>
|
|
<text class="lf-font-24 lf-color-777 lf-m-l-10">{{discover_details.comments_count}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
discover_id: 0,
|
|
discover_details: '',
|
|
is_like: false,
|
|
comment: '',
|
|
commentList: [],
|
|
ifApply: false,
|
|
apply_userid: 0,
|
|
apply_commentid: 0
|
|
}
|
|
},
|
|
onLoad(e) {
|
|
this.discover_id = e.discover_id;
|
|
this.getDiscoverDetails();
|
|
this.getCommentList();
|
|
},
|
|
methods: {
|
|
checkPicture(image_list,current) {
|
|
if(image_list.length <= 0) return;
|
|
let list = [];
|
|
image_list.forEach((item,index) => {
|
|
list.push(item.url)
|
|
})
|
|
this.$u.throttle(() => {
|
|
uni.previewImage({
|
|
urls: list,
|
|
current: current
|
|
});
|
|
}, 500);
|
|
},
|
|
applySub(userid,commentid) {
|
|
this.ifApply = true;
|
|
this.apply_userid = userid;
|
|
this.apply_commentid = commentid;
|
|
},
|
|
//点赞评论
|
|
giveaLike(comment_id) {
|
|
this.$http
|
|
.post({
|
|
api: 'api/discover/comment/like',
|
|
data: {
|
|
comment_id: comment_id
|
|
},
|
|
header: {
|
|
Authorization: this.$cookieStorage.get('user_token')
|
|
},
|
|
})
|
|
.then(res => {
|
|
if (res.data.code == 200) {
|
|
if (res.data.status) {
|
|
this.$msg('点赞成功',{icon: 'success', duration: 2500}).then(() => {
|
|
console.log('更新点赞列表')
|
|
this.getCommentList()
|
|
})
|
|
} else {
|
|
wx.showModal({
|
|
content: res.data.message || '请下拉页面刷新重试',
|
|
showCancel: false
|
|
});
|
|
}
|
|
} else {
|
|
wx.showModal({
|
|
content: res.data.message || '请下拉页面刷新重试',
|
|
showCancel: false
|
|
});
|
|
}
|
|
wx.hideLoading();
|
|
})
|
|
.catch(() => {
|
|
wx.hideLoading();
|
|
wx.showModal({
|
|
content: '请求失败',
|
|
showCancel: false
|
|
});
|
|
});
|
|
},
|
|
//获取评论列表
|
|
getCommentList() {
|
|
this.$http
|
|
.post({
|
|
api: 'api/discover/comment/list',
|
|
data: {
|
|
discover_id: this.discover_id,
|
|
user_id: this.$cookieStorage.get('user_info').id
|
|
},
|
|
header: {
|
|
Authorization: this.$cookieStorage.get('user_token')
|
|
},
|
|
})
|
|
.then(res => {
|
|
if (res.data.code == 200) {
|
|
if (res.data.status) {
|
|
this.commentList = res.data.data.data;
|
|
console.log('当前评论列表',this.commentList)
|
|
} else {
|
|
wx.showModal({
|
|
content: res.data.message || '请下拉页面刷新重试',
|
|
showCancel: false
|
|
});
|
|
}
|
|
} else {
|
|
wx.showModal({
|
|
content: res.data.message || '请下拉页面刷新重试',
|
|
showCancel: false
|
|
});
|
|
}
|
|
wx.hideLoading();
|
|
})
|
|
.catch(() => {
|
|
wx.hideLoading();
|
|
wx.showModal({
|
|
content: '请求失败',
|
|
showCancel: false
|
|
});
|
|
});
|
|
},
|
|
applyComment(touserid,commentid) {
|
|
this.$http
|
|
.post({
|
|
api: 'api/discover/comment',
|
|
data: {
|
|
discover_id: this.discover_id,
|
|
content: this.comment,
|
|
to_user_id: touserid,
|
|
parent_id: commentid
|
|
},
|
|
header: {
|
|
Authorization: this.$cookieStorage.get('user_token')
|
|
},
|
|
})
|
|
.then(res => {
|
|
if (res.data.code == 200) {
|
|
if (res.data.status) {
|
|
this.$msg('回复成功',{icon: 'success', duration: 2500}).then(() => {
|
|
console.log('更新回复列表');
|
|
this.comment = '';
|
|
this.ifApply = false;
|
|
this.getCommentList();
|
|
this.getDiscoverDetails();
|
|
})
|
|
} else {
|
|
wx.showModal({
|
|
content: res.data.message || '请下拉页面刷新重试',
|
|
showCancel: false
|
|
});
|
|
}
|
|
} else {
|
|
wx.showModal({
|
|
content: res.data.message || '请下拉页面刷新重试',
|
|
showCancel: false
|
|
});
|
|
}
|
|
wx.hideLoading();
|
|
})
|
|
.catch(() => {
|
|
wx.hideLoading();
|
|
wx.showModal({
|
|
content: '请求失败',
|
|
showCancel: false
|
|
});
|
|
});
|
|
},
|
|
sendComment(id) {
|
|
this.$http
|
|
.post({
|
|
api: 'api/discover/comment',
|
|
data: {
|
|
discover_id: id,
|
|
content: this.comment,
|
|
to_user_id: 0,
|
|
parent_id: 0
|
|
},
|
|
header: {
|
|
Authorization: this.$cookieStorage.get('user_token')
|
|
},
|
|
})
|
|
.then(res => {
|
|
if (res.data.code == 200) {
|
|
if (res.data.status) {
|
|
this.$msg('评论成功',{icon: 'success', duration: 2500}).then(() => {
|
|
console.log('更新评论列表')
|
|
this.comment = '';
|
|
this.getCommentList();
|
|
this.getDiscoverDetails();
|
|
})
|
|
} else {
|
|
wx.showModal({
|
|
content: res.data.message || '请下拉页面刷新重试',
|
|
showCancel: false
|
|
});
|
|
}
|
|
} else {
|
|
wx.showModal({
|
|
content: res.data.message || '请下拉页面刷新重试',
|
|
showCancel: false
|
|
});
|
|
}
|
|
wx.hideLoading();
|
|
})
|
|
.catch(() => {
|
|
wx.hideLoading();
|
|
wx.showModal({
|
|
content: '请求失败',
|
|
showCancel: false
|
|
});
|
|
});
|
|
},
|
|
addLike(id) {
|
|
this.$http
|
|
.post({
|
|
api: 'api/discover/like',
|
|
data: {
|
|
discover_id: id
|
|
},
|
|
header: {
|
|
Authorization: this.$cookieStorage.get('user_token')
|
|
},
|
|
})
|
|
.then(res => {
|
|
if (res.data.code == 200) {
|
|
if (res.data.status) {
|
|
this.getCommentList();
|
|
this.getDiscoverDetails();
|
|
} else {
|
|
wx.showModal({
|
|
content: res.data.message || '请下拉页面刷新重试',
|
|
showCancel: false
|
|
});
|
|
}
|
|
} else {
|
|
wx.showModal({
|
|
content: res.data.message || '请下拉页面刷新重试',
|
|
showCancel: false
|
|
});
|
|
}
|
|
wx.hideLoading();
|
|
})
|
|
.catch(() => {
|
|
wx.hideLoading();
|
|
wx.showModal({
|
|
content: '请求失败',
|
|
showCancel: false
|
|
});
|
|
});
|
|
},
|
|
getDiscoverDetails() {
|
|
this.$http
|
|
.post({
|
|
api: 'api/discover/detail',
|
|
data: {
|
|
id: this.discover_id,
|
|
user_id: this.$cookieStorage.get('user_info').id
|
|
},
|
|
header: {
|
|
Authorization: this.$cookieStorage.get('user_token')
|
|
},
|
|
})
|
|
.then(res => {
|
|
if (res.data.code == 200) {
|
|
if (res.data.status) {
|
|
this.discover_details = res.data.data;
|
|
this.is_like = Boolean(res.data.data.is_like) || false;
|
|
console.log(this.is_like);
|
|
} else {
|
|
wx.showModal({
|
|
content: res.data.message || '请下拉页面刷新重试',
|
|
showCancel: false
|
|
});
|
|
}
|
|
} else {
|
|
wx.showModal({
|
|
content: res.data.message || '请下拉页面刷新重试',
|
|
showCancel: false
|
|
});
|
|
}
|
|
wx.hideLoading();
|
|
})
|
|
.catch(() => {
|
|
wx.hideLoading();
|
|
wx.showModal({
|
|
content: '请求失败',
|
|
showCancel: false
|
|
});
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.tag-father {
|
|
position: relative;
|
|
}
|
|
.head-tag {
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
border-radius: 50%;
|
|
background-color: #15716E;
|
|
border: 1rpx solid #FFFFFF;
|
|
position: absolute;
|
|
left: 66rpx;
|
|
top: 70rpx;
|
|
z-index: 99;
|
|
}
|
|
/deep/.input-placeholder{
|
|
color: #aaa;
|
|
font-size: 28rpx;
|
|
}
|
|
.rom-search {
|
|
width: 279rpx;
|
|
height: 70rpx;
|
|
background: #F4F8F8;
|
|
border-radius: 35rpx;
|
|
padding-left: 30rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
.comment-tab {
|
|
padding: 0 0 0 32rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: 100rpx;
|
|
align-items: center;
|
|
width: 100%;
|
|
border-top: 1rpx solid rgba(0, 0, 0, 0.1);
|
|
position: fixed;
|
|
bottom: 0;
|
|
z-index: 99;
|
|
background-color: white;
|
|
}
|
|
.comment-replay {
|
|
margin-left: 96rpx;
|
|
margin-top: 28rpx;
|
|
}
|
|
.comment-img {
|
|
width: 75rpx;
|
|
height: 75rpx;
|
|
border-radius: 50%;
|
|
}
|
|
.comment{
|
|
width: 100%;
|
|
height: max-content;
|
|
background-color: white;
|
|
border-radius: 5rpx;
|
|
box-sizing: border-box;
|
|
padding: 32rpx;
|
|
font-size: 28rpx;
|
|
color: #777777;
|
|
padding-bottom: 120rpx;
|
|
}
|
|
.qzone-img {
|
|
position: relative;
|
|
width: 220rpx;
|
|
height: 220rpx;
|
|
border-radius: 10rpx;
|
|
margin-right: 12rpx;
|
|
&:nth-child(3n) {
|
|
margin-right: 0;
|
|
}
|
|
&:nth-child(n + 4) {
|
|
margin-top: 12rpx;
|
|
}
|
|
}
|
|
.head-img {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
}
|
|
</style>
|