优化页面

pages/Mine/minecomponents/pkInformation.vue

@@ -6,6 +6,7 @@
     <view class="Return" @click="onBack">
       <image class="ReturnImg" src="../../../static/Return.png" mode="scaleToFill" />
     </view>
+    <view class="title">PK信息</view>
     <view class="content">
       <scroll-view
         scroll-y="true"
@@ -15,6 +16,7 @@
         @refresherrefresh="onRefresherRefresh"
         lower-threshold="100"
         @scrolltolower="onScrollToLower"
+        :refresher-triggered="triggered"
       >
         <uni-card class="card" v-for="(item, index) in pkList" :key="index">
           <view class="Profile">
@@ -61,7 +63,8 @@
             </view>
             <view class="time">PK时间:{{ formatDate(item.pkTime) }}</view>
           </view>
-          <view class="handle" v-if="item.status === 0">
+          <view class="handle">
+            <!-- <view class="handle" v-if="item.status === 0"> -->
             <view class="recompose" @click="onRecompose(item)">
               <image
                 style="width: 46rpx; height: 46rpx"
@@ -81,13 +84,13 @@
       </scroll-view>
     </view>
   </view>
-  <Recompose  ref="createModule" class="createModule" :message="parentMessage" ></Recompose>
+  <Recompose ref="createModule" class="createModule" :message="parentMessage"></Recompose>
 </template>
 
 <script>
 import request from "../../../components/request.js";
 import formatDate from "../../../components/formatDate.js";
-import Recompose  from "../minecomponents/recompose/recompose.vue";
+import Recompose from "../minecomponents/recompose/recompose.vue";
 
 export default {
   data() {
@@ -97,6 +100,7 @@ export default {
       page: 0,
       createModule: null,
       parentMessage: null,
+      triggered: false,
     };
   },
   onLoad() {
@@ -113,12 +117,26 @@ export default {
     this.createModule = this.$refs.createModule; // 挂载后赋值
   },
   methods: {
+    onRefresherRefresh() {
+      this.page = 0;
+      this.pkList = [];
+      this.getpkList();
+      this.triggered = true;
+    },
+    onScrollToLower() {
+      this.page++;
+      this.getpkList();
+    },
+    onRefresherRefres() {
+      this.page = 0;
+      this.pkList = [];
+      this.getpkList();
+      this.triggered = true;
+    },
     onBack() {
-      uni.navigateBack(
-        {
-          delta: 1,
-        }
-      );
+      uni.navigateBack({
+        delta: 1,
+      });
     },
     formatDate: formatDate,
     getpkList() {
@@ -133,18 +151,19 @@ export default {
         userInfo: false,
       }).then((res) => {
         if (res.code == 200) {
-          this.pkList = res.data;
+          this.pkList.push(...res.data);
           console.log(this.pkList);
+          this.triggered = false;
         } else {
           console.log(res.msg);
         }
       });
     },
     onRecompose(item) {
-      this.createModule.open()
-      this.parentMessage = item
+      this.parentMessage = item;
+      this.createModule.open();
     },
-    onExpurgate(item){
+    onExpurgate(item) {
       const res = request({
         url: "pk/deletePkDataWithId",
         method: "POST",
@@ -155,21 +174,19 @@ export default {
       }).then((res) => {
         if (res.code == 200) {
           uni.showToast({
-          title: "删除成功",
-          icon: "none",
-          duration: 2000,
-        });
-        this.getpkList()
+            title: "删除成功",
+            icon: "none",
+            duration: 2000,
+          });
+          this.getpkList();
         } else {
           console.log(res.msg);
         }
       });
-    }
-
-
+    },
   },
   components: {
-    Recompose ,
+    Recompose,
   },
 };
 </script>
@@ -189,11 +206,19 @@ export default {
 }
 .Return {
   position: absolute;
-  top: 100rpx;
+  top: 110rpx;
   left: 35rpx;
   width: 46rpx;
   height: 46rpx;
 }
+.title {
+  position: absolute;
+  top: 120rpx;
+  left: 315rpx;
+  font-size: 34rpx;
+  color: #100e0f;
+  font-weight: 500;
+}
 .ReturnImg {
   width: 100%;
   height: 100%;
@@ -306,11 +331,11 @@ export default {
   height: 46rpx;
   margin-left: 40rpx;
 }
-.createModule{
-    position: fixed;
-    bottom: 0;
-    right: 0;
-    z-index: 998;
-    width: 100vw;
-  }
+.createModule {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  z-index: 998;
+  width: 100vw;
+}
 </style>