Client-Teapay/src/pages/accountDetails/running.vue

<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="Tab_con flex_r flex_ac flex_jb">
      <view
        class="tab_list flex_r flex_ac"
        :class="current == index ? 'active' : ''"
        v-for="(item, index) in TabList"
        :key="index"
        @tap="SetStatus(index)"
        >{{ item.title }}</view
      >
    </view>
    <!-- 顶部导航-end -->
    <!-- 资金列表 -->
    <view class="con">
      <view class="list" v-for="(item, index) in list" :key="index">
        <view class="list_head flex_r flex_ac flex_jb">
          <view class="head_name">{{ item.type_id == 1 ? '收益' : '支出'}}</view>
          <view class="head_price g_color">{{ item.act }}{{item.num }}</view>
        </view>
        <view class="list_con flex_r flex_ac flex_jb">
          <view class="list_time">{{ item.remark }}</view>
          <view class="list_balance">{{ item.create_time }}</view>
        </view>
      </view>
      <not-goods v-if="haveGoods" textStr="暂无流水资金信息"></not-goods>
    </view>
    <!-- 资金列表 -->
  </view>
</template>
<script>
let page = 1;
let app = getApp();
var appEv = app.$vm.$options;
// let reqApi = new ReqApi();
// import { ReqApi } from "@/utils/reqTools.js";
import { get, post, u_post } from "@/request/api.js";
import notGoods from "@/components/not-goods/index.vue";
export default {
  components: {
    notGoods,
  },
  data() {
    return {
      haveGoods: false, // 是否有商品
      current: 0,
      TabList: [
        { title: "全部", sauts: "" },
        { title: "收益", sauts: 1 },
        { title: "支出", sauts: 2 },
      ],
      list: [],
      page:1
    };
  },
  onShow: function () {
    this.page = 1;
    this.list = [];
    this.loadData();
  },
  methods: {
    loadData: function () {
      let data = {
        page: page,
        rows:20,
        type: this.current,
      };
      uni.showLoading({ mask: true });
      post("my/moneylog", data).then((res) => {
        uni.hideLoading();
        uni.hideLoading();
        if (res.code === 0) {
          if (res.data.data.data.length > 0) {
            this.list = this.list.concat(res.data.data.data);
          } else {
            if (this.page == 1) {
              this.haveGoods = true;
              this.page = -1;
            } else {
              this.page = -1;
              appEv.errTips("暂无更多");
            }
          }
        } else {
          if (page == 1) {
            this.haveGoods = true;
            this.page = -1;
          } else {
            this.page = -1;
            appEv.errTips("暂无更多");
          }
        }
      });
    },
    SetStatus: function (i) {
      this.current = i;
      this.page = 1;
      this.list = [];
      this.haveGoods = false;
      this.loadData();
    },
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if (this.page != -1) {
      setTimeout(function () {
        ++this.page;
        this.loadData();
      }, 800);
    }
  },
};
</script>
<style lang="scss">
// 页面配置
// 页面配置-end

// 顶部列表
.tab_list {
  height: 100%;
  box-sizing: border-box;
  font-size: 30rpx;
  color: #808080;
}

.Tab_con {
  width: 100%;
  height: 92rpx;
  background: #fff;
  padding: 0 30rpx;
  box-sizing: border-box;
}

.active {
  color: #1bbd89;
  border-bottom: 6rpx solid #1bbd89;
}

// 顶部列表-end

// 资金列表
.con {
  border-top: 16rpx solid #f4f4f4;
}

.list_con {
  width: 100%;
  overflow: hidden;
}

.list_head {
  width: 100%;
  overflow: hidden;
}

.list_time {
  font-size: 24rpx;
  color: #a1a1a1;
}

.list_balance {
  font-size: 24rpx;
  color: #a1a1a1;
}

.head_price {
  font-size: 32rpx;
  font-family: "SourceHanSansCN-Medium";
}

.head_name {
  font-size: 30rpx;
  color: #212121;
  font-family: "SourceHanSansCN-Medium";
}

.list {
  width: 100%;
  overflow: hidden;
  padding: 30rpx;
  box-sizing: border-box;
  border-bottom: 3rpx solid #f4f4f4;
}

// 资金列表-end

// 状态颜色
.g_color {
  color: #1bbd89;
}

.y_color {
  color: #f15b21;
}

// 状态颜色-end
</style>