Client-Teapay/src/pages/accountDetails/teaBaby.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" v-if="item.type == 0">收货后送茶宝</view>
          <view class="head_name" v-else-if="item.type == 1">签到送茶宝</view>
          <view class="head_name" v-else-if="item.type == 2">批发扣除茶宝</view>
          <view class="head_name" v-else-if="item.type == 3">退款到茶宝</view>
          <view class="head_name" v-else-if="item.type == 4">提现转茶宝</view>
          <view class="head_name" v-else-if="item.type == 5">赠送茶宝</view>
          <view class="head_name" v-else-if="item.type == 6">消费茶宝</view>
          <view class="head_name" v-else-if="item.type == 8">核销后送茶宝</view>
          <view :class="['head_price',item.act == '+' ? 'g_color' : '']">{{item.act}}{{ item.num }}</view>
        </view>
        <view class="list_con flex_r flex_ac flex_jb">
          <!-- <view class="list_time">{{ item.integerType }}333</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;
import { get, 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 that = this;
      let data = {
        type: this.current == 0 ? "" : this.current,
        page: page,
        limit: 10
      };
      uni.showLoading({ mask: true });
      post("/my/chabao", data).then(res => {
        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;
      page = 1;
      this.list = [];
      this.haveGoods = false;
      this.loadData();
    }
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {
    if (page != -1) {
      var that = this;
      setTimeout(function() {
        ++page;
        that.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>