<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="utf-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
|
<meta content="yes" name="apple-mobile-web-app-capable">
|
<meta content="black" name="apple-mobile-web-app-status-bar-style">
|
<meta content="telephone=no" name="format-detection">
|
<title>运动详情</title>
|
<script src="../js/rem.js"></script>
|
<link rel="stylesheet" href="../css//swiper-3.4.2.min.css">
|
<link rel="stylesheet" href="../css/index.css">
|
</head>
|
<body>
|
<div class="detail-view">
|
<div class="container" id="vmview" v-cloak>
|
<!-- 顶部轮播图 -->
|
<div class="top_swiper" v-if="top_banner[0]">
|
<div class="swiper-container">
|
<div class="swiper-wrapper">
|
<div class="swiper-slide" v-for="item in top_banner">
|
<img v-if="item.videoSrc" :src="item.imgSrc" class="slide-image">
|
<img v-else :src="item.imgSrc" class="slide-image">
|
<div class="play" v-if="item.videoSrc" @click="openVideo(item)">
|
<img src="../images/shipinicon.png">
|
</div>
|
</div>
|
</div>
|
<!-- 如果需要分页器 -->
|
<div class="swiper-pagination" v-if="top_banner.length > 1"></div>
|
</div>
|
<div class="video_cell" v-if="video_src" id="videopanel">
|
<video class="video" id="videopanel" :src="video_src" controls="controls" controlslist="nodownload noremoteplayback noplaybackrate" disablepictureinpicture></video>
|
</div>
|
</div>
|
<p class="sport_title">{{sportInfo.sportName}}</p>
|
<div class="sub_title">
|
<p v-if="sportInfo.maxAgeOfApplication <= 1"><img src="../images/ageicon.png">适合年龄：1岁以内</p>
|
<p v-else-if="sportInfo.maxAgeOfApplication==100"><img src="../images/ageicon.png">适合年龄：{{sportInfo.minAgeOfApplication}}岁及以上</p>
|
<p v-else><img src="../images/ageicon.png">适合年龄：{{sportInfo.minAgeOfApplication}}岁-{{sportInfo.maxAgeOfApplication}}岁</p>
|
</div>
|
<audio class="audio" src="https://avi.kidgrow.cloud/audio/sgxyx20.mp3" controls="controls" preload id="music1" hidden></audio>
|
<div class="sport_tips">
|
<p class="title">功效</p>
|
<p v-html="sportInfo.sportUses"></p>
|
</div>
|
<div class="sport_tips">
|
<p class="title">动作要领</p>
|
<p v-html="sportInfo.keyPointOfAction"></p>
|
</div>
|
<div class="sport_tips">
|
<p class="title">注意事项</p>
|
<p v-html="sportInfo.noteSafe"></p>
|
</div>
|
</div>
|
|
<!-- loading -->
|
<div id="new_loading" style="width:100%; max-width: 640px; height:100%; z-index: 99999; position: fixed; top: 0; display: none;"></div>
|
</div>
|
|
<script src="../js/jquery-3.1.1.min.js"></script>
|
<script src="../js/swiper-3.4.2.jquery.min.js"></script>
|
<script src="../js/vue.min.js"></script>
|
<script src="../js/spin.min.js"></script>
|
<script src="../js/config.js"></script>
|
<script>
|
var opts = {
|
lines: 9, // The number of lines to draw
|
length: 0, // The length of each line
|
width: 10, // The line thickness
|
radius: 15, // The radius of the inner circle
|
corners: 1, // Corner roundness (0..1)
|
rotate: 0, // The rotation offset
|
color: '#00bccd', // #rgb or #rrggbb
|
speed: 1, // Rounds per second
|
trail: 60, // Afterglow percentage
|
shadow: false, // Whether to render a shadow
|
hwaccel: false, // Whether to use hardware acceleration
|
className: 'spinner', // The CSS class to assign to the spinner
|
zIndex: 2e9, // The z-index (defaults to 2000000000)
|
top: '100%', // Top position relative to parent in px
|
left: '100%' // Left position relative to parent in px
|
};
|
var target = document.getElementById('new_loading');
|
var loading = new Spinner(opts);
|
|
var vm = new Vue({
|
el: "#vmview",
|
data: {
|
sportInfo: {},
|
video_src: '',
|
videoBasePath: 'https://avi.kidgrow.cloud/',
|
imgBasePath: 'http://sportsever.kidgrow.net/',
|
videoDefault: '../images/shipinicon.png',
|
},
|
computed: {
|
top_banner() {
|
var top_banner = [];
|
var sportInfo = this.sportInfo;
|
if (sportInfo.imageInformationUrls) {
|
var imgList = sportInfo.imageInformationUrls.split(',') // 图片数组
|
for(var item of imgList){
|
if (item.indexOf('http://') > -1 || item.indexOf('https://') > -1) {
|
top_banner.push({imgSrc: item, videoSrc:''});
|
continue;
|
}
|
top_banner.push({imgSrc:this.imgBasePath + item, videoSrc:''});
|
}
|
}
|
if (sportInfo.videoInformationUrls) {
|
var imgList = sportInfo.videoInformationUrls.split(',') // 视频数组
|
for(var item of imgList){
|
if (item.indexOf('http://') > -1 || item.indexOf('https://') > -1) {
|
top_banner.unshift({imgSrc:(top_banner[0] && top_banner[0].imgSrc) || this.videoDefault, videoSrc: item});
|
continue;
|
}
|
top_banner.unshift({imgSrc:(top_banner[0] && top_banner[0].imgSrc) || this.videoDefault, videoSrc: this.videoBasePath + item});
|
}
|
}
|
return top_banner;
|
}
|
},
|
created() {
|
this.getSportDetail();
|
},
|
methods: {
|
getSportDetail() {
|
var that = this;
|
var id = config.getUrlParam("id");
|
if (!id) {
|
var sportInfo = JSON.parse(localStorage.getItem('SportDetail') || '{}')
|
this.sportInfo = sportInfo;
|
document.title = sportInfo.sportName || '运动详情';
|
return;
|
}
|
loading.spin(target);
|
$.ajax({
|
url: config.otherdomain+"/api-height-plan-center/privateSport/getSportDetailByIds",
|
data:{str: id},
|
type:"POST",
|
dataType: "json",
|
success: function (res) {
|
loading.stop();
|
if (res.code == 0) {
|
var sports = res.data;
|
that.sportInfo = sports.length > 0 ? sports[0] : {};
|
document.title = that.sportInfo.sportName || '运动详情';
|
}
|
},
|
error: function (err) {
|
loading.stop();
|
}
|
});
|
},
|
openVideo(video) {
|
var that = this;
|
this.video_src = video.videoSrc;
|
this.$nextTick(function() {
|
var elVideo = document.getElementsByClassName("video");
|
var elAudio = document.getElementsByClassName("audio");
|
elVideo[0].addEventListener("play", function (e) {
|
console.log("提示该视频正在播放中");
|
elAudio[0].play();
|
console.log(e);
|
});
|
elVideo[0].addEventListener("pause", function (e) {
|
console.log("暂停播放");
|
//防止关闭详情弹窗时，找不到元素报错
|
if(elAudio[0]){
|
elAudio[0].pause();
|
}
|
console.log(e);
|
});
|
elVideo[0].addEventListener("ended", function (e) {
|
console.log("暂停播放");
|
elAudio[0].load();
|
console.log(e);
|
});
|
elVideo[0].play();
|
|
document.getElementById('videopanel').oncontextmenu = function() {
|
return false;
|
}
|
})
|
}
|
}
|
})
|
</script>
|
</body>
|
</html>
|
