Portal/pages/user/transactionRecords.vue

<template>
  <view class="transaction">
    <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 == 11 }"
          @tap="chooseNav(11)"
          >{{ $lang.upperRecord }}</view
        >
        <view
          class="li"
          :class="{ active: active == 12 }"
          @tap="chooseNav(12)"
          >{{ $lang.lowerRecord }}</view
        >
      </view>
      <view class="data-btn" slot="right">
        <u-icon
          @tap="showDate = true"
          name="calendar"
          color="#eee"
          size="28"
        ></u-icon>
      </view>
    </u-navbar>

    <view class="item" v-for="(item, index) in list" :key="index">
      <template v-if="active == 11">
        <view class="box order">
          {{ $lang.transactionNumber }}： {{ item.OrderNo }}
        </view>
        <view class="box amount"
          >{{ $lang.upSplitAmount }}： {{ item.Money }}</view
        >
        <view class="box tiem">
          {{ $lang.upSplitDate }}： {{ item.CreateTime }}</view
        >
        <view class="box tiem">
          {{ $lang.upSplitState }}： {{ $lang.statusType[item.Status] }}</view
        >
      </template>
      <template v-if="active == 12">
        <view class="box order">
          {{ $lang.transactionNumber }}： {{ item.OrderNo }}
        </view>
        <view class="box amount"
          >{{ $lang.downSplitAmount }}： {{ item.Money }}</view
        >
        <view class="box tiem">
          {{ $lang.downSplitDate }}： {{ item.CreateTime }}</view
        >
        <view class="box tiem">
          {{ $lang.downSplitState }}： {{ $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" />
    <l-calendar
      v-model="showDate"
      @change="changeDate"
      :isRange="true"
      :maxDate="today"
      :initStartDate="startTime"
      :initEndDate="endTime"
    ></l-calendar>
  </view>
</template>

<script>
import { mapState } from "vuex";
import dayjs from "dayjs";
export default {
  data() {
    return {
      active: 11,
      status: "loadmore",
      list: [],
      page: 1,
      showDate: false,
      today: dayjs().format("YYYY-MM-D"),
      startTime: dayjs().subtract(1, "week").format("YYYY-MM-D"),
      endTime: dayjs().format("YYYY-MM-D"),
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.app.userInfo,
      $lang: (state) => state.app.lang[state.app.language],
    }),
  },
  onLoad() {
    this.getData("refresh");
  },
  onReachBottom() {
    this.getData("loading");
  },
  methods: {
    chooseNav(nav) {
      this.active = nav;
      this.getData("refresh");
    },
    changeDate(date) {
      this.startTime = date.startDate;
      this.endTime = date.endDate;
      this.getData("refresh");
    },
    getData(type) {
      if (type == "refresh") {
        this.list = [];
        this.page = 1;
      } else {
        this.page += 1;
      }
      const params = {
        type: this.active,
        pageSize: 10,
        page: this.page,
      };
      let start = dayjs(this.startTime).unix(),
        end = dayjs(this.endTime).unix();

      if (end > start) {
        params.startTime = start;
        params.endTime = end + 24 * 60 * 60 * 1000 - 1;
      } else {
        params.startTime = end;
        params.endTime = start + 24 * 60 * 60 * 1000 - 1;
      }

      this.status = "loading";
      this.$api
        .getScorelog(params)
        .then((res) => {
          let list = [];
          if (res.status_code == 200) {
            console.log(res);
            list = res?.data?.list || [];
          } else {
            this.$toast({
              message: res.message,
              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>
.transaction {
  /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>