kicc-ui/src/views/system/user/account/setting/entCertification/index.vue

<template>
  <div
    ref="wrapperRef"
    v-loading="state.loadingStatus"
    class="step-form-form"
    :style="getContentStyle"
  >
    <div>
      <ASteps :current="state.current">
        <AStep title="填写企业信息"/>
        <AStep title="审核处理"/>
        <AStep title="企业信息"/>
      </ASteps>
    </div>
    <div class="mt-5">
      <Step1 v-show="state.current === 0"
             :push-enterprise="state.pushEnterprise"
             @next=" val => {
               state.current++
               state.pushEnterprise.status = val
             }"
      />
      <Step2 v-show="state.current === 1" :push-enterprise="state.pushEnterprise" @previous="state.current--"/>
      <Step3 v-show="state.current === 2"/>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, unref, computed, CSSProperties, reactive, onBeforeMount } from 'vue';
  import Step1 from './Step1.vue';
  import Step2 from './Step2.vue';
  import Step3 from './Step3.vue';
  import { Steps } from 'ant-design-vue';
  import { useContentHeight } from '/@/hooks/web/useContentHeight';
  import { getAuthData } from '/@/api/platform/common/controller/pushEnterprise';
  import type { PushEnterprise } from '/@/api/platform/common/entity/pushEnterprise';

  interface State {
    current: number;
    loadingStatus: boolean;
    pushEnterprise: PushEnterprise | {};
  }

  const ASteps = Steps;
  const AStep = Steps.Step;
  const wrapperRef = ref(null);
  const state = reactive<State>({
    current: 0,
    loadingStatus: false,
    pushEnterprise: {}
  });
  const { contentHeight } = useContentHeight(
      computed(() => true),
      wrapperRef,
      [],
      [],
      null,
      ref(30));
  const getContentStyle = computed((): CSSProperties => ({ minHeight: `${unref(contentHeight)}px` }));

  onBeforeMount(async () => {
    await loadPushEnterprise();
  });

  async function loadPushEnterprise() {
    state.loadingStatus = true;
    const pushEnterprise = await getAuthData();
    state.pushEnterprise = pushEnterprise;
    switch (pushEnterprise?.status) {
      case 1:
      case -1:
        state.current = 1;
        break;
      case 2:
        state.current = 2;
        break;
      default:
        state.current = 0;
    }
    state.loadingStatus = false;
  }

</script>
<style lang="less" scoped>
.step-form-form {
  background: @component-background;

  .ant-steps {
    padding: 30px 45px 30px 45px;
  }
}
</style>