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

Feat：店铺资讯评论

Browse Source
This commit is contained in:
LinCyJang
2025-06-23 00:03:04 +08:00
parent fd7793b3fb
commit 2e6b2d6c62
5 changed files with 316 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
api/rooms.js
+28
View File
@@ -0,0 +1,28 @@
import request from "@/utils/request";
/**
* 获取未读消息数量
*/
export function getUnreadMessageCount() {
return request.get("/user/reply/messages/unreadCount", {}, {login: true})
}
/**
* 标记消息为已读
*/
export function markMessagesAsRead() {
return request.post("/user/reply/messages/readAll", {}, {login: true})
}
/**
* 获取消息列表
*/
export function getMessageList(params) {
return request.get("/user/reply/messages", params, {login: true})
}
/**
* 回复消息
*/
export function replyMessage(data) {
return request.post("/user/reply/add", data, {login: true})
}
assets/css/v12-style.less
+2 -2
View File
@@ -3,8 +3,8 @@
@dark-color: #333333;
@white-color: #fff;
@colors: #C52733, #333333, #fff, #666, #F0F0F0, #999999, #E92727, #FFC543, #69C573;
@classnames: primary, dark, white, secondary-dark, grey, dark1, red, yellow, success;
@colors: #C52733, #333333, #fff, #666, #F0F0F0, #999999, #E92727, #FFC543, #69C573, #A5A5A5;
@classnames: primary, dark, white, secondary-dark, grey, dark1, red, yellow, success, dark2;
/*=====================================*/
each(@colors, {
pages.json
+7
View File
@@ -509,6 +509,13 @@
"navigationBarTitleText": "历史会话"
}
},
{
"path": "views/message",
"style": {
"navigationBarTitleText": "互动消息",
"navigationBarBackgroundColor": "#FFFFFF"
}
},
{
"path": "views/xiaoZhi",
"style": {
pkg_common/views/message.vue
+226
View File
@@ -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>
pkg_common/views/roomLogs.vue
+53 -8
View File
@@ -1,8 +1,18 @@
<template>
<view class="common-roomLogs">
<view class="v12-align-center v12-pa-3" @click="toMessage">
<view class="call-message"></view>
<view class="v12-ml-2" style="width: 100%">
<view class="v12-font-bold v12-font-32">互动消息</view>
<view class="v12-secondary-dark-text v12-font-28 v12-mt-3 v12-justify-between">
<text>{{ unreadNum > 0 ? `收到${unreadNum}条回复` : '暂无通知'}}</text>
<view v-if="unreadNum > 0" class="bage-num v12-font-24 v12-primary v12-white-text v12-radius-100">{{ unreadNum > 99 ? '99+' : unreadNum }}</view>
</view>
</view>
</view>
<u-divider></u-divider>
<view v-if="list.length > 0">
<view
>
<u-swipe-action
class="v12-mt-3"
@@ -39,7 +49,7 @@
</view>
</view>
<view class="v4-nodata" v-if="list.length===0">
<image src="@/static/images/img_nodata.png" mode="scaleToFill"/>
<!-- <image src="@/static/images/img_nodata.png" mode="scaleToFill"/> -->
<view class="text">暂无数据</view>
</view>
</view>
@@ -47,7 +57,7 @@
<script>
import { mapGetters } from 'vuex'
import { getUnreadMessageCount, markMessagesAsRead } from '@/api/rooms'
export default {
name: 'RoomLogs',
data() {
@@ -55,15 +65,34 @@ export default {
webUrl:this.$VUE_APP_RESOURCES_URL,
uid: null,
list: [],
options1: [{text: '删除', style: {color: '#fff', backgroundColor: '#C52733'} }]
options1: [{text: '删除', style: {color: '#fff', backgroundColor: '#C52733'} }],
unreadNum: 0
}
},
computed: mapGetters(['userInfo']),
onShow() {
this.uid = this.userInfo.uid
this.fetchList()
this.getUnreadMessageCount()
},
methods: {
/**
* 去消息
*/
toMessage() {
markMessagesAsRead().then(res => {
uni.navigateTo({url: '/pkg_common/views/message'})
})
},
/**
* 获取互动消息
* @param {*} item
*/
getUnreadMessageCount(item) {
getUnreadMessageCount().then(res => {
this.unreadNum = res.data
})
},
goRoom(item) {
uni.navigateTo({url: `/pkg_common/views/room?id=${item.store_id}&name=${item.store_name}`})
},
@@ -108,6 +137,15 @@ export default {
}
</script>
<style>
.call-message{
width: 120rpx;
height: 120rpx;
background: #C52733;
border-radius: 20rpx;
}
.common-roomLogs{
background: #fff;
}
.common-roomLogs .u-swipe-action-item{
margin-bottom: 20rpx;
}
@@ -148,17 +186,17 @@ export default {
min-height: 100vh;
box-sizing: border-box;
padding: 32rpx;
background: #F5F5F5;
background: #fff;
.item {
border-radius: 8rpx;
background: #FFFFFF;
.cover {
width: 80rpx;
height: 80rpx;
width: 120rpx;
height: 120rpx;
margin-right: 18rpx;
border-radius: 16rpx;
border-radius: 20rpx;
}
.name {
@@ -187,4 +225,11 @@ export default {
}
}
}
.bage-num {
min-width: 40rpx;
height: 40rpx;
text-align: center;
box-sizing: border-box;
padding: 4rpx;
}
</style>