美文网首页开发中的生活iOS专题资源__UI专题fresh
iOS之商城应用中物品属性选择+购物车功能+订单确认

iOS之商城应用中物品属性选择+购物车功能+订单确认

作者: 华之曦 | 来源:发表于2016-04-06 18:46 被阅读5807次

本实例直接从当前项目中拉出来,实现的功能简单,但是在自己实现的时候用的代码老多多,而且当前只接收两组属性,不过属性实现了自动向下布局,超出屏幕可以上下滑动,但封装性不强,希望得到牛人指点。
下面简单介绍实现方法。


1.购物车属性选择功能

购物属性选择.gif
  • 获取物品属性信息,并将数据直接转换为模型数据。
/**
 *  获取 商品属性 数据
 */
- (void)getGoodAttrData {
    NSString *URL = [NSString stringWithFormat:@"%@/App/Sylm/yclist",SERVERURL];
    NSMutableDictionary *paramas = [NSMutableDictionary dictionary];
    paramas[@"method"] = @"goods_attr";
    paramas[@"goods_id"] = @"11";
    [LXHttpTool post:URL params:paramas success:^(id json) {
        NSLog(@"%@", json);
        NSInteger status = [json[@"status"] integerValue];
        if (status == 1) {
            NSArray *goodAttrsArr = [GoodAttrModel mj_objectArrayWithKeyValuesArray:json[@"data"]];
            self.goodAttrsArr = goodAttrsArr;      
        } else {
            [SVProgressHUD showErrorWithStatus:@"暂无商品属性" maskType:SVProgressHUDMaskTypeGradient];
        }
    } failure:^(NSError *error) {
        [SVProgressHUD showErrorWithStatus:@"请重新加载" maskType:SVProgressHUDMaskTypeGradient];
        NSLog(@"%@", error);
    }];
}
  • 传递数据模型,生成相应的物品属性按钮,其中主要用到的是for循环实现对按钮的布局。代码如下:
NSArray *attrValueArr0 = ((GoodAttrModel *)goodAttrsArr[0]).attr_value;
CGFloat one_btnsX = kBigMargin;
CGFloat one_btnY = CGRectGetMaxY(_firstAttributeLbl.frame) + kSmallMargin;
for (int i = 0; i < attrValueArr0.count ; i++) {
    NSString *btnTittle = ((GoodAttrValueModel *)attrValueArr0[i]).attr_value;
    CGSize size = [btnTittle sizeWithAttributes:[NSDictionary dictionaryWithObjectsAndKeys:kButtonTextFont, NSFontAttributeName, nil]];
    UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
    [btn setTitle:btnTittle forState:UIControlStateNormal];
    btn.titleLabel.font=[UIFont boldSystemFontOfSize:13];
    btn.tag = i;
    [btn addTarget:self action:@selector(attrs1BtnClick:) forControlEvents:UIControlEventTouchUpInside];
    btn.frame = CGRectMake(one_btnsX, one_btnY, size.width + 30, 35);
    one_btnsX += kBigMargin + size.width + kBigMargin;

    while (one_btnsX  > kScreenW) {
        one_btnsX = kBigMargin;
        one_btnY += 45;
        if ((one_btnsX + size.width + 30) > kScreenW) {
            one_btnsX = kBigMargin;
            break;
        }
        btn.frame = CGRectMake(one_btnsX, one_btnY, size.width + 30, 35);
        one_btnsX += 15 + size.width + kBigMargin;
    }
    [btn defaultStyleWithNormalTitleColor:HX_RGB(136, 137, 138) andHighTitleColor:kWhiteColor andBorderColor:LXBorderColor andBackgroundColor:kWhiteColor andHighBgColor:kMAINCOLOR andSelectedBgColor:kMAINCOLOR withcornerRadius:2];
    [self.scrollView addSubview:btn];
    [self.firstBtnsArr addObject:btn];
}
  • 通过Block来传递选中的属性,如下:
@property (nonatomic, copy) void (^sureBtnsClick)(NSString *num, NSString *attr_id, NSString *goods_attr_value_1, NSString *goods_attr_value_2);

#pragma mark - 按钮点击事件
- (void)sureBtnClick {
    // 购买数量
    NSString *num = self.buyNumsLbl.text;
    // 属性ID str
    NSString *attr_id1 = [NSString stringWithFormat:@"%@-%@", _goods_attr_1, _goods_attr_value_1];
    NSString *attr_id2 = [NSString stringWithFormat:@"%@-%@", _goods_attr_2, _goods_attr_value_2];
    NSString *attr_id = [NSString stringWithFormat:@"%@|%@", attr_id1, attr_id2];
    if (self.sureBtnsClick) {
        self.sureBtnsClick(num, attr_id, self.goods_attr_value_1, self.goods_attr_value_2);
    }
    [self removeView];
}

2.购物车功能

  • 选择,删除(+滑动删除)和收藏功能
    其中大部分通过block来实现,涉及的逻辑有些绕,好乱,不过功能还是实现了。效果如下图:


    购物车功能演示

3.订单确认页面

  • 实现购物车选定商品之后,进入订单确认支付页面。
  • 有三种支付方式:支付宝、微信和银联。
  • 收货地址选择(未完成)。
    效果图如下:


    订单确认

