vending-machine/tasks.md at 539b58ea87300a9bcd59dd48f4d75f4ff92eb0e6

1. 搭建项目基础架构

1.1 配置pages.json路由和manifest.json平台配置
- 在pages.json中注册所有页面路由（index、login、membership、stamps、mine、points、coupons、agreement、privacy、about）
- 配置tabBar（首页、我的）
- 更新manifest.json中的应用名称、版本号、平台权限配置
- Requirements: 12.1
1.2 实现多语言国际化模块
- 安装vue-i18n，创建i18n/index.js配置文件
- 创建zh-CN.js、zh-TW.js、en.js三个语言文件，包含所有页面的翻译键值
- 在main.js中注册i18n插件
- Requirements: 1.1, 1.2
1.3 实现本地存储工具模块 (utils/storage.js)
- 封装uni.setStorageSync/getStorageSync/removeStorageSync
- 定义存储键常量（TOKEN_KEY、LOCALE_KEY等）
- Requirements: 1.5, 2.5
1.4 实现应用状态管理 (stores/app.js)
- 安装Pinia，在main.js中注册
- 实现useAppStore：locale状态、setLocale/initLocale方法
- setLocale切换i18n语言并持久化到本地存储
- initLocale从本地存储或系统语言初始化
- Requirements: 1.2, 1.4, 1.5
1.5 编写多语言模块属性测试
- Property 1: 语言切换翻译正确性
- Property 2: 语言设置持久化Round-Trip
- Validates: Requirements 1.2, 1.4, 1.5

2. 实现HTTP请求封装和用户认证

2.1 实现统一HTTP请求模块 (api/request.js)
- 基于uni.request封装get/post/del方法
- 请求拦截器：自动注入Authorization和Accept-Language请求头
- 响应拦截器：401自动清除Token跳转登录、统一错误提示
- 配置BASE_URL常量
- Requirements: 1.3, 2.6, 2.8, 11.1, 11.2, 11.3, 11.5
2.2 编写请求模块属性测试
- Property 3: 请求拦截器请求头注入
- Property 6: 401响应自动清除认证
- Property 14: API响应统一处理
- Property 15: 网络错误友好提示
- Validates: Requirements 1.3, 2.6, 2.8, 11.1, 11.2, 11.3, 11.5
2.3 实现用户API模块 (api/user.js)
- 封装sendCode、login、getUserInfo、logout、deleteAccount接口调用
- Requirements: 2.1, 2.5, 2.7
2.4 实现用户状态管理 (stores/user.js)
- 实现useUserStore：token、userInfo状态
- 实现login（含协议勾选校验）、logout、fetchUserInfo、deleteAccount、clearAuth方法
- login成功后存储token到本地，logout清除token
- Requirements: 2.3, 2.4, 2.5, 2.7, 2.8
2.5 编写用户认证属性测试
- Property 4: 未勾选协议阻止登录
- Property 5: 登录Token存储
- Validates: Requirements 2.3, 2.5

3. 检查点 - 确保基础架构测试通过

确保所有测试通过，如有问题请向用户确认。

4. 实现登录页

4.1 创建登录页 (pages/login/login.vue)
- 手机区号选择器（下拉选择常用国际区号）
- 手机号输入框
- 验证码输入框 + 发送验证码按钮（60秒倒计时）
- 协议勾选复选框 + 用户协议/隐私政策链接
- 登录按钮，点击时校验协议勾选状态
- 调用useUserStore.login完成登录流程
- Requirements: 2.1, 2.2, 2.3, 2.4, 2.5

5. 实现首页

5.1 实现内容API模块 (api/content.js)
- 封装getBanners、getEntries、getCouponGuide、getMembershipBanner、getStampBanner、getAgreement、getPrivacyPolicy接口调用
- Requirements: 3.1, 3.3, 3.9
5.2 实现优惠券API模块 (api/coupon.js)
- 封装getRedeemableCoupons、redeemCoupon、getMyCoupons、getStampCoupons、redeemStampCoupon接口调用
- Requirements: 3.10, 3.12
5.3 创建优惠券卡片组件 (components/CouponCard.vue)
- 展示优惠券名称、类型、到期时间、兑换所需积分
- 兑换按钮（可配置为已兑换灰色状态）
- Requirements: 3.10
5.4 创建兑换确认弹窗组件 (components/RedeemPopup.vue)
- 展示优惠券信息和所需积分
- 确定兑换和取消按钮
- Requirements: 3.11, 3.12, 3.13, 3.14, 3.15
5.5 创建使用说明弹窗组件 (components/CouponGuidePopup.vue)
- 展示后台配置的富文本内容
- Requirements: 3.9
5.6 创建首页 (pages/index/index.vue)
- Banner轮播图（swiper组件），点击根据linkType导航
- 功能入口图片网格（成为会员、节日印花、会员二维码、使用说明）
- 可兑换优惠券列表
- 集成QrcodePopup、CouponGuidePopup、RedeemPopup弹窗
- 会员二维码入口点击逻辑：判断会员状态决定弹窗或跳转
- Requirements: 3.1-3.15
5.7 编写Banner导航属性测试
- Property 7: Banner导航正确性
- Validates: Requirements 3.2

6. 实现会员二维码和支付模块

