first commit

滴滴淘/h5(1)/src/view/pages/PrincipalRecord.vue

@@ -0,0 +1,123 @@
+<!--领取记录-->
+<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>