Skip to content

M
mini-program-wepy
Commit 9265aac3 authored by 郝聪敏's avatar 郝聪敏
Browse files
Options

新增icon组件

parent 69b9a4a5
Hide whitespace changes
Inline Side-by-side
Showing with 241 additions and 111 deletions
src/components/custom/openAnimation.wpy
View file @ 9265aac3
<template> <template>
<div class="open-container" :class="{'opened': opened}" v-if="showAnimation"> <div class="open-container" :class="{'opened': opened}" v-if="showAnimation">
<div class="bg rotate"></div> <div class="bg rotate"></div>
<div class="mod-chest" @tap="click"> <div class="mod-chest" @tap="click">
<div class="chest-close" :class="{'shake': shake, 'show': showChest}"> <div class="chest-close" :class="{'shake': shake, 'show': showChest}">
<div class="gift"></div> <div class="gift"></div>
</div> </div>
...@@ -38,14 +38,14 @@ ...@@ -38,14 +38,14 @@
this.shake = true; this.shake = true;
setTimeout(() => { setTimeout(() => {
this.opened = true; this.opened = true;
setTimeout(() => { // setTimeout(() => {
this.showChest = false; // this.showChest = false;
this.show = true; // this.show = true;
setTimeout(() => { // setTimeout(() => {
this.blur = true; // this.blur = true;
}, 500); // }, 500);
}, 200); // }, 1000);
}, 1200); }, 3000);
}, },
go() { go() {
this.showAnimation = false; this.showAnimation = false;
...@@ -54,8 +54,8 @@ ...@@ -54,8 +54,8 @@
created() { created() {
setTimeout(() => { setTimeout(() => {
this.showAnimation = true; this.showAnimation = true;
this.click(); // this.click();
}, 2000); });
} }
}); });
</script> </script>
...@@ -75,12 +75,12 @@ ...@@ -75,12 +75,12 @@
.chest-btn{width:90px;display: inline-block;color:#fff;background-image: -webkit-gradient(linear, left top, left bottom, from(#ffa200), to(#ffa200));height:44px;line-height: 44px;border-radius: 3px;font-size: 17px;} .chest-btn{width:90px;display: inline-block;color:#fff;background-image: -webkit-gradient(linear, left top, left bottom, from(#ffa200), to(#ffa200));height:44px;line-height: 44px;border-radius: 3px;font-size: 17px;}
.chest-btn:active{background-image: -webkit-gradient(linear, left top, left bottom, from(#f09902), to(#f09902));} .chest-btn:active{background-image: -webkit-gradient(linear, left top, left bottom, from(#f09902), to(#f09902));}
.bg{position: absolute;z-index: 1;background:url('http://activitystatic.xyqb.com/light.png') center center/100% no-repeat;width:452px;height:510px; max-height:100%; left:45%;top: 50%; margin-left:-226px;margin-top:-255px;} .bg{position: absolute;z-index: 1;background:url('http://activitystatic.xyqb.com/light.png') center center/100% no-repeat;width:452px;height:510px; max-height:100%; left:48%;top: 50%; margin-left:-226px;margin-top:-255px;}
.bg.rotate{-webkit-animation: rotate 10s infinite linear;} .bg.rotate{-webkit-animation: rotate 10s infinite linear;}
.mod-chest .chest-close:after{width: 320px;height:300px;position: absolute;top:-100px;left:-61px;content:"";display: block;} .mod-chest .chest-close:after{width: 320px;height:300px;position: absolute;top:-100px;left:-61px;content:"";display: block;}
.mod-chest .chest-close:active{-webkit-transform:scale(1.05);-webkit-transition:all .3s;} .mod-chest .chest-close:active{-webkit-transform:scale(1.05);-webkit-transition:all .3s;}
.mod-chest .chest-close.shake .gift{-webkit-animation:shake 1.2s linear;-webkit-animation-fill-mode:forwards;} .mod-chest .chest-close.shake .gift{-webkit-animation:shake 3s linear;-webkit-animation-fill-mode:forwards;}
.mod-chest .chest-open{} .mod-chest .chest-open{}
.mod-chest .chest-open.blur:after{width: 320px;height: 68px;background: url('http://activitystatic.xyqb.com/chest-open-blur.png') no-repeat 0px 0px;background-size: 320px auto;position: relative;z-index: 1;position: absolute;left: 0px;top: -5px;content:"";display: block;} .mod-chest .chest-open.blur:after{width: 320px;height: 68px;background: url('http://activitystatic.xyqb.com/chest-open-blur.png') no-repeat 0px 0px;background-size: 320px auto;position: relative;z-index: 1;position: absolute;left: 0px;top: -5px;content:"";display: block;}
...@@ -100,7 +100,7 @@ ...@@ -100,7 +100,7 @@
.loading-container.opened .mod-chest .chest-open{-webkit-transform:translate(0px,61px);} .loading-container.opened .mod-chest .chest-open{-webkit-transform:translate(0px,61px);}
.loading-container .mod-chest-cont{padding:30px 0px 50px;text-align: center;overflow: hidden;opacity: 0;-webkit-transform:translate(0px,30px);/*-webkit-transition:all .3s .3s;-webkit-transition:all .3s .3s cubic-bezier(.53,1.5,.69,1.81);*/z-index: 9;-webkit-animation-fill-mode: forwards;} .loading-container .mod-chest-cont{padding:30px 0px 50px;text-align: center;overflow: hidden;opacity: 0;-webkit-transform:translate(0px,30px);/*-webkit-transition:all .3s .3s;-webkit-transition:all .3s .3s cubic-bezier(.53,1.5,.69,1.81);*/z-index: 9;-webkit-animation-fill-mode: forwards;}
.loading-container .chest-open.show .mod-chest-cont{/*-webkit-transform:translate(0px,0px);opacity: 1;*/-webkit-animation:move2 .2s .0s linear;-webkit-animation-fill-mode: forwards;} .loading-container .chest-open.show .mod-chest-cont{/*-webkit-transform:translate(0px,0px);opacity: 1;*/-webkit-animation:move2 1s .0s linear;-webkit-animation-fill-mode: forwards;}
.loading-container .mod-chest-cont .gift{color:#ff6000;font-size: 24px;line-height: 30px;} .loading-container .mod-chest-cont .gift{color:#ff6000;font-size: 24px;line-height: 30px;}
.loading-container .mod-chest-cont .gift .icon{width: 58px;height:0px;position:relative;display: inline-block;vertical-align: middle;} .loading-container .mod-chest-cont .gift .icon{width: 58px;height:0px;position:relative;display: inline-block;vertical-align: middle;}
.loading-container .mod-chest-cont .gift img{width: 75px;height:50px;position: absolute;top:-28px;left:-5px;} .loading-container .mod-chest-cont .gift img{width: 75px;height:50px;position: absolute;top:-28px;left:-5px;}
...@@ -112,41 +112,51 @@ ...@@ -112,41 +112,51 @@
} }
6%{ 3%, 9%, 15%, 21%, 27%, 33%, 39%, 45%{
-webkit-transform: scale(.9) rotate(-8deg);
-webkit-transform: scale3d(1, 1, 1) rotate(0, 0, 1, -8deg);
}
18%, 30%,42%{
-webkit-transform: scale(1.1) rotate(8deg); -webkit-transform: scale(1.1) rotate(8deg);
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 8deg); -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 8deg);
} }
12%,24%, 36%,48%{ 6%, 12%, 18%, 24%, 30%, 36%, 42%, 48%{
-webkit-transform: scale(1.1) rotate(-8deg); -webkit-transform: scale(1.1) rotate(-8deg);
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -8deg); -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -8deg);
} }
54%{
// 18%, 30%,42%{
// -webkit-transform: scale(1.1) rotate(8deg);
// -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 8deg);
// }
// 12%,24%, 36%,48%{
// -webkit-transform: scale(1.1) rotate(-8deg);
// -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -8deg);
// }
51%{
-webkit-transform: scale(1); -webkit-transform: scale(1);
-webkit-transform: scale3d(1, 1, 1); -webkit-transform: scale3d(1, 1, 1);
} }
60%{ 54%{
-webkit-transform: scale(1); -webkit-transform: scale(1);
-webkit-transform: scale3d(1, 1, 1); -webkit-transform: scale3d(1, 1, 1);
} }
85% {
-webkit-transform: scale(1) translate(0px,0px);
// -webkit-transform: scale3d(1, 1, 1) translate3d(0px,400px,0);
}
80% { 90% {
-webkit-transform: scale(1) translate(0px,61px); -webkit-transform: scale(1) translate(0px,61px);
// -webkit-transform: scale3d(1, 1, 1) translate3d(0px,61px,0); // -webkit-transform: scale3d(1, 1, 1) translate3d(0px,61px,0);
} }
90% { 95% {
-webkit-transform: scale(1) translate(0px,40px); -webkit-transform: scale(1) translate(0px,20px);
// -webkit-transform: scale3d(1, 1, 1) translate3d(0px,400px,0); // -webkit-transform: scale3d(1, 1, 1) translate3d(0px,400px,0);
} }
100% { 100% {
......
src/components/custom/sign.wpy
View file @ 9265aac3
<template> <template>
<div class="icon-container"> <div class="icon-container">
<!-- <cover-view class="circle" :style="{ background: bgColor }" @tap="handleTaps">
<cover-view class="title" :style="{ color: fontColor }">{{title}}</cover-view>
</cover-view>
<cover-view class="tips tips_animate" v-if="showAnimation">+1克币</cover-view> -->
<div class="sign" v-if="type === 'sign'" @tap="signIn"> <div class="sign" v-if="type === 'sign'" @tap="signIn">
<image class="sign-in" :src="signNotCompletedUrl" v-if="!signComplete" :class="{'jump': !signing, 'fly': signing}" ></image> <image class="sign-in" :src="signNotCompletedUrl" v-if="!signComplete" :class="{'jump': !signing, 'fly': signing}" ></image>
<image class="sign-comlete" :src="signCompletedUrl" v-if="sign"></image> <image class="sign-comlete" :src="signCompletedUrl" v-if="sign"></image>
<div class="sign-shine" v-if="!sign"></div> <div class="sign-shine" v-if="!sign"></div>
<div class="sign-shadow" v-if="!signComplete"></div> <div class="sign-shadow" v-if="!signComplete"></div>
<span class="title">{{des}}</span>
</div> </div>
<div v-if="type === 'gold'" class="gold"> <div v-if="type === 'gold'" class="gold">
<div class="add-gold" v-if="addGold"> <div class="add-gold" v-if="addGold">
...@@ -18,9 +15,20 @@ ...@@ -18,9 +15,20 @@
<div class="show-gold" @tap="showAnimation"> <div class="show-gold" @tap="showAnimation">
<div class="sunshine" v-if="addsunshine"></div> <div class="sunshine" v-if="addsunshine"></div>
<image class="show-gold-image" :class="{'gold-scale': addsunshine}" :src="goldUrl"></image> <image class="show-gold-image" :class="{'gold-scale': addsunshine}" :src="goldUrl"></image>
<span class="show-gold-num">5001</span> <span class="show-gold-num">
{{des}}
</span>
</div> </div>
</div> </div>
<div v-if="type === 'share'" class="share">
<button open-type="share" plain="true" class="share-button">
<image class="share-image" :src="shareUrl"></image>
</button>
</div>
<div v-if="type === 'lottery'" class="lottery">
<image class="lottery-image" :src="lotteryUrl"></image>
<span class="title">{{des}}</span>
</div>
</div> </div>
</template> </template>
<script> <script>
...@@ -28,13 +36,20 @@ ...@@ -28,13 +36,20 @@
let timeout = null; let timeout = null;
const images = { const images = {
sign: { sign: {
notComplete: '/static/images/sign@2x-76_74px.png', notComplete: '/static/images/sign@2x.png',
completed: '/static/images/sign-completed@2x-70_70px.png' completed: '/static/images/sign-completed@2x-70_70px.png'
}, },
gold: { gold: {
addGoldUrl: '/static/images/sign@2x.png', addGoldUrl: '/static/images/sign@2x.png',
graterThan5k: '/static/images/5000@2x-68_86px.png' goldSix: '/static/images/gold-6@2x.png',
} goldFive: '/static/images/gold-5@2x.png',
goldFour: '/static/images/gold-4@2x.png',
goldThree: '/static/images/gold-3@2x.png',
goldTwo: '/static/images/gold-2@2x.png',
goldOne: '/static/images/gold-1@2x.png'
},
share: '/static/images/share@2x.png',
lottery: '/static/images/lottery@2x.png'
}; };
wepy.component({ wepy.component({
data: { data: {
...@@ -44,8 +59,10 @@ ...@@ -44,8 +59,10 @@
signNot: true, signNot: true,
signing: false, signing: false,
signComplete: false, signComplete: false,
signNotCompletedUrl: '/static/images/sign@2x-76_74px.png', signNotCompletedUrl: '/static/images/sign@2x.png',
signCompletedUrl: '/static/images/sign-completed@2x-70_70px.png' signCompletedUrl: '/static/images/sign-completed@2x-70_70px.png',
shareUrl: '/static/images/share@2x.png',
lotteryUrl: '/static/images/lottery@2x.png'
}, },
props: { props: {
title: '', title: '',
...@@ -57,6 +74,10 @@ ...@@ -57,6 +74,10 @@
type: Boolean, type: Boolean,
default: false default: false
}, },
des: {
type: String | Number,
default: ''
},
type: { type: {
type: String, type: String,
default: '' default: ''
...@@ -75,11 +96,23 @@ ...@@ -75,11 +96,23 @@
return this.sign ? images['sign'].completed : images['sign'].notComplete; return this.sign ? images['sign'].completed : images['sign'].notComplete;
}, },
goldUrl() { goldUrl() {
return images['gold'].graterThan5k; let result = images['gold'].goldOne;
if (this.des === 2) {
result = images['gold'].goldTwo;
} else if (this.des >= 3 && this.des < 500) {
result = images['gold'].goldThree;
} else if (this.des >= 500 && this.des < 2500) {
result = images['gold'].goldFour;
} else if (this.des >= 2500 && this.des < 5000) {
result = images['gold'].goldFive;
} else if (this.des >= 5000) {
result = images['gold'].goldSix;
}
return result;
}, },
addGoldUrl: function() { addGoldUrl: function() {
return images['gold'].addGoldUrl; return images['gold'].addGoldUrl;
} },
}, },
watch: { watch: {
gold(v) { gold(v) {
...@@ -89,7 +122,6 @@ ...@@ -89,7 +122,6 @@
setTimeout(() => { setTimeout(() => {
this.addsunshine = true; this.addsunshine = true;
console.log('addsunshine', this.addsunshine); console.log('addsunshine', this.addsunshine);
// this.$apply();
}, 1500); }, 1500);
} }
}, },
...@@ -126,39 +158,57 @@ ...@@ -126,39 +158,57 @@
</script> </script>
<style lang="less"> <style lang="less">
.icon-container { .icon-container {
.tips {
flex: 1; .lottery {
color: #FF0000;
position: absolute; position: absolute;
text-align: center; top: 513rpx;
overflow: visible; right: 30rpx;
top: -40rpx; .lottery-image {
width: 150rpx; width: 78rpx;
} height: 78rpx;
.tips_animate { }
animation:mymove 2s ease forwards; .title {
-webkit-animation:mymove 2s ease forwards; /*Safari and Chrome*/ width: 100%;
text-align: center;
display: block;
color: #fff;
font-size: 22rpx;
}
} }
@keyframes mymove {
from { font-size:10px;opacity: 1.0; top: -20px;} .share {
to { font-size:20px;opacity: 0; top: -80px;} position: absolute;
top: 679rpx;
right: 33rpx;
.share-button {
width: 78rpx;
height: 70rpx;
padding: 0;
border: none;
.share-image {
width: 78rpx;
height: 70rpx;
}
} }
}
.sign { .sign {
position: absolute; position: absolute;
top: 374rpx; top: 356rpx;
right: 30rpx; right: 32rpx;
width: 70rpx; width: 78rpx;
height: 70rpx; height: 78rpx;
z-index: 2; z-index: 2;
.sign-comlete { .sign-comlete {
position: absolute; position: absolute;
width: 70rpx; top: -15rpx;
height: 70rpx; width: 78rpx;
height: 78rpx;
} }
.sign-in { .sign-in {
position: absolute; position: absolute;
width: 70rpx; width: 78rpx;
height: 70rpx; height: 78rpx;
z-index: 1; z-index: 1;
} }
.jump { .jump {
...@@ -172,9 +222,9 @@ ...@@ -172,9 +222,9 @@
position: absolute; position: absolute;
// background: #000; // background: #000;
left: 5rpx; left: 5rpx;
top: 5rpx;
width: 60rpx; width: 60rpx;
height: 60rpx; height: 60rpx;
// left: -200px;
text-align: center; text-align: center;
z-index: 3; z-index: 3;
border-radius: 50%; border-radius: 50%;
...@@ -187,7 +237,7 @@ ...@@ -187,7 +237,7 @@
width: 30rpx; width: 30rpx;
height: 138rpx; height: 138rpx;
margin: -40rpx -100rpx; margin: -40rpx -100rpx;
box-shadow: 50rpx -23rpx 0 -8rpx rgba(255, 255, 255, 0.18), 75rpx -10rpx 0 -12rpx rgba(255, 255, 255, 0.15); box-shadow: 50rpx -23rpx 0 -8rpx rgba(255, 255, 255, 0.22), 75rpx -10rpx 0 -12rpx rgba(255, 255, 255, 0.18);
animation: shine1 1.2s infinite ease; animation: shine1 1.2s infinite ease;
} }
} }
...@@ -197,11 +247,22 @@ ...@@ -197,11 +247,22 @@
width: 100%; width: 100%;
height: 10rpx; height: 10rpx;
background: rgba(0, 0, 0, 0.4); background: rgba(0, 0, 0, 0.4);
top: 80rpx; top: 65rpx;
border-radius: 50%; border-radius: 50%;
z-index: -1; z-index: -1;
animation: swift 1.2s infinite ease; animation: swift 1.2s infinite ease;
} }
.title {
position: absolute;
top: 79rpx;
width: 100%;
text-align: center;
display: block;
color: #fff;
font-size: 22rpx;
}
@keyframes swift { @keyframes swift {
0% { 0% {
opacity: 0.8; opacity: 0.8;
...@@ -216,15 +277,12 @@ ...@@ -216,15 +277,12 @@
} }
@keyframes shine1 { @keyframes shine1 {
0% { 0% {
// margin: -40rpx -80rpx;
transform: translateX(40rpx); transform: translateX(40rpx);
} }
50% { 50% {
// margin: -80rpx -30rpx;
transform: translateX(0); transform: translateX(0);
} }
100% { 100% {
// margin: -40rpx -80rpx;
transform: translateX(40rpx); transform: translateX(40rpx);
} }
} }
...@@ -232,13 +290,13 @@ ...@@ -232,13 +290,13 @@
@keyframes jump { @keyframes jump {
0% { 0% {
top: 0rpx; top: -10rpx;
} }
50% { 50% {
top: -25rpx; top: -35rpx;
} }
100% { 100% {
top: 0rpx; top: -10rpx;
} }
} }
...@@ -257,20 +315,14 @@ ...@@ -257,20 +315,14 @@
@keyframes fly1 { @keyframes fly1 {
0% {top: 0;transform: rotateY(0);} 0% {top: 0;transform: rotateY(0);}
10% {top: -20rpx;transform: rotateY(0);} 10% {top: -20rpx;transform: rotateY(0);}
// 10% {top: -10rpx;transform: rotateY(360deg);}
// 20% {top: -20rpx;transform: rotateY(0);}
// 30% {top: -30rpx;transform: rotateY(360deg);}
// 40% {top: -40rpx;transform: rotateY(0);}
50% {top: -100rpx;transform: rotateY(360deg);} 50% {top: -100rpx;transform: rotateY(360deg);}
100% {top: -200rpx;transform: rotateY(0);} 100% {top: -200rpx;transform: rotateY(0);}
} }
.gold { .gold {
position: absolute; position: absolute;
top: 320rpx; top: 270rpx;
left: 39rpx; left: 39rpx;
// width: 100rpx;
// height: 100rpx;
.add-gold{ .add-gold{
position: absolute; position: absolute;
display: flex; display: flex;
...@@ -291,8 +343,8 @@ ...@@ -291,8 +343,8 @@
} }
@keyframes addGold { @keyframes addGold {
0% { transform: translateY(-120rpx);} 0% { transform: translateY(-90rpx);}
99% { transform: translateY(-40rpx);opacity: 1;} 99% { transform: translateY(-30rpx);opacity: 1;}
100% { opacity: 0; } 100% { opacity: 0; }
} }
...@@ -308,13 +360,13 @@ ...@@ -308,13 +360,13 @@
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
.show-gold-image { .show-gold-image {
width: 68rpx; width: 60rpx;
height: 86rpx; height: 60rpx;
z-index: 2; z-index: 2;
} }
.show-gold-num { .show-gold-num {
color: #fff; color: #fff;
font-size: 24rpx; font-size: 22rpx;
} }
} }
......
src/components/custom/starAnimation1.wpy
View file @ 9265aac3
...@@ -10,7 +10,13 @@ ...@@ -10,7 +10,13 @@
import wepy from '@wepy/core'; import wepy from '@wepy/core';
wepy.component({ wepy.component({
methods: {
onShareAppMessage: function(res) {
if (res.from === 'button') {
console.log('onShareAppMessage1', res.target);
}
}
}
}); });
</script> </script>
<style lang="less"> <style lang="less">
...@@ -24,13 +30,13 @@ ...@@ -24,13 +30,13 @@
// z-index: 1; // z-index: 1;
.meteor { .meteor {
position: fixed; position: fixed;
top: 289rpx; top: 247rpx;
left: 104rpx; left: 94rpx;
width: calc(100% - 170rpx);; width: calc(100% - 170rpx);;
height: 0; height: 0;
// border: 2rpx solid #000; // border: 2rpx solid #000;
z-index: 10; z-index: 10;
transform: rotateZ(-15deg) transform: rotateZ(-10deg)
} }
.star { .star {
position: absolute; position: absolute;
...@@ -53,8 +59,8 @@ ...@@ -53,8 +59,8 @@
position: absolute; position: absolute;
top: -29rpx; top: -29rpx;
left: -52rpx; left: -52rpx;
width: 70rpx; width: 78rpx;
height: 70rpx; height: 78rpx;
// top: calc(100% - 1px); // top: calc(100% - 1px);
// left: 100%; // left: 100%;
background: url('http://activitystatic.xyqb.com/sign@2x.png') 0 0/contain no-repeat; background: url('http://activitystatic.xyqb.com/sign@2x.png') 0 0/contain no-repeat;
......
src/components/custom/videolist.wpy
View file @ 9265aac3
...@@ -103,6 +103,10 @@ ...@@ -103,6 +103,10 @@
duration: { duration: {
type: Number, type: Number,
value: 800 value: 800
},
total: {
type: Number,
value: 0,
} }
}, },
data: { data: {
...@@ -156,14 +160,18 @@ ...@@ -156,14 +160,18 @@
if (diff === 0) return; if (diff === 0) return;
this._last = current; this._last = current;
this.playCurrent(current); this.playCurrent(current);
console.log('timeout 1'); // this.$emit('change', { activeId: this.curQueue[current].id });
this.$emit('change', { activeId: this.curQueue[current].id });
this.loading = true; this.loading = true;
this.circular = false; this.circular = false;
setTimeout(() => { setTimeout(() => {
const direction = diff === 1 || diff === -2 ? 'up' : 'down'; const direction = diff === 1 || diff === -2 ? 'up' : 'down';
if (direction === 'up') { if (direction === 'up') {
if (this._invalidDown === 0) { if (this._invalidDown === 0) {
// console.log(this.nextQueue, this.nextQueue.length, this.prevQueue, this.prevQueue.length);
// if (this.nextQueue.length === 0) {this.nextQueue.push(this.prevQueue.shift())}
const change = (this._change + 1) % 3; const change = (this._change + 1) % 3;
const add = this.nextQueue.shift(); const add = this.nextQueue.shift();
const remove = this.curQueue[change]; const remove = this.curQueue[change];
...@@ -171,6 +179,7 @@ ...@@ -171,6 +179,7 @@
this.prevQueue.push(remove); this.prevQueue.push(remove);
this.curQueue[change] = add; this.curQueue[change] = add;
this._change = change; this._change = change;
if (this.nextQueue.length === 0) this.nextQueue.push(this.prevQueue.shift());
} else { } else {
this._invalidUp += 1; this._invalidUp += 1;
} }
...@@ -180,6 +189,7 @@ ...@@ -180,6 +189,7 @@
} }
if (direction === 'down') { if (direction === 'down') {
if (this._invalidUp === 0) { if (this._invalidUp === 0) {
// if (this.prevQueue.length === 0) {this.prevQueue.push(this.nextQueue.pop())}
const _change2 = this._change; const _change2 = this._change;
const _remove = this.curQueue[_change2]; const _remove = this.curQueue[_change2];
const _add = this.prevQueue.pop(); const _add = this.prevQueue.pop();
...@@ -187,6 +197,7 @@ ...@@ -187,6 +197,7 @@
this.curQueue[_change2] = _add; this.curQueue[_change2] = _add;
this.nextQueue.unshift(_remove); this.nextQueue.unshift(_remove);
this._change = (_change2 - 1 + 3) % 3; this._change = (_change2 - 1 + 3) % 3;
if (this.prevQueue.length === 0) this.prevQueue.push(this.nextQueue.pop());
} else { } else {
this._invalidDown += 1; this._invalidDown += 1;
} }
...@@ -195,14 +206,16 @@ ...@@ -195,14 +206,16 @@
} }
} }
this.circular = true; this.circular = true;
if (this.nextQueue.length === 0 && current !== 0) { // if (this.nextQueue.length === 0 && current !== 0) {
this.circular = false; // this.circular = false;
} // }
if (this.prevQueue.length === 0 && current !== 2) { // if (this.prevQueue.length === 0 && current !== 2) {
console.log('circular2'); // console.log('circular2');
this.circular = false; // this.circular = false;
} // }
});
})
console.log(this.prevQueue, this.curQueue, this.nextQueue)
}, },
onWaiting (e) { onWaiting (e) {
this.trigger(e, 'wait'); this.trigger(e, 'wait');
......
src/pages/index.wpy
View file @ 9265aac3
...@@ -20,8 +20,8 @@ ...@@ -20,8 +20,8 @@
left: 30rpx; left: 30rpx;
} }
.userimage{ .userimage{
width: 100rpx; width: 80rpx;
height: 100rpx; height: 80rpx;
border-radius: 50%; border-radius: 50%;
} }
.content{ .content{
...@@ -166,18 +166,22 @@ ...@@ -166,18 +166,22 @@
</wxs> </wxs>
<template> <template>
<view class="video-wrapper"> <view class="video-wrapper">
<van-dialog id="van-dialog" />
<view id="myvideo"> <view id="myvideo">
<video-list :videoList.sync="videoList" bindchange="changeVideo"> <video-list :videoList.sync="videoList" :total="total" bindchange="changeVideo">
</video-list> </video-list>
</view> </view>
<view class="userInfo" style="{{userImgStyle}}"> <view class="userInfo" style="{{userImgStyle}}">
<image src="{{userInfo.avatarUrl}}" mode="cover" class="userimage"></image> <image src="{{userInfo.avatarUrl}}" mode="cover" class="userimage"></image>
</view> </view>
<video-gold type="gold" :gold="sign"></video-gold> <view>
<video-sign type="sign" :sign="sign" @sign-in="signIn"></video-sign> <video-gold type="gold" :des="goldNum" :gold="sign"></video-gold>
<video-sign type="sign" des="签到" :sign="sign" @sign-in="signIn"></video-sign>
<video-lottery type="lottery" des="抽奖" @tap="getAwards"></video-lottery>
<video-share type="share"></video-share>
</view>
<view class="content"> <view class="content">
<!-- <video-sign title="签"></video-sign> -->
<view class="leftcont"> <view class="leftcont">
<swiper class="list-wrapper" vertical="true" circular="true" display-multiple-items="2" autoplay="true" interval="1500"> <swiper class="list-wrapper" vertical="true" circular="true" display-multiple-items="2" autoplay="true" interval="1500">
<swiper-item wx:for="{{adlist}}" wx:key="index" catch:touchmove> <swiper-item wx:for="{{adlist}}" wx:key="index" catch:touchmove>
...@@ -227,16 +231,17 @@ ...@@ -227,16 +231,17 @@
<network v-if="!isConnected"></network> <network v-if="!isConnected"></network>
<!-- <star-animation></star-animation> --> <!-- <star-animation></star-animation> -->
<star-animation1 v-if="sign && showAnimation"></star-animation1> <star-animation1 v-if="sign && showAnimation"></star-animation1>
<!--<open-animation></open-animation>--> <open-animation v-if="awards"></open-animation>
</view> </view>
</template> </template>
<script> <script>
let touchDotX = 0, touchDotY = 0; let touchDotX = 0, touchDotY = 0;
let timeout = null; let timeout = null, timeout1 = null;
import store from '../store'; import store from '../store';
import { mapState, mapActions } from '@wepy/x'; import { mapState, mapActions } from '@wepy/x';
import wepy from '@wepy/core'; import wepy from '@wepy/core';
import Dialog from '../components/vant/dialog/dialog';
wepy.page({ wepy.page({
store, store,
hooks: { hooks: {
...@@ -259,6 +264,11 @@ ...@@ -259,6 +264,11 @@
sign: false, sign: false,
showAnimation: false, showAnimation: false,
userImgStyle:'', userImgStyle:'',
progress:0,
progressStyle:'',
total: 4,
goldNum: 2500,
awards: false
}, },
computed: { computed: {
...@@ -431,18 +441,54 @@ ...@@ -431,18 +441,54 @@
} }
}, },
signIn: function(v) { signIn: function(v) {
// wx.requestSubscribeMessage({
// tmplIds: [
// 'xbA7XopO2j0V0Ne0F61UzSxoyfKrf92GQk6Z4pQvnd4',
// '_yZWJYT-3lGCQG6g7Wa7F-0zxvGaPe4zwAI9D4zW4EY',
// '7YzXgiVNGXiRvXNmR6WUtH_WplUyo97eAy45dsyviKQ'
// ],
// success (res) {
// console.log('requestSubscribeMessage', res);
// }
// });
this.sign = v; this.sign = v;
// this.showAnimation = this.sign;
// if (timeout) timeout = null;
if (!this.sign) { if (!this.sign) {
this.showAnimation = false; this.showAnimation = false;
timeout = null; timeout = null;
timeout1 = null;
} else { } else {
timeout = setTimeout(() => { timeout = setTimeout(() => {
this.showAnimation = this.sign; this.showAnimation = this.sign;
timeout1 = setTimeout(() => {
const num = [1, 2, 4, 501, 2501, 5001];
this.goldNum = num[Math.floor(Math.random() * 6)];
}, 1000);
}, 1300); }, 1300);
} }
// console.log(this.sign); },
onShareAppMessage: function(res) {
if (res.from === 'button') {
console.log('onShareAppMessage2', res.target);
}
const openid = '提示：请注意 encodeURIComponent() 函数 与 encodeURI() 函数的区别之处，前者假定它的参数是 URI 的一部分（比如协议、主机名、路径或查询字符串）。因此 encodeURIComponent() 函数将转义用于分隔 URI 各个部分的标点符号。';
return {
title: '自定义转发标题',
path: `/pages/index?openid=${openid}`,
imageUrl: '',
success: function(res) {
let shareId = res.shareTickets[0];
console.log('shareId', shareId)
// 转发成功
console.log(res)
},
fail: function(res) {
// 转发失败
console.log(res)
}
}
},
getAwards: function() {
this.awards = !this.awards;
} }
}, },
...@@ -480,7 +526,7 @@ ...@@ -480,7 +526,7 @@
]; ];
this.videoList = urls.map((url, index) => ({ id: index + 1, url })); this.videoList = urls.map((url, index) => ({ id: index + 1, url }));
}, },
onLoad () { onLoad (options) {
let that = this; let that = this;
this.adlist = [ this.adlist = [
{imgsrc: '/static/images/test1.jpg', text: '小明刚刚参与了抽奖'}, {imgsrc: '/static/images/test1.jpg', text: '小明刚刚参与了抽奖'},
...@@ -535,8 +581,11 @@ ...@@ -535,8 +581,11 @@
'van-button': '../components/vant/button/index', 'van-button': '../components/vant/button/index',
'video-list': '~@/components/custom/videolist', 'video-list': '~@/components/custom/videolist',
'van-icon': '../components/vant/icon/index', 'van-icon': '../components/vant/icon/index',
'van-dialog': '../components/vant/dialog/index',
'video-sign': '~@/components/custom/sign', 'video-sign': '~@/components/custom/sign',
'video-gold': '~@/components/custom/sign', 'video-gold': '~@/components/custom/sign',
'video-share': '~@/components/custom/sign',
'video-lottery': '~@/components/custom/sign',
'network': '~@/components/custom/network', 'network': '~@/components/custom/network',
'star-animation': '~@/components/custom/starAnimation', 'star-animation': '~@/components/custom/starAnimation',
'star-animation1': '~@/components/custom/starAnimation1', 'star-animation1': '~@/components/custom/starAnimation1',
......
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