apps/supplier-dispatch-h5
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
zhouxueli
2024-01-31 15:10:20 +08:00
parent 7ad521ae1e
commit de4ac8d72d
1 changed files with 43 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/views/caseList/caseAuditList.vue
View File

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