# luxury-auction-miniprogram

**Repository Path**: wanglei_IT/luxury-auction-miniprogram

## Basic Information

- **Project Name**: luxury-auction-miniprogram
- **Description**: luxury-auction-miniprogram
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-15
- **Last Updated**: 2026-03-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 名品竞拍 Luxury Auction Mini Program

> UniApp Vue3 + TypeScript WeChat Mini Program with i18n (中文/English)

---

## 📱 Project Overview

A feature-rich luxury goods live-auction WeChat Mini Program built with:
- **UniApp** (cross-platform framework targeting WeChat MP)
- **Vue 3** Composition API + `<script setup>`
- **TypeScript** throughout
- **Pinia** for state management
- **vue-i18n v9** for Chinese/English internationalization
- **SCSS** with CSS Variables design tokens

---

## 🗂 Project Structure

```
src/
├── pages/
│   ├── home/index.vue          # 首页 - Live rooms + peer purchase plaza
│   ├── live/index.vue          # 直播间 - Live auction with real-time bidding
│   ├── pre-auction/index.vue   # 竞拍预告 - Countdown + pre-bid
│   ├── market/index.vue        # 同行采购 - Peer purchase marketplace
│   ├── orders/index.vue        # 竞拍订单 - Order management
│   ├── profile/index.vue       # 个人中心 - Profile + funds + settings
│   ├── deposit/index.vue       # 支付保证金 - Deposit payment
│   └── auth/index.vue          # 实名认证 - Real-name verification
│
├── components/
│   └── common/
│       └── LangSwitch.vue      # Language toggle component
│
├── stores/
│   ├── user.ts                 # User info & balance (Pinia)
│   └── auction.ts              # Auction state (Pinia)
│
├── locales/
│   ├── zh-CN.ts                # Chinese translations
│   ├── en-US.ts                # English translations
│   └── index.ts                # vue-i18n setup + locale persistence
│
├── types/
│   ├── index.ts                # TypeScript interfaces
│   └── shims.d.ts              # .vue module shims
│
├── utils/
│   ├── mockData.ts             # Mock data for development
│   └── format.ts               # Price / countdown formatters
│
├── App.vue                     # Root component + global styles + CSS vars
├── main.ts                     # App entry: Vue + Pinia + i18n
├── pages.json                  # UniApp routing + tabBar config
└── manifest.json               # App metadata + WeChat MP config
```

---

## 🚀 Getting Started

### Prerequisites
- Node.js 18+
- HBuilderX IDE (recommended) **or** @dcloudio/cli

### Install
```bash
npm install
```

### Run on WeChat Mini Program
```bash
# Via HBuilderX: 运行 → 运行到小程序模拟器 → 微信开发者工具
npm run dev:mp-weixin
```
Then open the generated `dist/dev/mp-weixin` folder in WeChat DevTools.

### Build for production
```bash
npm run build:mp-weixin
```

### Run on H5 (browser preview)
```bash
npm run dev:h5
```

---

## 🌐 Internationalization (i18n)

Language can be toggled from:
1. **Profile page** → Language Settings row
2. **Profile page header** → 🌐 button
3. The `<LangSwitch>` component anywhere in the app

Locale preference is persisted to `uni.storage` under key `app_locale`.

### Adding a new language

1. Create `src/locales/xx-XX.ts` mirroring `zh-CN.ts` keys
2. Import and add to `createI18n` messages in `src/locales/index.ts`
3. Update `Locale` type in `src/types/index.ts`

---

## 🎨 Design System

All design tokens are CSS variables defined in `App.vue`:

| Variable | Value | Usage |
|---|---|---|
| `--primary` | `#E8760A` | Brand orange |
| `--primary-light` | `#F5A23D` | Lighter orange |
| `--primary-bg` | `#FFF3E0` | Orange tint background |
| `--red` | `#E53935` | Danger / pay now |
| `--green` | `#10B981` | Success / verified |
| `--text-1..4` | `#1A1A1A` → `#BBBBBB` | Text hierarchy |
| `--r-sm..xl` | `8..32rpx` | Border radius scale |

---

## 📋 Pages & Features

| Page | Features |
|---|---|
| **Home** | Live room grid, peer purchase plaza, category filter, sort |
| **Live Room** | Real-time bid panel, +100/200/300 quick bid, custom numpad, confirm dialog, win celebration, product sidebar |
| **Pre-Auction** | Countdown clock, product list with pre-bid |
| **Market** | Searchable live room grid by category |
| **Orders** | Tabbed order list, multi-select, countdown timer, checkout |
| **Profile** | Fund balance, order status, ops center, language toggle |
| **Deposit** | Privilege display, amount selector, recharge flow |
| **Auth** | ID photo upload with sample guide, name/ID form |

---

## ⚙️ WeChat Mini Program Config

Update `src/manifest.json`:
```json
{
  "mp-weixin": {
    "appid": "wx_your_actual_appid"
  }
}
```

---

## 📦 Key Dependencies

| Package | Version | Purpose |
|---|---|---|
| `@dcloudio/uni-app` | 3.x | UniApp framework |
| `vue` | ^3.4 | Vue 3 |
| `pinia` | ^2.1 | State management |
| `vue-i18n` | ^9.10 | Internationalization |
| `sass` | ^1.69 | SCSS compilation |
| `typescript` | ^5.4 | Type checking |