blackhuwn/WX_PAY_codePro9_8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

加入效果

Browse Source
This commit is contained in:
blackhuwn
2025-09-08 15:57:01 +08:00
commit 1f27eb3c94
163 changed files with 1915 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

337
miniprogram/pages/index/index.js Normal file
View 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
});
}
}
}
});
}
})

4
miniprogram/pages/index/index.json Normal file
View File

@@ -0,0 +1,4 @@
{
"usingComponents": {},
"navigationBarTitleText": "跳转示例"
}

24
miniprogram/pages/index/index.wxml Normal file
View File

@@ -0,0 +1,24 @@
<!--index.wxml-->
<view class="container">
<!-- 背景图片 -->
<image class="bg-image" src="/images/background.png" mode="aspectFill"></image>
<view class="content-wrapper">
<view class="title">欢迎使用扭蛋游戏</view>
<!-- 未付款状态显示付款按钮 -->
<block wx:if="{{!hasPaid}}">
<view class="subtitle">请先支付1元开启游戏</view>
<button class="btn pay-btn" bindtap="requestPayment">支付1元</button>
</block>
<!-- 已付款状态显示扭蛋游戏按钮 -->
<block wx:else>
<view class="subtitle">付款成功！可以开始游戏了</view>
<button class="btn game-btn" bindtap="navigateToWebsite">开始扭蛋游戏</button>
</block>
</view>
<!-- 清除付款记录按钮 -->
<button wx:if="{{hasPaid}}" class="clear-btn" bindtap="clearPayment">清除记录</button>
</view>

115
miniprogram/pages/index/index.wxss Normal file
View File

@@ -0,0 +1,115 @@
/**index.wxss**/
page {
height: 100%;
width: 100%;
overflow: hidden;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 30rpx;
position: relative;
z-index: 1;
}
.bg-image {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.content-wrapper {
background-color: rgba(255, 255, 255, 0.9);
border-radius: 30rpx;
padding: 50rpx 40rpx;
width: 85%;
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
align-items: center;
backdrop-filter: blur(10rpx);
border: 2rpx solid rgba(255, 255, 255, 0.7);
}
.title {
font-size: 44rpx;
margin-bottom: 20rpx;
text-align: center;
font-weight: bold;
color: #FF6D00;
text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
}
.subtitle {
font-size: 32rpx;
margin-bottom: 40rpx;
text-align: center;
color: #555;
}
.btn {
width: 90%;
color: white;
font-size: 34rpx;
border-radius: 50rpx;
padding: 24rpx 0;
margin-top: 30rpx;
box-shadow: 0 6rpx 10rpx rgba(0,0,0,0.1);
font-weight: bold;
letter-spacing: 2rpx;
transition: all 0.3s;
}
.btn:active {
transform: translateY(3rpx);
box-shadow: 0 3rpx 5rpx rgba(0,0,0,0.1);
}
.pay-btn {
background: linear-gradient(135deg, #1989fa, #0066cc);
}
.game-btn {
background: linear-gradient(135deg, #ff9800, #ff5722);
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.clear-btn {
position: fixed;
left: 20rpx;
bottom: 20rpx;
padding: 12rpx 24rpx;
background-color: rgba(255, 255, 255, 0.8);
border: 1rpx solid #ccc;
border-radius: 20rpx;
font-size: 24rpx;
color: #666;
z-index: 100;
opacity: 0.7;
transition: all 0.3s;
}
.clear-btn:active {
opacity: 1;
background-color: rgba(255, 255, 255, 0.9);
transform: scale(0.95);
}