303 lines
8.9 KiB
Vue
303 lines
8.9 KiB
Vue
<template>
|
||
<view class=" call-message">
|
||
<view class="comment-list v12-pa-3">
|
||
<view
|
||
v-for="(comment, index) in list"
|
||
:key="index"
|
||
class="v12-mt-2"
|
||
>
|
||
<view class="user-info v12-align-center" @click="toInfo(comment)">
|
||
<view class="user-avatar">
|
||
<u-avatar :src="comment.senderUserAvatar"></u-avatar>
|
||
</view>
|
||
<view class="user-name v12-ml-3">
|
||
<view class="v12-font-bold v12-dark-text v12-font-32">
|
||
<text>{{ comment.senderUserNickname }}</text>
|
||
<text v-if="comment.senderIsAdmin" class="v12-ml-1 v12-primary v12-white-text v12-font-24 v12-font-weight-400 v12-px-1 v12-radius-8">
|
||
{{ '店主' }}
|
||
</text>
|
||
</view>
|
||
<view class="v12-font-22 v12-dark2-text v12-mt-1">
|
||
<text>{{ (comment.isRootReply ? ' 评论了你的资讯内容 ' : '回复了你的评论 ') + timeFormat(comment.senderTime) }}</text>
|
||
<text v-if="comment.at">
|
||
{{ ' 回复 ' + comment.at.atNickName }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="user-info v12-d-flex" >
|
||
<view class="user-avatar" @click="toInfo(comment)">
|
||
<view style="opacity: 0;">
|
||
<u-avatar></u-avatar>
|
||
</view>
|
||
</view>
|
||
<view class="user-name v12-ml-3" >
|
||
<view
|
||
v-if="!comment.isRootReply"
|
||
class="v12-font-30 v12-font-bold v12-my-2 v12-dark-text"
|
||
@click="toInfo(comment)"
|
||
>
|
||
<!-- {{ comment.parentReply }} -->
|
||
<!-- <text class="v12-dark1-text">{{ "@" + comment.senderUserNickname }}</text> -->
|
||
{{ comment.parentReply }}
|
||
</view>
|
||
<view class="v12-font-28 v12-dark2-text" @click="toInfo(comment)">
|
||
<text
|
||
v-if="comment.replyAt"
|
||
class="v12-dark1-text"
|
||
>{{ "@" + comment.replyAt.atNickName + ' ' }}</text>
|
||
{{ comment.reply }}
|
||
</view>
|
||
<view class="v12-mt-3">
|
||
<u-button
|
||
size="normal"
|
||
:customStyle="{
|
||
backgroundColor: '#eee',
|
||
width: '160rpx',
|
||
height: '50rpx',
|
||
border: '1px solid #eee',
|
||
color: '#777',
|
||
margin: 0
|
||
}"
|
||
plain
|
||
icon="chat"
|
||
shape="circle"
|
||
iconColor="#777"
|
||
@click.stop="showSendBtn(comment)"
|
||
>回复</u-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<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"
|
||
:maxheight="200"
|
||
:autoHeight="content.length < 40 ? true : false"
|
||
:showConfirmBar="false"
|
||
:focus="autoFocus"
|
||
:cursor="cursorIndex"
|
||
: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>
|
||
<u--text
|
||
v-if="currentComment.senderUserNickname"
|
||
:text="'@' + currentComment.senderUserNickname"
|
||
margin="0 3px 0 0"
|
||
type="tips"
|
||
></u--text>
|
||
</view>
|
||
</template>
|
||
</u-textarea>
|
||
</view>
|
||
<view class="v12-primary v12-white-text send-btn" @click="replyMessageHandle">
|
||
发送
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getMessageList, replyMessage } from '@/api/rooms'
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 消息列表
|
||
list: [
|
||
// parentReply string 被回复的原始评论
|
||
// reply string 回复评论内容
|
||
// contentId int 评论的目标内容ID
|
||
// contentType string 评论的目标内容类型
|
||
// senderUid int 发送者ID
|
||
// senderUserAvatar string 发送者头像
|
||
// senderUserNickname string 发送者昵称
|
||
// senderIsAdmin boolean 发送者是否是店主
|
||
// senderTime string 发送时间（yyyy-MM-dd HH:mm:ss）
|
||
// {
|
||
// contentId: 1,
|
||
// parentReply: '这是一条评论',
|
||
// reply: '这是一条回复',
|
||
// contentType: 'hotelNews',
|
||
// senderUid: 1,
|
||
// senderUserAvatar: '',
|
||
// senderIsAdmin: true,
|
||
// senderUserNickname: '张三',
|
||
// senderTime: '2022-01-01 00:00:00',
|
||
// }
|
||
],
|
||
// 是否自动聚焦
|
||
autoFocus: false,
|
||
// 资源路径
|
||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||
// 是否显示发送按钮
|
||
showBtn: false,
|
||
content: '',
|
||
currentComment: {},
|
||
// 光标位置
|
||
cursorIndex: 0
|
||
}
|
||
},
|
||
onShow() {
|
||
this.fetchList()
|
||
},
|
||
methods: {
|
||
toInfo(comment) {
|
||
this.$yrouter.push('/pagesInn/inn/innInfoDetail?id=' + comment.contentId)
|
||
},
|
||
/**
|
||
* 格式化时间
|
||
* @param {*} time
|
||
* @returns 返回yyyy-MM-dd 格式
|
||
*/
|
||
timeFormat(time) {
|
||
const date = new Date(time)
|
||
const year = date.getFullYear()
|
||
const month = date.getMonth() + 1
|
||
const day = date.getDate()
|
||
return `${year}-${month}-${day}`
|
||
},
|
||
commentInputChange(e) {
|
||
// 若删除直接将@用户名整个删除
|
||
if (e === '') {
|
||
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)
|
||
}
|
||
},
|
||
commentInputFocus(e) {
|
||
// this.prefixIcon = ''
|
||
},
|
||
/**
|
||
* 发送消息
|
||
*/
|
||
showSendBtn(item) {
|
||
// 显示发送按钮
|
||
this.showBtn = true
|
||
this.currentComment = item
|
||
this.content = '@' + item.senderUserNickname + ' '
|
||
this.cursorIndex = this.content.length
|
||
this.$nextTick(() => {
|
||
// 延迟100ms，否则无法聚焦
|
||
setTimeout(() => {
|
||
// 自动聚焦
|
||
this.autoFocus = true
|
||
}, 100)
|
||
})
|
||
},
|
||
/**
|
||
* 失焦
|
||
*/
|
||
onBlur() {
|
||
// 隐藏发送按钮
|
||
this.showBtn = false
|
||
// 取消自动聚焦
|
||
this.autoFocus = false
|
||
},
|
||
/**
|
||
* 回复消息
|
||
* @param {*} item 消息数据
|
||
*/
|
||
replyMessageHandle() {
|
||
if(!this.currentComment.senderUserNickname) {
|
||
// 未选择需要回复的用户，提示
|
||
uni.showToast({
|
||
title: '请选择需要回复的用户',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
if(this.content.trim() === ('@' + this.currentComment.senderUserNickname)) {
|
||
// 请输入回复内容
|
||
uni.showToast({
|
||
title: '请输入回复内容',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
// 点击弹出回复框，输入回复内容，点击发送按钮，发送回复消息
|
||
uni.showLoading({
|
||
mask: true
|
||
})
|
||
const params = {
|
||
// 评论的目标内容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()
|
||
}).finally(() => {
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
/**
|
||
* 查询消息列表
|
||
*/
|
||
fetchList() {
|
||
const params = {
|
||
page: 1,
|
||
limit: 999999
|
||
}
|
||
getMessageList(params).then(res => {
|
||
this.list = res.data.records
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.call-message{
|
||
background: #fff;
|
||
}
|
||
.send-btn{
|
||
width: 96rpx;
|
||
height: 70rpx;
|
||
background: #C52733;
|
||
color: #fff;
|
||
border-radius: 16rpx;
|
||
line-height: 70rpx;
|
||
text-align: center;
|
||
margin-left: 30rpx;
|
||
padding: 0 20rpx;
|
||
}
|
||
.sticky-bottom{
|
||
position: fixed;
|
||
bottom: 0;
|
||
width: 100%;
|
||
background: #fff;
|
||
box-sizing: border-box;
|
||
}
|
||
.user-info{
|
||
view{
|
||
word-break: break-all;
|
||
}
|
||
}
|
||
</style> |