feat: 完成消息对接

src/pages/message/index.vue

@@ -15,11 +15,11 @@
             <view class="message_user_info">
               <!-- 头像 -->
               <view class="user_head">
-                <!-- item.userPic -->
+                <image style="width: 100%; height: 100%;" mode="aspectFill" :src="item.userPic"></image>
               </view>
               <view class="user_info">
                 <!-- 姓名 -->
-                <view class="user_name">{{item.userName}}张锋</view>
+                <view class="user_name">{{item.userName}}</view>
                 <!-- 聊天信息最后一条 -->
                 <view class="user_goods">{{item.message}}</view>
                 <!-- 聊天信息最后一条的时间 -->
@@ -27,7 +27,7 @@
               </view>
               <!-- 商品图片 -->
               <view class="goods_img">
-                <!-- item.goods_img -->
+                <image style="width: 100%; height: 100%;" mode="aspectFill" :src="item.goods_img"></image>
               </view>
             </view>
           </view>
@@ -61,7 +61,7 @@
           pageNum: 1,
           pageSize: -1
         }, false).then(res => {
-          this.list = [{}] //res.data.records
+          this.list = res.data.records
           this.timeId = setTimeout(getList, 3000)
         })
       }
@@ -84,7 +84,7 @@
       },
       goMsgView(item) {
         this.$navToPage({
-          url: '/pages/message/msgView?goodsId=' + 888888
+          url: '/pages/message/msgView?goodsId=' + item.goodsId || '' + "&groupId=" + item.groupId || ''
         })
       }
     },

src/pages/message/msgView.vue

@@ -9,13 +9,15 @@
     <!-- 商品信息 -->
     <view class="goods_info">
       <!-- 商品图片 -->
-      <view class="goods_img"></view>
+      <view class="goods_img">
+        <image style="width: 100%; height: 100%;" mode="aspectFill" :src="goodsDetail.goodsPicUrl"></image>
+      </view>
       <!-- 商品描述 -->
       <view class="goods_text">
-        <view class="goods_name">商品的名称展示</view>
+        <view class="goods_name">{{goodsDetail.title}}</view>
         <view class="goods_pon">
           <view>
-            <view class="goods_jiag">￥{{180.00}}</view>
+            <view class="goods_jiag">{{goodsDetail.amount?"￥"+goodsDetail.amount:"面议"}}</view>
             <view class="goods_fuwu">卖家包运费</view>
           </view>
           <view class="go_goods_btn">立即购买</view>
@@ -26,31 +28,33 @@
     <view class="message_view">
       <scroll-view class="message_view_scroll" :scroll-y="true" :scroll-top="scrollTop" :enhanced="true"
         :bounces="false" :show-scrollbar="false" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
-        <view style="box-sizing: border-box;padding: 10rpx 0;">
-          <view v-for="(item,index) in 50" :key="index">
+        <view style="box-sizing: border-box;padding: 10rpx 0;" ref="scrollviewDiv" class="scrollviewDiv">
+          <view v-for="(item,index) in list" :key="index">
             <!-- 右消息 -->
-            <view class="msg_view">
+            <view class="msg_view" v-if="userId===item.userId">
               <!-- 占位 -->
               <view class="msg_user_img_kong">
               </view>
               <view class="msg_view_info msg_view_info_right">
                 <view class="msg_view_conent">
-                  12465479198kuhsadbckaehbl12465479198kuhsadbckaehbl12465479198kuhsadbckaehbl12465479198kuhsadbckaehbl
+                  {{item.message}}
                 </view>
-                <view class="msg_view_time">2023-10-11 12:12:12</view>
+                <view class="msg_view_time">{{item.createTime}}</view>
               </view>
               <!-- 头像 -->
               <view class="msg_user_img">
+                <image style="width: 100%; height: 100%;" mode="aspectFill" :src="item.userPic"></image>
               </view>
             </view>
             <!-- 左消息 -->
-            <view class="msg_view">
+            <view class="msg_view" v-else>
               <!-- 头像 -->
               <view class="msg_user_img">
+                <image style="width: 100%; height: 100%;" mode="aspectFill" :src="item.userPic"></image>
               </view>
               <view class="msg_view_info msg_view_info_left">
-                <view class="msg_view_conent">12465479198kuhsadbckaehbl</view>
-                <view class="msg_view_time">2023-10-11 12:12:12</view>
+                <view class="msg_view_conent">{{item.message}}</view>
+                <view class="msg_view_time">{{item.createTime}}</view>
               </view>
               <!-- 占位 -->
               <view class="msg_user_img_kong">
@@ -65,10 +69,15 @@
       <view class="text_input_view">
         <view class="text_input_lay">
           <view class="text_input_tengh">
