Skip to content

M
mini-program-wepy
Commit b4332915 authored by ziyu's avatar ziyu
Browse files
Options

docs: 和合并

parents 90996972 48eaf8d7
Hide whitespace changes
Inline Side-by-side
Showing with 371 additions and 73 deletions
src/components/custom/openAnimation.wpy
View file @ b4332915
...@@ -52,8 +52,8 @@ ...@@ -52,8 +52,8 @@
created() { created() {
setTimeout(() => { setTimeout(() => {
this.showAnimation = true; this.showAnimation = true;
// this.click(); this.click();
}); },1000);
} }
}); });
</script> </script>
......
src/components/custom/sign.wpy
View file @ b4332915
<template> <template>
<div class="icon-container"> <div class="icon-container">
<!-- <cover-view class="circle" :style="{ background: bgColor }" @tap="handleTaps"> <div class="sign" v-if="type === 'sign'" @tap="signIn">
<cover-view class="title" :style="{ color: fontColor }">{{title}}</cover-view> <image class="sign-in" :src="signNotCompletedUrl" v-if="!signComplete" :class="{'jump': !sign, 'fly': sign}" ></image>
</cover-view> <image class="sign-comlete" :src="signCompletedUrl" v-if="sign"></image>
<cover-view class="tips tips_animate" v-if="showAnimation">+1克币</cover-view> --> <div class="sign-shine" v-if="!sign"></div>
<image v-if="type === 'sign'" class="sign" :src="signUrl" @tap="signIn"></image> <div class="sign-shadow" v-if="!signComplete"></div>
<span class="title">{{des}}</span>
</div>
<div v-if="type === 'gold'" class="gold"> <div v-if="type === 'gold'" class="gold">
<image class="gold-image" :src="goldUrl"></image> <div class="add-gold" v-if="addGold">
<image class="add-gold-image" :src="addGoldUrl"></image>
<span class="add-gold-num">+1</span>
</div>
<div class="show-gold" @tap="showAnimation">
<div class="sunshine" v-if="addsunshine"></div>
<image class="show-gold-image" :class="{'gold-scale': addsunshine}" :src="goldUrl"></image>
<span class="show-gold-num">
{{des}}
</span>
</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> </div>
</template> </template>
<script> <script>
import wepy from '@wepy/core'; import wepy from '@wepy/core';
let timeout = null, timeout1 = 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',
graterThan5k: '/static/images/graterThen2.5k@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: {
showAnimation: false showAnimation: false,
addGold: false,
addsunshine: false,
signComplete: false,
signNotCompletedUrl: '/static/images/sign@2x.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: '',
...@@ -32,6 +68,14 @@ ...@@ -32,6 +68,14 @@
type: Boolean, type: Boolean,
default: false default: false
}, },
gold: {
type: Boolean,
default: false
},
des: {
type: String | Number,
default: ''
},
type: { type: {
type: String, type: String,
default: '' default: ''
...@@ -50,7 +94,46 @@ ...@@ -50,7 +94,46 @@
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() {
return images['gold'].addGoldUrl;
},
},
watch: {
gold(v) {
if (!v) {
this.addsunshine = false;
timeout1 = null;
} else {
timeout1 = setTimeout(() => {
this.addsunshine = true;
}, 1500);
}
},
sign(v) {
this.signComplete = false;
console.log(v, this.signComplete);
if (!v) {
timeout = null;
} else {
timeout = setTimeout(() => {
this.signComplete = true;
console.log('signComplete');
}, 1300);
}
} }
}, },
methods: { methods: {
...@@ -59,8 +142,10 @@ ...@@ -59,8 +142,10 @@
[this.bgColor, this.fontColor] = [this.fontColor, this.bgColor]; [this.bgColor, this.fontColor] = [this.fontColor, this.bgColor];
}, },
signIn: function() { signIn: function() {
console.log(this.sign);
this.$emit('sign-in', !this.sign); this.$emit('sign-in', !this.sign);
},
showAnimation: function() {
this.addGold = !this.addGold;
} }
}, },
created() { created() {
...@@ -70,48 +155,245 @@ ...@@ -70,48 +155,245 @@
</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 {
position: absolute;
top: -15rpx;
width: 78rpx;
height: 78rpx;
}
.sign-in {
position: absolute;
width: 78rpx;
height: 78rpx;
z-index: 1;
}
.jump {
animation: jump 1.2s infinite ease;
}
.fly {
animation: fly1 1.2s forwards linear;
}
.sign-shine {
overflow: hidden;
position: absolute;
// background: #000;
left: 5rpx;
top: 5rpx;
width: 60rpx;
height: 60rpx;
text-align: center;
z-index: 3;
border-radius: 50%;
transform: rotate(-50deg);
animation: jump1 1.2s infinite ease;
&::before {
content: "";
// background: red;
position: absolute;
width: 30rpx;
height: 138rpx;
margin: -40rpx -100rpx;
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;
}
}
.sign-shadow {
position: absolute;
width: 100%;
height: 10rpx;
background: rgba(0, 0, 0, 0.4);
top: 65rpx;
border-radius: 50%;
z-index: -1;
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 {
0% {
opacity: 0.8;
}
50% {
opacity: 0.4;
transform: scale(0.8);
}
100% {
opacity: 0.8;
}
}
@keyframes shine1 {
0% {
transform: translateX(40rpx);
}
50% {
transform: translateX(0);
}
100% {
transform: translateX(40rpx);
}
}
}
@keyframes jump {
0% {
top: -10rpx;
}
50% {
top: -35rpx;
}
100% {
top: -10rpx;
}
}
@keyframes jump1 {
0% {
top: 5rpx;
}
50% {
top: -20rpx;
}
100% {
top: 5rpx;
}
}
@keyframes fly1 {
0% {top: 0;transform: rotateY(0);}
10% {top: -20rpx;transform: rotateY(0);}
50% {top: -100rpx;transform: rotateY(360deg);}
100% {top: -200rpx;transform: rotateY(0);}
} }
.gold { .gold {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: absolute; position: absolute;
top: 340rpx; top: 270rpx;
left: 39rpx; left: 39rpx;
.gold-image { .add-gold{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 68rpx; width: 68rpx;
height: 86rpx; // transform: translateY(-50rpx);
z-index: 2; animation:addGold .6s ease-in forwards;
.add-gold-image {
width: 35rpx;
height: 35rpx;
animation:addGoldRotate .6s linear infinite;
}
.add-gold-num {
color: #fff;
font-size: 24rpx;
}
}
@keyframes addGold {
0% { transform: translateY(-90rpx);}
99% { transform: translateY(-30rpx);opacity: 1;}
100% { opacity: 0; }
}
@keyframes addGoldRotate {
from {transform: rotateY(0);}
to {transform: rotateY(360deg);
}
}
.show-gold {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.show-gold-image {
width: 60rpx;
height: 60rpx;
z-index: 2;
}
.show-gold-num {
color: #fff;
font-size: 22rpx;
}
}
.sunshine {
position: absolute;
top: 20rpx;
box-shadow: 0 0 30rpx 66rpx yellow;
background: yellow;
border-radius: 50%;
width: 5rpx;
height: 7.5rpx;
z-index: 1;
animation: addsunshine 2s linear forwards;
}
@keyframes addsunshine {
0% { box-shadow: 0 0 30rpx 66rpx transparent;}
50% { box-shadow: 0 0 30rpx 66rpx yellow; }
100% { box-shadow: 0 0 30rpx 66rpx transparent;}
}
.gold-scale {
animation: scaleGold 2s linear forwards;
}
@keyframes scaleGold {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
} }
.title {
color: #FF0000;
}
} }
} }
</style> </style>
......
src/components/custom/starAnimation1.wpy
View file @ b4332915
...@@ -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,52 +30,53 @@ ...@@ -24,52 +30,53 @@
// z-index: 1; // z-index: 1;
.meteor { .meteor {
position: fixed; position: fixed;
top: 396rpx; top: 247rpx;
left: 44rpx; left: 94rpx;
width: calc(100% - 120rpx);; width: calc(100% - 170rpx);;
height: 0; height: 0;
// border: 2rpx solid #000; // border: 2rpx solid #000;
z-index: 1; z-index: 10;
transform: rotateZ(3deg) transform: rotateZ(-10deg)
} }
.star { .star {
position: absolute; position: absolute;
left: -3rpx; left: -3rpx;
// bottom: -220rpx; // bottom: -220rpx;
top: -3rpx; top: -7rpx;
// left: -43%; // left: -43%;
height: 10rpx; height: 10rpx;
width: 150rpx;
background: linear-gradient(-45deg,rgba(255,255,255,0),yellow); background: linear-gradient(-45deg,rgba(255,255,255,0),yellow);
transform: translateX(300rpx); transform: translateX(300rpx);
// background: -webkit-linear-gradient(-45deg,rgba(255,255,255,0),yellow); // background: -webkit-linear-gradient(-45deg,rgba(255,255,255,0),yellow);
/*此处为下一步的添加动画*/ /*此处为下一步的添加动画*/
-webkit-animation: tail 1s ease-in forwards, shooting 1s ease-in forwards; // -webkit-animation: tail 1s ease-in forwards, shooting 1s ease-in forwards;
-o-animation: tail 1s ease-in forwards, shooting 1s ease-in forwards; // -o-animation: tail 1s ease-in forwards, shooting 1s ease-in forwards;
animation: tail 1s ease-in forwards, shooting 1s ease-in forwards; animation: tail 1s ease-in forwards, shooting 1s ease-in forwards;
} }
.star::before{ .star::before{
content: ""; content: "";
position: absolute; position: absolute;
top: -15rpx; top: -29rpx;
left: 6rpx; left: -52rpx;
width: 78rpx;
height: 78rpx;
// top: calc(100% - 1px); // top: calc(100% - 1px);
// left: 100%; // left: 100%;
height: 40rpx; background: url('http://activitystatic.xyqb.com/sign@2x.png') 0 0/contain no-repeat;
width: 40rpx;
background: url('http://activitystatic.xyqb.com/sign@2x-76_74px.png') 0 0/contain no-repeat;
// background: -webkit-linear-gradient(45deg,rgba(255,255,255,0),yellow,rgba(255,255,255,0)); // background: -webkit-linear-gradient(45deg,rgba(255,255,255,0),yellow,rgba(255,255,255,0));
/*此处为下一步的添加动画*/ /*此处为下一步的添加动画*/
// -webkit-animation: shining 3s ease-in-out infinite; // -webkit-animation: shining 3s ease-in-out infinite;
// -o-animation: shining 3s ease-in-out infinite; // -o-animation: shining 3s ease-in-out infinite;
// animation: shining 3s ease-in-out infinite; animation: shining 1s ease-in-out forwards;
} }
.star:before { .star:before {
transform: translateX(-50%) rotateZ(-45deg); transform: rotateZ(15deg);
transform: -webkit-translateX(-50%) -webkit-rotateZ(-45deg); // transform: -webkit-translateX(-50%) -webkit-rotateZ(-45deg);
} }
.star:after { .star:after {
transform: translateX(-50%) rotateZ(45deg); // transform: translateX(-50%) rotateZ(45deg);
transform: -webkit-translateX(-50%) -webkit-rotateZ(45deg); // transform: -webkit-translateX(-50%) -webkit-rotateZ(45deg);
} }
// @-webkit-keyframes shining { // @-webkit-keyframes shining {
...@@ -78,9 +85,10 @@ ...@@ -78,9 +85,10 @@
// 100% {width: 0;} // 100% {width: 0;}
// } // }
@keyframes shining { @keyframes shining {
0% {width: 0;} 0% {transform: scale(1);}
50% {width: 60rpx;} // 50% {transform: scale(0.8);}
100% {width: 0;} 99% {transform: scale(0.6);}
100% {transform: scale(0);}
} }
// @-webkit-keyframes tail { // @-webkit-keyframes tail {
// 0% {width: 0;} // 0% {width: 0;}
...@@ -89,7 +97,10 @@ ...@@ -89,7 +97,10 @@
// } // }
@keyframes tail { @keyframes tail {
0% {width: 0;} 0% {width: 0;}
30% {width: 150rpx;} 10% {width: 0;}
50% {width: 150rpx;}
65% {width: 50rpx;}
80% {width: 150rpx;}
100% {width: 0;} 100% {width: 0;}
} }
// @-webkit-keyframes shooting { // @-webkit-keyframes shooting {
...@@ -105,7 +116,7 @@ ...@@ -105,7 +116,7 @@
@keyframes shooting { @keyframes shooting {
0% { 0% {
// -webkit-transform: translateX(0); // -webkit-transform: translateX(0);
transform: translateX(630rpx); transform: translateX(610rpx);
} }
100% { 100% {
// -webkit-transform: translateX(350px); // -webkit-transform: translateX(350px);
......
src/components/custom/videolist.wpy
View file @ b4332915
...@@ -105,6 +105,10 @@ ...@@ -105,6 +105,10 @@
type: Array, type: Array,
value: [] value: []
}, },
loading: {
type: Boolean,
default: false
},
duration: { duration: {
type: Number, type: Number,
value: 800 value: 800
......
src/pages/index.wpy
View file @ b4332915
...@@ -240,7 +240,6 @@ ...@@ -240,7 +240,6 @@
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: {
...@@ -263,8 +262,7 @@ ...@@ -263,8 +262,7 @@
sign: false, sign: false,
showAnimation: false, showAnimation: false,
userImgStyle:'', userImgStyle:'',
total: 4, goldNum:2500,
goldNum: 2500,
}, },
computed: { computed: {
...@@ -503,7 +501,10 @@ ...@@ -503,7 +501,10 @@
} }
}, },
getAwards: function() { getAwards: function() {
this.awards = !this.awards; wx.navigateTo({
url: '/pages/raffle?id=1&progress=70&chance=1/780&corn=50000&imgsrc=/static/images/test2.png&goods=Nintendo Switch任天堂游戏机任天堂游戏机'
});
// this.awards = !this.awards;
} }
}, },
......
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