lingji-work-fe/src/components/join-modal.vue

<template>
  <Modal title="加入企业" @ok="handleJoin">
    <div v-if="enterprise" class="join-body flex item-center">
      <img src="@/assets/warning.svg" alt="" />
      {{ `确定加入 “${enterprise.name}”吗？` }}
    </div>
  </Modal>
</template>
<script setup lang="ts">
import Modal from '@components/modal.vue';
import { ref, onMounted } from 'vue';
import { getQueryParam } from '@/utils/helper';

import { getEnterpriseByInviteCode, joinEnterpriseByInviteCode } from '@/api/all';
const enterprise = ref();
const inviteCode = ref();

async function getEnterprise() {
  inviteCode.value = getQueryParam('invite_code');
  if (inviteCode.value) {
    const res = await getEnterpriseByInviteCode(inviteCode.value);
    enterprise.value = res.data;
  }
}

async function handleJoin() {
  await joinEnterpriseByInviteCode(inviteCode.value);
  AMessage.success('加入成功');
}
onMounted(() => {
  getEnterprise();
});
</script>
<style lang="scss">
.join-body {
  margin: 0;
  font-family: $font-family-medium;
  font-weight: 400;
  font-size: 14px;
  color: var(--Text-1, rgba(33, 31, 36, 1));
  img {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    margin-left: 0;
  }
}
</style>