|
@@ -125,10 +125,12 @@
|
|
|
onLoad(options) {
|
|
|
// 创建动画实例
|
|
|
this.animation = uni.createAnimation()
|
|
|
+
|
|
|
// #ifdef MP-WEIXIN
|
|
|
const res = uni.getMenuButtonBoundingClientRect()
|
|
|
this.statusHeight = res.top //胶囊距离顶部
|
|
|
// #endif
|
|
|
+
|
|
|
|
|
|
if(options) {
|
|
|
this.boxId = options.boxId
|
|
@@ -201,7 +203,7 @@
|
|
|
|
|
|
// 动画开始
|
|
|
running() {
|
|
|
- // #ifdef H5
|
|
|
+ // #ifdef H5
|
|
|
// 获取滚动奖品列表长度
|
|
|
this.data = this.$refs.rolling.$el.clientWidth
|
|
|
// 调用 step() 来表示一组动画完成
|
|
@@ -226,8 +228,36 @@
|
|
|
this.stop()
|
|
|
}, 8000);
|
|
|
// #endif
|
|
|
+
|
|
|
+ // #ifdef MP-ALIPAY
|
|
|
+ my.createSelectorQuery().select('.rolling-prize-list').boundingClientRect().exec(info => {
|
|
|
+ this.data = info[0].width
|
|
|
+ // 调用 step() 来表示一组动画完成
|
|
|
+ this.animation.translateX(-this.data).step({
|
|
|
+ duration: 8000,
|
|
|
+ timingFunction: 'linear'
|
|
|
+ })
|
|
|
+ // export方法导出动画数据
|
|
|
+ this.animationData = this.animation.export()
|
|
|
+ // 倒计时
|
|
|
+ this.time = setInterval(() => {
|
|
|
+ // 开奖倒计时、页面显示
|
|
|
+ this.num--
|
|
|
+ // 记录动画执行时间,停止动画计算移动距离时使用
|
|
|
+ this.num2++
|
|
|
+ if (this.num == 0) {
|
|
|
+ clearInterval(this.time)
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+ })
|
|
|
+ // 不手动停止动画,自动停止
|
|
|
+ this.stopTime = setTimeout(() => {
|
|
|
+ this.num = 0
|
|
|
+ this.stop()
|
|
|
+ }, 8000);
|
|
|
+ // #endif
|
|
|
|
|
|
- // #ifdef MP-WEIXIN
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
// 元素详细信息
|
|
|
uni.createSelectorQuery().in(this).select(".rolling-prize-list").boundingClientRect(info => {
|
|
|
this.data = info.width
|
|
@@ -261,12 +291,16 @@
|
|
|
// 停止动画
|
|
|
stop() {
|
|
|
// 获取屏幕距离,用于计算停止动画移动距离计算
|
|
|
+
|
|
|
+ // #ifndef MP-ALIPAY
|
|
|
let screenWidth = null
|
|
|
uni.getSystemInfo({
|
|
|
success: function(res) {
|
|
|
screenWidth = res.screenWidth;
|
|
|
}
|
|
|
});
|
|
|
+ // #endif
|
|
|
+
|
|
|
this.btnIng = true
|
|
|
/**
|
|
|
* 0秒:下标4
|
|
@@ -300,10 +334,10 @@
|
|
|
} else if (this.num2 == 7) {
|
|
|
this.list[1][1] = JSON.parse(JSON.stringify(this.prizeInfo))
|
|
|
} else if (this.num2 == 8) {
|
|
|
- // #ifdef MP-WEIXIN
|
|
|
+ // #ifdef MP-WEIXIN || MP-ALIPAY
|
|
|
this.list[1][1] = JSON.parse(JSON.stringify(this.prizeInfo))
|
|
|
// #endif
|
|
|
- // #ifdef H5
|
|
|
+ // #ifdef H5
|
|
|
this.list[3][1] = JSON.parse(JSON.stringify(this.prizeInfo))
|
|
|
// #endif
|
|
|
}
|
|
@@ -330,8 +364,38 @@
|
|
|
this.rotateShow = false
|
|
|
},7500)
|
|
|
// #endif
|
|
|
+
|
|
|
+ // #ifdef MP-ALIPAY
|
|
|
+
|
|
|
+ let _this = this
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: (res)=> {
|
|
|
+ let windowWidth = res.windowWidth;
|
|
|
+ my.createSelectorQuery().select('.rolling-prize-list').boundingClientRect().exec(info => {
|
|
|
+ _this.data = info[0].width
|
|
|
+ console.log(_this.data);
|
|
|
+ _this.animation.translateX(-(_this.data + windowWidth * 3)).step({
|
|
|
+ duration: 4000,
|
|
|
+ timingFunction: 'ease'
|
|
|
+ })
|
|
|
+ _this.animationData = _this.animation.export()
|
|
|
+ })
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ _this.rollingShow = false
|
|
|
+ },4500)
|
|
|
+ setTimeout(() => {
|
|
|
+ _this.circularShow = false
|
|
|
+ },5100)
|
|
|
+ setTimeout(() => {
|
|
|
+ _this.rotateShow = false
|
|
|
+ },7500)
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // #endif
|
|
|
|
|
|
- // #ifdef MP-WEIXIN
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
uni.createSelectorQuery().in(this).select(".rolling-prize-list").boundingClientRect(info => {
|
|
|
this.data = info.width
|
|
|
this.animation.translateX(-(this.data / 8 * this.num2 + screenWidth * 3)).step({
|
|
@@ -339,6 +403,7 @@
|
|
|
timingFunction: 'ease'
|
|
|
})
|
|
|
this.animationData = this.animation.export()
|
|
|
+ console.log(-(this.data / 8 * this.num2 + screenWidth * 3));
|
|
|
}).exec();
|
|
|
|
|
|
setTimeout(() => {
|