zhishifufei_uniapp/pages/my/gold_coin.vue

<template>
  
  <BaseContainer class="bill">
    <NavBar title="金币明细" />
    <template v-if="userInfo.uid">
      <view class="header">
        <view class="cont">
          {{ gold_name }}
          <view class="num">{{ userInfo.gold_num }}</view>
        </view>
      </view>
      <view class="main">
        <view class="nav-bar">
          <view
            v-for="(item, index) in navs"
            :key="index"
            :class="{ active: navActive === index }"
            class="item"
            @click="navActives(index)"
          >
            {{ item }}
          </view>
        </view>
        <view class="nav-cont">
          <view class="section">
            <view class="list">
              <view v-for="(item, index) in billList" :key="index" class="item">
                <view class="text">
                  <view class="name">{{ item.title }}</view>
                  <view class="time">{{ item.add_time }}</view>
                </view>
                <view class="nums" v-if="item.pm > 0">+{{ item.number }}</view>
                <view class="num" v-else>-{{ item.number }}</view>
              </view>
            </view>
            <view v-if="loadend && billList.length" class="loaded">{{ loadTitle }}</view>
            <image
              v-if="!billList.length && !loading"
              class="nothing"
              mode="aspectFit"
              :src="getImgPath('/wap/first/zsff/images/no_data_available.png')"
            />
          </view>
        </view>
      </view>
    </template>
  </BaseContainer>
</template>

<script>
import { getUserInfo } from "@/api/auth";
import { getCoinData, getGoldList } from "@/api/user";

export default {
  data() {
    return {
      navs: ["全部", "支出", "收入"],
      billList: [],
      navActive: 0,
      limit: 20,
      page: 1,
      loadend: false,
      userInfo: {},
      gold_name: "",
      loading: false,
    };
  },
  watch: {
    navActive() {
      this.index = 1;
    },
  },
  onLoad() {
    this.getData();
    this.getCoinInitData();
    this.getGoldList();
  },
  onReachBottom() {
    this.getGoldList();
  },
  methods: {
    getData() {
      getUserInfo().then(({ data }) => {
        this.userInfo = data;
      });
    },
    getCoinInitData() {
      getCoinData().then(({ data }) => {
        const { gold_name } = data;
        Object.assign(this, {
          gold_name,
        });
      });
    },
    navActives(index) {
      this.navActive = index;
      this.page = 1;
      this.loading = false;
      this.loadend = false;
      this.billList = [];
      this.getGoldList();
    },
    async getGoldList() {
      if (this.loadend || this.loading) return;
      this.loading = true;

      uni.showLoading({ mask: true });

      try {
        const { data: list } = await getGoldList(this.navActive, this.page, this.limit);
        uni.hideLoading();
        let billList = this.$util.SplitArray(list, this.billList);
        this.loading = false;
        this.loadend = list.length < this.limit;
        this.page++;
        this.loadTitle = this.loadend ? "已全部加载" : "上拉加载更多";
        this.$set(this, "billList", billList);
      } catch (err) {
        uni.hideLoading();
        this.loadTitle = "上拉加载更多";
        this.loading = false;
      }
    },
  },
};
</script>

<style scoped lang="scss">


.section {
  position: relative;
}

.loaded {
  font-size: 28rpx;
  line-height: 72rpx;
  text-align: center;
  color: #999999;
}

.nothing {
  width: 414rpx;
  margin: 30px auto 0;
  display: block;
}

.bill .header {
  height: 220rpx;
  padding-left: 60rpx;
  background: #539dfd url(@/static/images/bill-bg.png) 535rpx center/120rpx no-repeat;
  line-height: 220rpx;
}

.bill .header .cont {
  display: inline-block;
  vertical-align: middle;
  font-size: 28rpx;
  line-height: 40rpx;
  color: #ffffff;
}

.bill .header .cont .num {
  margin-top: 3rpx;
  font-size: 50rpx;
  line-height: 70rpx;
}

.bill .main .nav-bar {
  display: flex;
  background-color: #ffffff;
}

.bill .main .nav-bar .item {
  flex: 1;
  height: 86rpx;
  font-size: 28rpx;
  line-height: 86rpx;
  text-align: center;
  color: #282828;
}

.bill .main .nav-bar .active {
  border-bottom: 1px solid #539dfd;
  color: #539dfd;
}

.bill .main .nav-cont {
  border-top: 1px solid #f2f2f2;
}

.bill .main .nav-cont .list {
  padding-left: 30rpx;
  background-color: #ffffff;
}

.bill .main .nav-cont .list .item {
  display: flex;

  align-items: center;
  min-height: 120rpx;
  padding-right: 30rpx;
}

.bill .main .nav-cont .list .item .item {
  border-top: 1px solid #f2f2f2;
}

.bill .main .nav-cont .list .item .text {
  flex: 1;
}

.bill .main .nav-cont .list .item .name {
  font-size: 30rpx;
  color: #282828;
}

.bill .main .nav-cont .list .item .time {
  margin-top: 10rpx;
  font-size: 28rpx;
  color: #999999;
}

.bill .main .nav-cont .list .item .num {
  font-size: 32rpx;
  color: #e93323;
}

.bill .main .nav-cont .list .item .nums {
  font-size: 32rpx;
  color: #539dfd;
}

.bill .main .nav-cont .tips {
  height: 100rpx;
  font-size: 32rpx;
  line-height: 100rpx;
  text-align: center;
  color: #999999;
}
</style>