requirements.md 6.7 KB
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
- WHEN the login page loads THEN the System SHALL display the background image using ImageBackground component with the loginBg image from Images constants
- WHEN the user views the login button THEN the System SHALL display the button with loginBug background image matching the mini-program style
- WHEN the user taps the login button THEN the System SHALL call the login API with mobile and verifycode parameters
- 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
- WHEN the mine page loads THEN the System SHALL display the page with kaixinMineBg background image and kaixinMineHeadBg header background
- WHEN the user views their profile THEN the System SHALL display avatar, nickname, user ID with copy functionality, and phone number
- WHEN the user views the data statistics section THEN the System SHALL display couponCount, inventoryCount, magicBalance, and treasureBoxCount with kaixinUserDataBg background
- WHEN the user taps a function entry THEN the System SHALL navigate to the corresponding page (invite, integral, message, orders)
- 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
- WHEN the address list page loads THEN the System SHALL display the page with kaixinMineBg background image
- WHEN the user views the address list THEN the System SHALL display all addresses with contact name, phone, and full address details
- WHEN the user taps the add button THEN the System SHALL display the button with loginBug background image and navigate to address edit page
- WHEN the user edits an address THEN the System SHALL display the form with itemBg background for input fields
- 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
- WHEN the orders page loads THEN the System SHALL display tabs for different order statuses (全部, 待付款, 待发货, 待收货, 已完成)
- WHEN the user views an order item THEN the System SHALL display order number, status, goods image, name, price, quantity, and create time
- WHEN the user taps an order THEN the System SHALL navigate to the order detail page
- 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
- WHEN the order detail page loads THEN the System SHALL display order status, goods information, and address details
- WHEN the order has shipping info THEN the System SHALL display logistics tracking information
- 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
- WHEN the welfare page loads THEN the System SHALL display the page with kaixinWelfareBg background image
- WHEN the user views room entries THEN the System SHALL display three room options (房间, 扭蛋机, 祈愿) with kaixinRoomBg background
- 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
- WHEN the product detail page loads THEN the System SHALL display product images, name, price, and description
- WHEN the user views recommended products THEN the System SHALL display related products list
- 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
- WHEN any page requires an image THEN the System SHALL load the image from the Images constants matching the ossurl configuration
- WHEN a background image is needed THEN the System SHALL use ImageBackground component with the correct image URI
- 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
- WHEN a page needs data THEN the System SHALL call the corresponding service function matching the mini-program API
- WHEN an API call fails THEN the System SHALL handle the error gracefully and display appropriate feedback
- WHEN authentication is required THEN the System SHALL include the token in request headers