Skip to content

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

新增视频初始播放状态；新增视频暂停播放功能

parent d5b8ee06
Hide whitespace changes
Inline Side-by-side
Showing with 887 additions and 125 deletions
src/app.wpy
View file @ bddcdc91
...@@ -4,7 +4,7 @@ import eventHub from './common/eventHub'; ...@@ -4,7 +4,7 @@ import eventHub from './common/eventHub';
import vuex from '@wepy/x'; import vuex from '@wepy/x';
wepy.use(vuex); wepy.use(vuex);
//import store from './store'; // import store from './store';
wepy.app({ wepy.app({
hooks: { hooks: {
// App 级别 hook，对整个 App 生效 // App 级别 hook，对整个 App 生效
...@@ -15,38 +15,42 @@ wepy.app({ ...@@ -15,38 +15,42 @@ wepy.app({
}, },
onLaunch() { onLaunch() {
let that= this; let that = this;
wx.getSetting({ wx.getSetting({
success: res => { success: res => {
if (res.authSetting['scope.userInfo']) { if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框 // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
wx.getUserInfo({ wx.getUserInfo({
success: res => { success: res => {
// 可以将 res 发送给后台解码出 unionId // 可以将 res 发送给后台解码出 unionId
// store.dispatch('setUserInfo',res.userInfo); // store.dispatch('setUserInfo',res.userInfo);
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况 // 所以此处加入 callback 以防止这种情况
if (that.userInfoReadyCallback) { if (that.userInfoReadyCallback) {
that.userInfoReadyCallback(res => { that.userInfoReadyCallback(res => {
// store.dispatch('setUserInfo',res.userInfo); // store.dispatch('setUserInfo',res.userInfo);
}) });
} }
}, },
fail: ()=> { fail: () => {
wx.reLaunch({ wx.reLaunch({
url: '/pages/auth', url: '/pages/auth'
}) });
} }
}) });
}else{ } else {
// 未授权，跳转到授权页面 // 未授权，跳转到授权页面
wx.reLaunch({ wx.reLaunch({
url: '/pages/auth', url: '/pages/auth'
}) });
} }
} }
}) });
wx.setStorageSync('onNetworkStatusChange', true);
wx.onNetworkStatusChange((res) => {
wx.setStorageSync('onNetworkStatusChange', res.isConnected);
});
}, },
methods: {} methods: {}
}); });
......
src/common/wxRequest.js 0 → 100644
View file @ bddcdc91
import wepy from 'wepy';
const wxRequest = async (params = {}, url) => {
console.log('wxRequest', params);
const isConnected = wx.getStorageSync('onNetworkStatusChange');
if (!isConnected) {
wx.showToast({
title: '无网络',
icon: 'loading',
duration: 2000
});
return;
}
// tip.loading()
let data = params.query || {};
const header = params.header || {};
let res = await wepy.request({
url: url,
method: params.method || 'GET',
data: data,
header: header
});
// tip.loaded()
console.log('wxRequest', res);
return res;
};
module.exports = {
wxRequest
};
src/components/custom/loading.wpy 0 → 100644
View file @ bddcdc91
<template>
<div class="loading-container">
<van-loading size="24px" vertical>加载中...</van-loading>
</div>
</template>
<script>
import wepy from '@wepy/core';
wepy.component({
});
</script>
<style lang="less">
.loading-container {
position: absolute;
width: 100%;
height: 100%;
background: #000;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
</style>
<config>
{
usingComponents: {
'van-loading': '~@/components/vant/loading/index'
}
}
</config>
src/components/custom/network.wpy 0 → 100644
View file @ bddcdc91
<template>
<div class="network-container">
<div class="network-wrapper">
<span class="network-text">网络状况不佳，请刷新重试</span>
<van-button custom-class="network-button" round type="info" @tap="setIsConnected">刷新</van-button>
</div>
</div>
</template>
<script>
import wepy from '@wepy/core';
import { mapActions } from '@wepy/x';
import store from '../../store';
wepy.component({
store,
methods: {
...mapActions(['setIsConnected'])
}
});
</script>
<style lang="less">
.network-container {
position: absolute;
width: 100%;
height: 100%;
background: #000;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
.network-wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.network-text {
color: #AAA;
font-size: 12px;
}
.network-button {
margin-top: 10px;
width: 90px;
font-size: 12px;
height: 28px;
line-height: 28px;
background: #FF6600;
border-color: #FF6600;
}
}
}
</style>
<config>
{
usingComponents: {
'van-button': '~@/components/vant/button/index'
}
}
</config>
src/components/custom/openAnimation.wpy 0 → 100644
View file @ bddcdc91
<template>
<div class="loading-container" :class="{'opened': opened}">
<div class="bg rotate"></div>
<div class="mod-chest" @tap="click">
<div class="chest-close" :class="{'shake': shake, 'show': showChest}">
<div class="gift"></div>
</div>
<div class="chest-open" :class="{'show': show, 'blur': blur}">
<div class="mod-chest-cont open-cont">
<div class="content">
<div class="gift">
x 500
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import wepy from '@wepy/core';
wepy.component({
data: {
showChest: true,
shake: false,
opened: false,
show: false,
blur: false
},
methods: {
click: function() {
console.log('click');
this.shake = true;
setTimeout(() => {
this.opened = true;
setTimeout(() => {
this.showChest = false;
this.show = true;
setTimeout(() => {
this.blur = true;
}, 500);
}, 200);
}, 1200);
}
}
});
</script>
<style lang="less">
.loading-container {
position: absolute;
width: 100%;
height: 100%;
background: grey;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
.bg{position: absolute;z-index: 1;background:url('http://activitystatic.xyqb.com/light.png') 0px 0px no-repeat;background-size:452px auto;width:452px;height:510px; max-height:100%; left:50%;margin-left:-226px;top:-25px;}
.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;}
.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;}
.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:-147px;}
.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:0px;top:-147px;}
.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;padding-bottom: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);
}
6%{
-webkit-transform: scale(.9) rotate(-8deg);
-webkit-transform: scale3d(1, 1, 1) rotate(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);
}
54%{
-webkit-transform: scale(1);
-webkit-transform: scale3d(1, 1, 1);
}
60%{
-webkit-transform: scale(1);
-webkit-transform: scale3d(1, 1, 1);
}
80% {
-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);
// -webkit-transform: scale3d(1, 1, 1) translate3d(0px,400px,0);
}
100% {
-webkit-transform: scale(1) translate(0px,61px);
// -webkit-transform: scale3d(1, 1, 1) translate3d(0px,61px,0);
}
}
@-webkit-keyframes rotate {
0% {
-webkit-transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(360deg);
}
}
@-webkit-keyframes move {
0% {
-webkit-transform:translate(0px ,0px);
}
100% {
-webkit-transform:translate(0px ,-5px);
}
}
@-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;
}
}
</style>
<config>
{
usingComponents: {
'van-loading': '~@/components/vant/loading/index'
}
}
</config>
src/components/custom/sign.wpy 0 → 100644
View file @ bddcdc91
<template>
<div class="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>
</template>
<script>
import wepy from '@wepy/core';
wepy.component({
data: {
showAnimation: false
},
props: {
title: '',
bgColor: {
type: String,
default: '#FFF'
},
fontColor: {
type: String,
default: '#FF0000'
}
},
methods: {
handleTaps: function() {
this.showAnimation = !this.showAnimation;
[this.bgColor, this.fontColor] = [this.fontColor, this.bgColor];
}
}
});
</script>
<style lang="less">
.container {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: -8px;
left: 200px;
width: 150rpx;
.tips {
flex: 1;
color: #FF0000;
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*/
}
@keyframes mymove {
from { font-size:10px;opacity: 1.0; top: -20px;}
to { font-size:20px;opacity: 0; top: -80px;}
}
.circle {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 100rpx;
height: 100rpx;
background: #fff;
.title {
color: #FF0000;
}
}
}
</style>
<config>
{
usingComponents: {
'van-icon': '~@/components/vant/icon/index'
}
}
</config>
src/components/custom/starAnimation.wpy 0 → 100644
View file @ bddcdc91
<template>
<div class="loading-container">
<!-- <van-loading size="24px" vertical>加载中...</van-loading> -->
<div class="loader">
<div class="face">
<div class="circle"></div>
</div>
</div>
</div>
</template>
<script>
import wepy from '@wepy/core';
wepy.component({
});
</script>
<style lang="less">
.loading-container {
position: absolute;
width: 100%;
height: 100%;
background: grey;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
.loader {
width: 20em;
height: 20em;
font-size: 10px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
.face {
position: absolute;
border-radius: 50%;
border-style: solid;
animation: animate 3s linear infinite;
&:nth-child(1) {
width: 100%;
height: 100%;
color: black;
border-color: currentColor transparent transparent currentColor;
border-width: 0.2em 0.2em 0 0;
--deg: -45deg;
animation-direction: normal;
}
.circle {
position: absolute;
width: 50%;
height: 0.1em;
top: 50%;
left: 50%;
background-color: transparent;
transform: rotate(var(--deg));
transform-origin: left;
&::before {
position: absolute;
top: -0.5em;
right: -0.5em;
content: '';
width: 1em;
height: 1em;
background-color: currentColor;
border-radius: 50%;
box-shadow: 0 0 2em,
0 0 4em,
0 0 6em,
0 0 8em,
0 0 10em,
0 0 0.5em rgba(255, 255, 0, 0.1);
}
@keyframes animate {
to {
transform: rotate(1turn);
}
}
}
}
}
}
</style>
<config>
{
usingComponents: {
'van-loading': '~@/components/vant/loading/index'
}
}
</config>
src/components/custom/starAnimation1.wpy 0 → 100644
View file @ bddcdc91
<template>
<div class="loading-container">
<!-- <van-loading size="24px" vertical>加载中...</van-loading> -->
<div class="meteor">
<div class="star"></div>
</div>
</div>
</template>
<script>
import wepy from '@wepy/core';
wepy.component({
});
</script>
<style lang="less">
.loading-container {
position: absolute;
width: 100%;
height: 100%;
background: grey;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
.meteor {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
transform: rotateZ(45deg);
transform: -webkit-rotateZ(45deg);
}
.star {
position: absolute;
top: 38%;
left: -43%;
height: 2px;
width: 100px;
background: linear-gradient(45deg,rgba(255,255,255,0),yellow);
background: -webkit-linear-gradient(45deg,rgba(255,255,255,0),yellow);
/*此处为下一步的添加动画*/
-webkit-animation: tail 3s ease-in-out infinite,shooting 3s ease-in-out infinite;
-o-animation: tail 3s ease-in-out infinite,shooting 3s ease-in-out infinite;
animation: tail 3s ease-in-out infinite,shooting 3s ease-in-out infinite;
}
.star::before,
.star::after{
content: "";
position: absolute;
top: calc(100% - 1px);
left: 100%;
height: 2px;
background: 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;
-o-animation: shining 3s ease-in-out infinite;
animation: shining 3s ease-in-out infinite;
}
.star:before {
transform: translateX(-50%) rotateZ(-45deg);
transform: -webkit-translateX(-50%) -webkit-rotateZ(-45deg);
}
.star:after {
transform: translateX(-50%) rotateZ(45deg);
transform: -webkit-translateX(-50%) -webkit-rotateZ(45deg);
}
@-webkit-keyframes shining {
0% {width: 0;}
50% {width: 30px;}
100% {width: 0;}
}
@keyframes shining {
0% {width: 0;}
50% {width: 30px;}
100% {width: 0;}
}
@-webkit-keyframes tail {
0% {width: 0;}
30% {width: 50px;}
100% {width: 0;}
}
@keyframes tail {
0% {width: 0;}
30% {width: 100px;}
100% {width: 0;}
}
@-webkit-keyframes shooting {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(350px);
transform: translateX(350px);
}
}
@keyframes shooting {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(350px);
transform: translateX(350px);
}
}
}
</style>
<config>
{
usingComponents: {
'van-loading': '~@/components/vant/loading/index'
}
}
</config>
src/components/custom/videoPause.wpy 0 → 100644
View file @ bddcdc91
<template>
<div class="video-icon-view" v-if="pause">
<van-icon custom-class="video-icon video-icon_animate" name="play" />
</div>
</template>
<script>
import wepy from '@wepy/core';
wepy.component({
props: {
pause: false
}
});
</script>
<style lang="less">
.video-icon-view {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
.video-icon {
z-index: 2;
color: rgba(255,255,255,0.5);
font-size: 100rpx;
}
}
.video-icon_animate {
animation:mymoves .5s forwards;
-webkit-animation:mymoves .5s forwards; /*Safari and Chrome*/
}
@keyframes mymoves {
from { transform: scale(2);opacity: 0;}
to { transform: scale(1);opacity: 1;}
}
</style>
<config>
{
usingComponents: {
'van-icon': '~@/components/vant/icon/index'
}
}
</config>
src/components/custom/videolist.wpy
View file @ bddcdc91
...@@ -27,17 +27,15 @@ ...@@ -27,17 +27,15 @@
vertical vertical
current="1" current="1"
bindanimationfinish="animationfinish" bindanimationfinish="animationfinish"
bindchange="cancelPause"
> >
<!-- curQueue 循环会导致video重新插入，objectFit 不可变更 --> <!-- curQueue 循环会导致video重新插入，objectFit 不可变更 -->
<swiper-item wx:for="{{currentVideo}}" 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
enable-play-gesture
enable-progress-gesture
autoplay
show-center-play-btn="{{false}}" show-center-play-btn="{{false}}"
controls="{{false}}" controls="{{false}}"
src="{{item.url}}" src="{{item.url}}"
...@@ -47,8 +45,12 @@ ...@@ -47,8 +45,12 @@
binderror="onError" binderror="onError"
bindwaiting="onWaiting" bindwaiting="onWaiting"
bindloadedmetadata="onLoadedMetaData" bindloadedmetadata="onLoadedMetaData"
bindtimeupdate="onTimeUpdate"
@tap="videoTap"
> >
<video-pause :pause="pause"></video-pause>
</video> </video>
<video-loading v-if="item.time === 0"/>
<slot></slot> <slot></slot>
</view> </view>
</swiper-item> </swiper-item>
...@@ -58,7 +60,7 @@ ...@@ -58,7 +60,7 @@
<script> <script>
import wepy from '@wepy/core'; import wepy from '@wepy/core';
wepy.component({ wepy.component({
props:{ props: {
videoList: { videoList: {
type: Array, type: Array,
value: [] value: []
...@@ -66,46 +68,98 @@ ...@@ -66,46 +68,98 @@
duration: { duration: {
type: Number, type: Number,
value: 800 value: 800
}, }
}, },
data: { data: {
pause: false,
nextQueue: [],
prevQueue: [],
curQueue: [],
circular: false, circular: false,
currentVideo: [], _last: 1,
_videoContexts: [], _change: -1,
_invalidUp: 0,
_invalidDown: 0,
_videoContexts: []
}, },
watch: { watch: {
videoList () { videoList () {
var newVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : []; const newVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
this._videoListChanged(newVal); if (newVal.length) this._videoListChanged(newVal);
} }
}, },
attached() {
this._videoContexts = [
wx.createVideoContext('video_0', this.$wx),
wx.createVideoContext('video_1', this.$wx),
wx.createVideoContext('video_2', this.$wx)
];
},
methods: { methods: {
_videoListChanged (newVal) { _videoListChanged (newVal) {
var _this = this; newVal.forEach((item, index) => {
let currentVideo = this.currentVideo; item.time = 0;
let _videoContexts = this._videoContexts; this.nextQueue.push(item);
let first = currentVideo.length === 0;
let length = this.currentVideo.length;
newVal.forEach(function (item,index) {
currentVideo.push(item);
_videoContexts.push(wx.createVideoContext('video_'+length+index, _this))
}); });
this.currentVideo = currentVideo; if (!this.curQueue.length) {
this._videoContexts = _videoContexts; this.curQueue = this.nextQueue.splice(0, 3);
first && this.playCurrent(1); this.playCurrent(1);
/*this.setData({ console.log('newVal', this.nextQueue, this.curQueue);
currentVideo: data.currentVideo, }
_videoContexts: data._videoContexts,
}, function () {
_this.playCurrent(1);
});*/
}, },
animationfinish(e) { animationfinish(e) {
console.log(e.$wx.detail) const current = e.$wx.detail.current;
var current = e.$wx.detail.current; console.log(current);
this.playCurrent(current); const diff = current - this._last;
let curQueue = this.currentVideo; if (diff === 0) return;
this.$emit('change', { activeId: curQueue[current].id }); this._last = current;
// this.playCurrent(current);
this.$emit('change', { activeId: this.curQueue[current].id });
setTimeout(() => {
const direction = diff === 1 || diff === -2 ? 'up' : 'down';
if (direction === 'up') {
if (this._invalidDown === 0) {
const change = (this._change + 1) % 3;
const add = this.nextQueue.shift();
const remove = this.curQueue[change];
if (add) {
this.prevQueue.push(remove);
this.curQueue[change] = add;
this._change = change;
} else {
this._invalidUp += 1;
}
} else {
this._invalidDown -= 1;
}
}
if (direction === 'down') {
if (this._invalidUp === 0) {
const _change2 = this._change;
const _remove = this.curQueue[_change2];
const _add = this.prevQueue.pop();
if (_add) {
this.curQueue[_change2] = _add;
this.nextQueue.unshift(_remove);
this._change = (_change2 - 1 + 3) % 3;
} else {
this._invalidDown += 1;
}
} else {
this._invalidUp -= 1;
}
}
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;
}
this.playCurrent(current);
console.log(this.prevQueue, this.curQueue, this.nextQueue);
});
}, },
onWaiting (e) { onWaiting (e) {
this.trigger(e, 'wait'); this.trigger(e, 'wait');
...@@ -116,9 +170,28 @@ ...@@ -116,9 +170,28 @@
onError(e) { onError(e) {
this.trigger(e, 'error'); this.trigger(e, 'error');
}, },
onTimeUpdate(e) {
const currentTime = e.$wx.detail.currentTime;
if (currentTime > 0 && currentTime < 10) {
const id = e.target.dataset.id;
this.curQueue.forEach((v, i) => {
if (v.id === id && v.time === 0) {
this.curQueue[i].time = currentTime;
}
});
this.curQueue = [...this.curQueue];
}
},
playCurrent(current) { playCurrent(current) {
this._videoContexts.forEach(function (ctx, index) { this._videoContexts.forEach((ctx, index) => {
index !== current ? ctx.pause() : ctx.play(); console.log('playCurrent', current, index);
if (index !== current) {
setTimeout(() => {
ctx.pause();
}, 300);
} else {
ctx.play();
}
}); });
}, },
trigger(e, type) { trigger(e, type) {
...@@ -126,7 +199,27 @@ ...@@ -126,7 +199,27 @@
var detail = e.$wx.detail; var detail = e.$wx.detail;
var activeId = e.target.dataset.id; var activeId = e.target.dataset.id;
this.$emit(type, Object.assign(Object.assign(Object.assign({}, detail), { activeId: activeId }), ext)); this.$emit(type, Object.assign(Object.assign(Object.assign({}, detail), { activeId: activeId }), ext));
},
videoTap(e) {
const current = e.currentTarget.dataset.index;
this._videoContexts.forEach((ctx, index) => {
if (index === current) {
this.pause ? ctx.play() : ctx.pause();
}
});
this.pause = !this.pause;
},
cancelPause() {
this.pause = false;
} }
}, }
}); });
</script> </script>
<config>
{
usingComponents: {
'video-pause': '~@/components/custom/videoPause',
'video-loading': '~@/components/custom/loading'
}
}
</config>
src/pages/auth.wpy
View file @ bddcdc91
...@@ -11,9 +11,11 @@ ...@@ -11,9 +11,11 @@
</template> </template>
<script> <script>
import { mapActions } from '@wepy/x';
import wepy from '@wepy/core'; import wepy from '@wepy/core';
import store from '../store'; import store from '../store';
wepy.page({ wepy.page({
store,
hooks: { hooks: {
'before-setData': function (dirty) { 'before-setData': function (dirty) {
...@@ -23,16 +25,13 @@ ...@@ -23,16 +25,13 @@
canIUse: wx.canIUse('button.open-type.getUserInfo') canIUse: wx.canIUse('button.open-type.getUserInfo')
}, },
computed: {
},
methods: { methods: {
...mapActions([ 'setUserInfo' ]),
getUserInfo (e) { getUserInfo (e) {
store.dispatch('setUserInfo',e.$wx.detail.userInfo); this.setUserInfo(e.$wx.detail.userInfo);
wx.reLaunch({ wx.reLaunch({
url: '/pages/index', url: '/pages/index'
}) });
} }
}, },
......
src/pages/index.wpy
View file @ bddcdc91
...@@ -154,14 +154,14 @@ ...@@ -154,14 +154,14 @@
</wxs> </wxs>
<template> <template>
<view class="video-wrapper"> <view class="video-wrapper">
<!-- <video autoplay class="video" id="myvideo" controls="{{false}}" selectItemStyle="{{90}}" loop="{{true}}" src="https://xyqblogo.lkbang.net/VID_20200508_171710.mp4"></video> -->
<view id="myvideo"> <view id="myvideo">
<video-list videoList="{{videoList}}" bindchange="changeVideo"></video-list> <video-list :videoList.sync="videoList" bindchange="changeVideo"></video-list>
</view> </view>
<view class="userInfo"> <view class="userInfo">
<image src="{{userInfo.avatarUrl}}" mode="cover" class="userimage"></image> <image src="{{userInfo.avatarUrl}}" mode="cover" class="userimage"></image>
</view> </view>
<view class="content"> <view class="content">
<!-- <video-sign title="签"></video-sign> -->
<view class="leftcont"> <view class="leftcont">
<view>零售价：￥190003.00元</view> <view>零售价：￥190003.00元</view>
<view>开奖时间：15：20</view> <view>开奖时间：15：20</view>
...@@ -205,15 +205,19 @@ ...@@ -205,15 +205,19 @@
</swiper-item> </swiper-item>
</swiper> </swiper>
</view> </view>
<!-- <network v-if="!isConnected"></network> -->
<!-- <star-animation></star-animation> -->
<!-- <open-animation></open-animation> -->
</view> </view>
</template> </template>
<script> <script>
let touchDotX = 0, touchDotY = 0; let touchDotX = 0, touchDotY = 0;
import wepy from '@wepy/core';
import store from '../store'; import store from '../store';
import { mapState, mapActions } from '@wepy/x';
import wepy from '@wepy/core';
wepy.page({ wepy.page({
store,
hooks: { hooks: {
}, },
...@@ -225,6 +229,7 @@ ...@@ -225,6 +229,7 @@
userInfo: {}, userInfo: {},
swiperItem:3, swiperItem:3,
videoList:[], videoList:[],
length: 4,
circular:false, circular:false,
topPage:0, topPage:0,
lastPage:0, lastPage:0,
...@@ -232,10 +237,11 @@ ...@@ -232,10 +237,11 @@
}, },
computed: { computed: {
...mapState([ 'isConnected' ])
}, },
methods: { methods: {
...mapActions([ 'setIsConnected' ]),
moveSwiper(e){ moveSwiper(e){
if(e.$wx.detail.source == 'touch') { if(e.$wx.detail.source == 'touch') {
let current = e.$wx.detail.current; let current = e.$wx.detail.current;
...@@ -301,7 +307,7 @@ ...@@ -301,7 +307,7 @@
//解决长按触发tap事件的bug //解决长按触发tap事件的bug
wx.navigateTo({ wx.navigateTo({
url: '/pages/auth' url: '/pages/auth'
}) });
}, },
touchStart (event) { touchStart (event) {
touchDotX = event.touches[0].pageX; // 获取触摸时的原点 touchDotX = event.touches[0].pageX; // 获取触摸时的原点
...@@ -309,6 +315,17 @@ ...@@ -309,6 +315,17 @@
// console.log("起始点的坐标X:" + touchDotX); // console.log("起始点的坐标X:" + touchDotX);
// console.log("起始点的坐标Y:" + touchDotY); // console.log("起始点的坐标Y:" + touchDotY);
}, },
touchMove(event) {
let touchX = event.touches[0].pageX;
let touchY = event.touches[0].pageY;
// 如果元素拖动到购物车范围
let {left, top, bottom, right} = this.shopcarPosition;
if (touchX > left - 10 && touchX < right + 10) {
if (touchY > top - 10 && touchY < bottom + 10) {
this.bigshop = true;
}
}
},
// 移动结束处理动画 // 移动结束处理动画
touchEnd(event) { touchEnd(event) {
// 手指离开屏幕时记录的坐标 // 手指离开屏幕时记录的坐标
...@@ -321,7 +338,7 @@ ...@@ -321,7 +338,7 @@
// 两点横纵坐标差的绝对值 // 两点横纵坐标差的绝对值
let absX = Math.abs(tmX); let absX = Math.abs(tmX);
let absY = Math.abs(tmY); let absY = Math.abs(tmY);
//起始点的坐标(x0,y0)和手指离开时的坐标(x1,y1)之间的距离 // 起始点的坐标(x0,y0)和手指离开时的坐标(x1,y1)之间的距离
let delta = Math.sqrt(absX * absX + absY * absY); let delta = Math.sqrt(absX * absX + absY * absY);
// console.log('起始点和离开点距离:' + delta + 'px'); // console.log('起始点和离开点距离:' + delta + 'px');
// 如果delta超过60px（可以视情况自己微调）,判定为手势触发 // 如果delta超过60px（可以视情况自己微调）,判定为手势触发
...@@ -336,97 +353,93 @@ ...@@ -336,97 +353,93 @@
} else { } else {
// console.log("下滑====="); // console.log("下滑=====");
} }
} }
} else { } else {
// console.log("手势未触发====="); // console.log("手势未触发=====");
} }
}, },
changeVideo(e){ forbidMove() {
if(e && e.activeId == 6) {
let that = this; },
setTimeout(function(){ changeVideo(e) {
let obj = { this.setIsConnected();
id:7, console.log(this.length, e.activeId);
url:'https://xyqblogo.lkbang.net/VID_20200508_171710.mp4' 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'}];
that.videoList = [obj]; this.length += 1;
},1000) console.log('add video');
} }
}, },
deleteAnimation:function(current) { deleteAnimation: function(current) {
if(current && current.itemid != undefined) { if (current && current.itemid != undefined) {
let list = this.list; let list = this.list;
list = list.map((item,index)=>{ list = list.map((item, index) => {
item.select = ''; item.select = '';
if(index==current.itemid){ if (index == current.itemid) {
item.select = true; item.select = true;
} }
return item; return item;
}) });
this.list = list; this.list = list;
let that = this; let that = this;
setTimeout(function(){ setTimeout(function() {
let newlist = that.list.filter((item,index)=>index!=current.itemid); let newlist = that.list.filter((item, index) => index != current.itemid);
// 正常情况下，current.itemid都会比current大一个，因为current有个隐藏元素，当相等或小于的时候就有问题，要重新设置current，最小不能超过0 // 正常情况下，current.itemid都会比current大一个，因为current有个隐藏元素，当相等或小于的时候就有问题，要重新设置current，最小不能超过0
if(current.itemid <= that.current) { if (current.itemid <= that.current) {
that.current = Math.max(that.current-1,0) that.current = Math.max(that.current - 1, 0);
} }
that.list = newlist; that.list = newlist;
},500) }, 500);
} }
} }
}, },
created () { created () {
let self = this; let self = this;
if(store.state.userInfo) { if (store.state.userInfo) {
this.userInfo = store.state.userInfo; this.userInfo = store.state.userInfo;
} else { } else {
wx.getUserInfo({ wx.getUserInfo({
success (res) { success (res) {
self.userInfo = res.userInfo; self.userInfo = res.userInfo;
store.dispatch('setUserInfo',res.userInfo); store.dispatch('setUserInfo', res.userInfo);
}, },
fail () { fail () {
wx.reLaunch({ wx.reLaunch({
url: '/pages/auth', url: '/pages/auth'
}) });
} }
}); });
} }
this.list = [ this.list = [
{value:1,text:'这是测试的文字1'}, {value: 1, text: '这是测试的文字1'},
{value:2,text:'这是测试的文字2'}, {value: 2, text: '这是测试的文字2'},
{value:3,text:'这是测试的文字3'}, {value: 3, text: '这是测试的文字3'},
{value:4,text:'这是测试的文字4'}, {value: 4, text: '这是测试的文字4'},
{value:5,text:'这是测试的文字5'}, {value: 5, text: '这是测试的文字5'},
{value:6,text:'这是测试的文字6'}, {value: 6, text: '这是测试的文字6'},
{value:7,text:'这是测试的文字7'}, {value: 7, text: '这是测试的文字7'},
{value:8,text:'这是测试的文字8'}, {value: 8, text: '这是测试的文字8'},
{value:9,text:'这是测试的文字9'}, {value: 9, text: '这是测试的文字9'},
{value:10,text:'这是测试的文字10'}, {value: 10, text: '这是测试的文字10'}
]; ];
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刚刚参与了抽奖'},
{imgsrc:'/static/images/test1.jpg',text:'小3刚刚参与了抽奖'}, {imgsrc: '/static/images/test1.jpg', text: '小3刚刚参与了抽奖'},
{imgsrc:'/static/images/test1.jpg',text:'小4刚刚参与了抽奖'}, {imgsrc: '/static/images/test1.jpg', text: '小4刚刚参与了抽奖'},
{imgsrc:'/static/images/test1.jpg',text:'小5刚刚参与了抽奖'}, {imgsrc: '/static/images/test1.jpg', text: '小5刚刚参与了抽奖'},
{imgsrc:'/static/images/test1.jpg',text:'小6刚刚参与了抽奖'}, {imgsrc: '/static/images/test1.jpg', text: '小6刚刚参与了抽奖'},
{imgsrc:'/static/images/test1.jpg',text:'小7刚刚参与了抽奖'}, {imgsrc: '/static/images/test1.jpg', text: '小7刚刚参与了抽奖'},
{imgsrc:'/static/images/test1.jpg',text:'小8刚刚参与了抽奖'}, {imgsrc: '/static/images/test1.jpg', text: '小8刚刚参与了抽奖'}
]; ];
let urls = [ let urls = [
'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://vdept.bdstatic.com/4668655278575131635578744a355671/6453433744785466/b5393b0ee87409000a401b6f608ccc794c8eb3c5829f3b7d2b3289bfdcff2ab2d89987516c0b7f193da3845400eeca3e.mp4?auth_key=1589361002-0-0-8c85a0fcd6b08a3e0415e0e60ca52a70',
'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://vdept.bdstatic.com/53316b757439717a3478597341586b73/6274595367777152/217252290ac7caceebd942d49930f7ef02d14b37687383a950d1d04e5371dbc673374b990168369a03e371720fd9ec297467e814578c0d389c52018ec32199b2.mp4?auth_key=1589363984-0-0-ebb9745f286fe623f7dfe68a5cb9c993', 'https://xyqblogo.lkbang.net/VID_20200508_171710.mp4'
'https://vdept.bdstatic.com/4668655278575131635578744a355671/6453433744785466/b5393b0ee87409000a401b6f608ccc794c8eb3c5829f3b7d2b3289bfdcff2ab2d89987516c0b7f193da3845400eeca3e.mp4?auth_key=1589361002-0-0-8c85a0fcd6b08a3e0415e0e60ca52a70',
]; ];
this.videoList = urls.map((url, index) => ({ id: index + 1, url })) this.videoList = urls.map((url, index) => ({ id: index + 1, url }));
}, },
onLoad () { onLoad () {
...@@ -439,6 +452,12 @@ ...@@ -439,6 +452,12 @@
usingComponents: { usingComponents: {
'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',
'video-sign': '~@/components/custom/sign',
'network': '~@/components/custom/network',
'star-animation': '~@/components/custom/starAnimation',
'star-animation1': '~@/components/custom/starAnimation1',
'open-animation': '~@/components/custom/openAnimation',
} }
} }
</config> </config>
src/store/index.js
View file @ bddcdc91
...@@ -3,15 +3,23 @@ import Vuex from '@wepy/x'; ...@@ -3,15 +3,23 @@ import Vuex from '@wepy/x';
export default new Vuex.Store({ export default new Vuex.Store({
state: { state: {
userInfo: null, userInfo: null,
isConnected: true
}, },
mutations: { mutations: {
setInfo (state,info) { setInfo (state, info) {
state.userInfo = info; state.userInfo = info;
},
setIsConnected (state, isConnected) {
state.isConnected = isConnected;
} }
}, },
actions: { actions: {
setUserInfo ({ commit }, info) { setUserInfo ({ commit }, info) {
commit('setInfo', info); commit('setInfo', info);
}, },
setIsConnected ({ commit }) {
const isConnected = wx.getStorageSync('onNetworkStatusChange');
commit('setIsConnected', isConnected);
}
} }
}); });
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