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 @@
created() {
setTimeout(() => {
this.showAnimation = true;
// this.click();
});
this.click();
},1000);
}
});
</script>
......
src/components/custom/sign.wpy
View file @ b4332915
<template>
<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> -->
<image v-if="type === 'sign'" class="sign" :src="signUrl" @tap="signIn"></image>
<div class="sign" v-if="type === 'sign'" @tap="signIn">
<image class="sign-in" :src="signNotCompletedUrl" v-if="!signComplete" :class="{'jump': !sign, 'fly': sign}" ></image>
<image class="sign-comlete" :src="signCompletedUrl" v-if="sign"></image>
<div class="sign-shine" v-if="!sign"></div>
<div class="sign-shadow" v-if="!signComplete"></div>
<span class="title">{{des}}</span>
</div>
<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>
</template>
<script>
import wepy from '@wepy/core';
let timeout = null, timeout1 = null;
const images = {
sign: {
notComplete: '/static/images/sign@2x-76_74px.png',
notComplete: '/static/images/sign@2x.png',
completed: '/static/images/sign-completed@2x-70_70px.png'
},
gold: {
graterThan5k: '/static/images/graterThen2.5k@2x-68_86px.png'
}
addGoldUrl: '/static/images/sign@2x.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({
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: {
title: '',
......@@ -32,6 +68,14 @@
type: Boolean,
default: false
},
gold: {
type: Boolean,
default: false
},
des: {
type: String | Number,
default: ''
},
type: {
type: String,
default: ''
......@@ -50,7 +94,46 @@
return this.sign ? images['sign'].completed : images['sign'].notComplete;
},
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: {
......@@ -59,8 +142,10 @@
[this.bgColor, this.fontColor] = [this.fontColor, this.bgColor];
},
signIn: function() {
console.log(this.sign);
this.$emit('sign-in', !this.sign);
},
showAnimation: function() {
this.addGold = !this.addGold;
}
},
created() {
......@@ -70,48 +155,245 @@
</script>
<style lang="less">
.icon-container {
.tips {
flex: 1;
color: #FF0000;
.lottery {
position: absolute;
text-align: center;
overflow: visible;
top: -40rpx;
width: 150rpx;
}
.tips_animate {
animation:mymove 2s ease forwards;
-webkit-animation:mymove 2s ease forwards; /*Safari and Chrome*/
top: 513rpx;
right: 30rpx;
.lottery-image {
width: 78rpx;
height: 78rpx;
}
.title {
width: 100%;
text-align: center;
display: block;
color: #fff;
font-size: 22rpx;
}
}
@keyframes mymove {
from { font-size:10px;opacity: 1.0; top: -20px;}
to { font-size:20px;opacity: 0; top: -80px;}
.share {
position: absolute;
top: 679rpx;
right: 33rpx;
.share-button {
width: 78rpx;
height: 70rpx;
padding: 0;
border: none;
.share-image {
width: 78rpx;
height: 70rpx;
}
}
}
.sign {
position: absolute;
top: 374rpx;
right: 30rpx;
width: 70rpx;
height: 70rpx;
z-index: 2;
top: 356rpx;
right: 32rpx;
width: 78rpx;
height: 78rpx;
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 {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: absolute;
top: 340rpx;
top: 270rpx;
left: 39rpx;
.gold-image {
.add-gold{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 68rpx;
height: 86rpx;
z-index: 2;
// transform: translateY(-50rpx);
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>
......
src/components/custom/starAnimation1.wpy
View file @ b4332915
......@@ -10,7 +10,13 @@
import wepy from '@wepy/core';
wepy.component({
methods: {
onShareAppMessage: function(res) {
if (res.from === 'button') {
console.log('onShareAppMessage1', res.target);
}
}
}
});
</script>
<style lang="less">
......@@ -24,52 +30,53 @@
// z-index: 1;
.meteor {
position: fixed;
top: 396rpx;
left: 44rpx;
width: calc(100% - 120rpx);;
top: 247rpx;
left: 94rpx;
width: calc(100% - 170rpx);;
height: 0;
// border: 2rpx solid #000;
z-index: 1;
transform: rotateZ(3deg)
z-index: 10;
transform: rotateZ(-10deg)
}
.star {
position: absolute;
left: -3rpx;
// bottom: -220rpx;
top: -3rpx;
top: -7rpx;
// left: -43%;
height: 10rpx;
width: 150rpx;
background: linear-gradient(-45deg,rgba(255,255,255,0),yellow);
transform: translateX(300rpx);
// background: -webkit-linear-gradient(-45deg,rgba(255,255,255,0),yellow);
/*此处为下一步的添加动画*/
-webkit-animation: tail 1s ease-in forwards, shooting 1s ease-in forwards;
-o-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;
animation: tail 1s ease-in forwards, shooting 1s ease-in forwards;
}
.star::before{
content: "";
position: absolute;
top: -15rpx;
left: 6rpx;
top: -29rpx;
left: -52rpx;
width: 78rpx;
height: 78rpx;
// top: calc(100% - 1px);
// left: 100%;
height: 40rpx;
width: 40rpx;
background: url('http://activitystatic.xyqb.com/sign@2x-76_74px.png') 0 0/contain no-repeat;
background: url('http://activitystatic.xyqb.com/sign@2x.png') 0 0/contain no-repeat;
// background: -webkit-linear-gradient(45deg,rgba(255,255,255,0),yellow,rgba(255,255,255,0));
/*此处为下一步的添加动画*/
// -webkit-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 {
transform: translateX(-50%) rotateZ(-45deg);
transform: -webkit-translateX(-50%) -webkit-rotateZ(-45deg);
transform: rotateZ(15deg);
// transform: -webkit-translateX(-50%) -webkit-rotateZ(-45deg);
}
.star:after {
transform: translateX(-50%) rotateZ(45deg);
transform: -webkit-translateX(-50%) -webkit-rotateZ(45deg);
// transform: translateX(-50%) rotateZ(45deg);
// transform: -webkit-translateX(-50%) -webkit-rotateZ(45deg);
}
// @-webkit-keyframes shining {
......@@ -78,9 +85,10 @@
// 100% {width: 0;}
// }
@keyframes shining {
0% {width: 0;}
50% {width: 60rpx;}
100% {width: 0;}
0% {transform: scale(1);}
// 50% {transform: scale(0.8);}
99% {transform: scale(0.6);}
100% {transform: scale(0);}
}
// @-webkit-keyframes tail {
// 0% {width: 0;}
......@@ -89,7 +97,10 @@
// }
@keyframes tail {
0% {width: 0;}
30% {width: 150rpx;}
10% {width: 0;}
50% {width: 150rpx;}
65% {width: 50rpx;}
80% {width: 150rpx;}
100% {width: 0;}
}
// @-webkit-keyframes shooting {
......@@ -105,7 +116,7 @@
@keyframes shooting {
0% {
// -webkit-transform: translateX(0);
transform: translateX(630rpx);
transform: translateX(610rpx);
}
100% {
// -webkit-transform: translateX(350px);
......
src/components/custom/videolist.wpy
View file @ b4332915
......@@ -105,6 +105,10 @@
type: Array,
value: []
},
loading: {
type: Boolean,
default: false
},
duration: {
type: Number,
value: 800
......
src/pages/index.wpy
View file @ b4332915
......@@ -240,7 +240,6 @@
import store from '../store';
import { mapState, mapActions } from '@wepy/x';
import wepy from '@wepy/core';
import Dialog from '../components/vant/dialog/dialog';
wepy.page({
store,
hooks: {
......@@ -263,8 +262,7 @@
sign: false,
showAnimation: false,
userImgStyle:'',
total: 4,
goldNum: 2500,
goldNum:2500,
},
computed: {
......@@ -503,7 +501,10 @@
}
},
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