会员订阅管理应用

---

欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net

适配的第三方库地址：

• in_app_purchase: https://pub.dev/packages/in_app_purchase
• shared_preferences: https://pub.dev/packages/shared_preferences
• local_auth: https://pub.dev/packages/local_auth
• animations: https://pub.dev/packages/animations

一、项目概述

运行效果图

1.1 应用简介

会员订阅管理应用是一款专业的会员订阅管理工具，致力于为用户提供便捷的订阅服务和权益管理。应用支持会员订阅管理、订阅状态展示、订阅历史、权益说明等功能，让用户轻松管理会员订阅。

应用以尊贵的紫色为主色调，象征会员的尊贵与专属。涵盖订阅页面、权益展示、历史记录、个人中心四大模块。用户可以选择套餐订阅、查看会员权益、管理订阅历史，享受专属会员服务。

1.2 核心功能

功能模块	功能描述	实现方式
订阅管理	多种套餐订阅选择	套餐管理
状态展示	会员状态和有效期展示	状态管理
订阅历史	订阅记录时间线展示	数据存储
权益说明	会员专属权益展示	权益列表
自动续费	自动续费开关管理	设置管理
支付集成	多种支付方式集成	支付接口
会员等级	不同等级会员特权	等级系统
安全认证	生物识别保护订阅信息	安全验证

1.3 订阅套餐定义

序号	套餐名称	价格	天数	折扣	日均价格
1	月度会员	¥18	30天	无	¥0.60/天
2	季度会员	¥48	90天	省¥11	¥0.53/天
3	年度会员	¥168	365天	省¥22	¥0.46/天

1.4 会员等级定义

序号	等级名称	颜色	图标	描述
1	普通用户	灰色	👤	未订阅用户
2	会员用户	金色	⭐	已订阅会员
3	铂金会员	银色	💎	高级会员

1.5 权益分类定义

序号	分类名称	图标	描述
1	内容特权	📺	专属内容访问
2	功能特权	⭐	特殊功能解锁
3	服务特权	🎧	专属客服服务
4	专属特权	🎁	会员专属福利

1.6 技术栈

技术领域	技术选型	版本要求
开发框架	Flutter	>= 3.0.0
编程语言	Dart	>= 2.17.0
设计规范	Material Design 3	-
订阅管理	in_app_purchase	>= 3.0.0
数据存储	shared_preferences	>= 2.0.0
生物认证	local_auth	>= 2.0.0
动画效果	animations	>= 2.0.0
目标平台	鸿蒙OS / Android / iOS	API 21+

1.7 项目结构

lib/
└── main_membership.dart
    ├── MembershipApp              # 应用入口
    ├── SubscriptionType           # 订阅类型枚举
    ├── MemberLevel                # 会员等级枚举
    ├── BenefitCategory            # 权益分类枚举
    ├── Benefit                    # 权益模型
    ├── SubscriptionRecord         # 订阅记录模型
    ├── MemberInfo                 # 会员信息模型
    ├── MembershipController       # 会员控制器
    ├── MembershipHomePage         # 主页面（底部导航）
    ├── _buildSubscribePage        # 订阅页
    ├── _buildBenefitsPage         # 权益页
    ├── _buildHistoryPage          # 历史页
    └── _buildAccountPage          # 账户页

---

二、系统架构

2.1 整体架构图

2.2 类图设计

2.3 页面导航流程

2.4 订阅流程

---

三、核心模块设计

3.1 数据模型设计

3.1.1 订阅类型枚举 (SubscriptionType)

enum SubscriptionType {
  monthly(label: '月度会员', price: 18.0, days: 30, discount: 0),
  quarterly(label: '季度会员', price: 48.0, days: 90, discount: 11),
  yearly(label: '年度会员', price: 168.0, days: 365, discount: 22);

  final String label;
  final double price;
  final int days;
  final int discount;

  String get priceText => '¥$price';
  String get dailyPrice => '¥${(price / days).toStringAsFixed(2)}/天';
}

3.1.2 会员等级枚举 (MemberLevel)

enum MemberLevel {
  free(label: '普通用户', color: Color(0xFF9E9E9E), icon: Icons.person),
  premium(label: '会员用户', color: Color(0xFFFFB300), icon: Icons.workspace_premium),
  platinum(label: '铂金会员', color: Color(0xFF78909C), icon: Icons.diamond);

  final String label;
  final Color color;
  final IconData icon;
}

