task#10595,案件审核列表下拉刷新效果以及数据为空的页面展示

src/views/caseList/caseAuditList.vue

@@ -18,6 +18,7 @@
         <span class="numTip" style="opacity: 1 !important;">{{item.num}}</span>
       </div>
     </div>
+    <van-pull-refresh class="refresh" v-model="isLoading" @refresh="onRefresh" v-show="!show">
       <div class="listWrap">
         <div class="listItem" v-for="(item,index) in pageList" :key="index" @click="goPageDetail(item.id)">
           <div class="line1">
@@ -32,6 +33,11 @@
           <div v-show="activeIndex == 2"><span>审核备注:</span><span style="color: #FF5D2E">{{ item.auditRemark }}</span></div>
         </div>
       </div>
+
+    </van-pull-refresh>
+    <div class="bgEmptyImg" v-show="show" >
+      <img  src="@/assets/empty.png" />
+    </div>
   </div>
 
 </template>
@@ -50,8 +56,14 @@ export default {
       pageNum:1,
       pageSize:10,
       id:'',//批次id
+      isLoading:"",
     }
   },
+  computed:{
+    show() {
+      return (this.pageList.length < 0 || this.pageList.length == 0); // 判断数组长度是否大于 0
+    },
+  },
   created() {
     const urlParams = new URLSearchParams(window.location.search);
     this.id = this.$route.params.id || urlParams.get('id');
@@ -62,6 +74,13 @@ export default {
     await this.getList()
   },
   methods:{
+    onRefresh() {
+      this.getList()
+      setTimeout(() => {
+        this.$toast('刷新成功');
+        this.isLoading = false;
+      }, 1000);
+    },
     async changeTab(index) {
       this.activeIndex = index
       this.pageNum = 1
@@ -142,6 +161,10 @@ export default {
 <style scoped lang="scss">
 @import "@/styles/mixin.scss";
 @import "@/styles/common.scss";
+.refresh{
+  min-height: 100%;
+  background-color: #F4F5F7;
+}
 .wrap{
   @include wh(100%,100%);
   box-sizing: border-box;
@@ -196,7 +219,7 @@ export default {
   width: 100%;
   height: calc(100% - 86px);
   overflow-y: auto;
-  background-color: #F4F5F7;
+
   .listItem{
     width: 100%;
     box-sizing: border-box;
@@ -227,6 +250,14 @@ export default {
     }
   }
 }
+.bgEmptyImg{
+  @include flexTwoCenter;
+  height: 90% ;
+  background-color: #FAFAFA;
+  img{
+    width: 100%;
+  }
+}
 .greColor{
   color:#38AD00 ;
   font-weight: 500;