|
|
<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> <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" v-if="discover_details.is_like"></text> <text class="lf-iconfont icon-xihuan" 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"></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-"></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" v-if="commentitem.is_like"></text> <text class="lf-iconfont icon-xihuan" 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" v-if="subitem.is_like"></text> <text class="lf-iconfont icon-xihuan" 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" 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;" @click.stop="addLike(discover_details.id)"> <text class="lf-iconfont icon-xihuanlike lf-color-price lf-font-36" v-if="discover_details.is_like"></text> <text class="lf-iconfont icon-xihuan lf-font-36" 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;"> <text class="lf-iconfont icon-chakan lf-font-44"></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;"> <text class="lf-iconfont icon-pinglun- lf-font-36"></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>
|
