1

keyBoard/Class/Pay/VC/KBVipPay.h

@@ -9,8 +9,8 @@
 
 NS_ASSUME_NONNULL_BEGIN
 
+/// VIP 订阅页（整体使用 UICollectionView，上下滚动）
 @interface KBVipPay : UIViewController
-
 @end
 
 NS_ASSUME_NONNULL_END

keyBoard/Class/Pay/VC/KBVipPay.m

@@ -6,8 +6,19 @@
 //
 
 #import "KBVipPay.h"
+#import "KBVipPayHeaderView.h"
+#import "KBVipSubscribeCell.h"
+#import "KBVipReviewListCell.h"
 
-@interface KBVipPay ()
+static NSString * const kKBVipHeaderId = @"kKBVipHeaderId";
+static NSString * const kKBVipSubscribeCellId = @"kKBVipSubscribeCellId";
+static NSString * const kKBVipReviewListCellId = @"kKBVipReviewListCellId";
+
+@interface KBVipPay () <UICollectionViewDataSource, UICollectionViewDelegateFlowLayout>
+@property (nonatomic, strong) UICollectionView *collectionView;   // 主列表（竖向滚动）
+@property (nonatomic, strong) NSArray<NSDictionary *> *plans;     // 订阅方案数组
+@property (nonatomic, assign) NSInteger selectedIndex;            // 当前选中的方案索引
+@property (nonatomic, strong) UIButton *closeButton;            // 当前选中的方案索引
 
 @end
 
@@ -15,17 +26,168 @@
 
 - (void)viewDidLoad {
     [super viewDidLoad];
-    // Do any additional setup after loading the view.
+    // 标题与导航样式
+//    self.kb_titleLabel.text = @"VIP";
+//    self.kb_navView.backgroundColor = [UIColor clearColor];
+    
+    self.view.backgroundColor = [UIColor colorWithWhite:0.97 alpha:1.0];
+    
+    // 初始化数据（简单演示）
+    self.plans = @[
+        @{@"title":@"Monthly Subscription", @"price":@"$4.49", @"strike":@"$4.49"},
+        @{@"title":@"Monthly Subscription", @"price":@"$4.49", @"strike":@"$4.49"},
+        @{@"title":@"Monthly Subscription", @"price":@"$4.49", @"strike":@"$4.49"},
+    ];
+    self.selectedIndex = 1; // 默认选中第二项
+    [self.view addSubview:self.closeButton];
+    [self.closeButton mas_makeConstraints:^(MASConstraintMaker *make) {
+        make.top.equalTo(self.view).offset(KB_NAV_TOTAL_HEIGHT);
+        make.left.equalTo(self.view).offset(15);
+        make.width.height.mas_equalTo(36);
+    }];
+    // 组装主列表
+    [self.view addSubview:self.collectionView];
+    [self.collectionView mas_makeConstraints:^(MASConstraintMaker *make) {
+        make.left.right.bottom.equalTo(self.view);
+        make.top.equalTo(self.view).offset(KB_NAV_TOTAL_HEIGHT);
+    }];
+    
+    [self.collectionView reloadData];
 }
 
-/*
-#pragma mark - Navigation
-
-// In a storyboard-based application, you will often want to do a little preparation before navigation
-- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
-    // Get the new view controller using [segue destinationViewController].
-    // Pass the selected object to the new view controller.
+- (void)viewDidAppear:(BOOL)animated {
+    [super viewDidAppear:animated];
+    // 首次进入，确保订阅项保持选中态（避免首屏仅显示 Header，待滚动出现时没有选中样式）
+    NSIndexPath *ip = [NSIndexPath indexPathForItem:self.selectedIndex inSection:1];
+    if (!ip) { return; }
+    // 系统层面也置为选中
+    [self.collectionView selectItemAtIndexPath:ip animated:NO scrollPosition:UICollectionViewScrollPositionNone];
+    // 若此时 cell 不可见，willDisplay 再兜底
+    KBVipSubscribeCell *cell = (KBVipSubscribeCell *)[self.collectionView cellForItemAtIndexPath:ip];
+    if (cell) { [cell applySelected:YES animated:NO]; }
 }
-*/
 
