Feat：店铺资讯评论
This commit is contained in:
LinCyJang
@@ -0,0 +1,226 @@
|
||||
<template>
|
||||
<view class=" call-message">
|
||||
<view class="comment-list v12-pa-3">
|
||||
<view class="v12-mt-2" v-for="(comment, index) in list" :key="index">
|
||||
<view class="user-info v12-align-center">
|
||||
<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>{{ '回复了你的评论 ' + 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">
|
||||
<view style="opacity: 0;">
|
||||
<u-avatar></u-avatar>
|
||||
</view>
|
||||
</view>
|
||||
<view class="user-name v12-ml-3">
|
||||
<view class="v12-font-30 v12-font-bold v12-my-2 v12-dark-text">
|
||||
{{ comment.parentReply }}
|
||||
</view>
|
||||
<view class="v12-font-28 v12-dark2-text">
|
||||
{{ comment.reply }}
|
||||
</view>
|
||||
<view class="v12-mt-3">
|
||||
<u-button
|
||||
plain
|
||||
icon="chat"
|
||||
shape="circle"
|
||||
size="normal"
|
||||
@click="showSendBtn(comment)"
|
||||
:customStyle="{
|
||||
backgroundColor: '#eee',
|
||||
width: '160rpx',
|
||||
height: '50rpx',
|
||||
border: '1px solid #eee',
|
||||
color: '#777',
|
||||
margin: 0
|
||||
}"
|
||||
iconColor="#777"
|
||||
>回复</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-input
|
||||
v-model="content"
|
||||
focus
|
||||
@blur="showBtn = false"
|
||||
@focus="commentInputFocus"
|
||||
@change="commentInputChange"
|
||||
autoBlur
|
||||
id="input"
|
||||
:customStyle="{
|
||||
backgroundColor: '#f7f7f7',
|
||||
border: '1px solid #f7f7f7',
|
||||
borderRadius: '20rpx'
|
||||
}">
|
||||
<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-input>
|
||||
</view>
|
||||
<view class="v12-primary v12-white-text send-btn" @click="replyMessage">
|
||||
发送
|
||||
</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',
|
||||
// }
|
||||
], // 消息列表
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL, // 资源路径
|
||||
showBtn: false, // 是否显示发送按钮
|
||||
content: '',
|
||||
currentComment: {}
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.fetchList() // 查询消息列表
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 格式化时间
|
||||
* @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 split = e.split(' ')
|
||||
if(split[0] !== '' && this.currentComment.senderUserNickname) {
|
||||
this.currentComment = {}
|
||||
return
|
||||
}
|
||||
},
|
||||
commentInputFocus(e) {
|
||||
// this.prefixIcon = ''
|
||||
},
|
||||
/**
|
||||
* 发送消息
|
||||
*/
|
||||
showSendBtn(item) {
|
||||
this.showBtn = true // 显示发送按钮
|
||||
this.currentComment = item
|
||||
this.content = ' `' // 清空输入框
|
||||
},
|
||||
/**
|
||||
* 回复消息
|
||||
* @param {*} item 消息数据
|
||||
*/
|
||||
replyMessage() {
|
||||
// 点击弹出回复框，输入回复内容，点击发送按钮，发送回复消息
|
||||
uni.showLoading({
|
||||
mask: true, // 显示透明蒙层，防止触摸穿透，默认：false
|
||||
})
|
||||
const params = {
|
||||
contentId: this.currentComment.contentId, // 评论的目标内容ID，必传
|
||||
contentType: 'hotelNews', // 评论的目标内容类型，必传（店铺资讯传入值hotelNews）
|
||||
reply: this.content, // 评论内容，必传
|
||||
atUid: this.currentComment.senderUid // @的用户ID
|
||||
}
|
||||
replyMessage(params).then(res => {
|
||||
this.fetchList() // 查询消息列表
|
||||
uni.hideLoading
|
||||
})
|
||||
|
||||
},
|
||||
/**
|
||||
* 查询消息列表
|
||||
*/
|
||||
fetchList() {
|
||||
const params = {
|
||||
page: 1, // 页码
|
||||
limit: 999999
|
||||
}
|
||||
getMessageList().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;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user