Lilishop Logo

Lilishop(PickMall) - Web Frontend (Vue 3)

GitHub Stars Gitee Stars License Vue 3 Element Plus Pinia

๐Ÿ  Official Website ยท ๐Ÿ“– Product Documentation ยท ๐Ÿ’ป Online Demo ยท ๐Ÿ’ป GitHub

็ฎ€ไฝ“ไธญๆ–‡ | English

> โญ **If you like this project, please click `Star` in the top-right corner to support us! Your Star is our greatest motivation for continuous open-source iteration!** **LILISHOP** is an open-source e-commerce system built with Spring Boot, Vue 3, and uni-app. It supports B2B2C multi-vendor marketplaces, WeChat Mini Programs, H5, Android/iOS Apps, live-streaming e-commerce, affiliate distribution, and flash sales. ### โœจ Why Choose Lilishop - ๐ŸŸข **True Apache-2.0 License**: Free for commercial use and private secondary development without licensing concerns. - ๐Ÿš€ **Modern Vue 3 Stack**: Built on `Vue 3.5 + Pinia 4 + Vue Router 4 + Element Plus`, leaving legacy Vue 2 templates behind. - ๐Ÿงฉ **4-in-1 Production Suite**: Covers **PC Buyer Mall (`buyer`)**, **Seller Portal (`seller`)**, **Platform Admin Panel (`manager`)**, and **IM Customer Service Web (`im`)**, complete with drag-and-drop visual storefront decoration and rich analytics. --- ## 1. Overview This repository (`lilishop-ui`) is the **Web Frontend Suite** of Lilishop, containing four standalone **Vue 3** web applications: **PC Buyer Mall, Seller Panel, Platform Admin Panel, and IM Customer Service Web**. - **Official Website**: - **Documentation**: [Product Documentation](https://bdwx2tfwwt.feishu.cn/wiki/space/7675179368632617952?ccm_open_type=lark_wiki_spaceLink&open_tab_from=wiki_home) - **Gitee Repository**: - **GitHub Main Repository**: --- ## 2. Online Demo > **Note**: The verification code for the demo environment is `111111`. | Portal | URL | Demo Credentials | | :--- | :--- | :--- | | **Platform Admin Panel (`manager`)** | | `admin` / `123456` | | **Seller / Store Panel (`seller`)** | | `13011111111` / `111111` | | **PC Buyer Mall (`buyer`)** | | SMS code: `111111` | | **Mobile H5 (`uni-app`)** | | SMS code: `111111` | | WeChat Mini Program | Mobile H5 ([Visit Directly](https://m-b2b2c.pickmall.cn)) | | :---: | :---: | | WeChat Mini Program QR Code | Mobile H5 QR Code | | Scan with WeChat | Scan or visit | --- ## 3. Core Features & Tech Stack ### Core Features - **Four-Portal Synergy**: Includes Platform Admin, Seller Panel, PC Buyer Mall, and IM Web Workbench with clear role boundaries. - **Drag-and-Drop Visual Decoration**: Built-in visual floor editor (`vuedraggable`) for customizing both PC and mobile storefronts. - **Multi-Vendor B2B2C Operations**: Merchant onboarding, product auditing, split-order fulfillment, promotions, and financial settlement ledgers. - **Rich Business Analytics**: Powered by `@antv/g2` for sales overview, YoY/MoM product reports, member analytics, and distribution metrics. - **IM Customer Service**: Integrated with Tencent Cloud IM / WebSocket customer service for real-time communication. ### Web Tech Stack | Category | Technology | Description | | :--- | :--- | :--- | | Core Framework | `Vue 3.5` + `Vue Router 4` | Modern reactive frontend framework | | State Management | `Pinia 4` | Official Vue 3 state management library | | UI Library | `Element Plus 2.x` | Enterprise desktop UI component library | | HTTP Client | `Axios 1.x` | Unified request/response interceptors & auth handling | | Data Visualization | `@antv/g2` | Interactive charts and business analytics | | Visual Decoration | `vuedraggable 4` | Drag-and-drop page floor builder | | Messaging & IM | `@tencentcloud/chat` / `sockjs-client` | Real-time customer service messaging | | Video Player | `dplayer` + `hls.js` | Product video and live streaming playback | | Build & Styling | `Vue CLI 5` + `Webpack 5` + `Sass / Less` | Modular build pipeline and theme customization | --- ## 4. Directory Structure ```text lilishop-ui โ”œโ”€โ”€ buyer/ # [PC Buyer Mall] โ”‚ โ”œโ”€โ”€ public/ # Static assets & global config (config.js) โ”‚ โ””โ”€โ”€ src/ โ”‚ โ”œโ”€โ”€ api/ # Buyer API modules (goods, cart, order, member, promotion) โ”‚ โ”œโ”€โ”€ components/ # Shared components (floor renderer, navbar, goods card) โ”‚ โ”œโ”€โ”€ pages/ # PC Mall pages (Home, Product Detail, Checkout, User Center) โ”‚ โ”œโ”€โ”€ router/ # Route definitions & guards โ”‚ โ”œโ”€โ”€ stores/ # Pinia stores โ”‚ โ””โ”€โ”€ utils/ # Request interceptors & helpers โ”œโ”€โ”€ seller/ # [Seller / Store Management Portal] โ”‚ โ”œโ”€โ”€ public/ # Static assets & global config โ”‚ โ””โ”€โ”€ src/ โ”‚ โ”œโ”€โ”€ api/ # Seller API modules โ”‚ โ”œโ”€โ”€ components/ # Seller shared & decoration components โ”‚ โ”œโ”€โ”€ views/ # Seller views (goods, orders, after-sales, promotions, store settings) โ”‚ โ”œโ”€โ”€ router/ # Dynamic permission routes โ”‚ โ””โ”€โ”€ stores/ # Pinia stores โ”œโ”€โ”€ manager/ # [Platform Admin Portal] โ”‚ โ”œโ”€โ”€ public/ # Static assets & global config โ”‚ โ””โ”€โ”€ src/ โ”‚ โ”œโ”€โ”€ api/ # Admin API modules โ”‚ โ”œโ”€โ”€ components/ # Admin components, rich-text editor, visual floor builder โ”‚ โ”œโ”€โ”€ views/ # Admin views (member, goods, order, seller, marketing, finance, stats, system) โ”‚ โ”œโ”€โ”€ router/ # Menu & permission routes โ”‚ โ””โ”€โ”€ stores/ # Pinia stores โ”œโ”€โ”€ im/ # [IM Customer Service Web Client] โ”‚ โ””โ”€โ”€ src/ โ”‚ โ”œโ”€โ”€ api/ # Chat session & message APIs โ”‚ โ”œโ”€โ”€ components/ # Chat window, message list, product/order cards โ”‚ โ”œโ”€โ”€ im-server/ # WebSocket / IM connection manager โ”‚ โ””โ”€โ”€ views/ # Customer service workbench โ”œโ”€โ”€ build.sh # Unified build script โ””โ”€โ”€ docker-build.sh # Docker image build script ``` --- ## 5. Related Repositories | Repository | Description | Links | | :--- | :--- | :--- | | **`lilishop`** | Backend Services (Spring Boot 4 / Java 21) | [Gitee](https://gitee.com/beijing_hongye_huicheng/lilishop) ยท [GitHub](https://github.com/lilishop/lilishop) | | **`lilishop-ui`** | PC Mall / Seller / Admin / IM Web Frontend | [Gitee](https://gitee.com/beijing_hongye_huicheng/lilishop-ui) | | **`lilishop-uniapp`** | Mobile Buyer Client (H5 / Mini Program / App) | [Gitee](https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp) | | **`docker`** | Docker Compose, Images & SQL Init Scripts | [Gitee](https://gitee.com/beijing_hongye_huicheng/docker) ยท [MySQL Scripts](https://gitee.com/beijing_hongye_huicheng/docker/tree/master/init/mysql) | --- ## 6. License Lilishop is licensed under the [Apache-2.0](./LICENSE) License. Copyright ยฉ 2020-2026 **Beijing Hongye Huicheng Technology Co., Ltd.**