zhishifufei_uniapp/pages/merchant/income.vue

<template>
  
  <BaseContainer class="lecturer-income">
    <NavBar title="收益明细" fixed />
    <view class="header">
      <view
        v-for="item in tabs"
        :key="item.value"
        :class="{ on: active === item.value }"
        class="item"
        @click="active = item.value"
      >
        {{ item.name }}
      </view>
    </view>
    <view class="main">
      <view v-if="list.length">
        <template v-for="item in list">
          <view class="dt">{{ item.time }}</view>
          <view>
            <view class="list">
              <view class="item" v-for="cell in item.list">
                <view class="lt">
                  <view>{{ cell.title }}</view>
                  <view class="time">{{ cell.add_time }}</view>
                </view>
                <view :class="{ add: cell.pm }" class="rt">
                  {{ (cell.pm ? "+" : "-") + cell.number }}
                </view>
              </view>
            </view>
          </view>
        </template>
      </view>
      <image
        v-else-if="finished"
        mode="aspectFit"
        :src="getImgPath('/wap/first/zsff/images/empty.png')"
        class="empty"
      />
    </view>
  </BaseContainer>
</template>

<script>
import { getFlowingWaterList } from "@/api/merchant";
import { getFlowingInstitutionList } from "@/api/institution";
export default {
  data() {
    return {
      tabs: [
        {
          name: "余额",
          value: 1,
        },
        {
          name: "提现",
          value: 2,
        },
        {
          name: "金币",
          value: 3,
        },
      ],
      active: 1,
      page: 1,
      limit: 10,
      finished: false,
      list: [],
      type:1
    };
  },
  watch: {
    active() {
      this.page = 1;
      this.finished = false;
      this.list = [];
      this.get_flowing_water_list();
    },
  },
  onLoad({ active, mer_id ,type}) {
    this.type = type;
    if (active) {
      this.active = Number(active);
    }
    this.mer_id = Number(mer_id);
    if(type == 2){
      this.tabs.splice(2,1);
    }
    this.get_flowing_water_list();
  },
  onReachBottom() {
    this.get_flowing_water_list();
  },
  methods: {
    async get_flowing_water_list() {
      let is_extract = 0;
      let category = "now_money";
      if (this.finished) return;
      if (this.active === 3) {
        category = "gold_num";
      } else {
        if (this.active === 2) {
          is_extract = 1;
        }
      }
      uni.showLoading({ mask: true });
      if(this.type == 1){
        try {
            const { data } = await getFlowingWaterList({
              category: category,
              page: this.page++,
              limit: this.limit,
              is_extract: is_extract,
            });
            uni.hideLoading();
            console.log(data.data)
            this.list = this.list.concat(data.data);
            this.finished = this.limit > data.data.length;
          } catch (err) {
            uni.hideLoading();
            this.$util.showMsg(err);
          }
      }else{
          try {
              const { data } = await getFlowingInstitutionList({
                category: category,
                page: this.page++,
                limit: this.limit,
                is_extract: is_extract,
              });
              uni.hideLoading();
              console.log(data.data)
              this.list = this.list.concat(data.data);
              this.finished = this.limit > data.data.length;
            } catch (err) {
              uni.hideLoading();
              this.$util.showMsg(err);
            }
      }
      
    },
  },
};
</script>

<style scoped lang="scss">


/* 收益明细 */
.lecturer-income .header {
  position: fixed;

  top: calc(108rpx + var(--safe-top));
  right: 20rpx;
  left: 20rpx;
  z-index: 5;

  display: flex;
  height: 90rpx;
  border-radius: 12rpx;
  background-color: #ffffff;
  font-size: 28rpx;
  line-height: 90rpx;
  text-align: center;
  color: #333333;
}

.lecturer-income .header .item {
  flex: 1;
  position: relative;
}

.lecturer-income .header .item.on {
  color: #2c8eff;
}

.lecturer-income .header .item.on::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 5;
  width: 70rpx;
  height: 4rpx;
  border-radius: 2rpx;
  background-color: #2c8eff;

  transform: translateX(-50%);
}

.lecturer-income .main {
  padding: calc(20rpx + var(--safe-top)) 0 20rpx;
}

.lecturer-income .main .dt {
  padding: 30rpx 0 20rpx 30rpx;
  font-size: 26rpx;
  line-height: 37rpx;
  color: #666666;
}

.lecturer-income .main .list {
  padding-left: 30px;
  background-color: #ffffff;
}

.lecturer-income .main .item {
  display: flex;

  align-items: center;
  height: 120rpx;
  padding-right: 30rpx;
  border-top: 1px solid #eeeeee;
}

.lecturer-income .main .item:first-child {
  border-top: none;
}

.lecturer-income .main .lt {
  flex: 1;
  font-size: 28rpx;
  line-height: 40rpx;
  color: #282828;
}

.lecturer-income .main .rt {
  font-size: 34rpx;
  color: #2c8eff;
}

.lecturer-income .main .rt.add {
  color: #ff6b00;
}

.lecturer-income .main .time {
  margin-top: 8rpx;
  font-size: 24rpx;
  line-height: 33rpx;
  color: #999999;
}

.lecturer-income .empty {
  display: block;
  width: 414rpx;
  margin: 2rpx auto 0;
}
</style>