-            <input class="uni-input_chat" focus placeholder="请输入" />
+            <input class="uni-input_chat" focus placeholder="请输入" v-model="message" />
           </view>
-          <view class="text_input_mount" @click="gengduo = !gengduo">
+          <!-- 更多功能 -->
+          <!-- <view class="text_input_mount" @click="gengduo = !gengduo">
             +
+          </view> -->
+          <!-- 发送消息 -->
+          <view class="text_input_mount" @click="send">
+            <image style="width: 60%; height: 60%;" mode="aspectFill" src="/static/tabBar/icon_issue01.png"></image>
           </view>
         </view>
       </view>
@@ -99,37 +108,144 @@
 </template>
 
 <script>
+  import api from '@/common/http/'
   export default {
-    // #ifdef H5
     data() {
       return {
         scrollTop: 0,
         gengduo: false,
-        pam: {}
+        pam: {},
+        list: [],
+        message: "",
+        userId: this.$store.state.user.userId,
+        goodsDetail: {}
+      }
+    },
+    onLoad(pam) {
+      this.pam = pam
+    },
+    onShow() {
+      // #ifdef H5
+      this.getGoods()
+      this.getNewList()
+      // #endif
+    },
+    onHide() {
+      // #ifdef H5
+      if (this.timeId) {
+        clearTimeout(this.timeId)
       }
+      // #endif
     },
     methods: {
+      // #ifdef H5
+      getGoods() {
+        if (!this.pam.goodsId) {
+          return
+        }
+        api.postJson('/goods/detail', {
+          id: this.pam.goodsId,
+        }).then(res => {
+          this.goodsDetail = res.data
+          console.log(res)
+        })
+      },
+      getNewList() {
+        if (this.timeId) {
+          clearTimeout(this.timeId)
+        }
+        this.getMsgList(0, () => {
+          this.timeId = setTimeout(this.getNewList, 3000)
+          uni.createSelectorQuery().select('.message_view_scroll').boundingClientRect(data => {
+            uni.createSelectorQuery().select('.scrollviewDiv').boundingClientRect(data2 => {
+              if ((this.scrollTop + data.height + 10) >= data2.height) {
+                this.scrollTop = data2.height
+              }
+            }).exec()
+          }).exec()
+        })
+      },
+      getMsgList(flag, cb) {
+        api.postJson('/user/talk/list', {
+          userId: this.$store.state.user.userId,
+          flag: flag,
+          ...(() => {
+            if (this.pam.goodsId) {
+              return {
+                goodsId: this.pam.goodsId,
+              }
+            }
+            return {}
+          })(),
+          ...(() => {
+            if (this.pam.groupId) {
+              return {
+                groupId: this.pam.groupId,
+              }
+            }
+            return {}
+          })(),
+          ...(() => {
+            if (this.list.length) {
+              return {
+                id: this.list[flag ? 0 : this.list.length - 1].id
+              }
+            }
+            return {}
+          })(),
+        }, false).then(res => {
+          if (flag) {
+            this.list.unshift(...res.data)
+          } else {
+            this.list.push(...res.data)
+          }
+          cb && cb()
+        })
+      },
       upper() {
-        console.log("顶")
+        // console.log("顶")
+        uni.createSelectorQuery().select('.scrollviewDiv').boundingClientRect(data => {
+          var oldHeight = data.height
+          this.getMsgList(1, () => {
+            this.$nextTick(() => {
+              uni.createSelectorQuery().select('.scrollviewDiv').boundingClientRect(data2 => {
+                this.scrollTop = data2.height - oldHeight
+              }).exec()
+            })
+          })
+        }).exec()
       },
       lower() {
-        console.log("底")
+        // console.log("底")
       },
       scroll(e) {
         this.scrollTop = e.detail.scrollTop
       },
+      send() {
+        if (this.pam.goodsId && this.$store.state.user.userId) {
+          api.postJson('/user/talk/send', {
+            message: this.message,
+            userId: this.$store.state.user.userId,
+            goodsId: this.pam.goodsId,
+            ...(() => {
+              if (this.pam.groupId) {
+                return {
+                  groupId: this.pam.groupId,
+                }
+              }
+              return {}
+            })(),
+          }, false).then(res => {
+            this.message = ""
+            this.getNewList()
+          })
+        }
+      },
+      // #endif
+      // #ifndef H5
+
+      // #endif
     },
-    // #endif
-    // #ifndef H5
-    data() {
-      return {
-        pam: {}
-      }
-    },
-    onLoad(pam) {
-      this.pam = pam
-    },
-    // #endif
   }
 </script>