gypsy-crm-frontend-vu/pages/common/chat.vue

<template>
  <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
    <cwg-header :title="title" />
    <view class="chat-wrapper">
      <web-view v-if="chatUrl" :src="chatUrl" :webview-styles="webviewStyles" />
    </view>
  </cwg-page-wrapper>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { lang } from '@/composables/config'
import useGlobalStore from '@/stores/use-global-store'

const { t } = useI18n()
const globalStore = useGlobalStore()

const title = computed(() => t('Label.CustomerService') || '在线客服')
const statusBarHeight = computed(() => globalStore.statusBarHeight || 0)

const webviewStyles = computed(() => ({
  progress: { color: '#ea002a' },
}))

const chatUrl = computed(() => {
  const currentLang = lang.value || 'cn'
  const base = 'https://secure.cwgmx.com/mobile/zopim.html'
  const query = `lang=${encodeURIComponent(currentLang)}&statusBarHeight=${encodeURIComponent(String(statusBarHeight.value))}`
  return `${base}?${query}`
})
</script>

<style scoped lang="scss">
@import "@/uni.scss";

.chat-wrapper {
  width: 100%;
  min-height: calc(100vh - 56px);
}
</style>