苹果手机 两个按钮同时出现 调整一下
This commit is contained in:
parent
2e0e1cb76e
commit
7b8fadc109
|
|
@ -27,6 +27,7 @@
|
|||
<uni-icons type="down" size="24" color="#007aff"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<div class="btn" @click="openComment">发一条新评论</div>
|
||||
</view>
|
||||
</template>
|
||||
<!-- 空盒子 -->
|
||||
|
|
@ -143,6 +144,9 @@
|
|||
// this.isLoading = false;
|
||||
// }, 1000);
|
||||
},
|
||||
openComment() {//点击发布新评论按钮
|
||||
this.$refs.cPopupRef.open();
|
||||
},
|
||||
treeTransForm(data) {
|
||||
let newData = JSON.parse(JSON.stringify(data));
|
||||
let result = [];
|
||||
|
|
@ -222,10 +226,10 @@
|
|||
params.user_name=this.tableData.user_name;
|
||||
} else {
|
||||
params.id = this.tableData.id;
|
||||
params.parent_id = item.item1?.parent_id ?? item.item1.id;
|
||||
params.reply_id = item.item1.id;
|
||||
params.parent_id = this.tableData.parent_id;
|
||||
params.reply_id = this.tableData.reply_id;
|
||||
params.user_name=this.tableData.user_name;
|
||||
params.reply_name = item.item2 ? item.item2.user_name : item.item1.user_name;
|
||||
params.reply_name = this.tableData.user_name
|
||||
|
||||
}
|
||||
params = {
|
||||
|
|
@ -368,6 +372,19 @@
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.btn {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 20rpx;
|
||||
margin: 9px;
|
||||
border-radius: 20rpx;
|
||||
background-color: #2979ff;
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
z-index: 0;
|
||||
width: 90%;
|
||||
left:0;
|
||||
}
|
||||
////////////////////////
|
||||
.center {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,503 @@
|
|||
<template>
|
||||
|
||||
<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="loadMore">
|
||||
<!-- <view class="c_total">评论 {{ tableTotal }}</view> -->
|
||||
<template v-if="dataList && dataList.length">
|
||||
<view class="c_comment" v-for="(item1, index1) in dataList" :key="item1.id">
|
||||
<!-- 一级评论 -->
|
||||
<CommonComp :data="item1" />
|
||||
<!-- 下边三个方法是 一级评论点击回复 -->
|
||||
<!-- @likeClick="() => likeClick({ item1, index1 })"
|
||||
@replyClick="() => replyClick({ item1, index1 })"
|
||||
@deleteClick="() => deleteClick({ item1, index1 })" -->
|
||||
<view class="children_item" v-if="item1.children && item1.children.length">
|
||||
<!-- 二级评论 -->
|
||||
<CommonComp v-for="(item2, index2) in item1.childrenShow" :key="item2.id" :data="item2"
|
||||
:pData="item1" />
|
||||
<!-- 下边三个方法是 二级评论点击回复 -->
|
||||
<!-- @likeClick="() => likeClick({ item1, index1, item2, index2 })"
|
||||
@replyClick="() => replyClick({ item1, index1, item2, index2 })"
|
||||
@deleteClick="() => deleteClick({ item1, index1, item2, index2 })" -->
|
||||
<!-- 展开折叠的二级评论 -->
|
||||
<view class="expand_reply" v-if="expandTxtShow({ item1, index1 })"
|
||||
@tap="() => expandReplyFun({ item1, index1 })">
|
||||
<span class="txt">
|
||||
展开{{ item1.children.length - item1.childrenShow.length }}条回复
|
||||
</span>
|
||||
<uni-icons type="down" size="24" color="#007aff"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<div class="btn" @click="openComment">发一条新评论</div>
|
||||
</view>
|
||||
</template>
|
||||
<!-- 空盒子 -->
|
||||
<view class="empty_box" v-else>
|
||||
<uni-icons type="chatboxes" size="36" color="#c0c0c0"></uni-icons>
|
||||
<view>
|
||||
<span class="txt"> 这里是一片荒草地, </span>
|
||||
<span class="txt click" @click="() => newCommentFun()">说点什么...</span>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 评论弹窗 -->
|
||||
<uni-popup ref="cPopupRef" type="bottom" @change="popChange">
|
||||
<view class="c_popup_box">
|
||||
<view class="reply_text">
|
||||
<template v-if="Object.keys(replyTemp).length">
|
||||
<span class="text_aid">回复给</span>
|
||||
<span class="text_main">{{
|
||||
replyTemp.item1.item2
|
||||
? replyTemp.item1.item2.user_name
|
||||
: replyTemp.item1.item1.user_name
|
||||
}}</span>
|
||||
</template>
|
||||
<span v-else class="text_main">发表新评论</span>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="text_area">
|
||||
<uni-easyinput class="text_area" type="textarea" v-model="commentValue"
|
||||
:placeholder="commentPlaceholder" :focus="focus" trim autoHeight
|
||||
maxlength="300"></uni-easyinput>
|
||||
</view>
|
||||
<view class="send_btn" @tap="() => sendClick()">发送</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
<!-- 删除弹窗 -->
|
||||
<uni-popup ref="delPopupRef" type="dialog">
|
||||
<uni-popup-dialog mode="base" title="" content="确定删除这条评论吗?" :before-close="true" @close="delCloseFun"
|
||||
@confirm="delConfirmFun"></uni-popup-dialog>
|
||||
</uni-popup>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CommonComp from "./componets/common";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CommonComp
|
||||
},
|
||||
props: {
|
||||
userInfo: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
tableTotal: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
deleteMode: {
|
||||
type: String,
|
||||
default: "all"
|
||||
},
|
||||
showPopup: {
|
||||
type: Boolean,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false, // 是否正在加载
|
||||
dataList: [],
|
||||
replyTemp: {},
|
||||
isNewComment: false,
|
||||
focus: false,
|
||||
commentValue: "",
|
||||
commentPlaceholder: "说点什么...",
|
||||
delTemp: {},
|
||||
index: 0,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
tableData: {
|
||||
handler(newVal) {
|
||||
if (newVal.length !== this.dataList.length) {
|
||||
this.dataList = this.treeTransForm(newVal);
|
||||
console.log("this.dataList:", this.dataList);
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
onPageScroll : function(e) { //nvue暂不支持滚动监听，可用bindingx代替
|
||||
console.log("滚动距离为：" + e.scrollTop);
|
||||
},
|
||||
mounted() {
|
||||
console.log("this.tableData",this.tableData)
|
||||
},
|
||||
methods: {
|
||||
loadMore() {
|
||||
if (this.isLoading) return;
|
||||
this.isLoading = true;
|
||||
if(this.openLoadMore){
|
||||
this.$emit("loadMore")
|
||||
}
|
||||
console.log(111)
|
||||
// 模拟异步加载数据的过程
|
||||
// setTimeout(() => {
|
||||
// const moreData = [...Array(20).keys()].map(i => `Item ${this.list.length + i + 1}`);
|
||||
// this.list.push(...moreData);
|
||||
// this.isLoading = false;
|
||||
// }, 1000);
|
||||
},
|
||||
openComment() {//点击发布新评论按钮
|
||||
this.$refs.cPopupRef.open();
|
||||
},
|
||||
treeTransForm(data) {
|
||||
let newData = JSON.parse(JSON.stringify(data));
|
||||
let result = [];
|
||||
let map = {};
|
||||
newData.forEach((item, i) => {
|
||||
item.owner = item.id === this.userInfo.id;
|
||||
map[item.id] = item;
|
||||
});
|
||||
newData.forEach((item) => {
|
||||
let parent = map[item.parent_id];
|
||||
if (parent) {
|
||||
(parent.children || (parent.children = [])).push(item);
|
||||
if (parent.children.length === 1) {
|
||||
(parent.childrenShow = []).push(item);
|
||||
}
|
||||
} else {
|
||||
result.push(item);
|
||||
}
|
||||
});
|
||||
return result;
|
||||
},
|
||||
setLike(item) {
|
||||
item.is_like = !item.is_like;
|
||||
item.like_count = item.is_like ? item.like_count + 1 : item.like_count - 1;
|
||||
},
|
||||
likeClick({
|
||||
item1,
|
||||
index1,
|
||||
item2,
|
||||
index2
|
||||
}) {
|
||||
let item = item2 || item1;
|
||||
this.setLike(item);
|
||||
this.$emit("likeFun", {
|
||||
params: item
|
||||
}, (res) => {
|
||||
this.setLike(item);
|
||||
});
|
||||
},
|
||||
replyClick(item1, index1, item2, index2) {
|
||||
this.replyTemp = JSON.parse(JSON.stringify({
|
||||
item1,
|
||||
index1,
|
||||
item2,
|
||||
index2
|
||||
}));
|
||||
console.log(this.replyTemp, "===========");
|
||||
this.$refs.cPopupRef.open();
|
||||
},
|
||||
newCommentFun() {
|
||||
this.isNewComment = true;
|
||||
this.$refs.cPopupRef.open();
|
||||
},
|
||||
popChange(e) {
|
||||
if (!e.show) {
|
||||
this.commentValue = "";
|
||||
this.replyTemp = {};
|
||||
this.isNewComment = false;
|
||||
}
|
||||
this.focus = e.show;
|
||||
},
|
||||
sendClick() {
|
||||
let {
|
||||
item1,
|
||||
index1,
|
||||
item2,
|
||||
index2
|
||||
} = this.replyTemp;
|
||||
let item = item2 || item1;
|
||||
console.log('item=====', item);
|
||||
let params = {};
|
||||
if (this.isNewComment) {
|
||||
params.id = this.tableData.id;
|
||||
params.parent_id = this.tableData.parent_id;
|
||||
params.reply_id = this.tableData.reply_id;
|
||||
params.reply_name = this.tableData.reply_name;
|
||||
params.user_name=this.tableData.user_name;
|
||||
} else {
|
||||
params.id = this.tableData.id;
|
||||
params.parent_id = item.item1?.parent_id ?? item.item1.id;
|
||||
params.reply_id = item.item1.id;
|
||||
params.user_name=this.tableData.user_name;
|
||||
params.reply_name = item.item2 ? item.item2.user_name : item.item1.user_name;
|
||||
|
||||
}
|
||||
params = {
|
||||
...params,
|
||||
user_avatar: this.tableData.filePath?this.tableData.filePath:'../../static/logo.png',
|
||||
user_content: this.commentValue,
|
||||
is_like: false,
|
||||
like_count: 0,
|
||||
create_time: this.tableData.createTime,
|
||||
owner: true
|
||||
};
|
||||
|
||||
uni.showLoading({
|
||||
title: "正在发送",
|
||||
mask: true
|
||||
});
|
||||
console.log("params======。",this.tableData)
|
||||
if(this.showPopup==true){
|
||||
this.$refs.cPopupRef.close();
|
||||
}
|
||||
this.$emit("replyFun", {
|
||||
params
|
||||
}, (res) => {
|
||||
console.log(11)
|
||||
uni.hideLoading();
|
||||
params = {
|
||||
...params,
|
||||
id: res.id
|
||||
};
|
||||
if (this.isNewComment) {
|
||||
console.log(22)
|
||||
this.dataList.push(params);
|
||||
} else {
|
||||
console.log("44",this.dataList);
|
||||
let c_data = this.dataList[item.index1];
|
||||
(c_data.children || (c_data.children = [])).push(params);
|
||||
if (
|
||||
c_data.children.length === (c_data.childrenShow || (c_data.childrenShow = [])).length +
|
||||
1
|
||||
) {
|
||||
c_data.childrenShow.push(params);
|
||||
}
|
||||
}
|
||||
this.$emit("update:tableTotal", this.tableTotal + 1);
|
||||
});
|
||||
this.$refs.cPopupRef.close();
|
||||
},
|
||||
deleteClick(item1, index1, item2, index2) {
|
||||
this.delTemp = JSON.parse(JSON.stringify({
|
||||
item1,
|
||||
index1,
|
||||
item2,
|
||||
index2
|
||||
}));
|
||||
this.$refs.delPopupRef.open();
|
||||
},
|
||||
delCloseFun() {
|
||||
this.delTemp = {};
|
||||
this.$refs.delPopupRef.close();
|
||||
},
|
||||
delConfirmFun({
|
||||
item1,
|
||||
index1,
|
||||
item2,
|
||||
index2
|
||||
} = this.delTemp) {
|
||||
let c_data = this.dataList[index1];
|
||||
uni.showLoading({
|
||||
title: "正在删除",
|
||||
mask: true
|
||||
});
|
||||
if (index2 >= 0) {
|
||||
this.$emit("deleteFun", {
|
||||
params: [c_data.children[index2].id]
|
||||
}, (res) => {
|
||||
uni.hideLoading();
|
||||
this.$emit("update:tableTotal", this.tableTotal - 1);
|
||||
c_data.children.splice(index2, 1);
|
||||
c_data.childrenShow.splice(index2, 1);
|
||||
});
|
||||
} else {
|
||||
if (c_data.children && c_data.children.length) {
|
||||
switch (this.deleteMode) {
|
||||
case "bind":
|
||||
c_data.user_content = "当前评论内容已被移除";
|
||||
break;
|
||||
case "only":
|
||||
this.$emit("deleteFun", {
|
||||
mode: this.deleteMode,
|
||||
params: [c_data.id]
|
||||
}, (res) => {
|
||||
uni.hideLoading();
|
||||
this.$emit("update:tableTotal", this.tableTotal - c_data.children.length + 1);
|
||||
this.dataList.splice(index1, 1);
|
||||
});
|
||||
break;
|
||||
default:
|
||||
let delIdArr = [c_data.id];
|
||||
c_data.children.forEach((_, i) => {
|
||||
delIdArr.push(_.id);
|
||||
});
|
||||
this.$emit("deleteFun", {
|
||||
params: delIdArr,
|
||||
mode: this.deleteMode
|
||||
}, (res) => {
|
||||
uni.hideLoading();
|
||||
this.$emit("update:tableTotal", this.tableTotal - c_data.children.length + 1);
|
||||
this.dataList.splice(index1, 1);
|
||||
});
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
this.$emit("deleteFun", {
|
||||
params: [c_data.id]
|
||||
}, (res) => {
|
||||
uni.hideLoading();
|
||||
this.$emit("update:tableTotal", this.tableTotal - 1);
|
||||
this.dataList.splice(index1, 1);
|
||||
});
|
||||
}
|
||||
}
|
||||
this.delCloseFun();
|
||||
},
|
||||
expandTxtShow(item1, index1) {
|
||||
return (
|
||||
item1.childrenShow &&
|
||||
item1.childrenShow.length &&
|
||||
item1.children.length - item1.childrenShow.length
|
||||
);
|
||||
},
|
||||
expandReplyFun(item1, index1) {
|
||||
let csLen = this.dataList[index1].childrenShow.length;
|
||||
this.dataList[index1].childrenShow.push(
|
||||
...this.dataList[index1].children.slice(csLen, csLen + 6)
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.btn {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 20rpx;
|
||||
margin: 9px;
|
||||
border-radius: 20rpx;
|
||||
background-color: #2979ff;
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
z-index: 0;
|
||||
width: 90%;
|
||||
left:0;
|
||||
}
|
||||
////////////////////////
|
||||
.center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
////////////////////////
|
||||
.scroll-Y {
|
||||
height: 940rpx;
|
||||
}
|
||||
.scroll-view_H {
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
.scroll-view-item {
|
||||
height: 300rpx;
|
||||
line-height: 300rpx;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.scroll-view-item_H {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
line-height: 300rpx;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
// .template-view {
|
||||
// height: 430px;
|
||||
// overflow: auto;
|
||||
// }
|
||||
|
||||
.c_total {
|
||||
padding: 20rpx 30rpx 0 30rpx;
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.empty_box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding: 150rpx 10rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
.txt {
|
||||
color: $uni-text-color-disable;
|
||||
}
|
||||
|
||||
.click {
|
||||
color: $uni-color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.c_comment {
|
||||
padding: 20rpx 30rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
.children_item {
|
||||
padding: 20rpx 30rpx;
|
||||
margin-top: 10rpx;
|
||||
margin-left: 80rpx;
|
||||
|
||||
// background-color: $uni-bg-color-grey;
|
||||
.expand_reply {
|
||||
margin-top: 10rpx;
|
||||
margin-left: 80rpx;
|
||||
|
||||
.txt {
|
||||
font-weight: 600;
|
||||
color: $uni-color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c_popup_box {
|
||||
background-color: #fff;
|
||||
|
||||
.reply_text {
|
||||
@extend .center;
|
||||
padding: 20rpx 20rpx 0 20rpx;
|
||||
font-size: 26rpx;
|
||||
|
||||
.text_aid {
|
||||
color: $uni-text-color-grey;
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
|
||||
.text_main {}
|
||||
}
|
||||
|
||||
.content {
|
||||
@extend .center;
|
||||
|
||||
.text_area {
|
||||
flex: 1;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.send_btn {
|
||||
@extend .center;
|
||||
justify-content: center;
|
||||
width: 120rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
background-color: $uni-color-primary;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -99,7 +99,7 @@
|
|||
<uni-popup class="uni-popup" type="bottom" ref="pinglun" @touchmove.stop.prevent="moveHandle">
|
||||
<view class="popup-content" :style="'width: '+ windowWidth +'px; height: '+ (boxStyle.height/heightNum) +'px;'">
|
||||
<CComment ref="ccRef" :showPopup="showPopup" :userInfo="userInfo" :tableData="tableData" :tableTotal="tableTotal" likeFun="likeFun" @replyFun="replyFun" @deleteFun="deleteFun" :deleteMode="deleteMode"></CComment>
|
||||
<div class="btn" @click="openComment">发一条新评论</div>
|
||||
<!-- <div class="btn" @click="openComment">发一条新评论</div> -->
|
||||
<!-- <douyin-scrollview
|
||||
:Width="windowWidth"
|
||||
:Height="(boxStyle.height/1.23)"
|
||||
|
|
|
|||
Loading…
Reference in New Issue