HTFX-CRM-APP/pages/contact/index.vue

<template>
	<NavBar @navLeft="handleNavLeft" @navRight="handleNavRight" />
	<cover-view id="service-btn" @click="goLiveChatPage">
		<cover-image src="/static/contact/liveChat.png" mode="aspectFit" style="width: 26px; height: 26px"></cover-image>
	</cover-view>
	<view class="container">
		<view class="swiper">
			<HomeSwiper :position="1" />
		</view>
		<view class="pageTitle">
			<PageTitle :title="$t('contact.pageTitle')" />
		</view>
		<image src="/static/contact/contactBanner.png" mode="aspectFill" class="banner"></image>
		<view class="infoList">
			<view class="infoCard" @click="openLiveChat">
				<view class="title">{{ $t('contact.customerService') }}</view>
				<view class="subTitle">{{ $t('contact.customerServiceDesc') }}</view>
				<image src="/static/contact/customerService.png" mode="aspectFit" class="img"></image>
			</view>
			<view class="infoCard">
				<view class="title">{{ $t('contact.email') }}</view>
				<view class="subTitle">{{ contactInfo.email ?? '-' }}</view>
				<image src="/static/contact/email.png" mode="aspectFit" class="img"></image>
			</view>
			<view class="infoCard">
				<view class="title">{{ $t('contact.contactNumber') }}</view>
				<view class="subTitle">{{ contactInfo.phone ?? '-' }}</view>
				<image src="/static/contact/phone.png" mode="aspectFit" class="img"></image>
			</view>
		</view>
		<view class="videoListWrapper" v-show="showVideo">
			<view class="videoListTitle">{{ $t('contact.educationalVideos') }}</view>
			<view class="videoList">
				<view class="videoItem" v-for="video in videoList" :key="video.name">
					<video class="video" id="myVideo" :src="video.video_url ?? ''" controls></video>
					<view class="videoTitle">{{ video.name }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getContactInfo, getVideoList } from '@/services/contact/index.ts';
export default {
	data() {
		return {
			contactInfo: {},
			videoList: [],
			showVideo: true
		};
	},
	methods: {
		async getContactData() {
			const res = await getContactInfo();
			if (res && res.code === 0) {
				this.contactInfo = res.data;
			}
		},
		async getVideoData() {
			const res = await getVideoList();
			if (res && res.code === 0) {
				this.videoList = res.data;
			}
		},
		initLiveChat() {
			let si = setInterval(() => {
				const e = document.getElementById('chat-widget-minimized');
				if (e) {
					document.getElementById('service-btn').style.display = 'flex';
					e.style.display = 'block';
					clearInterval(si);
				}
			}, 200);
			window.__lc = window.__lc || {};
			window.__lc.license = 15504243;
			(function (n, t, c) {
				function i(n) {
					return e._h ? e._h.apply(null, n) : e._q.push(n);
				}
				var e = {
					_q: [],
					_h: null,
					_v: '2.0',
					on: function () {
						i(['on', c.call(arguments)]);
					},
					once: function () {
						i(['once', c.call(arguments)]);
					},
					off: function () {
						i(['off', c.call(arguments)]);
					},
					get: function () {
						if (!e._h) throw new Error("[LiveChatWidget] You can't use getters before load.");
						return i(['get', c.call(arguments)]);
					},
					call: function () {
						i(['call', c.call(arguments)]);
					},
					init: function () {
						var n = t.createElement('script');
						(n.async = !0), (n.type = 'text/javascript'), (n.src = 'https://cdn.livechatinc.com/tracking.js'), t.head.appendChild(n);
					}
				};
				!n.__lc.asyncInit && e.init(), (n.LiveChatWidget = n.LiveChatWidget || e);
			})(window, document, [].slice);
		},
		openLiveChat() {
			// #ifdef H5
			const liveChat = document.getElementById('chat-widget-minimized');
			if (liveChat) {
				const liveChatBtn = liveChat.contentDocument.getElementsByTagName('button')[0];
				if (liveChatBtn) {
					liveChatBtn.click();
				}
			}
			// #endif
			// #ifdef APP
			this.goLiveChatPage()
			// #endif
		},
		hideLiveChat() {
			// #ifdef H5
			let si = setInterval(() => {
				const e = document.getElementById('chat-widget-minimized');
				if (e) {
					e.style.display = 'none';
					clearInterval(si);
				}
			}, 200);
			// #endif
		},
		goLiveChatPage() {
			// #ifdef APP
			uni.navigateTo({
				url: '/pages/contact/serviceView',
				animationType: 'none'
			})
			// #endif
		},
		handleNavLeft(data) {
			this.showVideo = !data
		},
		handleNavRight(data) {
			this.showVideo = !data
		},
	},
	created() {
		this.getContactData();
		this.getVideoData();
	},
	onUnload() {
		// #ifdef H5
		this.hideLiveChat();
		// #endif
	},
	onShow() {
		// #ifdef H5
		this.initLiveChat();
		// #endif
	},
	onHide() {
		// #ifdef H5
		this.hideLiveChat();
		// #endif
	},
	mounted() {
		// #ifdef H5
		this.initLiveChat();
		// #endif
	}
};
</script>

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