107 lines
3.0 KiB
JavaScript
107 lines
3.0 KiB
JavaScript
// component/ad-dialog/ad-dialog.js
|
|
Component({
|
|
properties: {
|
|
// 广告图片 URL
|
|
imageUrl: {
|
|
type: String,
|
|
value: ''
|
|
},
|
|
// 是否显示弹窗
|
|
visible: {
|
|
type: Boolean,
|
|
value: false
|
|
},
|
|
coupons: {
|
|
type: Object,
|
|
value: null
|
|
}
|
|
},
|
|
data: {
|
|
checked: false,
|
|
initPosition: {
|
|
left: 50,
|
|
top: 50
|
|
},
|
|
// top: 35%;
|
|
// left: 8%;
|
|
content: {
|
|
left: 20,
|
|
top: 150,
|
|
},
|
|
animation: {},
|
|
screenWidth: 0,
|
|
screenHeight: 0,
|
|
top: 590,
|
|
left: 80
|
|
},
|
|
lifetimes: {
|
|
ready() {
|
|
const _self = this
|
|
const systemInfo = wx.getWindowInfo()
|
|
this.setData({
|
|
screenHeight: systemInfo.windowHeight,
|
|
screenWidth: systemInfo.windowWidth
|
|
})
|
|
var phoneHeight = Math.floor(systemInfo.screenWidth / 750 * 100) / 100 //1rpx 是0.52px
|
|
this.setData({
|
|
'content.top': _self.data.top * phoneHeight,
|
|
'content.left': _self.data.left * phoneHeight
|
|
})
|
|
}
|
|
},
|
|
methods: {
|
|
toggleCheck() {
|
|
this.setData({
|
|
checked: !this.data.checked
|
|
})
|
|
},
|
|
// 关闭弹窗
|
|
onClose() {
|
|
this.setData({
|
|
visible: false
|
|
});
|
|
this.triggerEvent('close', this.data.checked); // 触发关闭事件
|
|
},
|
|
onFurl() {
|
|
this.startAnimation()
|
|
this.triggerEvent('furl', this.data.checked); //触发收下试卷
|
|
},
|
|
startAnimation() {
|
|
// 先重置元素状态
|
|
this.setData({
|
|
showBox: true,
|
|
animation: {}
|
|
});
|
|
// 短暂延迟确保重置完成
|
|
setTimeout(() => {
|
|
const animation = wx.createAnimation({
|
|
duration: 1000,
|
|
timingFunction: 'ease-in-out'
|
|
});
|
|
const targetLeft = this.data.screenWidth - 170;
|
|
const targetTop = this.data.screenHeight - 170;
|
|
animation
|
|
.translate(targetLeft - this.data.initPosition.left, targetTop - this.data.initPosition.top)
|
|
.scale(0.03)
|
|
.rotate(180)
|
|
.skew(10, 10)
|
|
.opacity(0)
|
|
.step();
|
|
this.setData({
|
|
animation: animation.export()
|
|
});
|
|
// 动画结束后隐藏元素
|
|
setTimeout(() => {
|
|
this.setData({
|
|
visible: false,
|
|
initPosition: {
|
|
left: 50,
|
|
top: 50
|
|
},
|
|
animation: {}
|
|
});
|
|
}, 1000);
|
|
}, 50);
|
|
}
|
|
}
|
|
}) |