人工收款支付插件平台

项目概述

这是一个基于React的前端支付管理系统，支持微信、QQ、支付宝等多种支付方式，提供完整的支付流程管理和后台管理功能。

支付逻辑通过平台发起支付客户看到页面有QQ微信支付宝的账号添加站长复制订单号完成转账后站长通过订单号去完成审核完成回调支付成功。

还有部分功能没有完善有能力请自行修改 没有功能的只能慢慢等待下个版本目前只简单测试

部署方式

宝塔面板部署指南

1. 环境准备

   • 安装宝塔面板（建议7.9+版本）

   • 在宝塔面板中安装以下软件：

     • Nginx 1.20+
     • MySQL 5.7+（如需要后端数据库）
     • PM2管理器 5.0+

2. 上传项目文件

   # 将项目上传到服务器，例如：
   /www/wwwroot/payment_system

3. Node环境配置

   • 在宝塔面板中安装Node.js（建议16.x LTS版本）

   • 在项目目录下执行：

     npm install
     npm run build

4. PM2配置

   • 在PM2管理器中添加新项目：

     • 启动文件: src/main.tsx
     • 项目名称: payment_system
     • 运行目录: 项目根目录

5. Nginx配置

   • 添加新站点，配置如下：

     server {
       listen 80;
       server_name yourdomain.com;
       root /www/wwwroot/payment_system/dist;
       index index.html;
       
       location / {
           try_files $uri $uri/ /index.html;
       }
     }

   • 申请SSL证书并启用HTTPS

6. 启动服务

   • 在PM2中启动项目
   • 在Nginx中重启服务

常规部署方式

1. 安装依赖

   npm install

2. 构建项目

   npm run build

3. 运行项目

   npm run start

项目结构

• src/ - 源代码目录

  • components/ - 公共组件
  • pages/ - 页面组件
  • lib/ - 工具函数和服务
• public/ - 静态资源
• dist/ - 构建输出目录

环境要求

• Node.js 16.x+
• npm 8.x+ 或 pnpm 7.x+

注意事项

1. 生产环境请确保配置正确的环境变量
2. 建议启用HTTPS以确保支付安全
3. 定期备份数据库和配置文件

常见问题

Q: 宝塔面板部署后访问空白？
A: 检查Nginx配置是否正确指向dist目录，并确认PM2已正确启动项目

Q: 支付回调失败？
A: 检查服务器防火墙设置，确保回调地址可被外网访问

Q: 如何更新代码？
A: 在宝塔面板中使用"一键部署"功能或通过git pull更新代码后重新构建

用户端图片展示

后台图片展示