big-model-web/src/views/global/invite/index.vue

<template>
  <div
    class="relative size-full bg-[url('@/assets/images/login-bg.png')] bg-[length:100%_100%] bg-no-repeat"
  >
    <img
      class="absolute top-11 left-15 h-11 w-69"
      src="@/assets/images/taiji-logo.png"
    />
    <div
      class="absolute top-0 right-0 flex h-full w-[42.5rem] items-center justify-center bg-[var(--czr-dialog-bg)]"
    >
      <div class="flex w-[26.5rem] flex-col" v-loading="state.loading">
        <template v-if="state.detail">
          <div class="text-[1.88rem] font-bold text-[#373D4C]">
            {{ state.detail.userName }}邀请您加入
          </div>
          <div class="mt-4 text-[1.88rem] font-bold text-[#3363DE]">
            {{ state.detail.tenantName }}组织
          </div>
          <div
            class="mt-4 text-[1.88rem] font-bold text-[#3363DE]"
            v-if="state.detail.type == 0"
          >
            成为管理员
          </div>
          <div
            class="__hover mt-2 mt-12 flex h-[2.5rem] w-full items-center justify-center bg-[#3363DE] text-sm text-[#ffffff]"
            @click="onSubmit"
            v-loading="state.loading"
          >
            加入组织
          </div>
          <div class="mt-3 text-sm text-[#576275]">
            链接将在
            <span class="text-[#3363DE]">{{ state.detail.validateTime }}</span>
            失效
          </div>
        </template>
        <template v-else>
          <div class="text-[1.88rem] font-bold text-[#373D4C]">无效的链接</div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, getCurrentInstance, reactive, ref, onMounted } from 'vue'
import { User, Lock, Clock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { useAppStore } from '@/stores'
import { accountLinkAccess, accountOpenLink } from '@/api/modules/global/invite'

const AppStore = useAppStore()
const router = useRouter()
const route = useRoute()
const emit = defineEmits([])
const props = defineProps({})
const { proxy }: any = getCurrentInstance()
const state: any = reactive({
  inviteCode: route.query.inviteCode,
  loading: false,
  detail: null,
})
const onSubmit = () => {
  if (!state.loading) {
    state.loading = true
    accountLinkAccess({
      tenantId: state.detail.tenantId,
      type: state.detail.type,
      userId: AppStore.userInfo?.id,
    })
      .then(({ data }: any) => {
        ElMessage.success('加入组织成功！')
        router.replace({ name: 'root' })
        AppStore.initUserInfo()
      })
      .catch(() => {})
      .finally(() => {
        state.loading = true
      })
  }
}
const errorMsg = () => {}
onMounted(() => {
  initDetail()
})
const initDetail = () => {
  state.loading = true
  if (state.inviteCode) {
    accountOpenLink(state.inviteCode)
      .then(({ data }: any) => {
        state.detail = data
      })
      .catch(() => {})
      .finally(() => {
        state.loading = false
      })
  } else {
    errorMsg()
  }
}
</script>

<style lang="scss" scoped></style>