3.1.3 订阅记录模型 (SubscriptionRecord)

class SubscriptionRecord {
  final String id;
  final SubscriptionType type;
  final DateTime startDate;
  final DateTime endDate;
  final double amount;
  final String paymentMethod;
  final bool isActive;

  int get remainingDays => endDate.difference(DateTime.now()).inDays;
  bool get isExpired => DateTime.now().isAfter(endDate);
  String get statusText => isActive ? '有效' : (isExpired ? '已过期' : '待生效');
}

3.1.4 会员信息模型 (MemberInfo)

class MemberInfo {
  final MemberLevel level;
  final DateTime? expireDate;
  final bool isAutoRenew;
  final int totalDays;
  final int usedDays;

  bool get isPremium => level != MemberLevel.free;
  int get remainingDays => expireDate?.difference(DateTime.now()).inDays ?? 0;
  double get progress => totalDays > 0 ? usedDays / totalDays : 0;
}

3.1.5 订阅套餐分布

3.2 页面结构设计

3.2.1 订阅页结构

3.2.2 权益页结构

3.2.3 历史页结构

3.3 会员控制器逻辑

3.4 订阅状态管理

---

四、UI设计规范

4.1 配色方案

应用以尊贵的紫色为主色调，象征会员的尊贵与专属：

颜色类型	色值	用途
主色	#6B4EE6 (Purple)	导航、主题元素
辅助色	#9575CD	渐变效果
第三色	#B39DDB	卡片背景
强调色	#512DA8	按钮高亮
背景色	#FAFAFA	页面背景
卡片背景	#FFFFFF	信息卡片
金色	#FFB300	会员标识
银色	#78909C	铂金会员

4.2 会员等级配色

等级	色值	视觉效果
普通用户	#9E9E9E	灰色
会员用户	#FFB300	金色
铂金会员	#78909C	银色

4.3 字体规范

元素	字号	字重	颜色
页面标题	24px	Bold	主色
套餐名称	18px	Bold	#000000
价格显示	24px	Bold	主色
权益标题	16px	Medium	#000000
状态标签	12px	Regular	状态色

4.4 组件规范

4.4.1 套餐选择卡片

┌─────────────────────────────────────┐
│  ○ 年度会员              [推荐]    │
│    ¥168  ¥190  ¥0.46/天            │
│                      省¥22         │
└─────────────────────────────────────┘

4.4.2 会员状态卡片

┌─────────────────────────────────────┐
│  剩余 365 天          [取消续费]   │
│  已开启自动续费                     │
│  ═══════════════●═══════════════   │
└─────────────────────────────────────┘

4.4.3 权益项卡片

┌─────────────────────────────────────┐
│  🚫 无广告体验              [VIP]  │
│     畅享无广告的纯净体验            │
└─────────────────────────────────────┘

4.4.4 历史记录卡片

┌─────────────────────────────────────┐
│  年度会员                    [有效] │
│  有效期: 2024/1/1 - 2025/1/1       │
│  支付方式: 微信支付    ¥168        │
└─────────────────────────────────────┘

---

五、核心功能实现

5.1 会员控制器实现

class MembershipController extends ChangeNotifier {
  MemberInfo _memberInfo = const MemberInfo(level: MemberLevel.free);
  List<SubscriptionRecord> _records = [];
  SubscriptionType _selectedType = SubscriptionType.yearly;

  MemberInfo get memberInfo => _memberInfo;
  bool get isPremium => _memberInfo.isPremium;

  void setSelectedType(SubscriptionType type) {
    _selectedType = type;
    notifyListeners();
  }

  Future<void> subscribe() async {
    // 创建新订阅记录
    final newRecord = SubscriptionRecord(
      id: 'record_${DateTime.now().millisecondsSinceEpoch}',
      type: _selectedType,
      startDate: DateTime.now(),
      endDate: DateTime.now().add(Duration(days: _selectedType.days)),
      amount: _selectedType.price,
      paymentMethod: '微信支付',
      isActive: true,
    );
    
    _records.insert(0, newRecord);
    _updateMemberInfo();
    notifyListeners();
  }
}

5.2 订阅状态更新实现

