61 lines
1.4 KiB
Vue
61 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { buildCustomerServiceUrl } from '../config/customerService';
|
|
import { useAuthStore } from '../stores/auth';
|
|
import { usePlayerProfile } from '../composables/usePlayerProfile';
|
|
|
|
const { t } = useI18n();
|
|
const auth = useAuthStore();
|
|
const { profileRaw, avatarUrl } = usePlayerProfile();
|
|
|
|
const iframeSrc = computed(() => {
|
|
const visitor = auth.user
|
|
? {
|
|
name:
|
|
profileRaw.value?.username ||
|
|
profileRaw.value?.preferences?.phone ||
|
|
auth.user.username ||
|
|
'',
|
|
avatar: avatarUrl.value
|
|
? new URL(avatarUrl.value, window.location.origin).href
|
|
: '',
|
|
id: String(profileRaw.value?.id ?? auth.user.id ?? ''),
|
|
}
|
|
: null;
|
|
|
|
return buildCustomerServiceUrl(t('support.connecting'), visitor);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="cs-panel">
|
|
<iframe
|
|
:key="iframeSrc"
|
|
class="cs-frame"
|
|
:src="iframeSrc"
|
|
:title="t('support.title')"
|
|
allow="microphone; camera; clipboard-read; clipboard-write"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.cs-panel {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 0 -16px;
|
|
background: var(--bg-body);
|
|
}
|
|
|
|
.cs-frame {
|
|
flex: 1;
|
|
width: 100%;
|
|
min-height: calc(100dvh - 140px);
|
|
border: 0;
|
|
background: #fff;
|
|
}
|
|
</style>
|