/** * 页面描述:VHIS产品页面 */ import api from '@/api/api' import { httpGet, httpPost, requestDomain } from '@/api/fetch-api.js' import { mapGetters, mapActions, mapState } from "vuex"; var UA = require("ua-device") export default { data() { return { key: '', // swiper swiperOption: { navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }, pagination: { el: '.swiper-pagination', clickable: true, }, // autoplay: { // delay: 5000, // stopOnLastSlide: false, // disableOnInteraction: false // }, // speed: 1000, }, bannerList: [], bannerCandidateList: [], // 视频 playerOptions: {}, bannerTipsVisible: false, productList: [], productShowMore: [], // 全部的信息 sourceData: {}, bottomBtnType: "", bottomBtnLink: "", file1: null, file2: null } }, components: {}, computed: { ...mapState({ isSmallScreen: state => state.isSmallScreen, isMobile: state => state.isMobile }), locale() { return this.$i18n.locale || 'tc'; }, i18n() { return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {}; }, player() { return this.$refs.videoPlayer.player }, }, methods: { onHideBannerTipsHandler() { this.bannerTipsVisible = false; }, bottomBtnHandle() { // this.btnNavigateTo(this.bottomBtnType, this.bottomBtnLink); this.$router.push({ path: "/custom/service?q=m6" }) }, btnNavigateTo(type, link) { switch (type) { case "none": break; case "news": this.$router.push({ path: "/news/detail", query: { c: link } }); break; case "product": break; case "vhis": this.$router.push({ path: "/vhis", query: { p: link } }); break; default: location.href = link; break; } }, // 初始化视频组件 refreshVideoPlayer(videoUrl, posterUrl) { let playerOptions = { aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3") autoplay: false, //如果true,浏览器准备好时开始回放。 muted: true, // 默认情况下将会消除任何音频。 language: 'en', // playbackRates: [0.7, 1.0, 1.5, 2.0],//播放速度 sources: [{ type: "video/mp4", src: videoUrl, // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm" }], poster: posterUrl, controlBar: { timeDivider: true, durationDisplay: true, remainingTimeDisplay: false, fullscreenToggle: true //全屏按钮 } } let output = new UA(navigator.userAgent); let deviceType = output.device.type; let isMobile = deviceType == "mobile"; // if (this.isSmallScreen) { if (isMobile) { playerOptions.aspectRatio = "16:9"; } this.playerOptions = playerOptions; }, initProduct() { let productList = this.i18n.genRich.productList; if (this.productList && this.productList.length > 0) { for (let index = 0; index < productList.length; index++) { if (this.productList.length > index) { productList[index].showMore = this.productList[index].showMore; } else { productList[index].showMore = false; } } } else { productList.forEach(element => { element.showMore = false; }); } this.productList = productList; }, onShowMoreHandler(idx) { let productList = this.productList; let curProduct = productList[idx]; if (curProduct) { curProduct.showMore = !curProduct.showMore; } this.productList = productList; }, initData() { this.initProduct(); let targetData = null; switch (this.locale) { case "zh": targetData = this.sourceData.confCn; break; case "en": targetData = this.sourceData.confEn; break; case "tc": targetData = this.sourceData.confTc; break; } if (targetData) { let bannerList = [{ pcBannerUrl: targetData.pcBannerUrl, mobileBannerUrl: targetData.mobileBannerUrl, btns: targetData.btnDescribe }]; this.$set(this, 'bannerList', bannerList); this.refreshVideoPlayer(targetData.videoUrl, targetData.videoPoster); // 设置标题 // document.title = targetData.productName; this.bottomBtnType = targetData.bottomUrlType; this.bottomBtnLink = targetData.bottomUrlLink; this.file1 = targetData.file1; this.file2 = targetData.file2; } }, downloadFile(key) { let file = this[key]; if (file) { let key = file.url; let name = file.name; httpPost({ url: api.getObsDownloadPath, data: { key, name } }).then(res => { if (res) { let url = requestDomain() + api.downloadPolicy + "/" + res; window.open(url); } else { this.showDownloadError = true; } }); } }, initActivity() { let d = localStorage.getItem("pinganfuInfo"); if (d) { try { this.sourceData = JSON.parse(d); this.initData(); } catch (e) { } } } }, mounted() { this.initActivity(); }, created() { httpGet({ url: api.productInfo, data: { code: "pinganfu" } }).then(res => { if (res) { localStorage.setItem("pinganfuInfo", JSON.stringify(res)); this.sourceData = res; } this.initData(); }); this.$root.eventBus.$on("langChange", () => { try { this.initData(); } catch (e) { } }); } }