web-africa-h5/pages/user/my-wallet/recoilDetails.vue

<template>
  <view :class="{ popupShow: showPop }">
    <u-navbar
      placeholder
      :title="$t('fn_297')"
      :bgColor="'#ffffff'"
      leftIcon="arrow-left"
      @leftClick="goBack"
    >
      <button class="nav-right-btn" slot="right" @click="openPop()">
        {{ $t("MY_ORD_50") }}
      </button>
    </u-navbar>
    <view class="listdata-list">
      <view
        class="listdata-item"
        v-for="(item, index) in listData"
        :key="index"
      >
        <view class="d-b-s listdata-label">
          <view class="item-name">{{ $t("w_0296") }}</view>
          <view class="item-form flex-1">{{ item.tradeCode }}</view>
        </view>
        <view class="d-b-s listdata-label">
          <view class="item-name">{{ $t("w_0294") }}</view>
          <view class="item-form flex-1">{{ item.pkAccountVal }}</view>
        </view>
        <view class="d-b-s listdata-label">
          <view class="item-name">{{ $t("N_I_163") }}</view>
          <view class="item-form flex-1">{{ item.tradeTypeVal }}</view>
        </view>
        <view class="d-b-s listdata-label">
          <view class="item-name">{{ $t("w_0297") }}</view>
          <view class="item-form flex-1">{{
            formatNum(item.tradeAmount)
          }}</view>
        </view>
        <view class="d-b-s listdata-label">
          <view class="item-name">{{ $t("N_I_160") }}</view>
          <view class="item-form flex-1">{{ item.creationTime }}</view>
        </view>
      </view>
    </view>
    <view class="d-c-c p30" v-if="listData.length == 0 && !loading">
      <text class="iconfont icon-wushuju"></text>
      <text class="cont">{{ $t("w_0405") }}</text>
    </view>
    <uni-load-more v-else :loadingType="loadingType"></uni-load-more>
    <!-- 筛选 -->
    <u-popup :show="showPop" mode="right" @close="closePop" @open="openPop">
      <view class="pop-content rightpop">
        <view class="pop-title d-b-c">
          <view class="f28 gray3">{{ $t("MY_ORD_50") }}</view>
          <view class="f28 domation" @click="closePop">{{
            $t("N_I_241")
          }}</view>
        </view>

        <view class="right-item-title">{{ $t("N_I_160") }}</view>
        <view class="d-c-c">
          <picker
            mode="date"
            :value="form.startDate"
            :start="startDate"
            :end="endDate"
            @change="bindDateChange1"
          >
            <view class="data-input">{{
              form.startDate || $t("CK_KS_3")
            }}</view>
          </picker>
          <view
            style="
              width: 30rpx;
              height: 1rpx;
              background-color: #333;
              margin: 0 24rpx;
            "
          ></view>
          <picker
            mode="date"
            :value="form.endDate"
            :start="startDate"
            :end="endDate"
            @change="bindDateChange2"
          >
            <view class="data-input">{{ form.endDate || $t("CK_KS_9") }}</view>
          </picker>
        </view>
        <view class="pop-btns">
          <view class="pop-left-btn" @click="resetSubmit()">{{
            $t("w_0257")
          }}</view>
          <view class="pop-right-btn" @click="searchSubmit()">{{
            $t("w_0035")
          }}</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import uniLoadMore from "@/components/uni-load-more.vue";
export default {
  components: {
    uniLoadMore,
  },
  data() {
    const currentDate = this.getDate({
      format: true,
    });
    return {
      /*最后一页码数*/
      last_page: 0,
      /*当前页面*/
      page: 1,
      /*每页条数*/
      list_rows: 10,
      /*有没有等多*/
      no_more: false,
      total: 0,
      /*是否正在加载*/
      loading: true,
      listData: [],
      showPop: false,
      date1: "",
      date2: "",
      form: {
        startDate: "",
        endDate: "",
        pageNum: 1,
        pageSize: 10,
      },
      //   tradeList: [],
      //   accountList: [],
    };
  },
  onLoad(e) {
    this.form.pkAccount = e.pkAccount;
  },
  onShow() {
    /*获取数据*/
    this.listData = [];
    this.page = 1;
    this.getData();
  },
  computed: {
    /*加载中状态*/
    loadingType() {
      if (this.loading) {
        return 1;
      } else {
        if (this.listData.length != 0 && this.no_more) {
          return 2;
        } else {
          return 0;
        }
      }
    },
    startDate() {
      return this.getDate("start");
    },
    endDate() {
      return this.getDate("end");
    },
  },
  methods: {
    onReachBottom() {
      let self = this;
      if (self.form.pageNum * self.form.pageSize < self.total) {
        self.form.pageNum++;
        self.getData();
      }
      self.no_more = true;
    },
    goBack() {
      uni.navigateBack();
    },
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === "start") {
        year = year - 60;
      } else if (type === "end") {
        year = year + 2;
      }
      month = month > 9 ? month : "0" + month;
      day = day > 9 ? day : "0" + day;
      return `${year}-${month}-${day}`;
    },
    bindDateChange1: function (e) {
      this.form.startDate = e.detail.value;
    },
    bindDateChange2: function (e) {
      this.form.endDate = e.detail.value;
    },
    getData() {
      // return;
      let self = this;
      self.loading = true;
      var formdata = self.form;
      self._post(
        "member/api/wallet/recoil-details?" +
          "pageNum=" +
          formdata.pageNum +
          "&pageSize=" +
          formdata.pageSize,
        formdata,
        function (res) {
          self.loading = false;
          self.listData = self.listData.concat(res.rows);

          self.total = res.total;
          if (self.total < self.form.pageNum * self.form.pageSize) {
            self.no_more = true;
          }
        }
      );
    },
    openPop() {
      // console.log('open');
      this.showPop = true;
    },
    closePop() {
      this.showPop = false;
      // console.log('close');
    },
    resetSubmit() {
      this.form.startDate = "";
      this.form.endDate = "";
      this.searchSubmit();
    },
    searchSubmit: function () {
      this.showPop = false;
      /*获取数据*/
      this.listData = [];
      this.form.pageNum = 1;
      this.getData();
    },
  },
};
</script>

<style lang="scss">
.top-bg {
  width: 750rpx;
  height: 102rpx;
  background: #ffffff;
  position: sticky;
  left: 0;
  top: 0;
  z-index: 10;
  margin-bottom: 22rpx;
}

.listdata-list {
  padding-top: 8rpx;
}

.listdata-item {
  width: 750rpx;
  background: #ffffff;
  margin-bottom: 20rpx;
  padding: 0 26rpx 40rpx 23rpx;
  box-sizing: border-box;
  font-size: 26rpx;
}

.listdata-label {
  padding-top: 29rpx;
}

.item-name {
  width: 150rpx;
  color: #999;
  word-break: break-all;
  flex-shrink: 0;
}

.item-form {
  word-break: break-all;
}

.status_1 {
  color: #ff9008;
}

.status_2 {
  color: #45c242;
}

.status_3 {
  color: #fb3024;
}

.nav-right-btn {
  background: none;
  color: #999;
  font-size: 26rpx;
}
</style>