|
@@ -0,0 +1,89 @@
|
|
|
+<script setup name="ReportList">
|
|
|
+import {reactive} from 'vue'
|
|
|
+import apiReport from '@/api/report'
|
|
|
+
|
|
|
+
|
|
|
+const listState = reactive({
|
|
|
+ list:[],
|
|
|
+ page:0,
|
|
|
+ pageSize:20,
|
|
|
+ finished:false,
|
|
|
+ loading:false
|
|
|
+})
|
|
|
+async function getList(){
|
|
|
+ const res=await apiReport.getList({
|
|
|
+ CurrentIndex:listState.page,
|
|
|
+ PageSize:listState.pageSize,
|
|
|
+ })
|
|
|
+ if(res.Ret===200){
|
|
|
+ listState.loading=false
|
|
|
+ if(!res.Data){
|
|
|
+ listState.finished=true
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ listState.finished=res.Data.Paging.IsEnd
|
|
|
+ const arr=res.Data.List||[]
|
|
|
+ listState.list=[...listState.list,...arr]
|
|
|
+ }
|
|
|
+}
|
|
|
+function onLoad(){
|
|
|
+ listState.page++
|
|
|
+ // getList()
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="report-list-page">
|
|
|
+ <div class="sticky-box">
|
|
|
+ <div class="top-box">
|
|
|
+ <img class="menu-icon" src="@/assets/imgs/myETA/icon_menu.png" alt="">
|
|
|
+ <van-search
|
|
|
+ style="flex:1"
|
|
|
+ shape="round"
|
|
|
+ readonly
|
|
|
+ placeholder="请输入图表名称"
|
|
|
+ />
|
|
|
+ <img class="menu-icon" src="@/assets/imgs/myETA/icon_menu.png" alt="">
|
|
|
+ <img class="menu-icon" src="@/assets/imgs/myETA/icon_menu.png" alt="">
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <van-list
|
|
|
+ v-model:loading="listState.loading"
|
|
|
+ :finished="listState.finished"
|
|
|
+ :finished-text="listState.list.length>0?'没有更多了':'暂无图表'"
|
|
|
+ @load="onLoad"
|
|
|
+ >
|
|
|
+ <ul class="list-wrap">
|
|
|
+ <li class="item" v-for="item in listState.list" :key="item.Id">
|
|
|
+
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </van-list>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.sticky-box{
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+ z-index: 99;
|
|
|
+}
|
|
|
+.top-box{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .menu-icon{
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.list-wrap{
|
|
|
+ .item{
|
|
|
+ padding: 20px;
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|