Skip to content

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

新增摇奖动画；新增分享、推送授权

parent 9265aac3
Hide whitespace changes
Inline Side-by-side
Showing with 311 additions and 190 deletions
src/components/custom/openAnimation.wpy
View file @ 48eaf8d7
<template>
<div class="open-container" :class="{'opened': opened}" v-if="showAnimation">
<div class="bg rotate"></div>
<div class="mod-chest" @tap="click">
<div class="mod-chest">
<div class="chest-close" :class="{'shake': shake, 'show': showChest}">
<div class="gift"></div>
<div class="gift" @tap="click"></div>
</div>
<div class="chest-open" :class="{'show': show, 'blur': blur}">
<div class="mod-chest-cont">
<div class="content">
<div class="gift">
感谢您的参与
</div>
<div>您可真幸运～</div>
<image class="gift-image" src="/static/images/peo2.jpg"></image>
<div>时尚卡通水杯</div>
</div>
<div class="func">
<van-button custom-class="chest-btn" round type="info" @tap="go">再次挑战</van-button>
<van-button custom-class="chest-btn" round type="info" @tap="go">查看</van-button>
<button class="chest-btn" @tap="go">再去挑战</button>
<button class="chest-btn" @tap="go">查看</button>
</div>
</div>
</div>
......@@ -29,23 +29,21 @@
showAnimation: false,
showChest: true,
shake: false,
opened: false,
show: false,
blur: false
blur: false,
opened: false
},
methods: {
click: function() {
this.shake = true;
setTimeout(() => {
this.opened = true;
// setTimeout(() => {
// this.showChest = false;
// this.show = true;
// setTimeout(() => {
// this.blur = true;
// }, 500);
// }, 1000);
}, 3000);
setTimeout(() => {
this.showChest = false;
this.blur = true;
this.show = true;
}, 500);
}, 2000);
},
go() {
this.showAnimation = false;
......@@ -61,145 +59,239 @@
</script>
<style lang="less">
.open-container {
position: absolute;
width: 100%;
height: 100%;
background: rgba(112,112,112, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
}
.func{padding:18px 35px 30px;display: flex;justify-content: space-between;}
.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: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 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;}
.mod-chest-cont{background: url('http://activitystatic.xyqb.com/open-bg-top.png') center top no-repeat, url('http://activitystatic.xyqb.com/open-bg-bottom.png') center bottom no-repeat;background-size: 276px auto;width:276px;margin:27px auto 118px;position: relative;z-index: 2;}
.mod-chest-cont:before{width:100%;position: absolute;top:12px;bottom:80px;left:0px;content:"";background:#fff;border-left:#e59c00 1px solid;border-right:#e59c00 1px solid;box-sizing:border-box;}
.mod-chest-cont .content{position: relative;z-index: 2;padding:13px;text-align: center;}
.mod-chest-cont h3{color:#865500;font-size: 15px;}
.mod-chest{position: relative;width: 100%;}
.mod-chest .chest-close{width: 320px;height:135px;opacity: 0;position: relative;z-index: 1;position: absolute;left:50%;top:0px;margin-left:-160px;}
.mod-chest .chest-close .gift{width: 320px;height:135px;background:url('http://activitystatic.xyqb.com/chest.png') no-repeat 0px 0px;background-size: 320px auto;position: absolute;left:0;top:-85px;}
.mod-chest .chest-open{width: 320px;height:150px;background:url('http://activitystatic.xyqb.com/chest.png') no-repeat 0px -137px;background-size: 320px auto;opacity: 0;position: relative;z-index: 1;position: absolute;left:50%;top:-24px;margin-left: -160px;}
.mod-chest .chest-open .mod-chest-cont{position: absolute;bottom:-27px;left:50%;margin-left:-138px;}
.mod-chest .show{z-index: 2;opacity: 1;}
.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 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;}
@-webkit-keyframes shake {
0% {
transform: scale(1);
-webkit-transform: scale3d(1, 1, 1);
}
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);
}
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);
}
// 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);
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
.opened {
opacity: 1;
}
.bg{
position: absolute;
z-index: 1;
background:url('http://activitystatic.xyqb.com/light.png') 57% 60%/contain no-repeat;
width:100%;
height:100%;
}
.rotate{
-webkit-animation: rotate 10s infinite linear;
}
.mod-chest {
position: relative;
width: 100%;
height: 270rpx;
.chest-close {
width: 100%;
height:270rpx;
opacity: 0;
position: relative;
z-index: 1;
position: absolute;
display: flex;
justify-content: center;
.gift {
width: 500rpx;
height:216rpx;
background:url('http://activitystatic.xyqb.com/chest.png') no-repeat 0rpx 0rpx;
background-size: 500rpx auto;
position: absolute;
z-index: 2;
}
&:active {
-webkit-transform:scale(1.05);
-webkit-transition:all .3s;
}
&:after {
width: 640rpx;
height:600rpx;
position: absolute;
top:-200rpx;
left:-122rpx;
content:"";
display: block;
}
}
54%{
-webkit-transform: scale(1);
-webkit-transform: scale3d(1, 1, 1);
.chest-close.shake {
.gift {
-webkit-animation:shake 2s linear;
-webkit-animation-fill-mode:forwards;
}
}
85% {
-webkit-transform: scale(1) translate(0px,0px);
// -webkit-transform: scale3d(1, 1, 1) translate3d(0px,400px,0);
.chest-open {
width: 100%;
height:270rpx;
opacity: 0;
z-index: 1;
position: absolute;
top: 200rpx;
display: flex;
justify-content: center;
.mod-chest-cont {
position: absolute;
background: url('http://activitystatic.xyqb.com/open-bg-top.png') center top no-repeat, url('http://activitystatic.xyqb.com/open-bg-bottom.png') center bottom no-repeat;
background-size: 552rpx auto;
width:552rpx;
z-index: 2;
top:-302rpx;
padding:40rpx 0rpx 60rpx;
text-align: center;
overflow: hidden;
opacity: 0;
-webkit-transform:translate(0rpx,60rpx);
z-index: 9;
-webkit-animation-fill-mode: forwards;
&:before{
width:100%;
position: absolute;
top:24rpx;
bottom:160rpx;
left:0rpx;
content:"";
background:#fff;
border-left:#e59c00 2rpx solid;
border-right:#e59c00 2rpx solid;
box-sizing:border-box;
}
.content{
position: relative;
z-index: 2;
text-align: center;
font-size: 22rpx;
padding-bottom: 20rpx;
.gift-image {
width: 140rpx;
height: 140rpx;
padding: 10rpx 0;
}
}
.func{
display: flex;
justify-content: space-between;
.chest-btn{
width: 146rpx;
display: inline-block;
color: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ffa200), to(#ffa200));
height: 50rpx;
line-height: 50rpx;
border-radius: 6rpx;
font-size: 22rpx;
&:active{
background-image: -webkit-gradient(linear, left top, left bottom, from(#f09902), to(#f09902));
}
}
}
};
}
90% {
-webkit-transform: scale(1) translate(0px,61px);
// -webkit-transform: scale3d(1, 1, 1) translate3d(0px,61px,0);
.chest-open.show {
.mod-chest-cont {
-webkit-animation:move2 .5s .0s linear;
-webkit-animation-fill-mode: forwards;
}
}
95% {
-webkit-transform: scale(1) translate(0px,20px);
// -webkit-transform: scale3d(1, 1, 1) translate3d(0px,400px,0);
.blur{
&:after {
width: 500rpx;
height: 240rpx;
background: url('http://activitystatic.xyqb.com/chest-open-blur.png') no-repeat 0rpx 0rpx;
background-size: 500rpx auto;
z-index: 1;
position: absolute;
content:"";
display: block;
}
}
100% {
-webkit-transform: scale(1) translate(0px,61px);
// -webkit-transform: scale3d(1, 1, 1) translate3d(0px,61px,0);
.show{
z-index: 2;
opacity: 1;
}
}
}
@-webkit-keyframes shake {
0% {
transform: scale(1);
-webkit-transform: scale3d(1, 1, 1);
}
@-webkit-keyframes rotate {
0% {
-webkit-transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(360deg);
}
// 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);
// }
// 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);
// }
6%, 18%, 30%, 42%, 54%, 66%{
-webkit-transform: scale(1.1) rotate(8deg);
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 8deg);
}
@-webkit-keyframes move {
0% {
-webkit-transform:translate(0px ,0px);
}
100% {
-webkit-transform:translate(0px ,-5px);
}
12%, 24%, 36%, 48%, 60%, 72%{
-webkit-transform: scale(1.1) rotate(-8deg);
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -8deg);
}
78%{
-webkit-transform: scale(1);
-webkit-transform: scale3d(1, 1, 1);
}
80%{
-webkit-transform: scale(1);
-webkit-transform: scale3d(1, 1, 1);
}
@-webkit-keyframes move2 {
0% {
-webkit-transform:translate(0px,30px);
opacity: 0;
}
70% {
-webkit-transform:translate(0px,-20px);
opacity: 1;
}
100% {
-webkit-transform:translate(0px,0px);
opacity: 1;
}
81% {
-webkit-transform: scale(1) translate(0rpx, 0rpx);
}
90% {
-webkit-transform: scale(1) translate(0rpx,200rpx);
// -webkit-transform: scale3d(1, 1, 1) translate3d(0rpx,61rpx,0);
}
95% {
-webkit-transform: scale(1) translate(0rpx,180rpx);
// -webkit-transform: scale3d(1, 1, 1) translate3d(0rpx,400rpx,0);
}
100% {
-webkit-transform: scale(1) translate(0rpx,200rpx);
// -webkit-transform: scale3d(1, 1, 1) translate3d(0rpx,61rpx,0);
}
}
@-webkit-keyframes rotate {
0% {
-webkit-transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(360deg);
}
}
@-webkit-keyframes move2 {
0% {
-webkit-transform:translate(0rpx,60rpx);
opacity: 0;
}
70% {
-webkit-transform:translate(0rpx,-40rpx);
opacity: 1;
}
100% {
-webkit-transform:translate(0rpx,0rpx);
opacity: 1;
}
}
</style>
<config>
{
......
src/components/custom/sign.wpy
View file @ 48eaf8d7
<template>
<div class="icon-container">
<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': !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>
......@@ -33,7 +33,7 @@
</template>
<script>
import wepy from '@wepy/core';
let timeout = null;
let timeout = null, timeout1 = null;
const images = {
sign: {
notComplete: '/static/images/sign@2x.png',
......@@ -56,8 +56,6 @@
showAnimation: false,
addGold: false,
addsunshine: false,
signNot: true,
signing: false,
signComplete: false,
signNotCompletedUrl: '/static/images/sign@2x.png',
signCompletedUrl: '/static/images/sign-completed@2x-70_70px.png',
......@@ -116,24 +114,24 @@
},
watch: {
gold(v) {
console.log('gold', v, this.addsunshine);
this.addsunshine = false;
if (v) {
setTimeout(() => {
if (!v) {
this.addsunshine = false;
timeout1 = null;
} else {
timeout1 = setTimeout(() => {
this.addsunshine = true;
console.log('addsunshine', this.addsunshine);
}, 1500);
}
},
sign(v) {
this.signNot = false;
this.signing = v;
this.signComplete = false;
console.log(v, this.signComplete);
if (!v) {
this.signComplete = false;
timeout = null;
} else {
timeout = setTimeout(() => {
this.signComplete = true;
console.log('signComplete');
}, 1300);
}
}
......@@ -148,7 +146,6 @@
},
showAnimation: function() {
this.addGold = !this.addGold;
// this.addsunshine = !this.addsunshine;
}
},
created() {
......@@ -372,11 +369,13 @@
.sunshine {
position: absolute;
top: 20rpx;
box-shadow: 0 0 30rpx 66rpx yellow;
background: yellow;
border-radius: 50%;
width: 10rpx;
height: 15rpx;
z-index: 2;
width: 5rpx;
height: 7.5rpx;
z-index: 1;
animation: addsunshine 2s linear forwards;
}
......
src/components/custom/videolist.wpy
View file @ 48eaf8d7
......@@ -44,6 +44,8 @@
height:100%;
background-color: #FF5D15;
}
.images {
width: 100%;
}
</style>
<template>
......@@ -60,7 +62,7 @@
<!-- curQueue 循环会导致video重新插入，objectFit 不可变更 -->
<swiper-item wx:for="{{curQueue}}" wx:key="index">
<view class="video-wrapper">
<video
<!-- <video
id="video_{{index}}"
class="video_item"
loop
......@@ -77,7 +79,7 @@
@tap="videoTap"
>
<video-pause :pause="pause"></video-pause>
</video>
</video> < !-->
<view class="rightcont">
<view class="info">奖品库存: 1/8</view>
<view class="info">中奖概率: {{item.id}}/3000</view>
......@@ -86,7 +88,9 @@
<view class="orange" style="{{progressStyle}}"></view>
</view>
</view>
<video-loading v-if="item.time === 0"/>
<!-- <video-loading v-if="item.time === 0"/> -->
<image class="images" :src="item.url" mode="widthFix"></image>
<slot></slot>
</view>
</swiper-item>
</swiper>
......@@ -165,8 +169,6 @@
this.circular = false;
setTimeout(() => {
const direction = diff === 1 || diff === -2 ? 'up' : 'down';
if (direction === 'up') {
if (this._invalidDown === 0) {
......
src/pages/index.wpy
View file @ 48eaf8d7
......@@ -441,30 +441,49 @@
}
},
signIn: function(v) {
// wx.requestSubscribeMessage({
// tmplIds: [
// 'xbA7XopO2j0V0Ne0F61UzSxoyfKrf92GQk6Z4pQvnd4',
// '_yZWJYT-3lGCQG6g7Wa7F-0zxvGaPe4zwAI9D4zW4EY',
// '7YzXgiVNGXiRvXNmR6WUtH_WplUyo97eAy45dsyviKQ'
// ],
// success (res) {
// console.log('requestSubscribeMessage', res);
// }
// });
this.sign = v;
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);
}
let that = this;
const tmplIds = [
'xbA7XopO2j0V0Ne0F61UzSxoyfKrf92GQk6Z4pQvnd4',
'_yZWJYT-3lGCQG6g7Wa7F-0zxvGaPe4zwAI9D4zW4EY',
'7YzXgiVNGXiRvXNmR6WUtH_WplUyo97eAy45dsyviKQ'
];
wx.requestSubscribeMessage({
tmplIds: [
'xbA7XopO2j0V0Ne0F61UzSxoyfKrf92GQk6Z4pQvnd4',
'_yZWJYT-3lGCQG6g7Wa7F-0zxvGaPe4zwAI9D4zW4EY',
'7YzXgiVNGXiRvXNmR6WUtH_WplUyo97eAy45dsyviKQ'
],
success (res) {
console.log('requestSubscribeMessage success', res);
if (res.errMsg === 'requestSubscribeMessage:ok') {
const rs = tmplIds.some(v => res[v] === 'accept');
if (rs) {
that.sign = v;
if (!that.sign) {
that.showAnimation = false;
timeout = null;
timeout1 = null;
} else {
timeout = setTimeout(() => {
that.showAnimation = that.sign;
timeout1 = setTimeout(() => {
const num = [1, 2, 4, 501, 2501, 5001];
that.goldNum = num[Math.floor(Math.random() * 6)];
}, 1000);
}, 1300);
}
} else {
Dialog.alert({
title: '订阅通知',
message: '签到必须同意推送提醒！'
});
}
}
},
fail (res) {
console.log('requestSubscribeMessage fail', res);
}
});
},
onShareAppMessage: function(res) {
if (res.from === 'button') {
......@@ -519,15 +538,24 @@
{value: 10, text: '白色条纹马克杯，马克吐温同款10', imgsrc:'/static/images/peo2.jpg', price:'￥1399.67',people:2200,sku:'100004549235'}
];
let urls = [
'https://www.apple.com/105/media/us/iphone-x/2017/01df5b43-28e4-4848-bf20-490c34a926a7/films/feature/iphone-x-feature-tpl-cc-us-20170912_1920x1080h.mp4',
'https://xyqblogo.lkbang.net/VID_20200508_171710.mp4',
'https://xyqblogo.lkbang.net/VID_20200508_171710.mp4',
'https://xyqblogo.lkbang.net/VID_20200508_171710.mp4'
// 'https://www.apple.com/105/media/us/iphone-x/2017/01df5b43-28e4-4848-bf20-490c34a926a7/films/feature/iphone-x-feature-tpl-cc-us-20170912_1920x1080h.mp4',
// 'https://xyqblogo.lkbang.net/VID_20200508_171710.mp4',
// 'https://xyqblogo.lkbang.net/VID_20200508_171710.mp4',
// 'https://xyqblogo.lkbang.net/VID_20200508_171710.mp4'
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590151556813&di=44964ab823b5fb5f3fadcf9ceb87553b&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201503%2F07%2F20150307113019_FSEFE.thumb.700_0.png',
'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2944016076,351466175&fm=26&gp=0.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590151520979&di=beba310e6bc314f7dd7ede841d068f68&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201610%2F05%2F20161005092600_jCmSx.thumb.700_0.jpeg'
];
this.videoList = urls.map((url, index) => ({ id: index + 1, url }));
this.videoList = urls.map((url, index) => ({ id: index + 1, url, type: 'image' }));
},
onLoad (options) {
let that = this;
if (options.openid) {
Dialog.alert({
title: 'openidShared',
message: options.openid
});
}
this.adlist = [
{imgsrc: '/static/images/test1.jpg', text: '小明刚刚参与了抽奖'},
{imgsrc: '/static/images/test1.jpg', text: '小2刚刚参与了抽奖'},
......
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