Feat：店铺资讯评论

api/rooms.js

@@ -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

@@ -3,8 +3,8 @@
 @dark-color: #333333;
 @white-color: #fff;
 
-@colors: #C52733, #333333, #fff, #666, #F0F0F0, #999999, #E92727, #FFC543, #69C573;
+@colors: #C52733, #333333, #fff, #666, #F0F0F0, #999999, #E92727, #FFC543, #69C573, #A5A5A5;
-@classnames: primary, dark, white, secondary-dark, grey, dark1, red, yellow, success;
+@classnames: primary, dark, white, secondary-dark, grey, dark1, red, yellow, success, dark2;
 /*=====================================*/ 
 
 each(@colors, {

pages.json

@@ -509,6 +509,13 @@
             "navigationBarTitleText": "历史会话"
           }
         },
+        {
+          "path": "views/message",
+          "style": {
+            "navigationBarTitleText": "互动消息",
+            "navigationBarBackgroundColor": "#FFFFFF"
+          }
+        },
         {
           "path": "views/xiaoZhi",
           "style": {

pkg_common/views/message.vue

@@ -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

@@ -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;
+      width: 120rpx;
-      height: 80rpx;
+      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>