小结:回头研究下用SDAutoLayout来实现此种自动布局,最近一直在体验此框架。
令附上Demo地址--->传送门[Github],注:在此感谢朋友的阅读。

相关文章

  • iOS之商城应用中物品属性选择+购物车功能+订单确认

    本实例直接从当前项目中拉出来,实现的功能简单,但是在自己实现的时候用的代码老多多,而且当前只接收两组属性,不过属性...

  • 网上商城开发中的订单系统功能介绍

    网上商城开发当中有一个非常重要的功能应用,那就是商城系统的订单功能,这个功能应用是承接了商城能够实现产品被购买然后...

  • 20170724  输入框,始于UIScrollView

    iOS开发——做购物车,看我就够了 iOS 走近商城 APP(二 购物车常用控件) iOS开发之顶部状态栏stat...

  • 迅猫

    手机移动端商城说明文件 1.首页 2.全部商品 3.购物车 4.我的 5.确认订单 6.订单中心

  • 阻止事件冒泡

    最近在做一个商城项目,在确认订单页选择地址列表中的某个地址时,跳转回确认订单页,当需要编辑的时候跳转到修改地址页面...

  • 01 订单系统整体流程

    《1》订单系统业务流程 【1】确认订单信息 当用户对购物车中的选中的一批商品确认下单的时候,会先出来一个确认订单的...

  • Objective-C中的深浅拷贝

    项目中遇到把购物车中勾选的商品数据传递到订单确认页面时,我直接将整个购物车商品的数据模型传递过去,然后再在订单确认...

  • 购物车订单模块

    一、整体流程图 结构图image 二、购物车需求 1.1、购物车中的物品可以修改数量1.2、购物车中的物品可以选择...

  • UITableView中的键盘处理

    本文的产生主要是因为业务的需求,我在做电商app时,需要在购物车的确认订单界面,添加买家留言功能,设计在每一个订单...

  • 杭州APP开发:传统企业为什么要开发电商类APP开发?

    随着移动互联网的高速发展,移动商城类APP开发是集合产品展示、产品推荐、购物车、在线支付、查看物流、订单管理等功能...

网友评论

  • 乱世小猿:兄弟. 你上面pod的那个yy封装类我pod不了啊。 报错。
    华之曦:@如若只幻听 是YYKit吗,这要看下你的错误信息。
  • 江R:最近也在做一个 商城类的项目,急需这方面的资料,谢楼主!这方面的求分享啊
    华之曦:@江R 你说的应该联动吧,点左边,右边刷新?
    江R:@华之曦 在分类时用多级菜单来实现吗?怎么实现
    华之曦:@江R 可以,有遇到问题可以一起讨论一下。
  • 羊肉泡馍啊:我们现在要做一个多属性的,根据数据显示有几个属性该怎么处理,能发个这种demo吗,大神
    QQ: 1474286853
    华之曦:@秋天的菠菜_9cb1 什么?
    羊肉泡馍啊:@华之曦 需要
    华之曦:@秋天的菠菜_9cb1 需要联动的不?
  • 叶舞清风:谢谢分享
    华之曦:@叶舞清风 谢谢。
  • ZouJgg:你好,我现在做一个多个属性筛选的一个功能,在做的时候筛选出来的结果是对的 ,但是当我取消选中的时候,本应该出现的是上一次选中的筛选的结果 ,然而到这一步的时候就出乱。不知道大神您有没有时间,可以不可以帮我看看,代码是什么地方没判断好 :smile: 谢谢qq:1037238325
    被丢掉的咸鱼:@华之曦 匹配的
    华之曦: @WOSHILUANMA 你的需求是匹配型的,还是自主型的?
    被丢掉的咸鱼:@gleenKi 实现多属性选择了吗。求助啊@华之曦:scream::scream::scream:
  • 乘务员:我可能说错了,不是多个属性的选择,是多个属性的布局怎么实现,你现在的demo只有俩个属性项的布局,我想知道多个属性怎么布局。 @华之曦
    华之曦: @乘务员 小白一枚。
    乘务员:真是太感谢了,明天我等着大神指导。 @华之曦 :smile:
    华之曦: @乘务员 明天我再给你发一个,你看下吧。
  • 乘务员:请问一下怎么实现多个属性的选择,还请说下思路,在下小白一枚。谢谢。 @华之曦
    华之曦: @乘务员 也可以用collectionView来实现。
    乘务员:谢谢大神指导,现在正好遇到这个问题,照着你的写完前俩个属性,第三个却无法实现。
    华之曦:@乘务员 修改一下按钮不单选,明天我看下我的代码,给你回复呗。
  • 锈色的栅栏:怎么能实现商品多个属性布局
    锈色的栅栏:谢谢,我是使用collectionView进行的商品属性布局,感觉那个比较方便些!
    华之曦:@锈色的栅栏 目前想到的方法是判断返回的属性个数进行属性布局,添加一个按钮属性for循环就行了。主要是我们这个项目对属性进行限制死了,最多只有两个属性,嘿嘿。
  • 8ae158dda3f2:最后的block有必要weak么?嗯,SDAutoLayout我也在用
    华之曦:@_NevinZ 多谢指点,已更改,这点确实没有注意到, :smiley:

本文标题:iOS之商城应用中物品属性选择+购物车功能+订单确认

本文链接:https://www.haomeiwen.com/subject/okqmlttx.html