1. Overview
This project is a complete set of **e-commerce task platform system**, which adopts a front-end and back-end separation architecture. The front-end is based on React + Vite + Ant Design Mobile to build a mobile H5 application, and the back-end is based on the ThinkPHP 5.1 framework to develop a RESTful API interface. The system supports multi-language internationalization and includes complete core functional modules such as user management, order management, payment recharge, VIP level, and team promotion.
2. Technical architecture
Front-end technology stack
– **Framework**: React 18.2.0
– **Build Tools**: Vite 7.3.1
– **UI Component Library**: Ant Design Mobile 5.35.0
– **Routing**: React Router DOM 6.22.3
– **HTTP request**: Axios 1.6.8
– **Internationalization**: i18next + react-i18next (supports 20+ languages)
– **Others**: QRCode generation, gesture operation, form verification, etc.
#### Backend technology stack
– **Framework**: ThinkPHP 5.1 (LTS version)
– **PHP version**: >= 5.6, compatible with PHP 8.0
– **Database**: MySQL
– **Cache**: Redis (Predis)
– **Payment Integration**: Supports cryptocurrency payments such as TRC20/USDT
– **Third Party Services**: Alibaba Cloud OSS, Qiniu Cloud Storage, GeoIP geographical location
3. Core functional modules
1.User system
– **User registration and login**: Support mobile phone number/user name login, password encrypted storage
– **User Center**: Personal information management, avatar upload, address management
– **VIP Level System**: Multi-level VIP membership system, different levels enjoy different rights and interests
– **Account Security**: Transaction password, login status management, password error lock
2. Order management system
– **Order grabbing function**: Users can snap up product orders, supporting multiple product categories
– **Order List**: Order status query (pending, in progress, completed)
– **Order Processing**: Submit order, cancel order, view order details
– **Order Statistics**: Today’s commission statistics, order completion statistics
3.Payment recharge system
– **Recharge function**: Supports multiple payment methods (bank card, USDT, etc.)
– **Withdrawal function**: Supports bank card withdrawal and USDT withdrawal
– **Wallet Management**: Supports TRC20, BTC, ETH and other wallet networks
– **Fund Records**: Recharge records, withdrawal records, and fund flow inquiries
– **Fees Management**: Configurable withdrawal fee ratio
4. Team promotion system
– **Invitation function**: Generate invitation code/invitation link
– **Team Management**: View subordinate teams and team income statistics
– **Commission Sharing**: Multi-level commission distribution mechanism
– **Promotion Statistics**: Statistics on team size, promotion revenue, etc.
5. Multi-language internationalization
The system has built-in support for 20+ languages, including:
– Chinese simplified/traditional
– English, Spanish, French, German
– Japanese, Korean, Indonesian
– Russian, Turkish, Arabic
– and many more European languages
6.Backend management system
– **User Management**: User list, user status management, user level setting
– **Order Management**: Order review, order statistics, order export
– **Product Management**: Product classification, product list, inventory management
– **Financial Management**: Deposit review, withdrawal review, capital flow
– **System Configuration**: System parameter settings, payment configuration, level rule configuration
– **Permission Management**: Node-based permission control system
4. Database design
The main data tables of the system include:
– `xy_users`: user information table
– `xy_convey`: order form
– `xy_goods_list`: product list table
– `xy_level`: VIP level table
– `xy_recharge`: recharge record table
– `xy_deposit`: Withdrawal record table
– `xy_balance_log`: Fund flow table
– `xy_bankinfo`: bank card information table
– `user_wallet`: user wallet table
– `xy_banner`: carousel chart
– `xy_index_msg`: Home page message table
5. API interface design
The system adopts RESTful API design specifications, and the main interface modules are:
User related interface
– `/api/user/login` – user login
– `/api/user/register` – User registration
– `/api/user/info` – Get user information
Order related interface
– `/api/order/order_list` – Get the order list
– `/api/order/order_info` – Get order details
– `/api/rotorder/submit_order` – Submit an order
– `/api/order/do_order` – Process orders
Payment related interface
– `/api/pay/recharge` – Recharge interface
– `/api/withdraw/withdraw` – Withdrawal interface
– `/api/wallet/saveWallet` – save wallet information
Home page related interfaces
– `/api/index/home` – Get home page data
– `/api/index/get_msg` – Get home page graphic information
6. Front-end page structure
“`
src/
├── views/ # Page components
│ ├── Index.jsx # Home page
│ ├── Login.jsx # Login page
│ ├── Register.jsx # Registration page
│ ├── Order.jsx # Order page
│ ├── Trade.jsx # Trading page
│ ├── Team.jsx # Team page
│ ├── User.jsx # User Center
│ ├── Withdraw.jsx # Withdrawal page
│ ├── Pay/ # Payment related pages
│ └── Record/ # Record related pages
├── request/ # API request encapsulation
├── lang/ # Multi-language configuration
└── utils/ # Utility function
“`
7. Security features
1.**JWT Token Authentication**: Use Firebase JWT for interface authentication
2. **Password encryption**: SHA1 + Salt double encryption
3. **Transaction Password**: An independent transaction password protects the security of funds.
4. **Login Status Management**: Prevent repeated logins
5. **Cross-domain processing**: CORS cross-domain request support
6. **Data Verification**: Front-end and back-end double data verification
8. Deployment instructions
Front-end deployment
# Install dependencies
npm install
# Development environment operation
npm rundev
#Build production environment
npm run build:release
Backend deployment
1. PHP environment requirements: PHP >= 5.6
2. Configure database connection information
3. Configure Redis connection
4. Set file upload directory permissions
5.Configure pseudo-static rules (Nginx/Apache)
9. Applicable scenarios
– E-commerce task platform
– Mobile H5 mall
– Social e-commerce system
– Mission bounty platform
– Member-based e-commerce platform
– Multilingual cross-border e-commerce
10. Source code characteristics
1. **Complete functions**: Contains complete front-end and back-end code, ready to use out of the box
2. **Mobile First**: Designed specifically for mobile H5, responsive layout
3. **Multi-language support**: Built-in 20+ languages, easy to expand
4. **Modular design**: clear code structure, easy to maintain and secondary development
5. **Safe and Reliable**: Complete security mechanism to protect user data and funds.
6. **Performance Optimization**: Optimization of front-end code compression, lazy loading of routes, interface caching, etc.
11. Technical support
This source code contains a complete database structure, detailed code comments, and complete API documentation. It is suitable for secondary development and customization by developers with certain development experience.
