feat(im): 实现站内信功能

- 新增联系人列表和消息列表接口
- 实现聊天页面和消息页面的基本功能- 添加联系人头像和消息计数显示
- 优化消息列表和聊天记录的渲染逻辑

api/common.js

@@ -17,6 +17,22 @@ export default {
 		})
 	},
 
+	//获取联系人列表
+	getContactList(data) {
+		let url = `/member/contact_list`
+		return http.get(url,data).then(res => {
+			return res;
+		})
+	},
+
+	//获取消息列表
+	getContactMessage(data) {
+		let url = `/member/contact_message`
+		return http.get(url,data).then(res => {
+			return res;
+		})
+	},
+
 
 
 }

pages/common/im_chat_info.vue

@@ -11,26 +11,21 @@
           style="height: 80vh;"
       >
         <view class="ul">
-          <view class="time_section">2024-05-15</view>
+          <view class="item_box" v-for="(v,k) in tableList" :key="k">
+            <view class="time_section" v-if="v.create_time">{{v.create_time}}</view>
 
-          <view class="li">
+            <view class="li" v-if="v.direction == `left`">
               <view class="item left_item">
-              <view class="text_box">你好,aaaaaaaaaaaaaaaaaaaaaaaaa1111111111111111111@@@@@@@@@@@@@@@@@</view>
+                <view class="text_box">{{v.content}}</view>
               </view>
               <view class="item"></view>
             </view>
 
-          <view class="li">
+            <view class="li" v-if="v.direction == `right`">
-            <view class="item left_item">
-              <view class="text_box">你好,是呢么时间可以到课是呢么时间可以到课是呢么时间可以到课</view>
-            </view>
-            <view class="item"></view>
-          </view>
-
-          <view class="li">
               <view class="item"></view>
               <view class="item right_item">
-              <view class="text_box">间可以到课</view>
+                <view class="text_box">{{v.content}}</view>
+              </view>
             </view>
           </view>
         </view>
@@ -49,6 +44,7 @@
 
 <script>
 import memberApi from '@/api/member.js';
+import commonApi from '@/api/common.js';
 import AQUplodeImgMulti from '@/components/AQ/AQUplodeImgMulti';
 import AQTabber from "@/components/AQ/AQTabber"
 
@@ -69,8 +65,9 @@ export default {
         page:1,//当前页码
         limit:10,//每页返回数据条数
         total:10,//数据总条数
-        status: '',//1=未提交,2=已提交,3=已批改
+        hair_staff_id: '',//发信人id
       },
+      tableList:[],//聊天数据列表
 
       formData: {
         images_arr: [],
@@ -80,7 +77,11 @@ export default {
       },
     }
   },
