iOS 代码快速创建确认订单页面 (一)

作者: 翻滚的炒勺2013 | 来源:发表于2017-11-10 20:58 被阅读88次

iOS 代码快速创建确认订单页面 (一)
订单确认页面
付款剩余时间倒计时的实现
Android 关于getWidth() 和 getMeasur
1.6 上线实操之移除订单
PageComponent练习
一步步学习《Spring 实战第5版》--（7）创建订单页面
iOS-常用代码块
设计观察06-页面滑动时重要信息一直展示
SAP Cloud for Customer销售订单Extern

timg.jpg

先看效果 Untitled.gif

需求是这样的

单一订单.png

多个订单.png

分析需求:可以观察到这个页面的顶部地址和底部优惠券商品金额立减运费合计金额提交订单是在固定位置上,所以顶部我打算用tableView的header做,再看订单,这部分相对复杂,可以推理出可能有多个订单,每个订单下又可能有多个商品,所以这部分我打算用分组做.在看里面的cell,有五种不不同的样式,但是布局都相对简单,我打算用tilte和textField去做,因为cell的右侧有的可能会有箭头或者文字,而textField有一个属性是leftView我可以把箭头包装在leftView这样可以保证cell右侧的整齐美观,同时又不用创建过多的控件导致维护艰难,分析完毕现在开始代码.

新创建一个GHDetailHeaderView继承UIView,头部有五个控件分别是两侧的两个图标和三个label,所以先声明这个几个控件

/** 位置 */
@property (nonatomic , strong) UIImageView *position;
/** 收货人 */
@property (nonatomic , strong) UILabel *receiver;
/** 向右箭头 */
@property (nonatomic , strong) UIImageView *arrow;
/** 电话号码 */
@property (nonatomic , strong) UILabel *phoneNum;
/** 地址 */
@property (nonatomic , strong) UILabel *address;

懒加载这些控件

- (UILabel *)address {
    if (_address == nil) {
        _address = [[UILabel alloc]init];
        _address.text = @"地址: 开始计算价钱开始计算价钱开始计算价钱开始计算价钱";
        _address.numberOfLines = 0;
        _address.textColor = [UIColor lightGrayColor];
        _address.font = [UIFont systemFontOfSize:14];

    }
    return _address;
}
- (UILabel *)phoneNum {
    if (_phoneNum == nil) {
        _phoneNum = [[UILabel alloc]init];
        _phoneNum.text = @"13836172531";
        _phoneNum.textColor = [UIColor lightGrayColor];
        _phoneNum.font = [UIFont systemFontOfSize:14];


    }
    return _phoneNum;
}
- (UIImageView *)arrow {
    if (_arrow == nil) {
        _arrow = [[UIImageView alloc]init];
        _arrow.image = [UIImage imageNamed:@"detail_arrow"];
    }
    return _arrow;
}
- (UILabel *)receiver {
    if (_receiver == nil) {
        _receiver = [[UILabel alloc]init];
        _receiver.text = @"收货人";
        _receiver.textColor = [UIColor lightGrayColor];
        _receiver.font = [UIFont systemFontOfSize:14];
    }
    return _receiver;
}
- (UIImageView *)position {
    if (_position == nil) {
        _position = [[UIImageView alloc]init];
        _position.image = [UIImage imageNamed:@"Detail_position"];
    }
    return _position;
}

将这些控件加在view上

- (void)setupUI {
    [self addSubview:self.position];
    [self.position mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.equalTo(self);
        make.left.equalTo(self).offset(15);
        make.height.equalTo(@20);
        make.width.equalTo(@15);
    }];
    
    [self addSubview:self.arrow];
    [self.arrow mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.equalTo(self.position);
        make.right.equalTo(self).offset(-15);
        make.height.equalTo(@15);
        make.width.equalTo(@10);
    }];
//    
    [self addSubview:self.receiver];
    [self.receiver mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.position.mas_right).offset(10);
        make.top.equalTo(self).offset(10);
    }];

    [self addSubview:self.phoneNum];
    [self.phoneNum mas_makeConstraints:^(MASConstraintMaker *make) {
        make.right.equalTo(self.arrow.mas_left).offset(-10);
        make.centerY.equalTo(self.receiver);
    }];
    [self addSubview:self.address];
    [self.address mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.receiver);
        make.top.equalTo(self.receiver.mas_bottom).offset(10);
        make.right.equalTo(self.phoneNum);

    }];
    
}

