CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview

This is a uni-app (Vue 3) WeChat mini-program project for the China Taekwondo Association (中国跆拳道协会) membership management system.

• Platform: mp-weixin (WeChat Mini-Program)
• Vue Version: Vue 3 with <script setup> syntax
• State Management: Pinia
• UI Framework: uni-ui (components in uni_modules/)
• Key Dependencies: dayjs, underscore, lodash, crypto-js

Development Commands

Running the Project

• Use HBuilderX to open this project
• Or use CLI: npm run dev:mp-weixin
• Build: npm run build:mp-weixin

Key Configurations

• config.js - API base URLs (dev/prod switching)
• pages.json - Page routing and global settings
• manifest.json - App configuration (appid, platform settings)

Architecture

Directory Structure

├── common/           # Shared utilities
│   ├── api.js        # API functions (imported as @/common/api.js)
│   ├── request.js    # HTTP request wrapper
│   ├── login.js      # Login logic
│   ├── utils.js      # Utility functions
│   └── pay.js        # Payment logic
├── config.js         # Environment config (API endpoints)
├── pages/            # Main package pages (index, exam, invoice, rank, webview)
├── login/            # Login sub-package
├── personal/         # Personal member sub-package
├── personalVip/      # VIP member sub-package
├── group/            # Group/Organization sub-package
├── level/            # Level examination sub-package
├── myCenter/         # User center sub-package
├── uni_modules/      # uni-ui components
└── static/           # Static assets

API Pattern

All API functions are defined in common/api.js using a consistent pattern:

export function apiFunctionName(data) {
  return request({
    url: '/path/to/endpoint',
    method: 'post',  // or 'get', 'put', 'delete'
    params: data
  })
}

Page Sub-packages

Pages are organized into sub-packages defined in pages.json to optimize loading. Each sub-package has its own root directory (e.g., level/, myCenter/).

Component Auto-import

uni-ui components are auto-imported via easycom in pages.json:

"easycom": {
  "autoscan": true,
  "custom": {
    "^uni-(.*)": "uni_modules/uni-$1/components/uni-$1/uni-$1.vue"
  }
}

Global Data

app.globalData contains shared state (from App.vue):

• memberInfo - Current member info
• isLogin - Login status
• deptType - Department type

Access via: const app = getApp(); app.globalData.memberInfo

Form Handling Pattern

For forms with uni-forms, use Object.assign(form.value, data) instead of form.value = data to preserve reactive bindings.

DateTime Picker

uni-datetime-picker requires ISO format strings or timestamps for v-model values.

File Upload Pattern

Use api.uploadFile(e) or api.uploadImg(e) from common/api.js which return { code, msg } - the file URL is in res.msg.

Common Issues

uni-data-select not working

If uni-data-select dropdowns don't appear, ensure:

1. easycom is properly configured in pages.json
2. The component is not blocked by CSS overflow: hidden on parent containers

Responsive Data Binding

When updating form data from API responses, use Object.assign() to maintain Vue 3 reactivity:

// Instead of: form.value = res.data
Object.assign(form.value, res.data)