-  onLoad() {
+  onLoad(options) {
+    this.filteredData.hair_staff_id = options.hair_staff_id//发信人id
+  },
+  onShow(){
+    this.init()
   },
   //下拉刷新
   async onPullDownRefresh() {
@@ -131,7 +132,7 @@ export default {
         this.tableList = []
       }
 
-      let res = await memberApi.assignmentsList(data)
+      let res = await commonApi.getContactMessage(data)//获取消息列表
       this.loading = false
       this.isReachedBottom = false;
       if (res.code != 1){

pages/common/my_message.vue

@@ -4,35 +4,38 @@
 
     <view class="main_section">
       <view class="section_1">
-        <view class="item" @click="openViewSysMsgList()">
-          <view class="left">
-            <image class="pic" src="@/static/images/common/xi_tong_xiao_xi.png"></image>
-            <view>系统消息</view>
-          </view>
-          <view class="right">
-            <view>99</view>
-            <fui-icon name="arrowright" :size="60"></fui-icon>
-          </view>
-        </view>
 
-        <view class="item" @click="openViewImChatInfo({user_id:1})">
+<!--        <view class="item" @click="openViewSysMsgList()">-->
-          <view class="left">
+<!--          <view class="left">-->
-            <image class="pic" src="@/static/images/common/yong_hu.png"></image>
+<!--            <image class="pic" src="@/static/images/common/xi_tong_xiao_xi.png"></image>-->
-            <view>张老师</view>
+<!--            <view>系统消息</view>-->
-          </view>
+<!--          </view>-->
-          <view class="right">
+<!--          <view class="right">-->
-            <view>99</view>
+<!--            <view>99</view>-->
-            <fui-icon name="arrowright" :size="60"></fui-icon>
+<!--            <fui-icon name="arrowright" :size="60"></fui-icon>-->
-          </view>
+<!--          </view>-->
-        </view>
+<!--        </view>-->
 
-        <view class="item" @click="openViewImChatInfo({user_id:2})">
+        <view
+            v-for="(v,k) in contactList"
+            :key="k"
+            class="item"
+            @click="openViewImChatInfo(v)"
+        >
           <view class="left">
-            <image class="pic" src="@/static/images/common/yong_hu.png"></image>
+            <image
-            <view>李老师</view>
+                v-if="v.type==2"
+                class="pic"
+                :src="(v.header ? $util.img(v.header) : `@/static/images/common/yong_hu.png`)"
+                model="aspectFit"
+            ></image>
+
+            <image v-else class="pic" src="@/static/images/common/xi_tong_xiao_xi.png"></image>
+
+            <view>{{v.name}}</view>
           </view>
           <view class="right">
-            <view>99</view>
+            <view>{{v.count >= 99 ? '99':v.count}}</view>
             <fui-icon name="arrowright" :size="60"></fui-icon>
           </view>
         </view>
@@ -44,6 +47,7 @@
 
 <script>
 import memberApi from '@/api/member.js';
+import commonApi from '@/api/common.js';
 import AQUplodeImgMulti from '@/components/AQ/AQUplodeImgMulti';
 import AQTabber from "@/components/AQ/AQTabber"
 
@@ -61,11 +65,36 @@ export default {
         content: '',
         mailbox: '',
       },
+
+      //联系人列表
+      contactList:[],
     }
   },
   onLoad() {
   },
+  onShow() {
+    this.init();
+  },
   methods: {
+    //初始化
+    async init(){
+      this.getContactList()
+    },
+
+    //获取联系人列表
+    async getContactList(){
+      let res = await commonApi.getContactList()
+      console.log('获取联系人列表', res)
+      if (res.code != 1) {
+        uni.showToast({
+          title: res.msg,
+          icon: 'none'
+        })
+        return
+      }
+      this.contactList = res.data
+    },
+
     //######AQ上传文件组件相关######
     // 上传文件回调
     AQUploadSuccess(res) {
@@ -118,10 +147,19 @@ export default {
 
     //跳转页面-聊天页面
     openViewImChatInfo(v){
-      let user_id = 1
+
+      if(v.type == 1){
+        //系统消息
+        this.openViewSysMsgList
+      }else{
+        //站内信
+        let hair_staff_id = v.hair_staff_id//发信人id
         uni.navigateTo({
-        url: `/pages/common/im_chat_info?user_id=${user_id}`
+          url: `/pages/common/im_chat_info?hair_staff_id=${hair_staff_id}`
         })
+      }
+
+
     },
 
   }
@@ -186,6 +224,7 @@ export default {
           .pic{
             width: 68rpx;
             height: 68rpx;
+            border-radius: 50%;
           }
           view{
             color: #D9001B;
@@ -196,6 +235,11 @@ export default {
           display: flex;
           align-items: center;
           view{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 50rpx;
+            height: 50rpx;
             padding: 5rpx;
             border: 1px solid #BBBBBB;
             border-radius: 50%;

pages/student/my/my.vue

@@ -67,14 +67,18 @@
 					<view>我的教练</view>
 					<view></view>
 				</view>
-				<view class="item">
+<!--				<view class="item">-->
-					<view>负责人</view>
+<!--					<view>负责人</view>-->
-					<view></view>
+<!--					<view></view>-->
-				</view>
+<!--				</view>-->
 				<view class="item" @click="feedback">
 					<view>意见反馈</view>
 					<view></view>
 				</view>
+        <view class="item" @click="openViewMyMessage({user_id:1})">
+          <view>我的消息</view>
+          <view></view>
+        </view>
 			</view>
 		</view>
 
@@ -138,7 +142,13 @@
 				uni.navigateTo({
 					url: '/pages/student/my/personal_data'
 				})
-			}
+			},
+      //跳转页面-我的消息
+      openViewMyMessage(item) {
+        uni.navigateTo({
+          url: `/pages/common/my_message`
+        })
+      },
 		}
 	}
 </script>