337 lines
8.7 KiB
JavaScript
337 lines
8.7 KiB
JavaScript
// index.js
|
||
Page({
|
||
data: {
|
||
// 页面的初始数据
|
||
hasPaid: false, // 默认未付款状态
|
||
animationData: {}, // 动画数据
|
||
showCapsule: false, // 是否显示扭蛋玩具
|
||
capsuleAnimation: {}, // 扭蛋动画数据
|
||
buttonAnimation: {} // 按钮动画数据
|
||
},
|
||
|
||
onLoad: function() {
|
||
// 页面加载时执行的初始化逻辑
|
||
// 检查是否已经付款（从本地存储中读取状态）
|
||
try {
|
||
const hasPaid = wx.getStorageSync('hasPaid');
|
||
if (hasPaid) {
|
||
this.setData({
|
||
hasPaid: true
|
||
});
|
||
}
|
||
} catch (e) {
|
||
console.error('获取支付状态失败', e);
|
||
}
|
||
|
||
// 创建按钮动画
|
||
this.initButtonAnimation();
|
||
},
|
||
|
||
onShow: function() {
|
||
// 页面显示时，初始化动画
|
||
this.initAnimation();
|
||
},
|
||
|
||
// 初始化按钮动画
|
||
initButtonAnimation: function() {
|
||
const animation = wx.createAnimation({
|
||
duration: 1000,
|
||
timingFunction: 'ease',
|
||
});
|
||
|
||
// 创建一个循环动画
|
||
setInterval(() => {
|
||
animation.scale(1.05).step();
|
||
animation.scale(1).step();
|
||
this.setData({
|
||
buttonAnimation: animation.export()
|
||
});
|
||
}, 2000);
|
||
},
|
||
|
||
// 初始化扭蛋机动画
|
||
initAnimation: function() {
|
||
if (this.data.hasPaid) {
|
||
const animation = wx.createAnimation({
|
||
duration: 1000,
|
||
timingFunction: 'ease',
|
||
});
|
||
|
||
animation.rotate(5).step();
|
||
animation.rotate(-5).step();
|
||
animation.rotate(0).step();
|
||
|
||
this.setData({
|
||
animationData: animation.export()
|
||
});
|
||
|
||
// 循环动画
|
||
setTimeout(() => {
|
||
this.initAnimation();
|
||
}, 3000);
|
||
}
|
||
},
|
||
|
||
// 请求支付
|
||
requestPayment: function() {
|
||
const that = this;
|
||
|
||
// 在实际应用中，这里应该调用后端接口获取支付参数
|
||
// 这里仅做模拟演示，直接显示支付成功
|
||
wx.showLoading({
|
||
title: '请求支付中...',
|
||
});
|
||
|
||
// 按钮动画效果
|
||
const animation = wx.createAnimation({
|
||
duration: 300,
|
||
timingFunction: 'ease',
|
||
});
|
||
animation.scale(0.9).step();
|
||
animation.scale(1).step();
|
||
this.setData({
|
||
buttonAnimation: animation.export()
|
||
});
|
||
|
||
// 模拟网络请求延迟
|
||
setTimeout(function() {
|
||
wx.hideLoading();
|
||
|
||
// 模拟支付过程
|
||
wx.showModal({
|
||
title: '【琼辉】模拟支付',
|
||
content: '由于这是演示，点击确定将直接模拟支付成功。实际应用中需要调用微信支付API。',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
// 模拟支付成功
|
||
wx.showToast({
|
||
title: '支付成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
});
|
||
|
||
// 更新支付状态
|
||
that.setData({
|
||
hasPaid: true
|
||
});
|
||
|
||
// 保存支付状态到本地存储
|
||
try {
|
||
wx.setStorageSync('hasPaid', true);
|
||
} catch (e) {
|
||
console.error('保存支付状态失败', e);
|
||
}
|
||
|
||
// 初始化动画
|
||
that.initAnimation();
|
||
}
|
||
}
|
||
});
|
||
}, 1500);
|
||
|
||
// 实际微信支付代码（仅供参考，需要后端配合）
|
||
/*
|
||
wx.request({
|
||
url: '你的后端支付接口',
|
||
method: 'POST',
|
||
data: {
|
||
amount: 1 // 1元
|
||
},
|
||
success: function(res) {
|
||
// 获取到支付参数后调用支付接口
|
||
wx.requestPayment({
|
||
timeStamp: res.data.timeStamp,
|
||
nonceStr: res.data.nonceStr,
|
||
package: res.data.package,
|
||
signType: res.data.signType,
|
||
paySign: res.data.paySign,
|
||
success: function(payRes) {
|
||
// 支付成功
|
||
wx.showToast({
|
||
title: '支付成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
});
|
||
|
||
// 更新支付状态
|
||
that.setData({
|
||
hasPaid: true
|
||
});
|
||
|
||
// 保存支付状态到本地存储
|
||
try {
|
||
wx.setStorageSync('hasPaid', true);
|
||
} catch (e) {
|
||
console.error('保存支付状态失败', e);
|
||
}
|
||
},
|
||
fail: function(payError) {
|
||
// 支付失败
|
||
wx.showToast({
|
||
title: '支付失败',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
console.error('支付失败', payError);
|
||
}
|
||
});
|
||
},
|
||
fail: function(error) {
|
||
wx.hideLoading();
|
||
wx.showToast({
|
||
title: '获取支付参数失败',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
console.error('获取支付参数失败', error);
|
||
}
|
||
});
|
||
*/
|
||
},
|
||
|
||
// 跳转到百度地图
|
||
navigateToWebsite: function() {
|
||
const that = this;
|
||
|
||
// 显示扭蛋动画
|
||
this.playCapsuleAnimation();
|
||
|
||
// 延迟后跳转
|
||
setTimeout(function() {
|
||
// 跳转到webview页面，该页面包含web-view组件用于显示百度地图
|
||
wx.navigateTo({
|
||
url: '/pages/webview/webview',
|
||
success: function() {
|
||
console.log('跳转到webview页面成功');
|
||
},
|
||
fail: function(error) {
|
||
console.error('跳转到webview页面失败', error);
|
||
// 如果跳转失败，提示用户复制链接
|
||
wx.showModal({
|
||
title: '提示',
|
||
content: '跳转失败，是否复制百度地图链接到剪贴板？',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
// 复制链接到剪贴板
|
||
wx.setClipboardData({
|
||
data: 'https://map.baidu.com',
|
||
success: function() {
|
||
wx.showToast({
|
||
title: '链接已复制，请在浏览器中粘贴访问',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}, 2500);
|
||
},
|
||
|
||
// 播放扭蛋动画
|
||
playCapsuleAnimation: function() {
|
||
const that = this;
|
||
|
||
// 创建扭蛋机摇动动画
|
||
const machineAnimation = wx.createAnimation({
|
||
duration: 500,
|
||
timingFunction: 'ease',
|
||
});
|
||
|
||
machineAnimation.rotate(10).step();
|
||
machineAnimation.rotate(-10).step();
|
||
machineAnimation.rotate(8).step();
|
||
machineAnimation.rotate(-8).step();
|
||
machineAnimation.rotate(5).step();
|
||
machineAnimation.rotate(-5).step();
|
||
machineAnimation.rotate(0).step();
|
||
|
||
this.setData({
|
||
animationData: machineAnimation.export()
|
||
});
|
||
|
||
// 显示扭蛋玩具
|
||
setTimeout(function() {
|
||
that.setData({
|
||
showCapsule: true
|
||
});
|
||
|
||
// 创建扭蛋玩具动画
|
||
const capsuleAnimation = wx.createAnimation({
|
||
duration: 1000,
|
||
timingFunction: 'ease',
|
||
});
|
||
|
||
capsuleAnimation.opacity(0).translateY(-100).scale(0).step();
|
||
capsuleAnimation.opacity(1).translateY(0).scale(1).step();
|
||
|
||
that.setData({
|
||
capsuleAnimation: capsuleAnimation.export()
|
||
});
|
||
|
||
// 2秒后隐藏扭蛋玩具
|
||
setTimeout(function() {
|
||
const hideAnimation = wx.createAnimation({
|
||
duration: 500,
|
||
timingFunction: 'ease',
|
||
});
|
||
|
||
hideAnimation.opacity(0).scale(0.5).step();
|
||
|
||
that.setData({
|
||
capsuleAnimation: hideAnimation.export()
|
||
});
|
||
|
||
setTimeout(function() {
|
||
that.setData({
|
||
showCapsule: false
|
||
});
|
||
}, 500);
|
||
}, 2000);
|
||
}, 1000);
|
||
},
|
||
|
||
// 清除付款记录
|
||
clearPayment: function() {
|
||
const that = this;
|
||
|
||
// 按钮动画效果
|
||
const animation = wx.createAnimation({
|
||
duration: 200,
|
||
timingFunction: 'ease',
|
||
});
|
||
animation.scale(0.9).step();
|
||
animation.scale(1).step();
|
||
|
||
wx.showModal({
|
||
title: '提示',
|
||
content: '确定要清除付款记录吗？清除后将需要重新支付',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
try {
|
||
wx.removeStorageSync('hasPaid');
|
||
that.setData({
|
||
hasPaid: false,
|
||
showCapsule: false
|
||
});
|
||
wx.showToast({
|
||
title: '已清除付款记录',
|
||
icon: 'success',
|
||
duration: 2000
|
||
});
|
||
} catch (e) {
|
||
console.error('清除付款记录失败', e);
|
||
wx.showToast({
|
||
title: '清除失败',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}) |