feat(common): 新增聊天页面并优化消息列表

- 新增 im_chat_info.vue 聊天页面组件
- 改进 my_message.vue 中的消息列表，添加跳转到聊天页面的功能
- 在 pages.json 中添加聊天页面的配置项

pages.json

@@ -108,6 +108,15 @@
         "navigationBarTextStyle": "white"
       }
     },
+    {
+      "path" : "pages/common/im_chat_info",
+      "style": {
+        "navigationBarTitleText": "",
+        "navigationStyle": "default",
+        "navigationBarBackgroundColor": "#292929",
+        "navigationBarTextStyle": "white"
+      }
+    },
     {
       "path" : "pages/common/sys_msg_list",
       "style": {

pages/common/im_chat_info.vue

@@ -3,11 +3,45 @@
   <view class="main_box">
 
     <view class="main_section">
-      <view class="section_1">
+      <scroll-view
-        <view class="item">
+          class="section_1"
+          scroll-y="true"
+          :lower-threshold="lowerThreshold"
+          @scrolltolower="loadMoreData"
+          style="height: 80vh;"
+      >
+        <view class="ul">
+          <view class="time_section">2024-05-15</view>
 
-        </view>
+          <view class="li">
+            <view class="item left_item">
+              <view class="text_box">你好,aaaaaaaaaaaaaaaaaaaaaaaaa1111111111111111111@@@@@@@@@@@@@@@@@</view>
+            </view>
+            <view class="item"></view>
+          </view>
+
+          <view class="li">
+            <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>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+    <view class="input_section">
+      <view class="left_box">
+        <input class="input" type="text" placeholder="请输入">
+      </view>
+      <view class="right_box">
+        <image class="send_img" src="@/static/images/common/fa_song.png"></image>
       </view>
     </view>
   </view>
@@ -26,6 +60,18 @@ export default {
   },
   data() {
     return {
+      loading:false,//加载状态
+      lowerThreshold: 100,//距离底部多远触发
+      isReachedBottom: false,//防止重复加载|true=不可加载|false=可加载
+
+      //筛选条件
+      filteredData:{
+        page:1,//当前页码
+        limit:10,//每页返回数据条数
+        total:10,//数据总条数
+        status: '',//1=未提交,2=已提交,3=已批改
+      },
+
       formData: {
         images_arr: [],
         images: '',
@@ -37,6 +83,69 @@ export default {
   onLoad() {
   },
   methods: {
+
+    //初始化
+    async init(){
+      await this.getList();
+    },
+
+    //加载更多(下一页)
+    loadMoreData() {
+      return; //不用下拉加载
+      //判断是否加载
+      if (!this.isReachedBottom) {
+        this.isReachedBottom = true;//设置为不可请求状态
+        this.getList();
+      }
+    },
+    //重置为第一页
+    async resetFilteredData() {
+      this.isReachedBottom = false; // 重置状态，以便下次触发加载更多
+
+      this.filteredData.page = 1//当前页码
+      this.filteredData.limit = 10//每页返回数据条数
+      this.filteredData.total = 10//数据总条数
+    },
+
+    //获取作业列表
+    async getList(){
+      this.loading = true
+
+      let data = {...this.filteredData}
+
+      //判断是否还有数据
+      if(this.filteredData.page * this.filteredData.limit > this.filteredData.total){
+        this.loading = false
+        uni.showToast({
+          title: '暂无更多',
+          icon: 'none'
+        })
+        return
+      }
+
+      if(data.page == 1){
+        this.tableList = []
+      }
+
+      let res = await memberApi.assignmentsList(data)
+      this.loading = false
+      this.isReachedBottom = false;
+      if (res.code != 1){
+        uni.showToast({
+          title: res.msg,
+          icon: 'none'
+        })
+        return
+      }
+
+      this.tableList = this.tableList.concat(res.data.data); // 使用 concat 方法 将新数据追加到数组中
+
+      console.log('列表',this.tableList)
+      this.filteredData.total = res.data.total
+      this.filteredData.page++
+    },
+
+
     //######AQ上传文件组件相关######
     // 上传文件回调
     AQUploadSuccess(res) {
@@ -120,19 +229,83 @@ export default {
 		}
 
     .section_1{
+      color: #FFFFFF;
+      font-size: 28rpx;
       padding: 0 24rpx;
       display: flex;
       flex-direction: column;
-      gap: 38rpx;
+      gap: 40rpx;
-      .item{
+      .ul{
-
+        .time_section{
+          text-align: center;
+          font-size: 28rpx;
+          color: #989898;
+        }
+        .li{
+          margin: 40rpx 0;
+          display: flex;
+          justify-content: space-between;
+          .item{
+            max-width: 70%;
+            padding: 32rpx;
+            border-radius: 32rpx;
+            word-wrap: break-word; /* 允许长单词或 URL 换行 */
+            word-break: break-all; /* 强制所有字符换行 */
+            .text_box{}
+          }
+          .left_item{
+            background-color: #f4f6f9;
+            color: #343434;
+          }
+          .right_item{
+            background-color: #1684fc;
+            color: #fff;
+          }
+        }
       }
     }
 
+	}
 
+  //输入框板块
+  .input_section{
+    width: 100%;
+    position: fixed;
+    bottom: 0;
 
+    padding: 50rpx 50rpx;
+    display: flex;
+    justify-content:space-between;
+    align-items: center;
+    .left_box{
+      width: 70%;
+      .input{
+        background-color: #f4f6f9;
+        height: 88rpx;
+        padding: 28rpx;
+        font-size: 28rpx;
+        border-radius: 32rpx;
 
-	}
+        width: 532rpx;
+        color: #292929;
+        font-size: 28rpx;
+      }
+    }
+    .right_box{
+      border-radius: 50%;
+      background-color: #a2cefe;
+      width: 88rpx;
+      height: 88rpx;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .send_img{
+        width: 36rpx;
+        height: 36rpx;
+      }
+    }
+
+  }
 
 	.describe {
 		color: #999999;

pages/common/my_message.vue

@@ -15,7 +15,7 @@
           </view>
         </view>
 
-        <view class="item">
+        <view class="item" @click="openViewImChatInfo({user_id:1})">
           <view class="left">
             <image class="pic" src="@/static/images/common/yong_hu.png"></image>
             <view>张老师</view>
@@ -26,7 +26,7 @@
           </view>
         </view>
 
-        <view class="item">
+        <view class="item" @click="openViewImChatInfo({user_id:2})">
           <view class="left">
             <image class="pic" src="@/static/images/common/yong_hu.png"></image>
             <view>李老师</view>
@@ -116,6 +116,14 @@ export default {
       })
     },
 
+    //跳转页面-聊天页面
+    openViewImChatInfo(v){
+      let user_id = 1
+      uni.navigateTo({
+        url: `/pages/common/im_chat_info?user_id=${user_id}`
+      })
+    },
+
   }
 }
 </script>