Mall E-Commerce System
Core Positioning
Mall is the platform’s most complex business module (70+ tables), providing the full e-commerce chain from product management and order transactions to marketing campaigns and distribution commissions. One system comes with both an admin panel (Vue3+Element Plus) and a mobile app (uni-app), ready to use out of the box.
In one sentence: If you need to build a B2C e-commerce store, 90% of the functionality is already implemented here.
Problems Solved
| Pain Point | How Mall Solves It |
|---|---|
| Building a store from scratch takes too long | 70+ tables + complete frontend/backend, go live in weeks |
| Multiple marketing tactics are expensive to develop | Built-in coupons/flash sales/group buying/bargaining/distribution |
| Need both admin panel and user-facing frontend | Admin panel + uni-app mobile app provided together |
| Payment and membership need extra integration | Built-in integration with Payment Center and Member Center |
User Roles
graph LR
subgraph BackendRoles
MALL_ADMIN["Mall Admin
Manage products/orders/marketing"] MALL_OP["Operations Staff
Configure campaigns/review reviews"] end subgraph FrontendRoles BUYER["Buyer
Browse products/Place orders/Pay
Participate in marketing campaigns"] DISTRIBUTOR["Distributor
Promote products
Earn commissions"] end
Manage products/orders/marketing"] MALL_OP["Operations Staff
Configure campaigns/review reviews"] end subgraph FrontendRoles BUYER["Buyer
Browse products/Place orders/Pay
Participate in marketing campaigns"] DISTRIBUTOR["Distributor
Promote products
Earn commissions"] end
System Architecture
graph TB
subgraph AdminPanel
ADMIN_PANEL["Vue3 + Element Plus Admin Panel
Products/Orders/Marketing/Data"] end subgraph MobileApp UNI_APP["uni-app Mobile App
H5 + App + Mini Program
Storefront customization (3 templates)"] end subgraph ProductCenter CATEGORY["Product Categories"] ATTR["Product Attributes"] SPU["SPU Products"] SKU["SKU Variants"] REVIEW["Product Reviews"] end subgraph OrderCenter CART["Shopping Cart"] ORDER["Transaction Orders"] AFTER_SALE["After-Sales Management"] EXPRESS["Express Delivery"] PICKUP["Self Pickup Verification"] end subgraph MarketingCenter COUPON["Coupons"] SECKILL["Flash Sales"] BARGAIN["Bargaining"] GROUPON["Group Buying"] DISCOUNT["Limited-Time Discounts"] CONTENT["Content Marketing"] COMMISSION["Distribution Commissions"] end subgraph Dependencies PAY2["Payment Center"] MEMBER6["Member Center"] MP3["Official Accounts"] end AdminPanel --> ProductCenter AdminPanel --> OrderCenter AdminPanel --> MarketingCenter MobileApp --> ProductCenter MobileApp --> OrderCenter MobileApp --> MarketingCenter OrderCenter --> PAY2 OrderCenter --> MEMBER6 MarketingCenter --> MEMBER6
Products/Orders/Marketing/Data"] end subgraph MobileApp UNI_APP["uni-app Mobile App
H5 + App + Mini Program
Storefront customization (3 templates)"] end subgraph ProductCenter CATEGORY["Product Categories"] ATTR["Product Attributes"] SPU["SPU Products"] SKU["SKU Variants"] REVIEW["Product Reviews"] end subgraph OrderCenter CART["Shopping Cart"] ORDER["Transaction Orders"] AFTER_SALE["After-Sales Management"] EXPRESS["Express Delivery"] PICKUP["Self Pickup Verification"] end subgraph MarketingCenter COUPON["Coupons"] SECKILL["Flash Sales"] BARGAIN["Bargaining"] GROUPON["Group Buying"] DISCOUNT["Limited-Time Discounts"] CONTENT["Content Marketing"] COMMISSION["Distribution Commissions"] end subgraph Dependencies PAY2["Payment Center"] MEMBER6["Member Center"] MP3["Official Accounts"] end AdminPanel --> ProductCenter AdminPanel --> OrderCenter AdminPanel --> MarketingCenter MobileApp --> ProductCenter MobileApp --> OrderCenter MobileApp --> MarketingCenter OrderCenter --> PAY2 OrderCenter --> MEMBER6 MarketingCenter --> MEMBER6
Core Business Flow
User Order Process
sequenceDiagram
participant U2 as User
participant APP as Mobile/PC
participant MALL4 as Mall
participant PAY3 as Payment Center
participant WMS2 as Warehouse/WMS
U2->>APP: Browse products, add to cart
U2->>APP: Confirm order, select address
APP->>MALL4: Create order (Pending Payment)
MALL4->>PAY3: Initiate payment
PAY3-->>APP: Payment page
U2->>PAY3: Complete payment
PAY3->>MALL4: Callback: Payment successful
MALL4->>MALL4: Order status → Pending Shipment
MALL4->>WMS2: Notify shipment
WMS2->>MALL4: Enter tracking number
MALL4->>APP: Push shipment notification
U2->>APP: Confirm receipt
MALL4->>MALL4: Order complete, award points
Marketing Campaign Matrix
| Campaign Type | Mechanics | Suitable Scenarios |
|---|---|---|
| Coupons | Threshold discounts/percentage discounts/vouchers, can target specific products/categories | Daily promotions |
| Flash Sales | Limited time & quantity, ultra-low price rush | Traffic generation, inventory clearance |
| Group Buying | Multi-person group purchase for discount price | Social viral growth |
| Bargaining | Share with friends to bargain down the price | New user acquisition |
| Limited-Time Discounts | Discount during specified time period | Holiday promotions |
| Content Marketing | Articles/videos product seeding | Content commerce |
| Distribution Commissions | Promotion commissions, multi-level distribution | Social commerce |
Storefront Customization
The mobile app supports 3 storefront customization templates, allowing drag-and-drop component layout of the homepage:
- Carousel / Navigation icons / Product recommendations
- Coupon popups / Countdown timers
- Search bar / Announcement bar
Dependencies
Mall E-Commerce
├── Payment Center (Pay) —— Order payment
├── Member Center (Member) —— User identity/points
└── Official Accounts (MP) —— WeChat H5 store