feat: 初始化
This commit is contained in:
George
175
pages/contact/index.vue
Normal file
175
pages/contact/index.vue
Normal file
@ -0,0 +1,175 @@
|
||||
<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="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>
|
||||
Reference in New Issue
Block a user