cps：收支明细

htmldev/cps/src/views/bill/api/api.js

@@ -0,0 +1,10 @@
+import request from '@/api/request'
+
+/**
+ * 订单列表接口
+ */
+export const apiOrderList = (params) => request({
+  method: 'GET',
+  url: '/api/v1/user/order/list',
+  params: params
+})

htmldev/cps/src/views/bill/child/main.vue

@@ -0,0 +1,244 @@
+<template>
+  <div
+    class="wrapper"
+    ref="returnWrapper">
+    <ul>
+      <li
+        :class="{'static': isRefresh}"
+        class="pulldown-wrapper">
+        <van-loading
+          v-show="isRefresh"
+          size="24px"
+          type="spinner">加载中...
+        </van-loading>
+        <div
+          v-show="!isRefresh"
+          class="van-loading">
+          <span
+            class="van-loading__text">下拉刷新</span>
+        </div>
+      </li>
+      <li
+        v-for="(item, index) in list"
+        :key="index"
+        class="list-item border-bottom-1px">
+        <div class="wrap">
+          <p class="label">提现金额：</p>
+          <p class="money">-￥3000,00</p>
+        </div>
+        <p class="date">提现时间：2020-12-23 19:30</p>
+      </li>
+      <li class="pullup-wrapper">
+        <van-loading
+          v-show="!finished"
+          size="24px"
+          type="spinner">加载中...
+        </van-loading>
+        <div
+          v-show="finished"
+          class="van-loading">
+          <span
+            class="van-loading__text">没有更多了</span>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+import BScroll from 'better-scroll'
+import { Toast, Loading } from 'vant'
+import { apiOrderList } from '../api/api'
+
+export default {
+  components: {
+    'van-loading': Loading
+  },
+  data () {
+    return {
+      finished: false, // 所有数据是否加载完
+      isRefresh: false, // 是否下拉刷新
+      isFetchLock: false, // 接口调用加锁
+      pagenum: 0,
+      pagesize: 20,
+      list: [],
+      scroll: null
+    }
+  },
+  activated () {
+    if (!this.$route.meta.isUseCache) {
+      this.finished = false
+      this.isRefresh = false
+      this.isFetchLock = false
+      this.pagenum = 0
+      this.pagesize = 20
+      this.list = []
+      this.scroll = null
+      this.getList()
+    } else {
+      this.scroll && this.scroll.refresh()
+    }
+    this.$route.meta.isUseCache = false
+  },
+  methods: {
+    goDetail (id) {},
+    onRefresh () {
+      this.pagenum = 0
+      this.pagesize = 20
+      this.finished = false
+      this.isRefresh = true
+      this.getList()
+    },
+    async getList () {
+      if (this.finished) {
+        return
+      }
+      if (this.isFetchLock) {
+        return
+      }
+      this.isFetchLock = true
+      this.pagenum++
+      try {
+        const { status, data, msg } = await apiOrderList({ page: this.pagenum, page_size: this.pagesize })
+        if (status) {
+          const { list } = data
+          // 下拉刷新数据清空
+          if (this.isRefresh) {
+            this.isRefresh = false
+            this.list = []
+          }
+
+          // 没有数据返回了
+          if (Array.isArray(list) && !list.length) {
+            this.finished = true
+          }
+
+          if (Array.isArray(list) && list.length) {
+            // 总页数小于等于1页时
+            if (list.length < this.pagesize) {
+              this.finished = true
+            }
+            this.list = this.list.concat(list)
+
+            this.$nextTick(() => {
+              if (!this.scroll) {
+                this.scroll = new BScroll(this.$refs.returnWrapper, {
+                  click: true,
+                  pullDownRefresh: {
+                    threshold: 50, // 顶部下拉的距离
+                    stop: 20 // 回弹停留的距离
+                  },
+                  pullUpLoad: {
+                    threshold: -20
+                  },
+                  scrollbar: true
+                })
+
+                this.scroll.on('pullingDown', () => {
+                  this.onRefresh()
+                })
+
+                this.scroll.on('pullingUp', () => {
+                  this.getList()
+                })
+              } else {
+                this.scroll.finishPullDown()
+                this.scroll.finishPullUp()
+                this.scroll.refresh()
+              }
+            })
+          }
+        } else {
+          Toast(msg)
+        }
+        this.isFetchLock = false
+      } catch (err) {
+        this.isFetchLock = false
+      }
+    }
+  },
+  beforeDestroy () {
+    this.scroll && this.scroll.destroy()
+  },
+  beforeRouteLeave (to, form, next) {
+    if (['Mine', 'OrderDetail'].findIndex(item => item === to.name) > -1) {
+      form.meta.isUseCache = true
+    }
+    next()
+  }
+}
+</script>
+<style lang="scss" scoped>
+.wrapper {
+  width: 100%;
+  height: calc(100% - 117px);
+  overflow: hidden;
+  background: #FFFFFF;
+
+  ul {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    padding: 11px 0 102px;
+  }
+}
+
+.pulldown-wrapper {
+  position: absolute;
+  left: 0;
+  top: -43px;
+  width: 100%;
+  text-align: center;
+  margin-bottom: 10px;
+
+  &.static {
+    position: static;
+    left: 0;
+    top: 0;
+  }
+}
+
+.pullup-wrapper {
+  width: 100%;
+  text-align: center;
+
+  .van-loading {
+    margin-top: 16px;
+  }
+}
+
+.list-item {
+  width: 340px;
+  padding: 17px 14px 21px;
+  @include border-bottom-1px(rgba(31, 49, 74, 0.1));
+
+  .wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .label {
+    font-size: 16px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #333333;
+    line-height: 22px;
+  }
+
+  .money {
+    font-size: 16px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #FD4646;
+    line-height: 22px;
+  }
+
+  .date {
+    margin-top: 8px;
+    font-size: 12px;
+    color: #999999;
+    line-height: 17px;
+  }
+}
+</style>