void _updateMemberInfo() {
  final activeRecord = _records.where((r) => r.isActive).firstOrNull;
  
  if (activeRecord != null && !activeRecord.isExpired) {
    _memberInfo = MemberInfo(
      level: MemberLevel.premium,
      expireDate: activeRecord.endDate,
      isAutoRenew: true,
      totalDays: activeRecord.type.days,
      usedDays: activeRecord.type.days - activeRecord.remainingDays,
    );
  } else {
    _memberInfo = const MemberInfo(level: MemberLevel.free);
  }
}

5.3 取消自动续费实现

Future<void> cancelAutoRenew() async {
  _isLoading = true;
  notifyListeners();

  await Future.delayed(const Duration(seconds: 1));

  _memberInfo = MemberInfo(
    level: _memberInfo.level,
    expireDate: _memberInfo.expireDate,
    isAutoRenew: false,
    totalDays: _memberInfo.totalDays,
    usedDays: _memberInfo.usedDays,
  );

  _isLoading = false;
  notifyListeners();
}

5.4 权益分类查询实现

List<Benefit> getBenefitsByCategory(BenefitCategory category) {
  return _benefits.where((b) => b.category == category).toList();
}

List<SubscriptionRecord> getActiveRecords() {
  return _records.where((r) => r.isActive).toList();
}

List<SubscriptionRecord> getExpiredRecords() {
  return _records.where((r) => !r.isActive || r.isExpired).toList();
}

---

六、交互设计

6.1 订阅流程

6.2 取消续费流程

6.3 权益查看流程

---

七、扩展功能规划

7.1 后续版本规划

7.2 功能扩展建议

7.2.1 会员等级系统

等级功能：

• 多级会员等级
• 等级升级机制
• 等级专属权益
• 等级徽章展示

7.2.2 积分系统

积分功能：

• 订阅获得积分
• 积分兑换权益
• 积分等级关联
• 积分过期管理

7.2.3 社交功能

社交功能：

• 邀请好友奖励
• 分享优惠活动
• 会员专属活动
• 社区互动

---

八、注意事项

8.1 开发注意事项

1. 支付安全：确保支付流程安全可靠

2. 订阅验证：服务端验证订阅状态

3. 数据保护：保护用户订阅信息

4. 自动续费：正确处理自动续费逻辑

5. 退款处理：正确处理退款场景

8.2 常见问题

问题	原因	解决方案
订阅失败	支付异常	重试或联系客服
状态不同步	网络延迟	手动刷新状态
权益未生效	数据未更新	重新登录
自动续费失败	支付方式问题	更新支付方式
退款未到账	处理周期	等待处理

8.3 使用技巧

👑 会员订阅管理使用技巧 👑

订阅技巧

• 选择年度套餐更划算
• 关注优惠活动
• 开启自动续费避免断档
• 定期检查订阅状态

权益使用

• 了解所有会员权益
• 充分利用专属服务
• 参与会员专属活动
• 关注新权益上线

账户管理

• 保持支付方式有效
• 定期查看订阅历史
• 及时处理续费提醒
• 保护账户安全

---

九、鸿蒙适配说明

9.1 权限配置

在 ohos/entry/src/main/module.json5 中添加权限：

{
  "module": {
    "requestPermissions": [
      {"name": "ohos.permission.INTERNET"},
      {"name": "ohos.permission.GET_NETWORK_INFO"},
      {"name": "ohos.permission.VIBRATE"}
    ]
  }
}

9.2 第三方库适配状态

第三方库	适配状态	说明
in_app_purchase	✅ 已适配	订阅管理
shared_preferences	✅ 已适配	数据存储
local_auth	✅ 已适配	生物认证
animations	✅ 已适配	动画效果

9.3 运行命令

# 查看可用设备
flutter devices

# 运行到Web服务器
flutter run -d web-server -t lib/main_membership.dart --web-port 8151

# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 -t lib/main_membership.dart

# 代码分析
flutter analyze lib/main_membership.dart

---

十、总结

会员订阅管理应用为用户提供了一套完整的会员订阅解决方案。应用支持会员订阅管理、订阅状态展示、订阅历史、权益说明等功能，让用户轻松管理会员订阅。

核心功能涵盖订阅管理、状态展示、订阅历史、权益说明、自动续费、支付集成、会员等级、安全认证八大模块。用户可以选择套餐订阅、查看会员权益、管理订阅历史，享受专属会员服务。

应用采用 Material Design 3 设计规范，以尊贵的紫色为主色调，象征会员的尊贵与专属。通过本应用，希望能够为用户提供便捷的订阅服务，享受专属会员权益。

会员订阅管理——尊享专属权益

---