6.1 实现二维码生成工具 (utils/qrcode.js)
- 使用uQRCode库生成二维码
- 实现generateQRCode函数
- 实现useQRCode组合式函数：管理二维码数据、倒计时、自动刷新
- Requirements: 4.1, 4.2, 4.3, 4.4
6.2 创建会员二维码弹窗组件 (components/QrcodePopup.vue)
- 展示二维码图片
- 展示倒计时
- 过期自动刷新
- Requirements: 4.1, 4.2, 4.3, 4.4
6.3 编写二维码属性测试
- Property 8: 二维码生成Round-Trip
- Validates: Requirements 4.1
6.4 实现支付封装工具 (utils/payment.js)
- 实现pay函数：根据uni.getSystemInfoSync().platform选择支付渠道
- Android调用Google Pay插件，iOS调用Apple Pay插件
- 实现isPaymentAvailable检查函数
- 统一错误处理
- Requirements: 12.2, 12.3, 12.4, 12.5
6.5 编写支付渠道属性测试
- Property 16: 支付渠道平台选择
- Validates: Requirements 12.2, 12.3

7. 实现会员页

7.1 实现会员API模块 (api/membership.js)
- 封装getMembershipInfo、getProducts、purchase、subscribe、getSubscriptionStatus接口调用
- Requirements: 5.1, 5.2, 5.10
7.2 实现会员状态管理 (stores/membership.js)
- 实现useMembershipStore
- 管理会员信息、商品列表、订阅状态
- Requirements: 5.1, 5.2, 5.10
7.3 创建会员页 (pages/membership/membership.vue)
- 会员宣传长图展示
- 会员商品信息
- 按钮状态逻辑：根据会员/订阅状态动态显示
- 点击按钮调用支付模块，支付成功后调用后端API并刷新
- Requirements: 5.1-5.10
7.4 编写会员按钮状态属性测试
- Property 9: 会员按钮状态正确性
- Validates: Requirements 5.5, 5.8, 5.9

8. 检查点 - 确保核心功能测试通过

确保所有测试通过，如有问题请向用户确认。

9. 实现节日印花页

9.1 创建节日印花页 (pages/stamps/stamps.vue)
- 印花Banner图展示
- 印花优惠券列表
- 兑换按钮逻辑：会员可兑换，非会员跳转会员页
- 已兑换显示灰色"已兑换"按钮
- Requirements: 6.1-6.6
9.2 编写印花兑换状态属性测试
- Property 10: 印花优惠券兑换状态显示
- Validates: Requirements 6.6

10. 实现我的页及相关子页面

10.1 实现积分API模块 (api/points.js)
- 封装getBalance、getEarnRecords、getSpendRecords、giftPoints接口调用
- Requirements: 7.4, 7.7, 8.2, 8.3
10.2 创建赠送积分弹窗组件 (components/GiftPointsPopup.vue)
- UID输入框、积分数量输入框
- 赠送按钮，调用giftPoints接口
- 成功/失败提示
- Requirements: 7.6, 7.7, 7.8, 7.9
10.3 创建语言选择器组件 (components/LanguagePicker.vue)
- 展示三种语言选项
- 选择后调用useAppStore.setLocale切换语言
- Requirements: 7.11
10.4 创建我的页 (pages/mine/mine.vue)
- 未登录：默认头像 + 登录按钮
- 已登录：昵称、UID、积分展示
- 功能菜单：赠送积分、我的优惠券、切换语言、用户协议、隐私政策、关于、退出登录
- 集成GiftPointsPopup、LanguagePicker弹窗
- 退出登录确认弹窗
- Requirements: 7.1-7.15
10.5 创建我的积分页 (pages/points/points.vue)
- 获取记录/使用记录Tab切换
- 积分记录列表，展示来源/方式、时间、数量
- 滚动到底部分页加载
- Requirements: 8.1-8.4
10.6 编写积分分页属性测试
- Property 11: 分页加载参数正确性
- Validates: Requirements 8.4
10.7 创建我的优惠券页 (pages/coupons/coupons.vue)
- 可使用/已使用/已过期Tab切换
- 优惠券卡片列表，已使用/已过期显示对应状态标识
- Requirements: 9.1-9.4
10.8 编写优惠券页属性测试
- Property 12: 优惠券Tab状态参数正确性
- Property 13: 优惠券状态标识显示正确性
- Validates: Requirements 9.2, 9.3, 9.4

11. 实现内容展示页和关于页

11.1 创建用户协议页 (pages/agreement/agreement.vue)
- 加载并展示后台配置的用户协议内容
- Requirements: 10.1
11.2 创建隐私政策页 (pages/privacy/privacy.vue)
- 加载并展示后台配置的隐私政策内容
- Requirements: 10.2
11.3 创建关于页 (pages/about/about.vue)
- 展示APP LOGO、版本号
- 注销账号按钮 + 确认弹窗
- 注销成功后清除登录状态、返回首页
- Requirements: 10.3, 10.4, 10.5, 10.6

12. 全局样式和认证工具完善

12.1 实现认证工具 (utils/auth.js)
- 封装路由守卫逻辑：需要登录的页面自动跳转登录页
- 在App.vue的onLaunch中初始化语言和用户状态
- Requirements: 2.8, 11.3
12.2 完善全局样式 (uni.scss, App.vue)
- 定义全局CSS变量（主题色、字体大小等）
- 统一页面基础样式
- Requirements: 12.1

13. 最终检查点 - 确保所有测试通过

确保所有测试通过，如有问题请向用户确认。

11 KiB

Raw Blame History

实现计划：贩卖机移动端APP

概述

任务

备注

11 KiB Raw Blame History Unescape Escape

实现计划：贩卖机移动端APP

概述

任务

备注

11 KiB

Raw Blame History