重写初始化方法

- (instancetype)initWithFrame:(CGRect)frame {
    if (self == [super initWithFrame:frame]) {
        [self setupUI];
        [self addGes];
    }
    return self;
}

因为地址右侧有一个箭头,这里应该可以是点击的所以添加一个手势

  UITapGestureRecognizer *tapRecognizerTop =
    [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(respondToTapGesture:)];
    tapRecognizerTop.numberOfTapsRequired = 1;
    
    [self addGestureRecognizer:tapRecognizerTop];

实现手势的单击方法

- (void)respondToTapGesture:(UITapGestureRecognizer *)ges {
}

在GHDetailHeaderView.h中写代理协议

@class GHDetailHeaderView;
@protocol GHDetailHeaderViewDelegate <NSObject>
@optional
- (void)headerView: (GHDetailHeaderView *)headerView;
@end

增加一个代理属性

@property (nonatomic , weak) id <GHDetailHeaderViewDelegate>delegate;

在单击手势里相应代理方法

- (void)respondToTapGesture:(UITapGestureRecognizer *)ges {
    if (self.delegate && [self.delegate respondsToSelector:@selector(headerView:)]) {
        [self.delegate headerView:self];
    }
}

在控制器里创建tableView,同样是懒加载

@property (nonatomic , strong) UITableView *tableView;
- (UITableView *)tableView {
    if (_tableView == nil) {
        _tableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height + 49) style:UITableViewStyleGrouped];
        _tableView.delegate = self;
        _tableView.dataSource = self;
        [_tableView registerClass:[GHDetailViewCell class] forCellReuseIdentifier:@"GHDetailViewCell"];
        _tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
        _tableView.keyboardDismissMode = UIScrollViewKeyboardDismissModeOnDrag;
        _tableView.backgroundColor = [UIColor clearColor];
        _tableView.showsVerticalScrollIndicator = NO;
    
    }
    return _tableView;
}

添加到tableView到当前view

    [self.view addSubview:self.tableView];
    self.tableView.tableHeaderView = self.header;

现在效果就是这样

6B4440C4-4BD7-467C-89D1-CDD9CBF45AAF.png

接下来根据cell来构造数据,根据cell我制定了7种样式,在模型里声明一个枚举值,就是cellType

    /// 商店
    GHDetailsCellType_shop = 1,
    /// 商品
    GHDetailsCellType_goods ,
    /// 输入数量
    GHDetailsCellType_inputNums,
    /// 配送方式
    GHDetailsCellType_delivery,
    /// 配送时间
    GHDetailsCellType_time,
    /// 运费险
    GHDetailsCellType_insurance,
    /// 留言
    GHDetailsCellType_message
@property (nonatomic , assign) GHDetailsCellType cellType;

这个模型还要标题,详情,行高

@property (nonatomic , copy) NSString *title;
@property (nonatomic , copy) NSString *details;
@property (nonatomic , assign) NSInteger cellHeight;

定义一个方法来构造假数据

+ (NSMutableArray *)creatDetailsData;

实现构造方法

+ (NSMutableArray *)creatDetailsData {
    NSArray *titleArray = @[@"商店名称",@"11",@"购买数量",@"配送方式",@"配送时间",@"运费险",@"买家留言"];
    NSArray *detailsArray = @[@"111",@"111",@"",@"快递免费",@"周五送达",@"退货前可赔",@""];
    NSArray *cellTypeArray = @[
                               @(GHDetailsCellType_shop),
                               /// 商品
                               @(GHDetailsCellType_goods),
                               /// 输入数量
                               @(GHDetailsCellType_inputNums),
                               /// 配送方式
                               @(GHDetailsCellType_delivery),
                               /// 配送时间
                               @(GHDetailsCellType_time),
                               /// 运费险
                               @(GHDetailsCellType_insurance),
                               /// 留言
                               @(GHDetailsCellType_message)];
    NSMutableArray *array = [NSMutableArray array];
    for (NSInteger index = 0; index < 7; index++) {
    
        GHDetailsModel *model = [[GHDetailsModel alloc]init];
        model.title = titleArray[index];
        model.details = detailsArray[index];
        NSNumber *typeNum = cellTypeArray[index];
        model.cellType = (GHDetailsCellType)typeNum.integerValue;
        if (model.cellType == GHDetailsCellType_goods) {
            model.cellHeight = 90;
        } else {
            model.cellHeight = 44;
        }
        [array addObject:model];
    }
    return array;
}

