<template>
<div id="apps" v-cloak>
<!-- 整段视频 -->
<div>
<!-- 收集字/用户操作反馈动作组件 -->
<LTool
:pbShow="pbShow"
:blessingShow="blessingShow"
:KShow="KShow"
:YhShow="YhShow"
:MShow="MShow"
class="ltool"
@getCollectFQ="getCollectFQ"
@getCollectK="getCollectK"
@getCollectKFont="getCollectKFont"
@getFYH="getFYH"
@getCollectM="getCollectM"
></LTool>
<!-- end -->
<!-- ../assets/gif/1.mp4 -->
<video
v-show="videoShow"
id="homeVideo"
ref="movie"
muted
src="../assets/home/1.mp4"
class="video"
autostart="ture"
autoplay="autoplay"
webkit-playsinline="true"
playsinline="true"
preload="auto"
x-webkit-airplay="allow"
x5-video-player-type="h5"
x5-video-player-fullscreen="true"
x5-video-orientation="portraint"
></video>
</div>
<!-- animate__animated animate__zoomIn animate__delay-1s -->
<!-- 合成弹窗 -->
<div v-show="synthShow" class="synthesisBox animate__animated animate__zoomIn">
<img class="synthesisBox-img" src="../assets/home/tbg.png" alt="" />
<img
@touchstart="getBlank"
class="synthesisBox-btn"
src="../assets/home/tbtn.png"
alt=""
/>
</div>
<!-- 底部操作 -->
<div class="bottomVIew" v-show="botimgShow" style="text-align: center">
<div
class="candleBox"
ref="dragBox"
style="position: fixed"
@touchstart="touchstartHandle('dragBox', $event)"
@touchmove="touchmoveHandle('dragBox', $event)"
>
<div class="animate__animated animate__backInRight">
<img class="candle" src="../assets/home/lz.png" />
<img class="ybox" src="../assets/home/ybox.png" />
</div>
</div>
<img
v-show="botimgShow"
style="position: relative; top: 45px; display: inline-block"
class="lzwa animate__animated animate__backInRight"
src="../assets/home/lzwa.png"
/>
</div>
<div
class="bottomVIew"
v-show="cakeShow || BShow || ImgMShow"
style="
flex: 1;
display: flex;
align-items: center;
justify-content: center;
"
>
<div class="candleBoxs" style="position: fixed; bottom: 37px">
<img
v-if="ImgMShow"
class="cake"
src="../assets/home/ming.png"
/>
<img
v-if="cakeShow"
class="cake"
src="../assets/home/fu.png"
style="margin: 0px 10px"
/>
<img
v-show="BShow"
class="cake"
src="../assets/home/kang.png"
/>
</div>
</div>
</div>
</template>
<script>
import LTool from "../components/tool.vue";
export default {
name: "cnlw",
components: {
LTool,
},
data() {
return {
coordinate: {
client: {},
elePosition: {},
},
// 是否显示活动说明
modelShow: false,
// 是否加载完开始
btnShow: false,
// 是否显示收集康
KShow: false,
// 贴春联视频
videoShow: true,
// 引导页视频
imgShow: true,
// 底部图片
botimgShow: false,
// 烟花
YhShow: false,
modelClass: "animate__fadeInTopLeft",
// 显示民字
MShow: false,
// 合成弹窗
synthShow: false,
// 显示福字
cakeShow: false,
// 是否显示收取福字
blessingShow: false,
gifshow: true,
BShow: false,
ImgMShow: false,
// 预加载已完成的图片数量
count: 0,
// 进度条百分比%
percent: "...",
// 图片总数据
allList: [],
positionX: 0,
positionY: 0,
pbShow: false,
};
},
/**
* watch监听图片预加载完成的数量
* 首先可能会疑惑这里的108数字是什么意思，
* 这个是我项目中需要预加载的图片总数量，
* 因为监听的时候可能图片没有加载完就会执行进入，所以先写死
*/
watch: {
// 监听Data中的count
// count: function (val) {
// if (val === 5) {
// // 图片加载完成后跳转页面
// console.log("123456");
// }
// },
},
created() {
//一般情况下，这样就可以自动播放了，但是一些奇葩iPhone机不可以
if (typeof WeixinJSBridge === "undefined") {
//未执行WeixinJSBridge 开始监听 WeixinJSBridge
document.addEventListener(
"WeixinJSBridgeReady",
() => {
document.getElementById("homeVideo").play();
},
false
);
} else {
//已经执行 使用 getNetworkType 调用获取网络类型后执行
WeixinJSBridge.invoke("getNetworkType", {}, () => {
document.getElementById("homeVideo").play();
});
}
},
updated() {
var that = this;
if (that.blessingShow) {
that.$refs.movie.pause();
}
},
created() {
// 分享
this.share.shareInviteFun();
},
mounted() {
// 分享
this.share.shareInviteFun();
//一般情况下，这样就可以自动播放了，但是一些奇葩iPhone机不可以
if (typeof WeixinJSBridge === "undefined") {
//未执行WeixinJSBridge 开始监听 WeixinJSBridge
document.addEventListener(
"WeixinJSBridgeReady",
() => {
document.getElementById("homeVideo").play();
},
false
);
} else {
document.getElementById("homeVideo").play();
//已经执行 使用 getNetworkType 调用获取网络类型后执行
WeixinJSBridge.invoke("getNetworkType", {}, () => {
document.getElementById("homeVideo").play();
});
}
// 监听视频时间
this.loadVideoTwos();
},
methods: {
/**
* 用户参与
*/
initPartcipate() {
var that = this;
let sharerId = getUrlParam("shareId");
let participantId = localStorage.getItem("opneids");
that.$network
.post("/thespringfestival/user/participate", {
participantId: participantId,
sharerId: sharerId,
})
.then((res) => {
if (res.code == 200) {
console.log("通过分享进去的");
}
})
.catch((error) => {});
},
/**
* 去合成
*/
getBlank() {
var that=this;
that.$router.push({
path: "/luckdraw",
query: {
timestamp: Date.parse(new Date()),
},
});
},
/**
* 点击放烟花
*/
getFYH() {
var that = this;
that.YhShow = false;
that.$refs.movie.play();
},
/**
* 点击收取民
*/
getCollectM() {
var that = this;
that.ImgMShow = true;
that.MShow = false;
that.$refs.movie.play();
},
/**
* 移动开始
*/
touchstartHandle(refName, e) {
let element = e.targetTouches[0];
// 记录点击的坐标
this.coordinate.client = {
x: element.clientX,
y: element.clientY,
};
// 记录需要移动的元素坐标
this.coordinate.elePosition.left = this.$refs[refName].offsetLeft;
this.coordinate.elePosition.top = this.$refs[refName].offsetTop;
},
/**
* 移动结束
*/
touchmoveHandle(refName, e) {
var that = this;
let element = e.targetTouches[0];
// 根据初始 client 位置计算移动距离(元素移动位置=元素初始位置+光标移动后的位置-光标点击时的初始位置)
let x =
this.coordinate.elePosition.left +
(element.clientX - this.coordinate.client.x);
let y =
this.coordinate.elePosition.top +
(element.clientY - this.coordinate.client.y);
// 限制可移动距离，不超出可视区域
x =
x <= 0
? 0
: x >= innerWidth - this.$refs[refName].offsetWidth
? innerWidth - this.$refs[refName].offsetWidth
: x;
y =
y <= 0
? 0
: y >= innerHeight - this.$refs[refName].offsetHeight
? innerHeight - this.$refs[refName].offsetHeight
: y;
// 移动当前元素
this.$refs[refName].style.left = x + "px";
this.$refs[refName].style.top = y + "px";
// x > 20 && x < 50 && y > 270 && y < 298
if ( x > 20 && x < 50 && y > 270 && y < 298) {
console.log("成功左", this.$refs[refName].style.left);
console.log("成功左", this.$refs[refName].style.top);
that.$refs.movie.play();
setTimeout(function () {
that.blessingShow = true;
}, 1500);
that.botimgShow = false;
} else {
// that.$toast();
}
// x > 260 && x < 355 && y > 280 && y < 340
if (x > 260 && x < 355 && y > 280 && y < 340) {
console.log("成功1", this.$refs[refName].style.left);
console.log("成功2", this.$refs[refName].style.top);
that.$refs.movie.play();
setTimeout(function () {
that.blessingShow = true;
}, 1500);
that.botimgShow = false;
} else {
}
},
/**
* 点击收福字
*/
getCollectFQ() {
var that = this;
setTimeout(()=>{
that.blessingShow = false;
that.cakeShow = true;
that.$refs.movie.play();
},500)
},
/**
* 监听视频时间进行卡点
*/
loadVideoTwos() {
//监听播放时间,具体到毫秒
// 蜡烛
var vkey1 = true;
// 开门
var vkey2 = true;
// 收福字
var vkey3 = true;
// 碰杯
var vkey4 = true;
// 收康
var vkey5 = true;
// 放烟花
var vkey6 = true;
// 收集民
var vkey7 = true;
var that = this;
// var vkey2 = true;
var v = document.getElementById("homeVideo");
v.addEventListener(
"timeupdate",
function () {
var timeDisplay;
//用秒数来显示当前播放进度
timeDisplay = v.currentTime;
var time = timeDisplay.toFixed(2);
// 3.5
if (time > 2.9 && vkey1) {
v.pause();
vkey1 = false;
that.botimgShow = true;
}
if (time > 4 && vkey2) {
v.pause();
vkey2 = false;
}
if (time > 9 && vkey3) {
v.pause();
vkey3 = false;
setTimeout(function () {
that.pbShow = true;
}, 1500);
}
if (time > 11 && vkey4) {
v.pause();
vkey4 = false;
setTimeout(function () {
that.KShow = true;
}, 1500);
}
if (time > 16 && vkey5) {
v.pause();
vkey5 = false;
that.pbShow = false;
setTimeout(function () {
that.YhShow = true;
}, 1500);
}
if (time > 17.7 && vkey6) {
v.pause();
vkey6 = false;
that.MShow = true;
}
if (time > 18 && vkey7) {
v.pause();
vkey7 = false;
that.MShow = false;
setTimeout(function(){
that.synthShow = true;
},1600)
}
},
false
);
},
getCollectKFont() {
var that = this;
that.$refs.movie.play();
that.KShow = false;
that.BShow = true;
},
/**
* 点击碰杯
*/
getCollectK() {
var that = this;
that.$refs.movie.play();
that.pbShow = false;
},
},
};
</script>
<style scoped>
[v-cloak] {
display: none;
}
#apps {
width: 100%;
height: 100vh;
background: url("../assets/home/poster2.png") no-repeat;
background-size: 100% 100%;
}
#homeVideo {
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
-webkit-animation: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%;
left: 0;
object-fit: fill;
}
/* 底部蜡烛视图 */
.bottomVIew {
width: 100%;
position: fixed;
bottom: 10px;
height: 80px;
}
.candleBox {
/* position: absolute;
right: 45%;
position: absolute; */
position: fixed;
left: 45%;
bottom: 37px;
}
.candleBox .ybox {
height: 10px;
position: relative;
right: 51%;
bottom: 6px;
animation-name: likes;
animation-direction: alternate;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-duration: 1s;
}
.candleBoxs .ybox {
height: 10px;
position: relative;
right: 51%;
bottom: 6px;
animation-name: likes;
animation-direction: alternate;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-duration: 1s;
}
.candleBox .candle {
width: 18px;
height: 49px;
display: inline-block;
animation: pulse; /* referring directly to the animation's @keyframe declaration */
--animate-duration: 800ms;
--animate-delay: 0.9s;
position: relative;
}
.candleBoxs .candle {
width: 18px;
height: 49px;
display: inline-block;
animation: pulse; /* referring directly to the animation's @keyframe declaration */
--animate-duration: 800ms;
--animate-delay: 0.9s;
position: relative;
}
.lzwa {
width: 171px;
height: 18px;
/* position: absolute;
bottom: 10px; */
/* right: 75px; */
}
.ltool {
z-index:1;
}
@keyframes likes {
0% {
transform: scale(1);
}
25% {
transform: scale(1.2);
}
50% {
transform: scale(1.3);
}
75% {
transform: scale(1.4);
}
100% {
transform: scale(1);
}
}
.cake {
width: 55px;
position: relative;
height: 55px;
top: 20px;
display: inline-block;
-webkit-animation-name: zrf;
animation-name: zrf;
animation-duration:2s;
}
@-webkit-keyframes zrf {
/* 0%,60%,75%,90%,to {
-webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
animation-timing-function: cubic-bezier(.215,.61,.355,1)
} */
0% {
opacity: 0;
-webkit-transform: translate3d(0,-250px,0) scaleY(3);
transform: translate3d(0,-250px,0) scaleY(3)
}
60% {
opacity: 1;
-webkit-transform: translate3d(0,25px,0) scaleY(.9);
transform: translate3d(0,25px,0) scaleY(.9)
}
75% {
-webkit-transform: translate3d(0,-10px,0) scaleY(.95);
transform: translate3d(0,-10px,0) scaleY(.95)
}
90% {
-webkit-transform: translate3d(0,5px,0) scaleY(.985);
transform: translate3d(0,5px,0) scaleY(.985)
}
to {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
@keyframes zrf {
/* 0%,60%,75%,90%,to {
-webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
animation-timing-function: cubic-bezier(.215,.61,.355,1)
} */
0% {
opacity: 0;
-webkit-transform: translate3d(0,-250px,0) scaleY(3);
transform: translate3d(0,-250px,0) scaleY(3)
}
60% {
opacity: 1;
-webkit-transform: translate3d(0,25px,0) scaleY(.9);
transform: translate3d(0,25px,0) scaleY(.9)
}
75% {
-webkit-transform: translate3d(0,-10px,0) scaleY(.95);
transform: translate3d(0,-10px,0) scaleY(.95)
}
90% {
-webkit-transform: translate3d(0,5px,0) scaleY(.985);
transform: translate3d(0,5px,0) scaleY(.985)
}
to {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
/*合成弹窗 */
.synthesisBox {
position: relative;
width: 100%;
text-align: center;
height: 285px;
margin: 0 auto;
display: inline-block;
}
.synthesisBox-img {
width: 265px;
height: 285px;
margin: 0 auto;
position: relative;
margin-top: 196px;
display: inline-block;
}
.synthesisBox-btn {
width: 150px;
position: relative;
bottom: 85px;
height: 58px;
}
</style>