123 lines
2.9 KiB
Vue
123 lines
2.9 KiB
Vue
<!--领取记录-->
|
|
<template lang="pug">
|
|
.CollectionRecords
|
|
NavbarComponent(title="本金记录" :show-left="true")
|
|
.content
|
|
van-list(v-model='loading'
|
|
:finished='finished'
|
|
finished-text='没有更多了'
|
|
@load='onLoad')
|
|
.records_list
|
|
.list_item(v-for="i in testList")
|
|
.item_left
|
|
p {{i.sub_type_text}}
|
|
span {{$utils.formatDate(i.create_time)}}
|
|
.item_right {{i.amount}}金币
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {Component, Provide, Inject, Vue} from 'vue-property-decorator';
|
|
import NavbarComponent from '@/components/Navbar.vue'
|
|
@Component({
|
|
components: {
|
|
NavbarComponent
|
|
}
|
|
})
|
|
export default class PrincipalRecord<T> extends Vue {
|
|
$http: any
|
|
|
|
// inject 注入 App.vue 提供的变量
|
|
@Inject() readonly HiddenTabBar!: Function;
|
|
@Inject() readonly ShowTabBar!: Function;
|
|
|
|
private titleName: String = "资金明细";
|
|
private loading: boolean = false;
|
|
private finished: boolean = false;
|
|
|
|
private testList: Array<T | number | object | string> = [];
|
|
|
|
private money: number = 0
|
|
|
|
private page: number = 0
|
|
private limit: number = 10
|
|
|
|
// 进入页面，关闭底部导航条
|
|
private created(): void {
|
|
this.HiddenTabBar()
|
|
}
|
|
|
|
// 演示加载数据
|
|
private onLoad(): void {
|
|
if(this.finished){
|
|
this.$toast('已经到底了')
|
|
return
|
|
}
|
|
++this.page
|
|
this.getList()
|
|
}
|
|
|
|
private async getList(): Promise<void> {
|
|
let data = {
|
|
page: this.page,
|
|
limit: this.limit
|
|
}
|
|
let res = await this.$http.UserService.financelist(data)
|
|
// 数据全部加载完成
|
|
if (res < this.limit) {
|
|
this.finished = true;
|
|
}
|
|
// 加载状态结束
|
|
this.loading = false;
|
|
this.testList = [...this.testList, ...res]
|
|
this.money = res.total_money
|
|
}
|
|
|
|
// 离开页面，开启底部导航条
|
|
beforeRouteLeave (to: any, from: any, next: any) {
|
|
this.ShowTabBar()
|
|
next()
|
|
}
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped lang="stylus">
|
|
.records_list
|
|
padding 0 0.49rem 0.49rem 0.49rem
|
|
.list_item
|
|
padding-top 0.49rem
|
|
padding-bottom 0.44rem
|
|
border-bottom 1px solid #c5c5c5
|
|
display flex
|
|
justify-content space-between
|
|
align-items center
|
|
.item_right
|
|
font-size 17px
|
|
color #e9920a
|
|
.item_left
|
|
height 1.187rem
|
|
display flex
|
|
flex-direction column
|
|
p
|
|
font-size 17px
|
|
color #000
|
|
margin-bottom 0.293rem
|
|
span
|
|
font-size 14px
|
|
color #717171
|
|
.header
|
|
width 100%
|
|
height 4.733rem
|
|
background #4db0fe
|
|
display flex
|
|
align-items center
|
|
justify-content center
|
|
p
|
|
color #fff
|
|
font-size 25px
|
|
span
|
|
margin-left 4px
|
|
font-size 15px !important
|
|
|
|
</style> |