Skip to content

G
game-h5
Commit b7ea6d66 by 曾经
Options

拆盒动画

parent ccab46ec
Showing with 29 additions and 12 deletions
dist/index.html
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>game-h5</title><link rel="stylesheet" href="//at.alicdn.com/t/font_2844902_uelk5f2sikk.css"><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><link href="css/chunk-09d0db87.c04481f2.css" rel="prefetch"><link href="css/chunk-19f41208.93bdc1c9.css" rel="prefetch"><link href="css/chunk-390246b3.da21bd50.css" rel="prefetch"><link href="css/chunk-44778242.03490c94.css" rel="prefetch"><link href="css/chunk-4990c547.31bbc6f1.css" rel="prefetch"><link href="css/chunk-4b1efb49.432dbb80.css" rel="prefetch"><link href="css/chunk-5ea88b5e.c37924f6.css" rel="prefetch"><link href="css/chunk-62200906.de5d1b88.css" rel="prefetch"><link href="css/chunk-67a3e9d6.34a358b5.css" rel="prefetch"><link href="css/chunk-71639305.f21c9ef5.css" rel="prefetch"><link href="css/chunk-724568a8.00555196.css" rel="prefetch"><link href="css/chunk-c8c421d8.4ae8a6a5.css" rel="prefetch"><link href="css/chunk-cccf5f40.5c518a1b.css" rel="prefetch"><link href="js/chunk-09d0db87.a448d57a.js" rel="prefetch"><link href="js/chunk-19f41208.0e606e05.js" rel="prefetch"><link href="js/chunk-3566c97c.3f1cfa5e.js" rel="prefetch"><link href="js/chunk-390246b3.4578e423.js" rel="prefetch"><link href="js/chunk-44778242.73da2d00.js" rel="prefetch"><link href="js/chunk-4990c547.6b14714a.js" rel="prefetch"><link href="js/chunk-4aa552e1.221177b9.js" rel="prefetch"><link href="js/chunk-4b1efb49.63d722d9.js" rel="prefetch"><link href="js/chunk-5ea88b5e.9fc6b0b4.js" rel="prefetch"><link href="js/chunk-62200906.6a06ffad.js" rel="prefetch"><link href="js/chunk-67a3e9d6.b1fe6ea3.js" rel="prefetch"><link href="js/chunk-71639305.b174612f.js" rel="prefetch"><link href="js/chunk-724568a8.4803c6db.js" rel="prefetch"><link href="js/chunk-72be1171.dce6850f.js" rel="prefetch"><link href="js/chunk-c8c421d8.7c5dc0f8.js" rel="prefetch"><link href="js/chunk-cccf5f40.7cc89c6c.js" rel="prefetch"><link href="js/app.7757cf2f.js" rel="preload" as="script"><link href="js/chunk-vendors.37f2d3ab.js" rel="preload" as="script"></head><body><noscript><strong>We're sorry but game-h5 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="//web-1251519181.file.myqcloud.com/lib/vue/2.6.6/vue.min.js"></script><script src="//web-1251519181.file.myqcloud.com/lib/axios/0.18.0/index.min.js"></script><script src="//web-1251519181.file.myqcloud.com/lib/vue-router/3.0.2/vue-router.min.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script><script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script><script src="js/chunk-vendors.37f2d3ab.js"></script><script src="js/app.7757cf2f.js"></script></body></html> <!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>game-h5</title><link rel="stylesheet" href="//at.alicdn.com/t/font_2844902_uelk5f2sikk.css"><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><link href="css/chunk-09d0db87.c04481f2.css" rel="prefetch"><link href="css/chunk-19f41208.93bdc1c9.css" rel="prefetch"><link href="css/chunk-206d4c77.20828ead.css" rel="prefetch"><link href="css/chunk-390246b3.da21bd50.css" rel="prefetch"><link href="css/chunk-427eb5f0.b9690f98.css" rel="prefetch"><link href="css/chunk-4990c547.31bbc6f1.css" rel="prefetch"><link href="css/chunk-4b1efb49.432dbb80.css" rel="prefetch"><link href="css/chunk-5ea88b5e.c37924f6.css" rel="prefetch"><link href="css/chunk-633de545.188d4a13.css" rel="prefetch"><link href="css/chunk-67a3e9d6.34a358b5.css" rel="prefetch"><link href="css/chunk-71639305.f21c9ef5.css" rel="prefetch"><link href="css/chunk-724568a8.00555196.css" rel="prefetch"><link href="css/chunk-cccf5f40.5c518a1b.css" rel="prefetch"><link href="js/chunk-09d0db87.a448d57a.js" rel="prefetch"><link href="js/chunk-19f41208.42ef2138.js" rel="prefetch"><link href="js/chunk-206d4c77.4f62d7a4.js" rel="prefetch"><link href="js/chunk-3566c97c.3f1cfa5e.js" rel="prefetch"><link href="js/chunk-390246b3.a2a8ddb7.js" rel="prefetch"><link href="js/chunk-427eb5f0.d05e4b99.js" rel="prefetch"><link href="js/chunk-4990c547.bf5edc68.js" rel="prefetch"><link href="js/chunk-4aa552e1.221177b9.js" rel="prefetch"><link href="js/chunk-4b1efb49.7770f9fb.js" rel="prefetch"><link href="js/chunk-5ea88b5e.9fc6b0b4.js" rel="prefetch"><link href="js/chunk-633de545.4a54f34f.js" rel="prefetch"><link href="js/chunk-67a3e9d6.ec5df3b5.js" rel="prefetch"><link href="js/chunk-71639305.e7456eb5.js" rel="prefetch"><link href="js/chunk-724568a8.4803c6db.js" rel="prefetch"><link href="js/chunk-72be1171.dce6850f.js" rel="prefetch"><link href="js/chunk-cccf5f40.98ea16e2.js" rel="prefetch"><link href="js/app.ddde3b8c.js" rel="preload" as="script"><link href="js/chunk-vendors.37f2d3ab.js" rel="preload" as="script"></head><body><noscript><strong>We're sorry but game-h5 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="//web-1251519181.file.myqcloud.com/lib/vue/2.6.6/vue.min.js"></script><script src="//web-1251519181.file.myqcloud.com/lib/axios/0.18.0/index.min.js"></script><script src="//web-1251519181.file.myqcloud.com/lib/vue-router/3.0.2/vue-router.min.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script><script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script><script src="js/chunk-vendors.37f2d3ab.js"></script><script src="js/app.ddde3b8c.js"></script></body></html>
\ No newline at end of file \ No newline at end of file
dist/js/chunk-71639305.b174612f.js → dist/js/chunk-71639305.e7456eb5.js
This source diff could not be displayed because it is too large. You can view the blob instead.
src/components/cmh/theme-1/components/open-box.vue
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<img src="../images/mould_01_box_bg.png" class="dialog-bg-img"> <img src="../images/mould_01_box_bg.png" class="dialog-bg-img">
<div class="content"> <div class="content">
<div class="title">{{ title }}</div> <div class="title">{{ title }}</div>
<img :src="data.imageSelectUrl" class="box-img" mode="widthFix"> <img :src="isOpening ? data.imageSelectUrl : data.imageNoSelectUrl" class="box-img" mode="widthFix">
<div class="handle-btn" @click="open">立即拆开</div> <div class="handle-btn" @click="open">立即拆开</div>
<div class="iconfont icon-guanbi" @click="close"></div> <div class="iconfont icon-guanbi" @click="close"></div>
</div> </div>
...@@ -15,6 +15,7 @@ export default { ...@@ -15,6 +15,7 @@ export default {
props: { props: {
title: String, title: String,
data: Object, data: Object,
isOpening: Boolean,
show: Boolean show: Boolean
}, },
data() { data() {
......
src/components/cmh/theme-1/index.vue
...@@ -132,6 +132,7 @@ ...@@ -132,6 +132,7 @@
:show.sync="showOpenBoxDialog" :show.sync="showOpenBoxDialog"
:title="openBoxTitle" :title="openBoxTitle"
:data="openBoxData" :data="openBoxData"
:isOpening="isOpening"
@open="open()" @open="open()"
></open-box-dialog> ></open-box-dialog>
<reward-dialog <reward-dialog
...@@ -203,6 +204,7 @@ export default { ...@@ -203,6 +204,7 @@ export default {
return { return {
clickIndex: -1, clickIndex: -1,
animationEnd: false, animationEnd: false,
isOpening: false,
showOpenBoxDialog: false, showOpenBoxDialog: false,
showRewardDialog: false, showRewardDialog: false,
showRewardFailDialog: false, showRewardFailDialog: false,
......
src/components/cmh/theme-2/components/open-box.vue
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<img src="../images/mould_01_box_bg.png" class="dialog-bg-img"> <img src="../images/mould_01_box_bg.png" class="dialog-bg-img">
<div class="content"> <div class="content">
<div class="title">{{ title }}</div> <div class="title">{{ title }}</div>
<img :src="data.imageSelectUrl" class="box-img" mode="widthFix"> <img :src="isOpening ? data.imageSelectUrl : data.imageNoSelectUrl" class="box-img" mode="widthFix">
<div class="handle-btn" @click="open">立即拆开</div> <div class="handle-btn" @click="open">立即拆开</div>
<div class="iconfont icon-guanbi" @click="close"></div> <div class="iconfont icon-guanbi" @click="close"></div>
</div> </div>
...@@ -15,6 +15,7 @@ export default { ...@@ -15,6 +15,7 @@ export default {
props: { props: {
title: String, title: String,
data: Object, data: Object,
isOpening: Boolean,
show: Boolean show: Boolean
}, },
data() { data() {
......
src/components/cmh/theme-2/index.vue
...@@ -122,6 +122,7 @@ ...@@ -122,6 +122,7 @@
:show.sync="showOpenBoxDialog" :show.sync="showOpenBoxDialog"
:title="openBoxTitle" :title="openBoxTitle"
:data="openBoxData" :data="openBoxData"
:isOpening="isOpening"
@open="open()" @open="open()"
></open-box-dialog> ></open-box-dialog>
<reward-dialog <reward-dialog
...@@ -191,6 +192,7 @@ export default { ...@@ -191,6 +192,7 @@ export default {
return { return {
clickIndex: -1, clickIndex: -1,
animationEnd: false, animationEnd: false,
isOpening: false,
showOpenBoxDialog: false, showOpenBoxDialog: false,
showRewardDialog: false, showRewardDialog: false,
showRewardFailDialog: false, showRewardFailDialog: false,
......
src/components/cmh/theme-3/components/open-box.vue
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<img src="../images/mould_01_box_bg.png" class="dialog-bg-img"> <img src="../images/mould_01_box_bg.png" class="dialog-bg-img">
<div class="content"> <div class="content">
<div class="title">{{ title }}</div> <div class="title">{{ title }}</div>
<img :src="data.imageSelectUrl" class="box-img" mode="widthFix"> <img :src="isOpening ? data.imageSelectUrl : data.imageNoSelectUrl" class="box-img" mode="widthFix">
<div class="handle-btn" @click="open">立即拆开</div> <div class="handle-btn" @click="open">立即拆开</div>
<div class="iconfont icon-guanbi" @click="close"></div> <div class="iconfont icon-guanbi" @click="close"></div>
</div> </div>
...@@ -15,6 +15,7 @@ export default { ...@@ -15,6 +15,7 @@ export default {
props: { props: {
title: String, title: String,
data: Object, data: Object,
isOpening: Boolean,
show: Boolean show: Boolean
}, },
data() { data() {
......
src/components/cmh/theme-3/index.vue
...@@ -122,6 +122,7 @@ ...@@ -122,6 +122,7 @@
:show.sync="showOpenBoxDialog" :show.sync="showOpenBoxDialog"
:title="openBoxTitle" :title="openBoxTitle"
:data="openBoxData" :data="openBoxData"
:isOpening="isOpening"
@open="open()" @open="open()"
></open-box-dialog> ></open-box-dialog>
<reward-dialog <reward-dialog
...@@ -191,6 +192,7 @@ export default { ...@@ -191,6 +192,7 @@ export default {
return { return {
clickIndex: -1, clickIndex: -1,
animationEnd: false, animationEnd: false,
isOpening: false,
showOpenBoxDialog: false, showOpenBoxDialog: false,
showRewardDialog: false, showRewardDialog: false,
showRewardFailDialog: false, showRewardFailDialog: false,
......
src/components/manager.js
...@@ -168,21 +168,29 @@ export function Manager(component) { ...@@ -168,21 +168,29 @@ export function Manager(component) {
}) })
} }
let isPlay = false;
const play = () => { const play = () => {
return new Promise((resolve, reject) => { let openTimePromise = new Promise((resolve)=>{
if (isPlay) { setTimeout(()=>{
resolve(1);
},1500)
})
return new Promise((resolve,reject)=>{
if (_component.isOpening) {
reject(); reject();
return; return;
} }
isPlay = true; _component.isOpening = true;
gamePlay(_component.$route.query).then((res) => { Promise.all([gamePlay(_component.$route.query),openTimePromise]).then((values)=>{
let res = values[0];
setTimeout(() => { setTimeout(() => {
isPlay = false; _component.isOpening = false;
}, 300) }, 300)
resolve(res) resolve(res)
}).catch((res) => { }).catch((res) => {
isPlay = false; console.log("res---->",res);
_component.isOpening = false;
reject(res); reject(res);
let content = ""; let content = "";
let title = ""; let title = "";
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment