boursecu_user/src/views/base/home/components/ShareModal.vue

<template>
  <BasicModal v-model:visible="visible" :custom-footer="true">
    <div class="p-2">
      <div
          v-if="referralId"
          class="text-primary font-bold w-full text-center flex justify-between gap-2 items-center"
      >
        کد معرف:
        <div class="flex gap-2">
          <div class="mr-2">{{ referralId }}</div>
        </div>
      </div>
      <div class="w-full flex gap-2 mt-1">
        <BasicButton
            icon="vuesax-linear:share"
            size="small"
            class="flex-1"
            icon-size="18"
            @click.stop="shareCode"
        >
          اشتراک گذاری
        </BasicButton>
        <BasicButton
            icon="vuesax-linear:copy"
            size="small"
            class="flex-1"
            icon-size="18"
            @click.stop="copyCode"
        >
          رونوشت
        </BasicButton>
      </div>
    </div>
  </BasicModal>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import BasicModal from '@/components/BasicPacks/BasicModal.vue'
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
import { message } from 'ant-design-vue'
import { useUserStore } from '@/store/userStore'
import { getReferralShareText, getReferralShareTitle } from '@/utils/config'

const props = defineProps<{
  show: boolean
  referralId: string
}>()

const emit = defineEmits<{
  'update:show': [value: boolean]
}>()

const userStore = useUserStore()

const visible = computed({
  get: () => props.show,
  set: (val) => emit('update:show', val)
})

const shareCode = () => {
  const text = getReferralShareText({
    userName: userStore.userInfo?.name,
    referralId: props.referralId,
  })

  navigator.share({ title: getReferralShareTitle(), text })
}

const copyCode = () => {
  if (props.referralId) {
    navigator.clipboard.writeText(props.referralId)
    message.info('کد رونوشت شد')
  }
}
</script>