From 0977d6020e3392de34b7be439b1d4172af3b5653 Mon Sep 17 00:00:00 2001
From: liutong <836164388@qq.com>
Date: Tue, 8 Apr 2025 10:28:33 +0800
Subject: [PATCH] =?UTF-8?q?feat(common):=20=E6=96=B0=E5=A2=9E=E6=96=87?=
 =?UTF-8?q?=E7=AB=A0=E8=AF=A6=E6=83=85=E9=A1=B5=E9=9D=A2=E5=B9=B6=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E7=B3=BB=E7=BB=9F=E6=B6=88=E6=81=AF=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增文章详情页面(article_info.vue)- 重构系统消息列表(sys_msg_list.vue)，添加滚动加载功能- 修改我的消息(my_message.vue)和IM聊天信息(im_chat_info.vue)的跳转逻辑
---
 pages.json                    |   9 ++
 pages/common/article_info.vue | 193 ++++++++++++++++++++++++++++++++++
 pages/common/im_chat_info.vue |   2 +-
 pages/common/my_message.vue   |  13 +--
 pages/common/sys_msg_list.vue | 189 ++++++++++++++++++---------------
 5 files changed, 314 insertions(+), 92 deletions(-)
 create mode 100644 pages/common/article_info.vue

diff --git a/pages.json b/pages.json
index ced5360..7ad7c82 100644
--- a/pages.json
+++ b/pages.json
@@ -135,6 +135,15 @@
 		  "navigationBarTextStyle": "black"
 		}
 	},
