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.
619 lines
17 KiB
619 lines
17 KiB
<template>
|
|
<view>
|
|
<view class="">
|
|
<pic-text :info="detailinfo" :isDetail="true" :index="-1" :stopVideo="stopVideo" @addComment="changeCommentNum" :currentPlay="currentPlay" @changePlay="changePlay()"></pic-text>
|
|
</view>
|
|
<view class="">
|
|
<view style="font-size: 18px;font-weight: bold;padding: 10px;color: #333;">评论</view>
|
|
<view style="padding: 0px 10px;color: #333;">
|
|
<view class="comment-item" v-for="(item, index) in commentList" :key="index">
|
|
<view class="dis-flex">
|
|
<image class="avatar2" :src="item.avatar" mode="" @click="toHomePage(item.mid)"></image>
|
|
<view class="name">{{ item.nickname }}</view>
|
|
<view style="font-size: 12px;margin-right: 20upx;" @click="like(item)">
|
|
<text v-show="!item.is_fabulous" class="iconfont icon-like" style="font-size: 30upx;padding-right: 8upx;"></text>
|
|
<text v-show="item.is_fabulous" class="iconfont icon-likefill" style="font-size: 30upx;padding-right: 8upx;color: #f00;"></text>
|
|
<text v-if="item.likenum>0">{{item.likenum}}</text>
|
|
</view>
|
|
<view style="margin-right: 20upx;" v-if="myMid == item.mid" @click="editCommentShow(item,index)">
|
|
<text class="iconfont icon-bianji" style="font-size: 30upx;padding-right: 8upx;"></text>
|
|
</view>
|
|
<view style="margin-right: 20upx;" v-if="myMid == item.mid" @click="deleteComt(item,index)">
|
|
<text class="iconfont icon-delete" style="font-size: 30upx;padding-right: 8upx;"></text>
|
|
</view>
|
|
</view>
|
|
<view style="padding-left: 38px;font-size: 14px;margin: 5px auto 10px;" @click="replyShow(item.id, item.mid, item.list, item.nickname)">{{ item.content }}</view>
|
|
<view class="dis-flex" style="padding-left: 38px;">
|
|
<view class="comment-num" @click="showReply()">{{ item.list.length }}条回复</view>
|
|
<view style="color: #999999;font-size: 12px;">{{ item.createtime }}</view>
|
|
</view>
|
|
<view class="" v-show="item.list.length>0" style="padding-left: 38px;">
|
|
<view v-for="(items,indexs) in item.list" :key="indexs" class="dis-flex" style="padding: 4px 0px;" @click="replyShow(item.id, items.smid, item.list, items.reply_name)">
|
|
<view style="flex: 1;">
|
|
<span class="name" style="color: #4280c5;">{{ items.reply_name }}</span>
|
|
<span style="font-size: 13px;margin: 0px 2px;">回复</span>
|
|
<span class="name" style="color: #4280c5;">{{ items.name }}</span>
|
|
<span style="font-size: 13px;">:</span>
|
|
<span style="font-size: 13px;margin: 0px 2px;white-space: pre-wrap;word-break: break-all;">{{ items.content }}</span>
|
|
</view>
|
|
<view>
|
|
<text class="iconfont icon-bianji" v-if="myMid == items.smid" style="color: #80A9D6;font-size: 30upx;padding-right: 20upx;" @click.stop="xghuPopShow(items,index,indexs)"></text>
|
|
<text class="iconfont icon-delete" v-if="myMid == items.smid" style="color: #ff4444;font-size: 30upx;" @click.stop="deletehcomnt(items,index,indexs)"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style="text-align: center;font-size: 14px;padding: 20px;" @click="showMoreComment">
|
|
<text style="color: #f00;" v-if="!commentText">查看更多评论</text>
|
|
<text v-else>{{commentText}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="">
|
|
<view style="font-size: 18px;font-weight: bold;padding: 10px;color: #333;">热门推荐</view>
|
|
<view style="padding: 0px 10px;">
|
|
<block v-for="(item, index) in communityList" :key="index">
|
|
<view @click="toDetails(item.id)" style="border-bottom: 1px solid #efefef;">
|
|
<pic-text :info="item" :index="index" :stopVideo="stopVideo" :currentPlay="currentPlay" @changePlay="changePlay()"></pic-text>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
<!-- 评论弹窗 -->
|
|
<view style="width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index:9;
|
|
background-color: rgba(0,0,0,.3);" v-if="rpShow" @click.stop="closeRpShow"></view>
|
|
<view class="reply-wrapper" v-if="rpShow">
|
|
<textarea @click.stop class="my-text" v-model="rpText" name="" id="" cols="30" rows="10" placeholder="回复"></textarea>
|
|
<button type="primary" style="margin: 20rpx 80rpx;border-radius: 50px;" @click.stop="reply">发送</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// 这个页面参考 'pages/subPages/postDetails/postDetails?id='
|
|
import App from '@/common/js/app.js';
|
|
|
|
import picText from "@/components/template/pic_text/pic_text.vue"
|
|
export default {
|
|
data() {
|
|
return {
|
|
detailinfo: {},
|
|
id: null,//帖子id
|
|
commentList: [],
|
|
commentPage: 1,
|
|
page_index: 10,
|
|
forwardTotal: 0,
|
|
commentTotal: null,
|
|
appreciateTotal: 0,
|
|
commentText: null,//文字“查看更多评论”
|
|
communityList: [],//热门推荐
|
|
page_index: 10,
|
|
indexShow: -1,
|
|
rpText: '',//回复。修改回复。修改评论弹出框
|
|
rpShow: false,
|
|
myMid: null,
|
|
items: [],
|
|
commentItem: {},//编辑评论时的信息
|
|
popType: "",//edReply编辑回复，edCom编辑评论
|
|
CommentNum: 1, //1增加评论，2删除评论
|
|
stopVideo: 0,
|
|
scrollLock: false,
|
|
scrollTimer: null,
|
|
currentPlay: -2,//当前正在播放的视频在列表中的索引,-2表示没有正在播放，-1是帖子详情的视频
|
|
}
|
|
},
|
|
components:{
|
|
picText
|
|
},
|
|
onLoad(e) {
|
|
let _this = this;
|
|
_this.id = e.id;
|
|
uni.setStorageSync('DetailsId',_this.id);
|
|
_this.poster = uni.getStorageSync('platformInfor').videoimg;
|
|
_this.myMid = uni.getStorageSync('userinfo').mid;
|
|
_this.examine = e.examine || 0;
|
|
uni.getStorage({
|
|
key: 'location',
|
|
success: function(res) {
|
|
_this.lat = res.data.latitude;
|
|
_this.lng = res.data.longitude;
|
|
}
|
|
});
|
|
|
|
this.commentList = [];
|
|
this.init(this.id);
|
|
this.getHotList();
|
|
},
|
|
onShow() {
|
|
},
|
|
methods: {
|
|
init(id){
|
|
let _this = this,
|
|
client = App.getClientType();
|
|
_this.getCommentList(id);
|
|
let curLoction = uni.getStorageSync('curLoction'),
|
|
// 手动选择位置信息
|
|
agencyData = uni.getStorageSync('agencyData');
|
|
if (client === "1" || client === "3") {
|
|
if (!!curLoction) {
|
|
if (!!agencyData) {
|
|
_this.getDetailinfo(id, curLoction)
|
|
} else {
|
|
App.getAreaId(curLoction, "", "", (options) => {
|
|
console.log(options,'post1');
|
|
_this.getDetailinfo(id, curLoction)
|
|
})
|
|
}
|
|
} else {
|
|
if (!!agencyData) {
|
|
_this.getDetailinfo(id, _this.currentLoction)
|
|
} else {
|
|
App.getLocation().then(res => {
|
|
App.getAreaId(res, "", "", (options) => {
|
|
_this.$nextTick(function() {
|
|
_this.getDetailinfo(id, res)
|
|
})
|
|
});
|
|
_this.setData({
|
|
currentLoction: res
|
|
});
|
|
uni.setStorageSync('curLoction', res);
|
|
})
|
|
}
|
|
}
|
|
} else {
|
|
_this.getDetailinfo(id)
|
|
}
|
|
},
|
|
getCommentList(id){
|
|
let _this = this;
|
|
let data = {
|
|
id: _this.id || id,
|
|
page: _this.commentPage,
|
|
page_index: _this.page_index
|
|
};
|
|
App._post_form('&p=pocket&do=commentList', data, res => {
|
|
_this.commentList = [..._this.commentList, ...res.data.list];
|
|
_this.commentTotal = res.data.total;
|
|
if (_this.commentPage == res.data.total || res.data.list.length < 2) {
|
|
_this.commentText = '已无更多数据';
|
|
}else{
|
|
_this.commentText = null;
|
|
}
|
|
});
|
|
},
|
|
showMoreComment(){
|
|
let _this = this;
|
|
if (!_this.commentText) {
|
|
if (_this.page_index == 2) {
|
|
_this.page_index = 10;
|
|
let data = {
|
|
id: _this.id,
|
|
page: _this.commentPage,
|
|
page_index: _this.page_index
|
|
};
|
|
App._post_form('&p=pocket&do=commentList', data, res => {
|
|
_this.commentList = res.data.list;
|
|
_this.commentTotal = res.data.total;
|
|
if (_this.commentPage == res.data.total) {
|
|
_this.commentText = '已无更多数据';
|
|
}
|
|
});
|
|
} else {
|
|
_this.commentPage++;
|
|
_this.page_index = 10;
|
|
_this.getCommentList();
|
|
}
|
|
}
|
|
},
|
|
// 获取帖子详细信息
|
|
getDetailinfo(id = "", location = "") {
|
|
let _this = this;
|
|
let data = {
|
|
id: _this.id || id,
|
|
lat: !!location ? location.latitude : "",
|
|
lng: !!location ? location.longitude : "",
|
|
examine: _this.examine
|
|
};
|
|
App._post_form(
|
|
'&p=pocket&do=detail',
|
|
data,
|
|
res => {
|
|
let newData = {...res.data}
|
|
newData.comment_list = {total:newData.comment_total};//传给组件需要
|
|
newData.id = _this.id;//传给组件需要
|
|
_this.setData({
|
|
detailinfo: newData,
|
|
})
|
|
},
|
|
fail => {
|
|
if (fail.message == '掌上信息已关闭') {
|
|
App.navigationTo({
|
|
url: 'pages/mainPages/index/index'
|
|
});
|
|
}
|
|
}
|
|
);
|
|
},
|
|
getHotList(page = 1, isPage = false){
|
|
let _this = this;
|
|
let data = {
|
|
id: 0,//0对应掌上生活的全部类目
|
|
two_id: undefined,
|
|
page,
|
|
page_index: _this.page_index,
|
|
homeflag: 1,
|
|
keyword:'',
|
|
};
|
|
|
|
App._post_form('&p=pocket&do=infoList', data, res => {
|
|
console.log(res, '--------------')
|
|
let list = [];
|
|
if (!isPage) {
|
|
if (res.data.list.length > 0) {
|
|
list = res.data.list;
|
|
list = list.sort(function(){// 乱序一下
|
|
return Math.random() - 0.5;
|
|
});
|
|
_this.setData({
|
|
communityList: list
|
|
})
|
|
} else {
|
|
|
|
}
|
|
} else {
|
|
|
|
};
|
|
});
|
|
},
|
|
lookimg(){},
|
|
operationShow(e) {},
|
|
getover(id,bor){},
|
|
changeCommentNum(data){
|
|
if(this.CommentNum === 1){
|
|
this.commentList.unshift(data);
|
|
let newData = {...this.detailinfo}
|
|
newData.comment_list.total++;//传给组件需要
|
|
this.setData({
|
|
detailinfo: newData,
|
|
})
|
|
}else{
|
|
let newData = {...this.detailinfo}
|
|
newData.comment_list.total--;//传给组件需要
|
|
this.setData({
|
|
detailinfo: newData,
|
|
})
|
|
this.CommentNum = 1;
|
|
}
|
|
},
|
|
// 打开编辑评论弹框
|
|
editCommentShow(item,index){
|
|
let _this = this;
|
|
_this.commentItem = item;
|
|
_this.commentItem.index = index;
|
|
_this.rpText = item.content;
|
|
_this.rpShow = true;
|
|
_this.popType = 'edCom';
|
|
},
|
|
// 修改评论
|
|
changeComment(){
|
|
let _this = this;
|
|
if(_this.rpText == _this.commentItem.content){
|
|
uni.showToast({
|
|
icon:'none',
|
|
title:'请先进行修改'
|
|
});
|
|
return
|
|
}
|
|
let datas = {
|
|
id:_this.commentItem.id,
|
|
type:1,
|
|
text:_this.rpText
|
|
}
|
|
App._post_form('&p=pocket&do=changeComment', datas, res =>{
|
|
uni.showToast({
|
|
title: '修改成功'
|
|
})
|
|
_this.commentList.map((item,index)=>{
|
|
if(index == _this.commentItem.index){
|
|
item.content = _this.rpText
|
|
}
|
|
});
|
|
_this.rpText = '';
|
|
_this.rpShow = false;
|
|
_this.commentItem = {};
|
|
})
|
|
},
|
|
/** 删除评论
|
|
* @param {Object} item
|
|
* @param {Object} index
|
|
*/
|
|
deleteComt(item,index){
|
|
let _this = this;
|
|
let datas = {
|
|
id:item.id,
|
|
type:0
|
|
}
|
|
App.showError(
|
|
`确认删除此条评论?`,
|
|
data => {
|
|
if (data.confirm) {
|
|
App._post_form('&p=pocket&do=changeComment', datas, res => {
|
|
// _this.plShow = false;
|
|
App.showSuccess('删除成功', () => {
|
|
_this.commentList.map((items,indexs)=>{
|
|
if(index == indexs){
|
|
_this.commentList.splice(indexs,1);
|
|
}
|
|
});
|
|
_this.CommentNum = 2;
|
|
_this.changeCommentNum();
|
|
})
|
|
},fail=>{
|
|
});
|
|
}
|
|
},
|
|
true
|
|
);
|
|
},
|
|
//关闭评论窗口
|
|
closeRpShow(){
|
|
this.rpShow = false;
|
|
},
|
|
// 打开回复弹窗
|
|
replyShow(cid, amid, items, name) {
|
|
let _this = this;
|
|
_this.rpShow = true;
|
|
_this.cid = cid;//主评论id
|
|
_this.amid = amid;//任意被回复用户的id
|
|
_this.items = items;//主评论的回复列表
|
|
_this.name = name;//任意被回复用户的name
|
|
console.info(_this.items);
|
|
},
|
|
// 发送回复、编辑回复、编辑评论
|
|
reply(){
|
|
if(this.commentItem.content){// 编辑
|
|
if(this.popType=='edReply'){
|
|
this.changeReply();
|
|
return;
|
|
}else if(this.popType=='edCom'){
|
|
this.changeComment();
|
|
return;
|
|
}
|
|
}
|
|
let _this = this;
|
|
let data = {
|
|
id: _this.id,//帖子id
|
|
cid: _this.cid,//主评论id
|
|
amid: _this.amid,//任意被回复用户的id
|
|
text: _this.rpText
|
|
};
|
|
App._post_form('&p=pocket&do=reply', data, res => {
|
|
_this.rpShow = false;
|
|
// _this.isComment = false;
|
|
let arr = {
|
|
content: _this.rpText,
|
|
reply_name: uni.getStorageSync('userinfo').nickname,
|
|
name: _this.name,//任意被回复用户的name
|
|
smid:_this.myMid,//写回复用户的id
|
|
id:res.data
|
|
};
|
|
console.info(_this.items);
|
|
_this.items.push(arr);
|
|
_this.rpText = '';
|
|
uni.showToast({
|
|
title: res.message,
|
|
icon: 'none'
|
|
})
|
|
});
|
|
},
|
|
/** 打开编辑回复弹窗
|
|
* @param {Object} data 回复的信息
|
|
* @param {Object} index 主评论的索引
|
|
* @param {Object} indexs 回复信息的索引
|
|
*/
|
|
xghuPopShow(data,index,indexs){
|
|
let _this = this;
|
|
_this.commentItem = data;
|
|
_this.commentItem.index = index;
|
|
_this.commentItem.indexs = indexs;
|
|
_this.rpText = data.content;
|
|
_this.rpShow = true;
|
|
console.log(this.commentItem);
|
|
_this.popType = 'edReply';
|
|
},
|
|
/** 修改回复
|
|
* @param {Object} type
|
|
*/
|
|
changeReply(type){
|
|
let _this = this,
|
|
data = {
|
|
id: _this.commentItem.id,
|
|
type: 1,
|
|
text: _this.rpText
|
|
};
|
|
App._post_form('&p=pocket&do=changeReply', data, res => {
|
|
_this.rpShow = false;
|
|
uni.showToast({
|
|
title:'修改成功'
|
|
});
|
|
_this.commentList.map((item,index)=>{
|
|
if(index == _this.commentItem.index){
|
|
item.list.map((items,indexs)=>{
|
|
if(indexs == _this.commentItem.indexs){
|
|
items.content = _this.rpText;
|
|
}
|
|
})
|
|
}
|
|
})
|
|
_this.rpText = '';
|
|
_this.commentItem = {};
|
|
});
|
|
},
|
|
/** 删除回复
|
|
* @param {Object} item
|
|
* @param {Object} index
|
|
* @param {Object} indexs
|
|
*/
|
|
deletehcomnt(item,index,indexs){
|
|
let _this = this;
|
|
let datas = {
|
|
id:item.id,
|
|
type:0
|
|
}
|
|
App.showError(
|
|
`确认删除此条评论?`,
|
|
data => {
|
|
if (data.confirm) {
|
|
App._post_form('&p=pocket&do=changeReply', datas, res => {
|
|
// _this.plShow = false;
|
|
App.showSuccess('删除成功', () => {
|
|
_this.commentList.map((items,i)=>{
|
|
if(index == i){
|
|
items.list.map((itemss,indexss)=>{
|
|
if(indexss == indexs){
|
|
_this.commentList[i].list.splice(indexs,1);
|
|
}
|
|
})
|
|
|
|
}
|
|
})
|
|
})
|
|
},fail=>{
|
|
// _this.isComment = false;
|
|
});
|
|
}
|
|
},
|
|
true
|
|
);
|
|
},
|
|
like(item){
|
|
App._post_form('&p=pocket&do=fabulousReply', {id: item.id}, res => {
|
|
if(item.is_fabulous){
|
|
uni.showToast({
|
|
title: '取消成功',
|
|
icon:'none'
|
|
})
|
|
item.likenum--;
|
|
item.is_fabulous = false;
|
|
}else{
|
|
uni.showToast({
|
|
title: '点赞成功',
|
|
icon:'none'
|
|
})
|
|
item.likenum++;
|
|
item.is_fabulous = true;
|
|
}
|
|
})
|
|
},
|
|
// 跳转正文详情
|
|
toDetails(id){
|
|
uni.navigateTo({
|
|
url:"/pagesA/pictureTextDetails/pictureTextDetails?id=" + id
|
|
})
|
|
},
|
|
toHomePage(mid){
|
|
App.navigationTo({
|
|
url: 'pages/subPages/homepage/homepage/homepage?mid=' + mid + '&checkType=' + 1
|
|
});
|
|
},
|
|
handlerScroll(){
|
|
if(this.scrollLock){
|
|
clearTimeout(this.scrollTimer);
|
|
}
|
|
this.scrollTimer = setTimeout(()=>{
|
|
this.scrollLock = false;
|
|
this.stopVideo++;
|
|
}, 500)
|
|
},
|
|
changePlay(e){
|
|
this.stopVideo++;//先关闭上一个播放的按钮，再改变当前播放索引=最新播放视频索引
|
|
this.currentPlay = e;
|
|
}
|
|
},
|
|
onShareAppMessage(res){
|
|
let _this = this;
|
|
let listId;
|
|
if (res.from === 'button') {// 来自页面内分享按钮
|
|
listId = res.target.id;
|
|
// let title = res.target.dataset.title;
|
|
}else{//右上角按钮
|
|
listId = this.id;
|
|
}
|
|
App._post_form('&p=pocket&do=shareNum', { id: listId }, res => {
|
|
if(listId == _this.id){
|
|
_this.detailinfo.share++;
|
|
}else{
|
|
for(let index=0;index<_this.communityList.length;index++){
|
|
if(_this.communityList[index].id == listId){
|
|
_this.communityList[index].share++;
|
|
}
|
|
}
|
|
}
|
|
setTimeout(()=>{
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '分享成功',
|
|
duration: 2000
|
|
});
|
|
}, 2000)
|
|
});
|
|
return {
|
|
title: '粤职才',
|
|
path: '/pagesA/pictureTextDetails/pictureTextDetails?id='+listId
|
|
}
|
|
},
|
|
onPageScroll(){
|
|
//页面滚动，视频暂停
|
|
this.scrollLock = true;
|
|
this.handlerScroll();
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.dis-flex{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.comment-item{
|
|
padding: 10px 0px;
|
|
border-bottom: 1px solid #efefef;
|
|
.avatar2{
|
|
width: 30px;
|
|
height: 30px;
|
|
background-color: #000;
|
|
border-radius: 50%;
|
|
margin-right: 8px;
|
|
}
|
|
.name{
|
|
font-size: 13px;
|
|
flex: 1;
|
|
}
|
|
.comment-num{
|
|
padding: 2px 8px;
|
|
border-radius: 20px;
|
|
background-color: #efefef;
|
|
margin-right: 8px;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
.reply-wrapper{
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
z-index: 9;
|
|
width: 560rpx;
|
|
height: 430rpx;
|
|
background-color: #fff;
|
|
border-radius: 20px;
|
|
transform: translate(-50%, -50%);
|
|
box-shadow: 0px 0px 3px 0px rgba(0,0,0,.05);
|
|
|
|
.my-text{
|
|
padding: 50rpx 30rpx;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
</style>
|
|
|