加入效果
This commit is contained in:
337
miniprogram/pages/index/index.js
Normal file
337
miniprogram/pages/index/index.js
Normal file
@@ -0,0 +1,337 @@
|
||||
// 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
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user