htmldev/cps/src/views/bill/index.vue

@@ -1,13 +1,100 @@
 <template>
-  <div>收支明细</div>
+  <div class="bill-container">
+    <h2>收支明细</h2>
+    <van-tabs
+      class="fbt-van-tabs"
+      v-model="numActiveTab"
+      :color="'#FA4A4A'"
+      :title-active-color="'rgba(51, 51, 51, 1)'"
+      :title-inactive-color="'#666666'"
+      ref="myTabs">
+      <van-tab title="全部"></van-tab>
+      <van-tab title="收入"></van-tab>
+      <van-tab title="提现"></van-tab>
+    </van-tabs>
+    <Main/>
+  </div>
 </template>
 
 <script>
+import { Tabs, Tab } from 'vant'
+import Main from './child/main'
+
 export default {
-  name: 'index'
+  name: 'index',
+  components: {
+    'van-tabs': Tabs,
+    'van-tab': Tab,
+    Main
+  },
+  data () {
+    return {
+      numActiveTab: 0
+    }
+  },
+  async mounted () {
+    await this.$nextTick()
+
+    setTimeout(() => {
+      this.$refs.myTabs.resize()
+    }, 500)
+  }
 }
 </script>
 
 <style lang="scss" scoped>
+.bill-container {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+}
+
+h2 {
+  padding: 16px 0 16px 24px;
+  font-size: 24px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #333333;
+  line-height: 33px;
+}
+
+.fbt-van-tabs {
+  &:after {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    content: '';
+    display: block;
+    width: 100%;
+    border-bottom: 1px solid rgba(31, 49, 74, 0.1);
+  }
 
+  ::v-deep .van-tabs__nav--line {
+    padding-bottom: 0;
+  }
+
+  ::v-deep .van-tab {
+    flex: none;
+    width: 94px;
+
+    &__text {
+      font-size: 14px;
+    }
+
+    &.van-tab--active {
+      .van-tab__text {
+        font-size: 16px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+      }
+    }
+  }
+
+  ::v-deep .van-tabs__line {
+    bottom: 0;
+  }
+}
 </style>