上传代码

pages/Forum/Forum.vue

@@ -10,15 +10,29 @@
     <view class="title">站内信</view>
   </view>
   <view class="content">
-    <view class="building">
-      <view>
-        <image
-          style="width: 500rpx"
-          src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/building.png"
-          mode="scaleToFill"
-        />
-      </view>
-      <view class="buildingTitle">暂无数据</view>
+    <view class="scrollView">
+      <scroll-view
+      show-scrollbar="false"
+      scroll-y="true"
+      class="scroll"
+      refresher-enabled="true"
+      refresher-threshold="40"
+      @refresherrefresh="onRefresherRefresh"
+      lower-threshold="100"
+      @scrolltolower="onScrollToLower"
+      :refresher-triggered="triggered"
+    >
+        <view class="card" v-for="(item, index) in list" :key="index">
+          <view class="cardTitle">{{ item.title }}</view>
+          <view class="cardContent">
+            {{ item.content }}
+          </view>
+          <view class="cardTime">
+            <view class="cardTimeTitle">{{ item.time }}</view>
+          </view>
+        </view>
+
+    </scroll-view>
     </view>
   </view>
   <view class="tabBar">
@@ -28,10 +42,14 @@
 
 <script>
 import tabBar from "../../components/tabBar/tabBar";
+import request from "../../components/request.js";
 export default {
   data() {
     return {
-      title: "Hello",
+      list: [],
+      triggered: false,
+      page: 0,
+      pageSize: 10,
     };
   },
   onShareAppMessage(res) {
@@ -43,10 +61,43 @@ export default {
     }
   },
   onLoad() {
-    // 页面加载时执行
+    this.getlist();
   },
   methods: {
-    // 方法定义
+    
+    //获取列表数据
+    getlist() {
+      request({
+        url: "systemMessage/list",
+        data: {
+          page: this.page,
+          size: this.pageSize,
+        },
+        method: "POST",
+      }).then((res) => {
+        this.triggered = false;
+        console.log(res);
+        if (res.code === 200) {
+            this.list.push(...res.data);
+        }
+      });
+    },
+
+    //下拉刷新
+    onRefresherRefresh() {
+      console.log("下拉刷新");
+        this.triggered = true;
+        this.list = [];
+        this.page = 0;
+        this.getlist();
+    },
+
+    //上拉加载
+    onScrollToLower() {
+      this.page ++;
+      this.getlist();
+    },
+
   },
   components: {
     tabBar,
@@ -70,7 +121,7 @@ export default {
 .title {
   position: absolute;
   top: 120rpx;
-  left: 345rpx;
+  left: 335rpx;
   font-size: 34rpx;
   color: #100e0f;
   font-weight: bold;
@@ -98,4 +149,61 @@ export default {
   text-align: center;
   margin-top: 50rpx;
 }
+.scrollView{
+  width: 100%;
+  height: 100%;
+}
+.scroll{
+  width: 100%;
+  height: 93%;
+}
+.card{
+  width: 570rpx;
+  background-color: #ffffff;
+  margin-top: 20rpx;
+  margin-left: 50rpx;
+  margin-right: 50rpx;
+  border-radius: 20rpx;
+  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-left: 40rpx;
+  padding-right: 40rpx;
+  padding-bottom: 20rpx;
+  padding-top: 40rpx;
+}
+.cardTitle{
+  width: 570rpx;
+  height: 60rpx;
+  margin-top: -10rpx;
+  font-size: 30rpx;
+  color: #333333;
+  font-weight: bold;
+  text-align: center;
+  border-bottom: 1px solid #e5e5e5;
+  overflow: hidden;          /* 隐藏溢出 */
+  text-overflow: ellipsis;   /* 显示省略号 */
+  white-space: nowrap;   
+}
+.cardContent{
+  width: 570rpx;
+  font-size: 28rpx;
+  color: #666666;
+  border-bottom: 1px solid #e5e5e5;
+  padding: 30rpx 0;
+  line-height: 50rpx;
+}
+.cardTime{
+  width: 100%;
+  height: 60rpx;
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+}
+.cardTimeTitle{
+  font-size: 28rpx;
+  color: #999999;
+  margin-right: 20rpx;
+}
 </style>