byte-sailing-mobile/src/views/salesContract/contract/index.vue

<template>
  <van-nav-bar :title="$t('contract.name')" left-text="" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
    <template #right>{{ $t("common.add") }}</template>
  </van-nav-bar>
  <van-search v-model="req.keyword" :placeholder="$t('common.pleaseEnterKeywords')" @search="onRefresh" />
  <van-pull-refresh v-model="loading" @refresh="onRefresh">
    <div class="list">
      <van-list v-model:loading="loading" :finished="finished" :finished-text="$t('common.noMore')" @load="getList" style="margin-bottom: 60px">
        <commonList :data="listData" @onClick="toDtl" :config="listConfig"></commonList>
      </van-list>
    </div>
  </van-pull-refresh>
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import commonList from "@/components/common-list.vue";

const proxy = getCurrentInstance().proxy;
const onClickLeft = () => proxy.$router.push("/main/working");
const onClickRight = () => {
  proxy.$router.push({
    path: "/main/processDtl",
    query: {
      flowKey: "contract_flow",
    },
  });
};
const req = ref({
  pageNum: 1,
  keyword: null,
});
const finished = ref(false);
const onRefresh = () => {
  req.value.pageNum = 1;
  finished.value = false;
  getList("refresh");
};
const loading = ref(false);
const listData = ref([]);
const getList = (type) => {
  loading.value = true;
  proxy
    .post("/contract/page", req.value)
    .then((res) => {
      if (res.data.rows && res.data.rows.length > 0) {
        res.data.rows = res.data.rows.map((item) => {
          return {
            ...item,
            currencyAmount: item.currency + " " + item.amount,
          };
        });
      }
      listData.value = type === "refresh" ? res.data.rows : listData.value.concat(res.data.rows);
      if (req.value.pageNum * 10 >= res.data.total) {
        finished.value = true;
      }
      req.value.pageNum++;
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
};
const toDtl = (row) => {
  // proxy.$router.push({
  //   path: "/main/processDtl",
  //   query: {
  //     flowKey: "account_request_funds_flow",
  //     id: row.flowInfoId,
  //     processType: 20,
  //   },
  // });
};
const listConfig = ref([
  {
    label: proxy.t("contract.sellCorporation"),
    prop: "sellCorporationName",
  },
  {
    label: proxy.t("contract.contractType"),
    prop: "contractTypeVal",
  },
  {
    label: proxy.t("contract.code"),
    prop: "code",
  },
  {
    label: proxy.t("contract.buyCorporation"),
    prop: "buyCorporationName",
  },
  {
    label: proxy.t("contract.amount"),
    prop: "currencyAmount",
  },
]);
</script>

<style lang="scss" scoped>
.list {
  min-height: 70vh;
}
</style>