Portal/pages/user/fundRecords.vue

<template>
  <view class="fund">
    <u-navbar
      leftIconColor="#eee"
      bgColor="#0c0c0d"
      :placeholder="true"
      :fixed="true"
      height="60"
      @leftClick="back"
    >
      <view class="nav" slot="center">
        <view
          class="li"
          :class="{ active: active == 'userRecharge' }"
          @tap="chooseNav('userRecharge')"
          >{{ $lang.depositRecords }}</view
        >
        <view
          class="li"
          :class="{ active: active == 'userWithdraw' }"
          @tap="chooseNav('userWithdraw')"
          >{{ $lang.withdrawalRecords }}</view
        >
      </view>
    </u-navbar>

    <view class="item" v-for="(item, index) in list" :key="index">
      <template v-if="active == 'userRecharge'">
        <view class="box order">
          {{ $lang.transactionNumber }}： {{ item.out_trade_no }}
        </view>
        <view class="box amount"
          >{{ $lang.rechargeAmount }}： {{ item.amount }}</view
        >
        <view class="box amount"
          >{{ $lang.balance }}： {{ item.new_money }}</view
        >
        <view class="box amount"
          >{{ $lang.rechargeAddress }}： {{ item.from_addr }}</view
        >
        <view class="box tiem">
          {{ $lang.rechargeDate }}： {{ item.create_time }}</view
        >
      </template>
      <template v-if="active == 'userWithdraw'">
        <view class="box order">
          {{ $lang.withdrawalNumber }}： {{ item.order_no }}
        </view>
        <view class="box amount"
          >{{ $lang.withdrawalAmount }}： {{ item.amount }}</view
        >
        <view class="box free"
          >{{ $lang.withdrawalCommission }}： {{ item.service_fee }}</view
        >
        <view class="box amount"
          >{{ $lang.balance }}： {{ item.new_money }}</view
        >
        <view class="box amount"
          >{{ $lang.withdrawalAddress }}： {{ item.to_address }}</view
        >
        <view class="box tiem">
          {{ $lang.withdrawalDate }}： {{ item.create_time }}</view
        >
        <view class="box tiem">
          {{ $lang.withdrawalState }}：
          {{ $lang.statusType[item.status] }}</view
        >
      </template>
    </view>
    <u-empty
      :show="status == 'nomore' && list.length == 0"
      text=" "
      marginTop="20%"
      icon="https://cdn.uviewui.com/uview/empty/data.png"
    >
    </u-empty>
    <u-loadmore :status="status" />
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      active: "userRecharge",
      status: "loadmore",
      list: [],
      page: 1,
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.app.userInfo,
      $lang: (state) => state.app.lang[state.app.language],
    }),
  },
  onLoad() {
    this.getData("refresh");
  },
  onReachBottom() {
    if (this.status != "nomore") {
      this.getData("loading");
    }
  },
  methods: {
    chooseNav(nav) {
      this.active = nav;
      this.getData("refresh");
    },

    getData(type) {
      if (type == "refresh") {
        this.list = [];
        this.page = 1;
      } else {
        this.page += 1;
      }
      const params = {
        user_id: this.userInfo.id,
        page: this.page,
        page_size: 10,
      };
      this.status = "loading";
      this.$api[this.active](params)
        .then((res) => {
          let list = [];
          if (res.Success == 1) {
            list = res?.data?.list || [];
          } else {
            this.$toast({
              message: res.Msg,
              duration: 2000,
            });
          }
          if (list.length == 0 || list.length < 10) {
            this.status = "nomore";
          }
          this.list = [...this.list, ...list];
        })
        .catch((err) => {
          this.status = "nomore";
          console.log(err);
        });
    },
    back() {
      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss" scoped>
.fund {
  /deep/.u-navbar__content__title {
    color: #eee;
    font-weight: 600;
  }
  .nav {
    display: flex;
    color: #959393;
    border-radius: 5px;
    overflow: hidden;
    font-size: 14px;
    .li {
      background: #242424;
      padding: 6px 15px;
      font-weight: 600;
      &.active {
        background: #947b2b;
        color: #000;
      }
    }
  }
  .item {
    color: $u-content-color;
    font-size: 28rpx;
    padding: 24rpx 0;
    border-bottom: 1px solid #38393b;
    .box {
      padding: 10rpx 20rpx;
      word-break: keep-all;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      box-sizing: border-box;
    }
  }
}
</style>