+#pragma mark - UICollectionView DataSource
+
+- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
+    // 0：头部；1：订阅选项；2：底部横滑好评
+    return 3;
+}
+
+- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
+    if (section == 1) { return self.plans.count; }
+    if (section == 2) { return 1; }
+    return 0; // 头部仅使用 header
+}
+
+- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
+    if (indexPath.section == 1) {
+        KBVipSubscribeCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:kKBVipSubscribeCellId forIndexPath:indexPath];
+        NSDictionary *plan = self.plans[indexPath.item];
+        [cell configTitle:plan[@"title"] price:plan[@"price"] strike:plan[@"strike"]];
+        [cell applySelected:(indexPath.item == self.selectedIndex) animated:NO];
+        return cell;
+    } else {
+        KBVipReviewListCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:kKBVipReviewListCellId forIndexPath:indexPath];
+        return cell;
+    }
+}
+
+- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
+    if (indexPath.section == 0 && [kind isEqualToString:UICollectionElementKindSectionHeader]) {
+        KBVipPayHeaderView *header = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:kKBVipHeaderId forIndexPath:indexPath];
+        return header;
+    }
+    return [UICollectionReusableView new];
+}
+
+#pragma mark - UICollectionView Delegate
+- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
+    if (indexPath.section != 1) { return; }
+    if (self.selectedIndex == indexPath.item) { return; }
+    NSInteger old = self.selectedIndex;
+    self.selectedIndex = indexPath.item;
+    
+    KBVipSubscribeCell *newCell = (KBVipSubscribeCell *)[collectionView cellForItemAtIndexPath:indexPath];
+    [newCell applySelected:YES animated:YES];
+    if (old >= 0 && old < self.plans.count) {
+        NSIndexPath *oldIP = [NSIndexPath indexPathForItem:old inSection:1];
+        KBVipSubscribeCell *oldCell = (KBVipSubscribeCell *)[collectionView cellForItemAtIndexPath:oldIP];
+        [oldCell applySelected:NO animated:YES];
+    }
+}
+
+- (void)collectionView:(UICollectionView *)collectionView willDisplayCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath {
+    // 兜底：当订阅项第一次出现在屏幕上，强制同步选中样式
+    if (indexPath.section == 1 && [cell isKindOfClass:KBVipSubscribeCell.class]) {
+        BOOL sel = (indexPath.item == self.selectedIndex);
+        KBVipSubscribeCell *c = (KBVipSubscribeCell *)cell;
+        if (sel) {
+            [collectionView selectItemAtIndexPath:indexPath animated:NO scrollPosition:UICollectionViewScrollPositionNone];
+        }
+        [c applySelected:sel animated:NO];
+    }
+}
+
+#pragma mark - FlowLayout
+- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
+    CGFloat w = KB_SCREEN_WIDTH - 32;
+    if (indexPath.section == 1) {
+        return CGSizeMake(w, 106);
+    } else {
+        return CGSizeMake(w, 140);
+    }
+}
+
+- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section {
+    if (section == 0) {
+        // 头部高度 = 484 + 导航栏高度
+        return CGSizeMake(KB_SCREEN_WIDTH, 484 + KB_NAV_TOTAL_HEIGHT);
+    }
+    return CGSizeZero;
+}
+
+- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {
+    if (section == 1) { return 14; }
+    return 0;
+}
+
+- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
+    if (section == 1) {
+        return UIEdgeInsetsMake(0, 16, 10, 16);
+    } else if (section == 2) {
+        return UIEdgeInsetsMake(10, 16, 20, 16);
+    }
+    return UIEdgeInsetsZero;
+}
+
+#pragma mark - Lazy
+- (UICollectionView *)collectionView {
+    if (!_collectionView) {
+        UICollectionViewFlowLayout *layout = [UICollectionViewFlowLayout new];
+        layout.scrollDirection = UICollectionViewScrollDirectionVertical;
+        _collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout];
+        _collectionView.backgroundColor = [UIColor clearColor];
+        _collectionView.dataSource = self;
+        _collectionView.delegate = self;
+        _collectionView.alwaysBounceVertical = YES;
+        if (@available(iOS 11.0, *)) {
+            _collectionView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
+        }
+        [_collectionView registerClass:KBVipPayHeaderView.class forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:kKBVipHeaderId];
+        [_collectionView registerClass:KBVipSubscribeCell.class forCellWithReuseIdentifier:kKBVipSubscribeCellId];
+        [_collectionView registerClass:KBVipReviewListCell.class forCellWithReuseIdentifier:kKBVipReviewListCellId];
+    }
+    return _collectionView;
+}
+
+
+- (UIButton *)closeButton {
+    if (!_closeButton) {
+        _closeButton = [UIButton buttonWithType:UIButtonTypeCustom];
+        [_closeButton setImage:[UIImage imageNamed:@"white_close_icon"] forState:UIControlStateNormal];
+        [_closeButton addTarget:self action:@selector(onTapClose) forControlEvents:UIControlEventTouchUpInside];
+    }
+    return _closeButton;
+}
 @end