在控制器引入模型,把数据取出来,因为订单可能是有多个,我这里就不创建另外一个数组了,直接拿原来可以实现一样的效果只不过数据是一模一样的.

- (void)creatData {
    [self.dataArray addObject: [GHDetailsModel creatDetailsData]];
    [self.dataArray addObject: [GHDetailsModel creatDetailsData]];
}

拿到数据之后就来实现tableView的代理方法

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    
    return self.dataArray.count;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    NSArray *array = self.dataArray[section];
    return array.count;
}

给cell赋值

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    NSArray *array = self.dataArray[indexPath.section];
    GHDetailsModel *model = array[indexPath.row];
    GHDetailViewCell *cell = [GHDetailViewCell initCellWithTableView:tableView];
    cell.model = model;
    return cell;
}

现在效果是这样的

E18AB8DC-9E2F-40B3-86C0-94EA6E8A2998.png

就差底下的部分里其实这里有两种方案一种就是做成tableView的footer一种就是做成sectionFooter, footer不太好刷新所以这里做成sectionFooter,在sectionFooter里我定义一个tableView,也是分组的

懒加载等代码就不在说明了和之前是一样的,创建好这个sectionFooter之后再代理方法里添加他

- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section {
    if (section == self.dataArray.count - 1) {
        GHDetailFooterView *footer = [[GHDetailFooterView alloc]initWithFrame:CGRectMake(0, 0, 0, 226 + 20)];
        NSMutableArray *dataArray = [NSMutableArray array];
        NSMutableArray *temp = [GHDetailsModel creatDetailsFooterData];
        [dataArray addObject:@[temp.firstObject]];
        [temp removeObjectAtIndex:0];
        [dataArray addObject:temp];
        footer.dataArray = dataArray;
        return footer;
    } else {
        return nil;
    }
}

这里我同样构造了footer的假数组

+ (NSMutableArray *)creatDetailsFooterData {
    NSMutableArray *array = [NSMutableArray array];
    NSArray *titleArray = @[@"优惠券",@"商品金额",@"立减",@"运费"];
    NSArray *detailsArray = @[@"无可用",@"100",@"100",@"100"];
    for (NSInteger index = 0; index < 4; index++) {
        GHDetailsModel *model = [[GHDetailsModel alloc]init];
        model.title = titleArray[index];
        model.details = detailsArray[index];
        model.cellHeight = 44;
        [array addObject:model];
    }
    return array;
}

这个时候运行是看不到效果的,还要在tebleView的代理方法里给高度

- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section {
    if (section == self.dataArray.count -1) {
        return 246;
    } else {
        return 0.01;
    }
}

最终效果 Untitled.gif

iOS 代码快速创建确认订单页面 (一)
先看效果Untitled.gif 需求是这样的分析需求:可以观察到这个页面的顶部地址和底部优惠券商品金额立减运费...
订单确认页面
订单确认页面前端，src/views/orderConfirm.vue 后端,生成订单接口
付款剩余时间倒计时的实现
点击提交订单跳转到确认订单（支付）页面，在顶部有一个倒计时，与此同时，接口返回有创建订单时间字段，根据此字段实现倒...
Android 关于getWidth() 和 getMeasur
在调试代码的时候,在代码中用LayoutParams 动改变了代码的位置页面创建完毕后正常展示完毕后,确认控件...
1.6 上线实操之移除订单
创建移除订单从【管理库存】页面或【建议移除】报告中创建移除订单。您可以通过【管理库存】页面选择您要移除的任何库存...
PageComponent练习
PageComponent为定义创建一个内容页层，可以快速、方便的进行页面创建，且自动支持滑动翻页效果。代码如下...
一步步学习《Spring 实战第5版》--（7）创建订单页面
上一章我们创建了配料选择页面，用户在选择好订单后，我们的控制器会跳转到一个订单页面。目前我们的订单页面还没有实现，...
iOS-常用代码块
代码块(Snippet)，方便了代码快速创建。管理：在新版Xcode中管理页面在编译器的右上角添加：选中代码鼠...
设计观察06-页面滑动时重要信息一直展示
京东客户端确认订单页面，当向下滑动页面时，地址栏在页面底部用提示的方式再次展示。
SAP Cloud for Customer销售订单Extern
SAP Cloud for Customer的销售订单创建页面里，我们可以给一个订单维护External Note...