# Requirements Document

## Introduction

本项目旨在将 supermart-mini 微信小程序（基于 UniApp/Vue）完整迁移到当前的 React Native/Expo iOS 应用。迁移需保持原有的页面样式比例、业务逻辑和接口调用，同时适配 React Native 的组件和样式系统。已完成的首页可作为参考模板。

## Glossary

- **supermart-mini**: 原微信小程序项目，基于 UniApp + Vue 开发
- **React Native App**: 目标 iOS 应用，基于 Expo + React Native + TypeScript
- **ossurl**: 小程序中的 CDN 图片资源配置文件，对应 React Native 中的 `constants/images.ts`
- **ImageBackground**: React Native 中用于设置背景图的组件，对应小程序中的 `:style="{ backgroundImage: 'url(...)' }"`
- **Service**: API 服务层，负责与后端接口通信

## Requirements

### Requirement 1: 登录页面完善

**User Story:** As a user, I want to use the login page with the same visual style as the mini-program, so that I can have a consistent user experience.

#### Acceptance Criteria

1. WHEN the login page loads THEN the System SHALL display the background image using ImageBackground component with the loginBg image from Images constants
2. WHEN the user views the login button THEN the System SHALL display the button with loginBug background image matching the mini-program style
3. WHEN the user taps the login button THEN the System SHALL call the login API with mobile and verifycode parameters
4. WHEN login succeeds THEN the System SHALL navigate back to the previous screen or to user-info page if needInfo is true

### Requirement 2: 个人中心页面完善

**User Story:** As a user, I want to access my personal center with all features from the mini-program, so that I can manage my account and view my data.

#### Acceptance Criteria

1. WHEN the mine page loads THEN the System SHALL display the page with kaixinMineBg background image and kaixinMineHeadBg header background
2. WHEN the user views their profile THEN the System SHALL display avatar, nickname, user ID with copy functionality, and phone number
3. WHEN the user views the data statistics section THEN the System SHALL display couponCount, inventoryCount, magicBalance, and treasureBoxCount with kaixinUserDataBg background
4. WHEN the user taps a function entry THEN the System SHALL navigate to the corresponding page (invite, integral, message, orders)
5. WHEN the user taps order entries THEN the System SHALL navigate to order list with the appropriate tab filter

### Requirement 3: 地址管理页面完善

**User Story:** As a user, I want to manage my shipping addresses with the same interface as the mini-program, so that I can easily add, edit, and delete addresses.

#### Acceptance Criteria

1. WHEN the address list page loads THEN the System SHALL display the page with kaixinMineBg background image
2. WHEN the user views the address list THEN the System SHALL display all addresses with contact name, phone, and full address details
3. WHEN the user taps the add button THEN the System SHALL display the button with loginBug background image and navigate to address edit page
4. WHEN the user edits an address THEN the System SHALL display the form with itemBg background for input fields
5. WHEN the user saves an address THEN the System SHALL call the address API and return to the address list

### Requirement 4: 订单列表页面完善

**User Story:** As a user, I want to view my orders with the same layout as the mini-program, so that I can track my purchases.

#### Acceptance Criteria

1. WHEN the orders page loads THEN the System SHALL display tabs for different order statuses (全部, 待付款, 待发货, 待收货, 已完成)
2. WHEN the user views an order item THEN the System SHALL display order number, status, goods image, name, price, quantity, and create time
3. WHEN the user taps an order THEN the System SHALL navigate to the order detail page
4. WHEN the user taps action buttons THEN the System SHALL perform the corresponding action (pay, confirm receipt)

### Requirement 5: 订单详情页面完善

**User Story:** As a user, I want to view order details with complete information, so that I can track my order status and shipping.

#### Acceptance Criteria

1. WHEN the order detail page loads THEN the System SHALL display order status, goods information, and address details
2. WHEN the order has shipping info THEN the System SHALL display logistics tracking information
3. WHEN the user taps action buttons THEN the System SHALL perform the corresponding action based on order status

### Requirement 6: 福利页面完善

**User Story:** As a user, I want to access welfare features with the same visual style, so that I can participate in welfare activities.

#### Acceptance Criteria

1. WHEN the welfare page loads THEN the System SHALL display the page with kaixinWelfareBg background image
2. WHEN the user views room entries THEN the System SHALL display three room options (房间, 扭蛋机, 祈愿) with kaixinRoomBg background
3. WHEN the user taps a room entry THEN the System SHALL navigate to the corresponding welfare activity page

### Requirement 7: 商品详情页面完善

**User Story:** As a user, I want to view product details with the same layout as the mini-program, so that I can make informed purchase decisions.

#### Acceptance Criteria

1. WHEN the product detail page loads THEN the System SHALL display product images, name, price, and description
2. WHEN the user views recommended products THEN the System SHALL display related products list
3. WHEN the user taps the purchase button THEN the System SHALL show the checkout modal with address selection and payment options

### Requirement 8: 图片资源配置完善

**User Story:** As a developer, I want all CDN image resources properly configured, so that all pages can display images correctly.

#### Acceptance Criteria

1. WHEN any page requires an image THEN the System SHALL load the image from the Images constants matching the ossurl configuration
2. WHEN a background image is needed THEN the System SHALL use ImageBackground component with the correct image URI
3. WHEN new images are required THEN the System SHALL add them to constants/images.ts following the existing pattern

### Requirement 9: API 服务层完善

**User Story:** As a developer, I want all API services properly implemented, so that all features can communicate with the backend.

#### Acceptance Criteria

1. WHEN a page needs data THEN the System SHALL call the corresponding service function matching the mini-program API
2. WHEN an API call fails THEN the System SHALL handle the error gracefully and display appropriate feedback
3. WHEN authentication is required THEN the System SHALL include the token in request headers

