liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor(评论):1、回复内容应去掉@xxx；2、增加逻辑判断

Browse Source
This commit is contained in:
lifizer
2025-07-15 17:17:03 +08:00
parent 2629e5d849
commit e96339e7e2
2 changed files with 117 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pagesInn/inn/innInfoDetail.vue
+60 -53
View File
@@ -143,7 +143,7 @@
<view class="user-name v12-ml-3">
<view class="v12-font-28 v12-dark-text">
<text class="v12-dark1-text">{{ "@" +_comment.at.atNickName }}</text>
{{ ' ' + _comment.reply.split(' ')[1] }}
{{ ' ' + _comment.reply }}
</view>
</view>
</view>
@@ -160,17 +160,18 @@
<view class="comment-input-wrap">
<view style="width: 100%;">
<u-textarea
@focus="commentInputFocus"
@change="commentInputChange"
v-model="reply"
:prefixIcon="prefixIcon"
:maxlength="500"
:maxheight="200"
class="comment-input"
:showConfirmBar="false"
cursorSpacing="15"
v-model="reply"
:autoHeight="reply.length < 40 ? true : false"
placeholder="分享你的观点，让世界听见你的声音...">
cursorSpacing="15"
placeholder="分享你的观点，让世界听见你的声音..."
class="comment-input"
@focus="commentInputFocus"
@change="commentInputChange"
>
<template slot="prefix">
<view class="v12-align-center">
@@ -193,9 +194,8 @@
</template>
<script>
import { getHotelNewsDetail, getHotelNewsZan, getCommentList, addComment } from "@/api/inn";
import { getHotelNewsDetail, getHotelNewsZan, getCommentList, addComment } from "@/api/inn"
import imgBox from '@/components/imageTypeSet/imagebox.vue'
export default {
components: {
imgBox
@@ -210,11 +210,11 @@ export default {
atUid: '',
currentComment: {},
prefixIcon: 'edit-pen'
};
}
},
onLoad(options) {
this.id = options.id;
this.init();
this.id = options.id
this.init()
},
methods: {
showMoreComment(comment) {
@@ -223,15 +223,16 @@ export default {
contentType: "hotelNews",
rootReplyId: comment.id,
page: 1,
limit: 99999,
limit: 99999
}
uni.showLoading({
mask: true,
});
mask: true
})
getCommentList(params).then((res) => {
uni.hideLoading();
comment.children = res.data.records
comment.hasMoreChildren = false
}).finally(() => {
uni.hideLoading()
})
},
commentInputChange(e) {
@@ -244,15 +245,15 @@ export default {
const usernameLength = `@${this.currentComment.userNickName} `.length
if(!e.includes(`@${this.currentComment.userNickName} `) && this.currentComment.userNickName) {
this.currentComment = {}
this.reply = e.slice(usernameLength - 1); // 去除@用户名
// 去除@用户名
this.reply = e.slice(usernameLength - 1)
}
},
commentInputFocus(e) {
// this.prefixIcon = ''
},
selectComment(comment) {
this.currentComment = comment;
// this.prefixIcon = ''
this.currentComment = comment
this.reply = '@' + comment.userNickName + ' '
},
/**
@@ -265,22 +266,22 @@ export default {
* 4. 超过7天，显示日期 xxxx年xx月xx日
*/
formatterTime(time) {
const now = new Date();
const date = new Date(time);
const diff = now - date;
const diffMin = Math.floor(diff / 1000 / 60);
const diffHour = Math.floor(diff / 1000 / 60 / 60);
const diffDay = Math.floor(diff / 1000 / 60 / 60 / 24);
const now = new Date()
const date = new Date(time)
const diff = now - date
const diffMin = Math.floor(diff / 1000 / 60)
const diffHour = Math.floor(diff / 1000 / 60 / 60)
const diffDay = Math.floor(diff / 1000 / 60 / 60 / 24)
if (diffMin < 1) {
return "刚刚";
return "刚刚"
} else if (diffHour < 1) {
return diffMin + "分钟前";
return diffMin + "分钟前"
} else if (diffDay < 1) {
return diffHour + "小时前";
return diffHour + "小时前"
} else if (diffDay < 7) {
return diffDay + "天前";
return diffDay + "天前"
} else {
return date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日";
return date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日"
}
},
/**
@@ -294,28 +295,36 @@ export default {
})
return
}
if(this.reply.trim() === ('@' + this.currentComment.userNickName)) {
// 请输入回复内容
uni.showToast({
title: '请输入回复内容',
icon: 'none'
})
return
}
uni.showLoading({
mask: true,
});
mask: true
})
const params = {
contentId: this.id,
contentType: 'hotelNews',
parentReplyId: this.currentComment.parentId || this.currentComment.id,
reply: this.reply,
atUid: this.currentComment.uid || null,
reply: (this.reply.replace('@' + this.currentComment.userNickName, '')).trim(),
atUid: this.currentComment.uid || null
}
addComment(params).then((res) => {
console.log(res);
uni.hideLoading();
this.init()
this.reply = ''
this.currentComment = {}
this.item.replyCount === null ? this.item.replyCount = 1 : this.item.replyCount++
}).finally(() => {
uni.hideLoading()
})
},
init() {
getHotelNewsDetail(this.id).then(({ data }) => (this.item = data));
this.getComment();
getHotelNewsDetail(this.id).then(({ data }) => (this.item = data))
this.getComment()
},
// contentId int 评论的目标内容ID，必传
// contentType string 评论的目标内容类型，必传（店铺资讯传入值hotelNews）
@@ -327,28 +336,26 @@ export default {
contentId: this.id,
contentType: "hotelNews",
page: 1,
limit: 99999,
limit: 99999
}
getCommentList(params).then((res) => {
console.log(res);
this.comments = res.data.records
}).finally(() => {
uni.hideLoading()
})
},
likeInfo() {
uni.showLoading({
mask: true,
});
getHotelNewsZan(this.id)
.then((res) => {
uni.hideLoading();
getHotelNewsDetail(this.id).then(({ data }) => (this.item = data));
})
.catch((err) => {
uni.hideLoading();
});
},
},
};
mask: true
})
getHotelNewsZan(this.id).then((res) => {
getHotelNewsDetail(this.id).then(({ data }) => (this.item = data))
}).finally(() => {
uni.hideLoading()
})
}
}
}
</script>
<style lang="less">
pkg_common/views/message.vue
+57 -44
View File
@@ -34,16 +34,12 @@
{{ comment.parentReply }}
</view>
<view class="v12-font-28 v12-dark2-text" @click="toInfo(comment)">
<text class="v12-dark1-text">{{ "@" +comment.senderUserNickname }}</text>
{{ ' ' + comment.reply.split(' ')[1] }}
<text class="v12-dark1-text">{{ "@" + comment.senderUserNickname }}</text>
{{ ' ' + comment.reply }}
</view>
<view class="v12-mt-3">
<u-button
plain
icon="chat"
shape="circle"
<u-button
size="normal"
@click.stop="showSendBtn(comment)"
:customStyle="{
backgroundColor: '#eee',
width: '160rpx',
@@ -52,8 +48,12 @@
color: '#777',
margin: 0
}"
plain
icon="chat"
shape="circle"
iconColor="#777"
>回复</u-button>
@click.stop="showSendBtn(comment)"
>回复</u-button>
</view>
</view>
</view>
@@ -63,23 +63,24 @@
<view v-if="showBtn" class="v12-align-center v12-justify-center v12-pa-3 v12-white sticky-bottom">
<view style="width: 100%">
<u-textarea
id="input"
v-model="content"
:maxlength="500"
@blur="onBlur"
@focus="commentInputFocus"
@change="commentInputChange"
:maxheight="200"
:autoHeight="content.length < 40 ? true : false"
:showConfirmBar="false"
:focus="autoFocus"
id="input"
:cursor="cursorIndex"
cursorSpacing="85"
:customStyle="{
backgroundColor: '#f7f7f7',
border: '1px solid #f7f7f7',
borderRadius: '20rpx'
}">
}"
cursorSpacing="85"
@blur="onBlur"
@focus="commentInputFocus"
@change="commentInputChange"
>
<template slot="prefix">
<view class="v12-align-center">
<u-icon :name="'edit-pen'"></u-icon>
@@ -93,7 +94,7 @@
</template>
</u-textarea>
</view>
<view class="v12-primary v12-white-text send-btn" @click="replyMessage">
<view class="v12-primary v12-white-text send-btn" @click="replyMessageHandle">
发送
</view>
</view>
@@ -105,6 +106,7 @@ import { getMessageList, replyMessage } from '@/api/rooms'
export default {
data() {
return {
// 消息列表
list: [
// parentReply string 被回复的原始评论
// reply string 回复评论内容
@@ -126,17 +128,21 @@ export default {
// senderUserNickname: '张三',
// senderTime: '2022-01-01 00:00:00',
// }
], // 消息列表
autoFocus: false, // 是否自动聚焦
webUrl: this.$VUE_APP_RESOURCES_URL, // 资源路径
showBtn: false, // 是否显示发送按钮
],
// 是否自动聚焦
autoFocus: false,
// 资源路径
webUrl: this.$VUE_APP_RESOURCES_URL,
// 是否显示发送按钮
showBtn: false,
content: '',
currentComment: {},
cursorIndex: 0 // 光标位置
// 光标位置
cursorIndex: 0
}
},
onShow() {
this.fetchList() // 查询消息列表
this.fetchList()
},
methods: {
toInfo(comment) {
@@ -160,12 +166,12 @@ export default {
this.currentComment = {}
return
}
// 若删除@用户名，将@用户名整个删除
const usernameLength = `@${this.currentComment.senderUserNickname} `.length
if(!e.includes(`@${this.currentComment.senderUserNickname} `) && this.currentComment.senderUserNickname) {
this.currentComment = {}
this.content = e.slice(usernameLength - 1); // 去除@用户名
// 去除@用户名
this.content = e.slice(usernameLength - 1)
}
},
commentInputFocus(e) {
@@ -175,34 +181,36 @@ export default {
* 发送消息
*/
showSendBtn(item) {
console.log(item);
this.showBtn = true // 显示发送按钮
setTimeout(() => { // 延迟100ms，否则无法聚焦
this.autoFocus = true // 自动聚焦
// 显示发送按钮
this.showBtn = true
// 延迟100ms，否则无法聚焦
setTimeout(() => {
// 自动聚焦
this.autoFocus = true
this.currentComment = item
this.content = '@' + item.senderUserNickname + ' '
this.cursorIndex = this.content.length // 光标位置
this.cursorIndex = this.content.length
}, 100)
},
/**
* 失焦
*/
onBlur() {
this.showBtn = false // 隐藏发送按钮
this.autoFocus = false // 取消自动聚焦
// 隐藏发送按钮
this.showBtn = false
// 取消自动聚焦
this.autoFocus = false
},
/**
* 回复消息
* @param {*} item 消息数据
*/
replyMessage() {
replyMessageHandle() {
if(!this.currentComment.senderUserNickname) {
// 未选择需要回复的用户，提示
uni.showToast({
title: '请选择需要回复的用户',
icon: 'none',
icon: 'none'
})
return
}
@@ -210,33 +218,38 @@ export default {
// 请输入回复内容
uni.showToast({
title: '请输入回复内容',
icon: 'none',
icon: 'none'
})
return
}
// 点击弹出回复框，输入回复内容，点击发送按钮，发送回复消息
uni.showLoading({
mask: true, // 显示透明蒙层，防止触摸穿透，默认：false
mask: true
})
const params = {
contentId: this.currentComment.contentId, // 评论的目标内容ID，必传
contentType: 'hotelNews', // 评论的目标内容类型，必传（店铺资讯传入值hotelNews）
reply: this.content, // 评论内容，必传
atUid: this.currentComment.senderUid, // @的用户ID
parentReplyId: this.currentComment.parentReplyId // 回复的评论ID
// 评论的目标内容ID，必传
contentId: this.currentComment.contentId,
// 评论的目标内容类型，必传（店铺资讯传入值hotelNews）
contentType: 'hotelNews',
// 评论内容，必传
reply: this.content.replace('@' + this.currentComment.senderUserNickname, '').trim(),
// @的用户ID
atUid: this.currentComment.senderUid,
// 回复的评论ID
parentReplyId: this.currentComment.parentReplyId
}
replyMessage(params).then(res => {
this.fetchList() // 查询消息列表
this.fetchList()
}).finally(() => {
uni.hideLoading()
})
},
/**
* 查询消息列表
*/
fetchList() {
const params = {
page: 1, // 页码
page: 1,
limit: 999999
}
getMessageList(params).then(res => {