+    {
+      "path" : "pages/common/article_info",
+      "style": {
+        "navigationBarTitleText": "文章详情",
+        "navigationStyle": "default",
+        "navigationBarBackgroundColor": "#292929",
+        "navigationBarTextStyle": "white"
+      }
+    },
     {
       "path" : "pages/common/feedback",
       "style": {
diff --git a/pages/common/article_info.vue b/pages/common/article_info.vue
new file mode 100644
index 0000000..7765b5f
--- /dev/null
+++ b/pages/common/article_info.vue
@@ -0,0 +1,193 @@
+<!--文章-详情-->
+<template>
+  <view class="main_box">
+
+    <view class="main_section">
+      <view class="section_1">
+        <view class="titile">{{dataInfo.title}}</view>
+        <view class="content" v-html="dataInfo.content"></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import commonApi from '@/api/common.js';
+
+
+
+export default {
+  components: {
+  },
+  data() {
+    return {
+      dataInfo: {
+        title: '',//文章标题
+        content: '',//文章内容
+      },//文章详情
+    }
+  },
+  onLoad(options) {
+    this.filteredData.hair_staff_id = options.hair_staff_id//发信人id
+  },
+  onShow(){
+    this.init()
+  },
+  //下拉刷新
+  async onPullDownRefresh() {
+    //重置为第一页
+    await this.resetFilteredData()
+    await this.getList()
+  },
+  methods: {
+//初始化
+    async init(){
+      await this.getList();
+    },
+    //加载更多(下一页)
+    loadMoreData() {
+      //判断是否加载
+      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 commonApi.getContactMessage(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 方法 将新数据追加到数组中
+      // this.tableList.unshift(...res.data.data); // 将新数据插入到数组头部
+
+      console.log('列表',this.tableList)
+      this.filteredData.total = res.data.total
+      this.filteredData.page++
+    },
+
+    //跳转文章详情
+    openViewArticleInfo(item){
+      uni.navigateTo({
+        url: '/pages/common/article_info?id='+item.id
+      })
+    },
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+	.main_box {
+		background: #292929;
+	}
+
+	//自定义导航栏
+	.navbar_section {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background: #29d3b4;
+
+		.title {
+			padding: 20rpx 0;
+			font-size: 30rpx;
+			color: #315d55;
+		}
+	}
+
+	.main_section {
+		min-height: 100vh;
+		background: #292929 100%;
+		padding: 0 0rpx;
+		padding-top: 32rpx;
+		padding-bottom: 150rpx;
+		font-size: 28rpx;
+		display: flex;
+		flex-direction: column;
+		gap: 20rpx;
+
+		.section {
+			background-color: #434544;
+			padding: 40rpx 40rpx;
+		}
+
+    .section_1{
+      padding: 0 24rpx;
+      display: flex;
+      flex-direction: column;
+
+      .item{
+        margin-bottom: 38rpx;
+        display: flex;
+        flex-direction: column;
+
+        padding: 32rpx 24rpx;
+        border-radius: 14rpx;
+        background-color: rgba(255,255,255,1);
+        border: 2rpx solid rgba(187,187,187,1);
+
+        color: #4F4F4F;
+        font-size: 32rpx;
+
+        .title{
+        }
+        .img_box{
+          margin-top: 30rpx;
+          width: 100%;
+        }
+        .content{
+          margin-top: 30rpx;
+        }
+        .time{
+          display: flex;
+          justify-content: flex-end;
+          margin-top: 36rpx;
+        }
+      }
+    }
+
+
+
+
+	}
+
+	.describe {
+		color: #999999;
+		padding-left: 30rpx;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/common/im_chat_info.vue b/pages/common/im_chat_info.vue
index 412573b..239f6c0 100644
--- a/pages/common/im_chat_info.vue
+++ b/pages/common/im_chat_info.vue
@@ -112,7 +112,7 @@ export default {
       this.filteredData.total = 10//数据总条数
     },
 
-    //获取作业列表
+    //获取列表
     async getList(){
       this.loading = true
 
diff --git a/pages/common/my_message.vue b/pages/common/my_message.vue
index 761727c..6e9b765 100644
--- a/pages/common/my_message.vue
+++ b/pages/common/my_message.vue
@@ -139,21 +139,22 @@ export default {
     },
 
     //跳转页面-系统消息列表
-    openViewSysMsgList(){
+    openViewSysMsgList(e){
+      let hair_staff_id = e.hair_staff_id//发信人id
       uni.navigateTo({
-        url: `/pages/common/sys_msg_list`
+        url: `/pages/common/sys_msg_list?hair_staff_id=${hair_staff_id}`
       })
     },
 
     //跳转页面-聊天页面
-    openViewImChatInfo(v){
+    openViewImChatInfo(e){
 
-      if(v.type == 1){
+      if(e.type == 1){
         //系统消息
-        this.openViewSysMsgList
+        this.openViewSysMsgList(e)
       }else{
         //站内信
-        let hair_staff_id = v.hair_staff_id//发信人id
+        let hair_staff_id = e.hair_staff_id//发信人id
         uni.navigateTo({
           url: `/pages/common/im_chat_info?hair_staff_id=${hair_staff_id}`
         })
diff --git a/pages/common/sys_msg_list.vue b/pages/common/sys_msg_list.vue
index 48f8097..10e61ad 100644
--- a/pages/common/sys_msg_list.vue
+++ b/pages/common/sys_msg_list.vue
@@ -3,122 +3,140 @@
   <view class="main_box">
 
     <view class="main_section">
-      <view class="section_1">
-        <view class="item">
-          <view class="title">吾悦校区停电通知</view>
-          <image
-              class="img_box"
-              :src="$util.img('/upload/attachment/image/202504/02/1743562333d1bb6666f969da1b7170381d0845153e_local.png')"
-              model="aspectFit"
-          ></image>
-
-          <view class="content">
-            李老师将张包子的跟进人设置为您，需要您
-            继续跟进，点击此消息查看张包子的信息，完
-            成后续跟进
-          </view>
-
-          <view class="time">2024-03-07 10:30:00</view>
+      <scroll-view
+          class="section_1"
+          scroll-y="true"
+          :lower-threshold="lowerThreshold"
+          @scrolltolower="loadMoreData"
+          style="height: 90vh;"
+      >
+        <view
+            class="item"
+            v-for="(v,k) in tableList"
+            :key="k"
+            @click="openViewArticleInfo(v)"
+        >
+          <view class="title">{{v.title}}</view>
+<!--          <image-->
+<!--              class="img_box"-->
+<!--              :src="$util.img('/upload/attachment/image/202504/02/1743562333d1bb6666f969da1b7170381d0845153e_local.png')"-->
+<!--              model="aspectFit"-->
+<!--          ></image>-->
+
+          <view class="content" v-html="v.content"></view>
+
+          <view class="time">{{v.show_time}}</view>
         </view>
 
-        <view class="item">
-          <view class="title">吾悦校区停电通知</view>
-          <image
-              class="img_box"
-              :src="$util.img('/upload/attachment/image/202504/02/1743562333d1bb6666f969da1b7170381d0845153e_local.png')"
-              model="aspectFit"
-          ></image>
-
-
-          <view class="time">2024-03-07 10:30:00</view>
-        </view>
-
-        <view class="item">
-          <view class="title">吾悦校区停电通知</view>
-          <image
-              class="img_box"
-              :src="$util.img('/upload/attachment/image/202504/02/1743562333d1bb6666f969da1b7170381d0845153e_local.png')"
-              model="aspectFit"
-          ></image>
-
-          <view class="content">
-            李老师将张包子的跟进人设置为您，需要您
-            继续跟进，点击此消息查看张包子的信息，完
-            成后续跟进
-          </view>
-
-          <view class="time">2024-03-07 10:30:00</view>
-        </view>
-      </view>
+      </scroll-view>
     </view>
   </view>
 </template>
 
 <script>
-import memberApi from '@/api/member.js';
-import AQUplodeImgMulti from '@/components/AQ/AQUplodeImgMulti';
-import AQTabber from "@/components/AQ/AQTabber"
+import commonApi from '@/api/common.js';
+
 
 
 export default {
   components: {
-    AQTabber,
-    AQUplodeImgMulti,
   },
   data() {
     return {
-      formData: {
-        images_arr: [],
-        images: '',
-        content: '',
-        mailbox: '',
+      loading:false,//加载状态
+      lowerThreshold: 100,//距离底部多远触发
+      isReachedBottom: false,//防止重复加载|true=不可加载|false=可加载
+
+      //筛选条件
+      filteredData:{
+        page:1,//当前页码
+        limit:10,//每页返回数据条数
+        total:10,//数据总条数
+        hair_staff_id: '',//发信人id
       },
+      tableList:[],//聊天数据列表
     }
   },
-  onLoad() {
+  onLoad(options) {
+    this.filteredData.hair_staff_id = options.hair_staff_id//发信人id
+  },
+  onShow(){
+    this.init()
+  },
+  //下拉刷新
+  async onPullDownRefresh() {
+    //重置为第一页
+    await this.resetFilteredData()
+    await this.getList()
   },
   methods: {
-    //######AQ上传文件组件相关######
-    // 上传文件回调
-    AQUploadSuccess(res) {
-      console.log('接收AQ上传回调xxx1', res)
-      // 使用 split 方法分割字符串
-      let _inputValue = []
-      if (res.filePathArr.length) {
-        _inputValue = res.filePathArr
+//初始化
+    async init(){
+      await this.getList();
+    },
+    //加载更多(下一页)
+    loadMoreData() {
+      //判断是否加载
+      if (!this.isReachedBottom) {
+        this.isReachedBottom = true;//设置为不可请求状态
+        this.getList();
       }
-      this.formData[res.inputName] = _inputValue
-      // console.log('接收AQ上传回调xxx1',res)
-      // console.log('接收AQ上传回调xxx2',this.formData.member_store_certification_arr)
     },
+    //重置为第一页
+    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}
 
-    async submitForm() {
-      let data = {...this.formData}
-      data.images = data.images_arr.join(',')
-      if (!data.content) {
-        //反馈内容为必填项
+      //判断是否还有数据
+      if(this.filteredData.page * this.filteredData.limit > this.filteredData.total){
+        this.loading = false
         uni.showToast({
-          title: '反馈内容为必填项',
+          title: '暂无更多',
           icon: 'none'
         })
         return
       }
-      let res = await memberApi.setFeedback(data)
-      if (res.code != 1) {
+
+      if(data.page == 1){
+        this.tableList = []
+      }
+
+      let res = await commonApi.getContactMessage(data)//获取消息列表
+      this.loading = false
+      this.isReachedBottom = false;
+      if (res.code != 1){
         uni.showToast({
           title: res.msg,
           icon: 'none'
         })
-      } else {
-        uni.showToast({
-          title: '提交成功',
-          icon: 'none'
-        })
-        //延迟1s执行
-        setTimeout(() => {
-          this.$util.openHomeView();
-        }, 1000);
+        return
       }
+
+      this.tableList = this.tableList.concat(res.data.data); // 使用 concat 方法 将新数据追加到数组中
+      // this.tableList.unshift(...res.data.data); // 将新数据插入到数组头部
+
+      console.log('列表',this.tableList)
+      this.filteredData.total = res.data.total
+      this.filteredData.page++
+    },
+
+    //跳转文章详情
+    openViewArticleInfo(item) {
+      let id = item.id
+      let redirect = item.redirect//重定向地址
+      uni.navigateTo({
+        url: `/pages/common/article_info?id=${id}`
+      })
     },
 
   }
@@ -164,8 +182,9 @@ export default {
       padding: 0 24rpx;
       display: flex;
       flex-direction: column;
-      gap: 38rpx;
+
       .item{
+        margin-bottom: 38rpx;
         display: flex;
         flex-direction: column;