Skip to content

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

新增icon组件

parent 69b9a4a5
Show whitespace changes
Inline Side-by-side
Showing with 241 additions and 111 deletions
src/components/custom/openAnimation.wpy
View file @ 9265aac3
......@@ -38,14 +38,14 @@
this.shake = true;
setTimeout(() => {
this.opened = true;
setTimeout(() => {
this.showChest = false;
this.show = true;
setTimeout(() => {
this.blur = true;
}, 500);
}, 200);
}, 1200);
// setTimeout(() => {
// this.showChest = false;
// this.show = true;
// setTimeout(() => {
// this.blur = true;
// }, 500);
// }, 1000);
}, 3000);
},
go() {
this.showAnimation = false;
......@@ -54,8 +54,8 @@
created() {
setTimeout(() => {
this.showAnimation = true;
this.click();
}, 2000);
// this.click();
});
}
});
</script>
......@@ -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: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;}
.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.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.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 @@
.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 .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 .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;}
......@@ -112,41 +112,51 @@
}
6%{
-webkit-transform: scale(.9) rotate(-8deg);
-webkit-transform: scale3d(1, 1, 1) rotate(0, 0, 1, -8deg);
}
18%, 30%,42%{
3%, 9%, 15%, 21%, 27%, 33%, 39%, 45%{
-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%{
6%, 12%, 18%, 24%, 30%, 36%, 42%, 48%{
-webkit-transform: scale(1.1) rotate(-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: scale3d(1, 1, 1);
}
60%{
54%{
-webkit-transform: scale(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: scale3d(1, 1, 1) translate3d(0px,61px,0);
}
90% {
-webkit-transform: scale(1) translate(0px,40px);
95% {
-webkit-transform: scale(1) translate(0px,20px);
// -webkit-transform: scale3d(1, 1, 1) translate3d(0px,400px,0);
}
100% {
......
src/components/custom/sign.wpy
View file @ 9265aac3
<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> -->
<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-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">
<div class="add-gold" v-if="addGold">
......@@ -18,9 +15,20 @@
<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">5001</span>
<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>
......@@ -28,13 +36,20 @@
let timeout = 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: {
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({
data: {
......@@ -44,8 +59,10 @@
signNot: true,
signing: false,
signComplete: false,
signNotCompletedUrl: '/static/images/sign@2x-76_74px.png',
signCompletedUrl: '/static/images/sign-completed@2x-70_70px.png'
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: '',
......@@ -57,6 +74,10 @@
type: Boolean,
default: false
},
des: {
type: String | Number,
default: ''
},
type: {
type: String,
default: ''
......@@ -75,11 +96,23 @@
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) {
......@@ -89,7 +122,6 @@
setTimeout(() => {
this.addsunshine = true;
console.log('addsunshine', this.addsunshine);
// this.$apply();
}, 1500);
}
},
......@@ -126,39 +158,57 @@
</script>
<style lang="less">
.icon-container {
.tips {
flex: 1;
color: #FF0000;
.lottery {
position: absolute;
top: 513rpx;
right: 30rpx;
.lottery-image {
width: 78rpx;
height: 78rpx;
}
.title {
width: 100%;
text-align: center;
overflow: visible;
top: -40rpx;
width: 150rpx;
display: block;
color: #fff;
font-size: 22rpx;
}
}
.share {
position: absolute;
top: 679rpx;
right: 33rpx;
.share-button {
width: 78rpx;
height: 70rpx;
padding: 0;
border: none;
.share-image {
width: 78rpx;
height: 70rpx;
}
.tips_animate {
animation:mymove 2s ease forwards;
-webkit-animation:mymove 2s ease forwards; /*Safari and Chrome*/
}
@keyframes mymove {
from { font-size:10px;opacity: 1.0; top: -20px;}
to { font-size:20px;opacity: 0; top: -80px;}
}
.sign {
position: absolute;
top: 374rpx;
right: 30rpx;
width: 70rpx;
height: 70rpx;
top: 356rpx;
right: 32rpx;
width: 78rpx;
height: 78rpx;
z-index: 2;
.sign-comlete {
position: absolute;
width: 70rpx;
height: 70rpx;
top: -15rpx;
width: 78rpx;
height: 78rpx;
}
.sign-in {
position: absolute;
width: 70rpx;
height: 70rpx;
width: 78rpx;
height: 78rpx;
z-index: 1;
}
.jump {
......@@ -172,9 +222,9 @@
position: absolute;
// background: #000;
left: 5rpx;
top: 5rpx;
width: 60rpx;
height: 60rpx;
// left: -200px;
text-align: center;
z-index: 3;
border-radius: 50%;
......@@ -187,7 +237,7 @@
width: 30rpx;
height: 138rpx;
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;
}
}
......@@ -197,11 +247,22 @@
width: 100%;
height: 10rpx;
background: rgba(0, 0, 0, 0.4);
top: 80rpx;
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;
......@@ -216,15 +277,12 @@
}
@keyframes shine1 {
0% {
// margin: -40rpx -80rpx;
transform: translateX(40rpx);
}
50% {
// margin: -80rpx -30rpx;
transform: translateX(0);
}
100% {
// margin: -40rpx -80rpx;
transform: translateX(40rpx);
}
}
......@@ -232,13 +290,13 @@
@keyframes jump {
0% {
top: 0rpx;
top: -10rpx;
}
50% {
top: -25rpx;
top: -35rpx;
}
100% {
top: 0rpx;
top: -10rpx;
}
}
......@@ -257,20 +315,14 @@
@keyframes fly1 {
0% {top: 0;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);}
100% {top: -200rpx;transform: rotateY(0);}
}
.gold {
position: absolute;
top: 320rpx;
top: 270rpx;
left: 39rpx;
// width: 100rpx;
// height: 100rpx;
.add-gold{
position: absolute;
display: flex;
......@@ -291,8 +343,8 @@
}
@keyframes addGold {
0% { transform: translateY(-120rpx);}
99% { transform: translateY(-40rpx);opacity: 1;}
0% { transform: translateY(-90rpx);}
99% { transform: translateY(-30rpx);opacity: 1;}
100% { opacity: 0; }
}
......@@ -308,13 +360,13 @@
justify-content: center;
flex-direction: column;
.show-gold-image {
width: 68rpx;
height: 86rpx;
width: 60rpx;
height: 60rpx;
z-index: 2;
}
.show-gold-num {
color: #fff;
font-size: 24rpx;
font-size: 22rpx;
}
}
......
src/components/custom/starAnimation1.wpy
View file @ 9265aac3
......@@ -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,13 +30,13 @@
// z-index: 1;
.meteor {
position: fixed;
top: 289rpx;
left: 104rpx;
top: 247rpx;
left: 94rpx;
width: calc(100% - 170rpx);;
height: 0;
// border: 2rpx solid #000;
z-index: 10;
transform: rotateZ(-15deg)
transform: rotateZ(-10deg)
}
.star {
position: absolute;
......@@ -53,8 +59,8 @@
position: absolute;
top: -29rpx;
left: -52rpx;
width: 70rpx;
height: 70rpx;
width: 78rpx;
height: 78rpx;
// top: calc(100% - 1px);
// left: 100%;
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 @@
duration: {
type: Number,
value: 800
},
total: {
type: Number,
value: 0,
}
},
data: {
......@@ -156,14 +160,18 @@
if (diff === 0) return;
this._last = 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.circular = false;
setTimeout(() => {
const direction = diff === 1 || diff === -2 ? 'up' : 'down';
if (direction === 'up') {
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 add = this.nextQueue.shift();
const remove = this.curQueue[change];
......@@ -171,6 +179,7 @@
this.prevQueue.push(remove);
this.curQueue[change] = add;
this._change = change;
if (this.nextQueue.length === 0) this.nextQueue.push(this.prevQueue.shift());
} else {
this._invalidUp += 1;
}
......@@ -180,6 +189,7 @@
}
if (direction === 'down') {
if (this._invalidUp === 0) {
// if (this.prevQueue.length === 0) {this.prevQueue.push(this.nextQueue.pop())}
const _change2 = this._change;
const _remove = this.curQueue[_change2];
const _add = this.prevQueue.pop();
......@@ -187,6 +197,7 @@
this.curQueue[_change2] = _add;
this.nextQueue.unshift(_remove);
this._change = (_change2 - 1 + 3) % 3;
if (this.prevQueue.length === 0) this.prevQueue.push(this.nextQueue.pop());
} else {
this._invalidDown += 1;
}
......@@ -195,14 +206,16 @@
}
}
this.circular = true;
if (this.nextQueue.length === 0 && current !== 0) {
this.circular = false;
}
if (this.prevQueue.length === 0 && current !== 2) {
console.log('circular2');
this.circular = false;
}
});
// if (this.nextQueue.length === 0 && current !== 0) {
// this.circular = false;
// }
// if (this.prevQueue.length === 0 && current !== 2) {
// console.log('circular2');
// this.circular = false;
// }
})
console.log(this.prevQueue, this.curQueue, this.nextQueue)
},
onWaiting (e) {
this.trigger(e, 'wait');
......
src/pages/index.wpy
View file @ 9265aac3
......@@ -20,8 +20,8 @@
left: 30rpx;
}
.userimage{
width: 100rpx;
height: 100rpx;
width: 80rpx;
height: 80rpx;
border-radius: 50%;
}
.content{
......@@ -166,18 +166,22 @@
</wxs>
<template>
<view class="video-wrapper">
<van-dialog id="van-dialog" />
<view id="myvideo">
<video-list :videoList.sync="videoList" bindchange="changeVideo">
<video-list :videoList.sync="videoList" :total="total" bindchange="changeVideo">
</video-list>
</view>
<view class="userInfo" style="{{userImgStyle}}">
<image src="{{userInfo.avatarUrl}}" mode="cover" class="userimage"></image>
</view>
<video-gold type="gold" :gold="sign"></video-gold>
<video-sign type="sign" :sign="sign" @sign-in="signIn"></video-sign>
<view>
<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">
<!-- <video-sign title="签"></video-sign> -->
<view class="leftcont">
<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>
......@@ -227,16 +231,17 @@
<network v-if="!isConnected"></network>
<!-- <star-animation></star-animation> -->
<star-animation1 v-if="sign && showAnimation"></star-animation1>
<!--<open-animation></open-animation>-->
<open-animation v-if="awards"></open-animation>
</view>
</template>
<script>
let touchDotX = 0, touchDotY = 0;
let timeout = null;
let timeout = null, timeout1 = null;
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: {
......@@ -259,6 +264,11 @@
sign: false,
showAnimation: false,
userImgStyle:'',
progress:0,
progressStyle:'',
total: 4,
goldNum: 2500,
awards: false
},
computed: {
......@@ -431,18 +441,54 @@
}
},
signIn: function(v) {
// wx.requestSubscribeMessage({
// tmplIds: [
// 'xbA7XopO2j0V0Ne0F61UzSxoyfKrf92GQk6Z4pQvnd4',
// '_yZWJYT-3lGCQG6g7Wa7F-0zxvGaPe4zwAI9D4zW4EY',
// '7YzXgiVNGXiRvXNmR6WUtH_WplUyo97eAy45dsyviKQ'
// ],
// success (res) {
// console.log('requestSubscribeMessage', res);
// }
// });
this.sign = v;
// this.showAnimation = this.sign;
// if (timeout) timeout = null;
if (!this.sign) {
this.showAnimation = false;
timeout = null;
timeout1 = null;
} else {
timeout = setTimeout(() => {
this.showAnimation = this.sign;
timeout1 = setTimeout(() => {
const num = [1, 2, 4, 501, 2501, 5001];
this.goldNum = num[Math.floor(Math.random() * 6)];
}, 1000);
}, 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 @@
];
this.videoList = urls.map((url, index) => ({ id: index + 1, url }));
},
onLoad () {
onLoad (options) {
let that = this;
this.adlist = [
{imgsrc: '/static/images/test1.jpg', text: '小明刚刚参与了抽奖'},
......@@ -535,8 +581,11 @@
'van-button': '../components/vant/button/index',
'video-list': '~@/components/custom/videolist',
'van-icon': '../components/vant/icon/index',
'van-dialog': '../components/vant/dialog/index',
'video-sign': '~@/components/custom/sign',
'video-gold': '~@/components/custom/sign',
'video-share': '~@/components/custom/sign',
'video-lottery': '~@/components/custom/sign',
'network': '~@/components/custom/network',
'star-animation': '~@/components/custom/starAnimation',
'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