partner-front-vue3/src/components/modal/index.vue

<script lang="ts" setup>
// import companyInfo from './companyInfo.vue'
import userInfo from './userInfo.vue'
import { CUR_STATUS } from '@/enums/common'
const visible = defineModel('visible', { default: false })
enum STATUS {
  FirstStep = 'info',
  SecondStep = 'success',
}
const status = ref(STATUS.FirstStep)
const countNum = ref(20)

const onSuccess = (val: CUR_STATUS) => {
  status.value = STATUS.SecondStep
  // countDown()
}

const countDown = () => {
  countNum.value = 20
  const timer = setInterval(() => {
    countNum.value--
    if (countNum.value === 0) {
      clearInterval(timer)
      visible.value = false
    }
  }, 1000)
}
</script>

<template>
  <a-modal v-model:open="visible" :footer="false" :width="560" wrapClassName="custom-info" :keyboard="false" :maskClosable="false" :closable="false">
    <div v-if="status === STATUS.FirstStep">
      <user-info @success="onSuccess" v-model:visible="visible" />
    </div>
    <div v-if="status === STATUS.SecondStep" class="text-center py-100px">
      <div>
        <img class="w-88px h-88px" src="@/assets/images/smile.png" alt="" />
        <div>
          <h3 class="c-#000 fw-700 fs-34 mb-4px mt-37px">Information submitted</h3>
          <div class="c-333 mb-26px">We will conduct the audit within 7 working days, and the audit results will be communicated via email</div>
          <div class="c-333 mb-26px">You can view the submission form in the Personal Center - My Profile</div>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<style lang="less">
.custom-info {
  .ant-modal {
    .ant-modal-content {
      border-radius: 18px;
      padding: 0 !important;
    }
  }
}
</style>