Skip to content

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

合并

parent 64b161c6
Show whitespace changes
Inline Side-by-side
Showing with 386 additions and 193 deletions
src/components/custom/openAnimation.wpy
View file @ 90996972
<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">
<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" @tap="click"></div>
</div> </div>
<div class="chest-open" :class="{'show': show, 'blur': blur}"> <div class="chest-open" :class="{'show': show, 'blur': blur}">
<div class="mod-chest-cont"> <div class="mod-chest-cont">
<div class="content"> <div class="content">
<div class="gift"> <div>您可真幸运～</div>
感谢您的参与 <image class="gift-image" src="/static/images/peo2.jpg"></image>
</div> <div>时尚卡通水杯</div>
</div> </div>
<div class="func"> <div class="func">
<van-button custom-class="chest-btn" round type="info" @tap="go">再次挑战</van-button> <button class="chest-btn" @tap="go">再去挑战</button>
<van-button custom-class="chest-btn" round type="info" @tap="go">查看</van-button> <button class="chest-btn" @tap="go">查看</button>
</div> </div>
</div> </div>
</div> </div>
...@@ -29,9 +29,9 @@ ...@@ -29,9 +29,9 @@
showAnimation: false, showAnimation: false,
showChest: true, showChest: true,
shake: false, shake: false,
opened: false,
show: false, show: false,
blur: false blur: false,
opened: false
}, },
methods: { methods: {
click: function() { click: function() {
...@@ -40,12 +40,10 @@ ...@@ -40,12 +40,10 @@
this.opened = true; this.opened = true;
setTimeout(() => { setTimeout(() => {
this.showChest = false; this.showChest = false;
this.show = true;
setTimeout(() => {
this.blur = true; this.blur = true;
this.show = true;
}, 500); }, 500);
}, 200); }, 2000);
}, 1200);
}, },
go() { go() {
this.showAnimation = false; this.showAnimation = false;
...@@ -54,8 +52,8 @@ ...@@ -54,8 +52,8 @@
created() { created() {
setTimeout(() => { setTimeout(() => {
this.showAnimation = true; this.showAnimation = true;
this.click(); // this.click();
}, 2000); });
} }
}); });
</script> </script>
...@@ -64,46 +62,155 @@ ...@@ -64,46 +62,155 @@
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(112,112,112, 0.5); background: rgba(0, 0, 0, 0.7);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 10; 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;
}
}
.chest-close.shake {
.gift {
-webkit-animation:shake 2s linear;
-webkit-animation-fill-mode:forwards;
}
}
.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));
}
}
}
};
}
.chest-open.show {
.mod-chest-cont {
-webkit-animation:move2 .5s .0s linear;
-webkit-animation-fill-mode: forwards;
}
}
.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;
}
}
.show{
z-index: 2;
opacity: 1;
}
}
} }
.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:45%;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-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 .2s .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 { @-webkit-keyframes shake {
0% { 0% {
...@@ -112,48 +219,55 @@ ...@@ -112,48 +219,55 @@
} }
6%{ // 3%, 9%, 15%, 21%, 27%, 33%, 39%, 45%{
-webkit-transform: scale(.9) rotate(-8deg); // -webkit-transform: scale(1.1) rotate(8deg);
-webkit-transform: scale3d(1, 1, 1) rotate(0, 0, 1, -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%{ // }
6%, 18%, 30%, 42%, 54%, 66%{
-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%{ 12%, 24%, 36%, 48%, 60%, 72%{
-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%{ 78%{
-webkit-transform: scale(1); -webkit-transform: scale(1);
-webkit-transform: scale3d(1, 1, 1); -webkit-transform: scale3d(1, 1, 1);
} }
60%{ 80%{
-webkit-transform: scale(1); -webkit-transform: scale(1);
-webkit-transform: scale3d(1, 1, 1); -webkit-transform: scale3d(1, 1, 1);
} }
81% {
-webkit-transform: scale(1) translate(0rpx, 0rpx);
80% {
-webkit-transform: scale(1) translate(0px,61px);
// -webkit-transform: scale3d(1, 1, 1) translate3d(0px,61px,0);
} }
90% { 90% {
-webkit-transform: scale(1) translate(0px,40px); -webkit-transform: scale(1) translate(0rpx,200rpx);
// -webkit-transform: scale3d(1, 1, 1) translate3d(0px,400px,0); // -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% { 100% {
-webkit-transform: scale(1) translate(0px,61px); -webkit-transform: scale(1) translate(0rpx,200rpx);
// -webkit-transform: scale3d(1, 1, 1) translate3d(0px,61px,0); // -webkit-transform: scale3d(1, 1, 1) translate3d(0rpx,61rpx,0);
} }
} }
@-webkit-keyframes rotate { @-webkit-keyframes rotate {
...@@ -163,32 +277,20 @@ ...@@ -163,32 +277,20 @@
100% { 100% {
-webkit-transform:rotate(360deg); -webkit-transform:rotate(360deg);
} }
}
@-webkit-keyframes move {
0% {
-webkit-transform:translate(0px ,0px);
}
100% {
-webkit-transform:translate(0px ,-5px);
}
} }
@-webkit-keyframes move2 { @-webkit-keyframes move2 {
0% { 0% {
-webkit-transform:translate(0px,30px); -webkit-transform:translate(0rpx,60rpx);
opacity: 0; opacity: 0;
} }
70% { 70% {
-webkit-transform:translate(0px,-20px); -webkit-transform:translate(0rpx,-40rpx);
opacity: 1; opacity: 1;
} }
100% { 100% {
-webkit-transform:translate(0px,0px); -webkit-transform:translate(0rpx,0rpx);
opacity: 1; opacity: 1;
} }
} }
</style> </style>
<config> <config>
......
src/components/custom/videolist.wpy
View file @ 90996972
...@@ -20,22 +20,21 @@ ...@@ -20,22 +20,21 @@
.info { .info {
line-height: 40rpx; line-height: 40rpx;
} }
will-change: transform;
} }
.progress { .progress {
width: 180rpx; width: 180rpx;
height:20rpx; height: 20rpx;
background-color:#fff; background-color: #fff;
margin-top:10rpx; margin-top: 10rpx;
color:#666; color: #666;
position: relative; position: relative;
.text{ .text {
position: absolute; position: absolute;
top:0; top: 0;
left:0; left: 0;
width: 100%; width: 100%;
height:100%; height: 100%;
z-index:2; z-index: 2;
background-color: transparent; background-color: transparent;
text-align: center; text-align: center;
font-size: 18rpx; font-size: 18rpx;
...@@ -47,6 +46,9 @@ ...@@ -47,6 +46,9 @@
background-color: #FF5D15; background-color: #FF5D15;
} }
} }
.images {
width: 100%;
}
</style> </style>
<template> <template>
<view class="container"> <view class="container">
...@@ -62,7 +64,7 @@ ...@@ -62,7 +64,7 @@
<!-- curQueue 循环会导致video重新插入，objectFit 不可变更 --> <!-- curQueue 循环会导致video重新插入，objectFit 不可变更 -->
<swiper-item wx:for="{{curQueue}}" wx:key="index"> <swiper-item wx:for="{{curQueue}}" wx:key="index">
<view class="video-wrapper"> <view class="video-wrapper">
<video <!-- <video
id="video_{{index}}" id="video_{{index}}"
class="video_item" class="video_item"
loop loop
...@@ -79,7 +81,7 @@ ...@@ -79,7 +81,7 @@
@tap="videoTap" @tap="videoTap"
> >
<video-pause :pause="pause"></video-pause> <video-pause :pause="pause"></video-pause>
</video> </video> < !-->
<view class="rightcont"> <view class="rightcont">
<view class="info">奖品库存: 1/8</view> <view class="info">奖品库存: 1/8</view>
<view class="info">中奖概率: {{item.id}}/3000</view> <view class="info">中奖概率: {{item.id}}/3000</view>
...@@ -88,7 +90,8 @@ ...@@ -88,7 +90,8 @@
<view class="orange" style="{{progressStyle}}"></view> <view class="orange" style="{{progressStyle}}"></view>
</view> </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>
</view> </view>
</swiper-item> </swiper-item>
</swiper> </swiper>
...@@ -102,13 +105,13 @@ ...@@ -102,13 +105,13 @@
type: Array, type: Array,
value: [] value: []
}, },
loading: {
type: Boolean,
default: false
},
duration: { duration: {
type: Number, type: Number,
value: 800 value: 800
},
total: {
type: Number,
value: 0,
} }
}, },
data: { data: {
...@@ -124,10 +127,12 @@ ...@@ -124,10 +127,12 @@
_videoContexts: [], _videoContexts: [],
progress:0, progress:0,
progressStyle:'', progressStyle:'',
loading: false
}, },
watch: { watch: {
videoList () { videoList () {
const newVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : []; const newVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
this.loading = false;
if (newVal.length) this._videoListChanged(newVal); if (newVal.length) this._videoListChanged(newVal);
} }
}, },
...@@ -156,17 +161,19 @@ ...@@ -156,17 +161,19 @@
const current = e.$wx.detail.current; const current = e.$wx.detail.current;
console.log(current); console.log(current);
const diff = current - this._last; const diff = current - this._last;
if (diff === 0) { if (diff === 0) return;
console.log(this.nextQueue.length);
return;
}
this._last = current; this._last = current;
// this.playCurrent(current); this.playCurrent(current);
this.$emit('change', { activeId: this.curQueue[current].id }); // this.$emit('change', { activeId: this.curQueue[current].id });
this.loading = true;
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];
...@@ -174,6 +181,7 @@ ...@@ -174,6 +181,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;
} }
...@@ -183,6 +191,7 @@ ...@@ -183,6 +191,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();
...@@ -190,6 +199,7 @@ ...@@ -190,6 +199,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;
} }
...@@ -198,16 +208,16 @@ ...@@ -198,16 +208,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;
} // }
this.playCurrent(current);
console.log(this.prevQueue, this.curQueue, this.nextQueue); })
}); console.log(this.prevQueue, this.curQueue, this.nextQueue)
}, },
onWaiting (e) { onWaiting (e) {
this.trigger(e, 'wait'); this.trigger(e, 'wait');
...@@ -232,7 +242,6 @@ ...@@ -232,7 +242,6 @@
}, },
playCurrent(current) { playCurrent(current) {
this._videoContexts.forEach((ctx, index) => { this._videoContexts.forEach((ctx, index) => {
// console.log('playCurrent', current, index);
if (index !== current) { if (index !== current) {
ctx.pause(); ctx.pause();
} else { } else {
......
src/pages/index.wpy
View file @ 90996972
...@@ -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,17 +166,22 @@ ...@@ -166,17 +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>
<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"> <view class="content">
<!--<button bindtap="toRaffle">去抽奖</button>-->
<!-- <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>
...@@ -188,7 +193,7 @@ ...@@ -188,7 +193,7 @@
</swiper> </swiper>
</view> </view>
</view> </view>
<!--<view class="footer"> <view class="footer">
<swiper <swiper
class="footswiper" class="footswiper"
display-multiple-items="{{swiperItem}}" display-multiple-items="{{swiperItem}}"
...@@ -200,8 +205,8 @@ ...@@ -200,8 +205,8 @@
next-margin="120rpx" next-margin="120rpx"
catch:touchmove catch:touchmove
> >
&lt;!&ndash;bindtouchstart="touchStart"&ndash;&gt; <!--bindtouchstart="touchStart"-->
&lt;!&ndash;bindtouchend="touchEnd"&ndash;&gt; <!--bindtouchend="touchEnd"-->
<swiper-item wx:for="{{list}}" wx:key="index"> <swiper-item wx:for="{{list}}" wx:key="index">
<view <view
data-itemid="{{index}}" data-itemid="{{index}}"
...@@ -216,7 +221,7 @@ ...@@ -216,7 +221,7 @@
</view> </view>
</swiper-item> </swiper-item>
</swiper> </swiper>
</view>--> </view>
<view class="authmodal" v-show="authmodal"> <view class="authmodal" v-show="authmodal">
<view class="wrap"> <view class="wrap">
<view class="text">来到lukii，再平凡的人，也有幸运的权利！</view> <view class="text">来到lukii，再平凡的人，也有幸运的权利！</view>
...@@ -226,7 +231,7 @@ ...@@ -226,7 +231,7 @@
<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></open-animation>
</view> </view>
</template> </template>
...@@ -235,6 +240,7 @@ ...@@ -235,6 +240,7 @@
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: {
...@@ -242,21 +248,23 @@ ...@@ -242,21 +248,23 @@
}, },
data: { data: {
// list:[], //商品list list:[], //商品list
adlist:[], adlist:[],
// current:5, //商品列表初次展示第几个 current:5, //商品列表初次展示第几个
// userInfo: {}, // userInfo: {},
swiperItem:2, swiperItem:2,
videoList:[], videoList:[],
length: 4, length: 4,
// circular:false, 商品是否无限循环 circular:false, // 商品是否无限循环
topPage:0, topPage:0,
lastPage:0, lastPage:0,
// currentIndex:5, //商品当前滑动到第几个 currentIndex:5, //商品当前滑动到第几个
authmodal:false, authmodal:false,
sign: false, sign: false,
showAnimation: false, showAnimation: false,
userImgStyle:'', userImgStyle:'',
total: 4,
goldNum: 2500,
}, },
computed: { computed: {
...@@ -335,11 +343,6 @@ ...@@ -335,11 +343,6 @@
url: '/pages/auth' url: '/pages/auth'
});*/ });*/
}, },
toRaffle() {
wx.navigateTo({
url: '/pages/raffle?id=1&progress=70&chance=1/780&corn=50000&imgsrc=/static/images/test2.png&goods=Nintendo Switch任天堂游戏机任天堂游戏机'
});
},
touchStart (event) { touchStart (event) {
touchDotX = event.touches[0].pageX; // 获取触摸时的原点 touchDotX = event.touches[0].pageX; // 获取触摸时的原点
touchDotY = event.touches[0].pageY; touchDotY = event.touches[0].pageY;
...@@ -397,14 +400,12 @@ ...@@ -397,14 +400,12 @@
}, },
changeVideo(e) { changeVideo(e) {
this.setIsConnected(); this.setIsConnected();
// setTimeout(() => {
console.log(this.length, e.activeId); console.log(this.length, e.activeId);
if (this.length - e.activeId === 1) { if (this.length - e.activeId === 1) {
this.videoList = [{id: e.activeId + 2, url: 'https://ip1707952229.mobgslb.tbcache.com/youku/6974c3708c0337150e1743b1c/03000801005EA2A6C8FB4C2003E8807282A547-8207-4F52-9663-969096765248.mp4?sid=158960247500010009412_00_Bac09720260d484f23ac2ccebe5206930&sign=b76f4099e108fc306d3db993d1bec0a8&ctype=50&ali_redirect_domain=vali.cp31.ott.cibntv.net&ali_redirect_ex_ftag=5898cd25832bbff232de6d9fa668e8ddf8bacc5fef3f2e7b&ali_redirect_ex_tmining_ts=1589602477&ali_redirect_ex_tmining_expire=3600&ali_redirect_ex_hot=111'}]; this.videoList = [{id: e.activeId + 2, url: 'https://ip1707952229.mobgslb.tbcache.com/youku/6974c3708c0337150e1743b1c/03000801005EA2A6C8FB4C2003E8807282A547-8207-4F52-9663-969096765248.mp4?sid=158960247500010009412_00_Bac09720260d484f23ac2ccebe5206930&sign=b76f4099e108fc306d3db993d1bec0a8&ctype=50&ali_redirect_domain=vali.cp31.ott.cibntv.net&ali_redirect_ex_ftag=5898cd25832bbff232de6d9fa668e8ddf8bacc5fef3f2e7b&ali_redirect_ex_tmining_ts=1589602477&ali_redirect_ex_tmining_expire=3600&ali_redirect_ex_hot=111'}];
this.length += 1; this.length += 1;
console.log('add video'); console.log('add video');
} }
// }, 3000)
}, },
deleteAnimation (current) { deleteAnimation (current) {
if (current && current.itemid != undefined) { if (current && current.itemid != undefined) {
...@@ -434,6 +435,75 @@ ...@@ -434,6 +435,75 @@
that.list = newlist; that.list = newlist;
}, 500); }, 500);
} }
},
signIn: function(v) {
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') {
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;
} }
}, },
...@@ -464,15 +534,24 @@ ...@@ -464,15 +534,24 @@
{value: 10, text: '白色条纹马克杯，马克吐温同款10', imgsrc:'/static/images/peo2.jpg', price:'￥1399.67',people:2200,sku:'100004549235'} {value: 10, text: '白色条纹马克杯，马克吐温同款10', imgsrc:'/static/images/peo2.jpg', price:'￥1399.67',people:2200,sku:'100004549235'}
]; ];
let urls = [ 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://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://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 () { onLoad (options) {
let that = this; let that = this;
if (options.openid) {
Dialog.alert({
title: 'openidShared',
message: options.openid
});
}
this.adlist = [ this.adlist = [
{imgsrc: '/static/images/test1.jpg', text: '小明刚刚参与了抽奖'}, {imgsrc: '/static/images/test1.jpg', text: '小明刚刚参与了抽奖'},
{imgsrc: '/static/images/test1.jpg', text: '小2刚刚参与了抽奖'}, {imgsrc: '/static/images/test1.jpg', text: '小2刚刚参与了抽奖'},
...@@ -526,8 +605,11 @@ ...@@ -526,8 +605,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