index.vue

<template>
  <div class="container">
    <NavBar title="客户信息变更" left-arrow @click-left="goBack" />

    <section class="list">
      <PullRefresh v-model="refreshing" @refresh="onRefresh" class="scroll">
        <List :finished="finished" finished-text="没有更多了" @load="loadApproval">
          <ChangeListItem v-for="item in infos" :info="item" @click="jump" />
        </List>
      </PullRefresh>
    </section>

    <Plus @click="jump" />
  </div>
</template>

<script setup>
import { goBack } from "@/utils/globalFun"
import { NavBar, List, PullRefresh } from "vant";
import ChangeListItem from '../components/ChangeListItem.vue'
import Plus from '@/components/Plus.vue'
import api from "../api";
import { useRouter } from "vue-router";

const infos = $ref([
  {
    id: 'BG001001001',
    applyDate: '2022-8-18',
    status: '拒绝'
  }
])

const refreshing = $ref(true);
const finished = $ref(true);

const onRefresh = () => {
  // 下拉重置参数，重新加载
};

const loadApproval = () => {

}

const router = useRouter();
const jump = () => {
  router.push({ name: 'infoChange-views-changeForm' })
}
</script>

<style scoped lang="less">
.list {
  box-sizing: border-box;
  height: calc(100vh - var(--van-nav-bar-height));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 8px;
  padding-bottom: 10px;
}

.scroll {
  box-sizing: border-box;
  height: 100%;
  overflow-y: auto;
}
</style>

<route>
{
  meta: {
    title: '客户信息变更'
  }
}
</route>