vhis-detail.js 5.39 KB
/**
 * 页面描述: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: ""
		}
	},
	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);
		},
		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.vhisDetail.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;
			}
		},
		downloadFile(key) {
			let sourceData = this.sourceData;

			if (sourceData.exts && sourceData.exts.iobsKey && sourceData.exts.iobsKey[key]) {
				let iobsKey = sourceData.exts.iobsKey[key];
				httpPost({
					url: api.getObsDownloadPath,
					data: { key: iobsKey }
				}).then(res => {
					if (res) {
						let url = requestDomain() + api.downloadPolicy + "/" + res;
						window.open(url);
					} else {
						this.showDownloadError = true;
					}
				});
			}
		},
		initActivity() {
			let d = localStorage.getItem("voluntaryInfo");
			if (d) {
				try {
					this.sourceData = JSON.parse(d);
					this.initData();
				} catch (e) { }
			}
		}
	},
	mounted() {
		this.initActivity();
	},
	created() {
		httpGet({
			url: api.productInfo,
			data: {
				code: "voluntary"
			}
		}).then(res => {
			if (res) {
				localStorage.setItem("voluntaryInfo", JSON.stringify(res));
				this.sourceData = res;
			}
			this.initData();
		});
		this.$root.eventBus.$on("langChange", () => {
			try {
				this.initData();
			} catch (e) { }
		});
	}
}