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.
504 lines
11 KiB
504 lines
11 KiB
<template>
|
|
<view>
|
|
<loadlogo v-if="!loadlogo" />
|
|
<block v-if="detailInfo.id">
|
|
<personnal-item :dynamicInfo="detailInfo" @comment="comment" :isDetail="true"></personnal-item>
|
|
</block>
|
|
<!-- 间隔 -->
|
|
<view class="interval"></view>
|
|
<!-- 评论内容 -->
|
|
<view class="content">
|
|
<view class="header">
|
|
<view class="left-info">
|
|
<view class="title">评论</view>
|
|
<view class="num">{{commentNum}}条</view>
|
|
</view>
|
|
<!-- <view class="right-info">
|
|
<view class="hot" :class="{'select' : contentType == 'hot'}" @click="contentType = 'hot'">热门</view>
|
|
<view>/</view>
|
|
<view class="new" :class="{'select' : contentType == 'new'}" @click="contentType = 'new'">最新</view>
|
|
</view> -->
|
|
</view>
|
|
<!-- 单条内容 -->
|
|
<view class="comment-item" v-for="(item,index) in commentList" :key="item.id">
|
|
<view class="user-info">
|
|
<view class="avatar">
|
|
<image :src="item.avatar" mode=""></image>
|
|
<view v-if="item.gneder == 2" class="sex woman">
|
|
<view class="iconfont icon-female"></view>
|
|
</view>
|
|
<view v-else class="sex man">
|
|
<view class="iconfont icon-male"></view>
|
|
</view>
|
|
</view>
|
|
<view class="else-info">
|
|
<view class="name">{{item.nickname}}</view>
|
|
<view class="date">{{item.create_time}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="comment-detail">
|
|
<!-- 评论的内容 -->
|
|
<view class="text"><span v-if="item.reply_id > 0" style="color: #0084FF">@{{item.reply_name}}</span> {{item.content}}</view>
|
|
<view class="line"></view>
|
|
<!-- 评论的评论 -->
|
|
<block v-if="item.list.length">
|
|
<view class="comment-info">
|
|
<view class="info-item" v-for="comment in item.visibilityList" :key="comment.id">
|
|
<view class="name">{{comment.nickname}}：</view>
|
|
<view class="value">{{comment.content}}</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<!-- 点赞评论数量 -->
|
|
<view class="join-info">
|
|
<view class="praise-box">
|
|
<view @click="handleCommentFabulousClick(item.id,index)">
|
|
<image class="praise" v-if="!item.is_fabulous" :src="imgfixUrls + 'dating/bd_praise.svg'" mode=""></image>
|
|
<image class="praise" v-else :src="imgfixUrls + 'dating/bd_light_praise.svg'" mode=""></image>
|
|
</view>
|
|
<view class="num">{{item.fabulous}}</view>
|
|
</view>
|
|
<view class="comment-box" style="margin-left: 50rpx;" @click="reply(item)">
|
|
<image :src="imgfixUrls + 'dating/bd_message1.svg'" mode=""></image>
|
|
<view class="num">{{item.list.length}}</view>
|
|
</view>
|
|
</view>
|
|
<block v-if="item.is_show_btn">
|
|
<view v-if="!item.is_open" class="open-btn" @click="handleOpenClick(item,'open')">展开</view>
|
|
<view v-else class="open-btn" @click="handleOpenClick(item,'close')">收起</view>
|
|
</block>
|
|
</view>
|
|
<view class="interval" style="margin-top: 30rpx;"></view>
|
|
</view>
|
|
</view>
|
|
<!-- 评论 -->
|
|
<view class="footer">
|
|
<input type="text" :focus="is_focus" @blur="is_focus = false" v-model="commentContent" :placeholder="placeholder" placeholder-style="font-size: 28rpx" />
|
|
<view class="submit-btn" @click="submitComment">发布</view>
|
|
</view>
|
|
<!-- 返回按钮 -->
|
|
<view class="back-btn" @click="goindex">返回</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import App from '@/common/js/app.js';
|
|
import Loadlogo from '@/components/template/loadlogo.vue';
|
|
import personnalItem from '../template/personalItem.vue'
|
|
export default {
|
|
data() {
|
|
return {
|
|
loadlogo: false,
|
|
detailInfo: {}, //动态信息
|
|
lng: '',
|
|
lat: '',
|
|
dynamic_id: 0, //动态id
|
|
reply_id: 0, //回复动态的id
|
|
currentPage: 1, //当前页
|
|
totalPage: 1, //总页数
|
|
commentContent: '', //评论内容
|
|
commentList: [], //评论列表
|
|
commentNum: 0, //评论数量
|
|
is_focus: false, //评论输入框是否聚焦
|
|
placeholder: '请输入评论...', //评论输入框的placeholder
|
|
|
|
|
|
}
|
|
},
|
|
onLoad(e) {
|
|
let _this = this
|
|
_this.dynamic_id = e.id
|
|
uni.getLocation({
|
|
type: 'wgs84',
|
|
success(res) {
|
|
_this.lng = res.longitude
|
|
_this.lat = res.latitude
|
|
}
|
|
})
|
|
_this.getDynamicDetailInfo(e.id)
|
|
_this.getDynamicComment()
|
|
},
|
|
components: {
|
|
personnalItem,
|
|
Loadlogo
|
|
},
|
|
methods: {
|
|
// 获取动态详情
|
|
getDynamicDetailInfo(id) {
|
|
let _this = this
|
|
App._post_form(
|
|
`&p=dating&do=dynamicDesc`,
|
|
{
|
|
id: id,
|
|
lng: _this.lng,
|
|
lat: _this.lat,
|
|
},
|
|
res => {
|
|
_this.detailInfo = res.data || {}
|
|
},
|
|
false,
|
|
() => {
|
|
}
|
|
);
|
|
},
|
|
|
|
// 获取动态评论
|
|
getDynamicComment() {
|
|
let _this = this
|
|
App._post_form(
|
|
`&p=dating&do=dynamicComment`,
|
|
{
|
|
dynamic_id: _this.dynamic_id,
|
|
page: _this.currentPage,
|
|
page_index: 10
|
|
},
|
|
res => {
|
|
let list = res.data.list.map(item => {
|
|
item.is_show_btn = item.list.length > 3 //是否显示展开按钮 评论大于三条显示
|
|
item.is_open = false //是否展开
|
|
item.visibilityList = item.list.slice(0,3) //默认未展开时显示前3条评论
|
|
return item
|
|
})
|
|
_this.commentList = [..._this.commentList,...list]
|
|
_this.totalPage = res.data.total
|
|
_this.commentNum = res.data.list.length
|
|
_this.currentPage ++
|
|
_this.loadlogo = true
|
|
},
|
|
false,
|
|
() => {
|
|
}
|
|
);
|
|
},
|
|
|
|
// 评论点赞
|
|
handleCommentFabulousClick(id,index) {
|
|
let _this = this
|
|
App._post_form(
|
|
`&p=dating&do=commentFabulous`,
|
|
{
|
|
id: id
|
|
},
|
|
res => {
|
|
if(res.errno == 0) {
|
|
if(_this.commentList[index].is_fabulous) {
|
|
_this.commentList[index].fabulous --
|
|
}else {
|
|
_this.commentList[index].fabulous ++
|
|
}
|
|
_this.commentList[index].is_fabulous = !_this.commentList[index].is_fabulous
|
|
}
|
|
},
|
|
false,
|
|
() => {
|
|
}
|
|
);
|
|
},
|
|
|
|
// 回复评论
|
|
reply(item) {
|
|
this.placeholder = `回复${item.nickname}：`
|
|
this.is_focus = true
|
|
this.reply_id = item.id
|
|
console.log(this.reply_id,'reply_id')
|
|
},
|
|
|
|
// 评论动态
|
|
comment() {
|
|
this.placeholder = '请输入评论...'
|
|
this.is_focus = true
|
|
this.reply_id = 0
|
|
},
|
|
|
|
// 展开和收起评论
|
|
handleOpenClick(item,type) {
|
|
item.is_open = !item.is_open
|
|
item.visibilityList = type === 'open' ? item.list : item.list.slice(0,3)
|
|
},
|
|
|
|
//发布评论内容
|
|
submitComment() {
|
|
let _this = this
|
|
console.log(_this.reply_id,'reply_id111')
|
|
// 评论动态
|
|
App._post_form(
|
|
`&p=dating&do=addComment`,
|
|
{
|
|
dynamic_id: _this.dynamic_id,
|
|
content: _this.commentContent,
|
|
reply_id: _this.reply_id
|
|
},
|
|
res => {
|
|
_this.currentPage = 1
|
|
_this.commentList = []
|
|
_this.getDynamicComment(_this.dynamic_id)
|
|
_this.commentContent = ''
|
|
if(res.errno == 0) {
|
|
uni.showToast({
|
|
title: res.message,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
false,
|
|
() => {
|
|
}
|
|
);
|
|
},
|
|
|
|
goindex(){
|
|
let pages = getCurrentPages();
|
|
console.log(pages);
|
|
if(pages.length == 1){
|
|
App.navigationTo({
|
|
url: "pages/subPages2/blindDate/personal"
|
|
})
|
|
}else{
|
|
uni.navigateBack({
|
|
delta:1
|
|
})
|
|
}
|
|
},
|
|
|
|
},
|
|
onReachBottom() {
|
|
if(this.currentPage <= this.totalPage) {
|
|
this.getDynamicComment()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.interval {
|
|
width: 690rpx;
|
|
height: 8rpx;
|
|
margin: auto;
|
|
background-color: #F8F8F8;
|
|
}
|
|
|
|
.content {
|
|
width: 690rpx;
|
|
margin: 30rpx auto 130rpx;
|
|
.header {
|
|
width: 100%;
|
|
height: 50rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.left-info {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
.title {
|
|
height: 100%;
|
|
line-height: 50rpx;
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-right: 10rpx;
|
|
}
|
|
.num {
|
|
height: 36rpx;
|
|
line-height: 36rpx;
|
|
color: #999;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
.right-info {
|
|
height: 40rpx;
|
|
color: #999;
|
|
font-size: 28rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
.hot {
|
|
margin-right: 10rpx;
|
|
}
|
|
.new {
|
|
margin-left: 10rpx;
|
|
}
|
|
.select {
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
.comment-item {
|
|
width: 690rpx;
|
|
height: auto;
|
|
margin: auto;
|
|
padding-top: 30rpx;
|
|
.user-info {
|
|
width: 100%;
|
|
height: 90rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
.avatar {
|
|
width: 90rpx;
|
|
height: 90rpx;
|
|
border-radius: 45rpx;
|
|
position: relative;
|
|
image {
|
|
width: 90rpx;
|
|
height: 90rpx;
|
|
border-radius: 45rpx;
|
|
}
|
|
.sex {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
border-radius: 15rpx;
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
color: #fff;
|
|
line-height: 30rpx;
|
|
text-align: center;
|
|
.iconfont {
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
.woman {
|
|
transform: rotate(45deg);
|
|
background-color: #FE83AF;
|
|
}
|
|
.man {
|
|
background-color: #0084FF;
|
|
}
|
|
}
|
|
.else-info {
|
|
height: 100%;
|
|
margin-left: 20rpx;
|
|
.name {
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
margin-top: 4rpx;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
.date {
|
|
height: 32rpx;
|
|
line-height: 32rpx;
|
|
margin-top: 10rpx;
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
.comment-detail {
|
|
width: 580rpx;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
height: auto;
|
|
margin: 0 0 0 110rpx;
|
|
.text {
|
|
width: 100%;
|
|
height: auto;
|
|
line-height: 40rpx;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
padding: 40rpx 0;
|
|
}
|
|
.join-info {
|
|
width: 100%;
|
|
height: 34rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 30rpx;
|
|
.praise-box,.comment-box {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
color: #333;
|
|
font-size: 28rpx;
|
|
image {
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
}
|
|
.num {
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
.line {
|
|
width: 100%;
|
|
height: 2rpx;
|
|
background-color: #EEEEEE;
|
|
}
|
|
.comment-info {
|
|
width: 100%;
|
|
// max-height: 170rpx;
|
|
height: auto;
|
|
padding-top: 10rpx;
|
|
overflow: hidden;
|
|
.info-item {
|
|
width: 100%;
|
|
height: auto;
|
|
line-height: 34rpx;
|
|
display: flex;
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
margin-top: 10rpx;
|
|
.name {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
.open-btn {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 展开样式
|
|
.open {
|
|
max-height: 999999999rpx !important;
|
|
}
|
|
|
|
.footer {
|
|
width: 690rpx;
|
|
height: 70rpx;
|
|
padding: 15rpx 30rpx;
|
|
background-color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-top: 1rpx solid #EEEEEE;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
font-size: 28rpx;
|
|
input {
|
|
width: 570rpx;
|
|
height: 40rpx;
|
|
padding: 15rpx 0 15rpx 30rpx;
|
|
border-radius: 35rpx;
|
|
background-color: #F8F8F8;
|
|
}
|
|
.submit-btn {
|
|
height: 40rpx;
|
|
color: #999;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.back-btn {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50rpx;
|
|
text-align: center;
|
|
line-height: 100rpx;
|
|
background: linear-gradient(270deg, #FF8E88 0%, #FDAD28 100%);
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
position: fixed;
|
|
right: 30rpx;
|
|
bottom: 250rpx;
|
|
}
|
|
|
|
</style>
|
|
|