有一次淘宝搞活动,有姐妹跟我吐槽,说她在购物车一键下单商品,被淘宝提示最多只能一次下单50个商品,导致一些商品没有抢到……在电商直播系统中,购物车功能是非常常见且重要的基础功能,它负责暂时存放用户感兴趣但仍在考虑的商品,方便用户进行比较,同时可以通过多个商品一键下单的方式实现促销功能。

在本篇文章中,你可以学到,云豹科技是如何在云豹电商直播源码中实现购物车功能的。

一、编辑功能

首先,设置右上角的编辑功能

self.rightBtn.hidden = NO;
[self.rightBtn setTitle:YZMsg(@"编辑") forState:0];
[self.rightBtn setTitleColor:[UIColor blackColor] forState:0];
[self initData];
[self.view addSubview:self.carTable];

二、底部全选功能

UI包括全选功能、删除功能、结算功能

-(void)createBottom{
bottomView = [[UIView alloc]initWithFrame:CGRectMake(0, _window_height-50, _window_width, 50)];
bottomView.backgroundColor = [UIColor whiteColor];
[self.view addSubview:bottomView];

allSelBtn = [UIButton buttonWithType:0];
allSelBtn.frame = CGRectMake(0, 10, 80, 30);
[allSelBtn setImage:[UIImage imageNamed:@"记录未选"] forState:0];
[allSelBtn setImage:[UIImage imageNamed:@"记录选中"] forState:UIControlStateSelected];
[allSelBtn setTitle:YZMsg(@"全选") forState:0];
allSelBtn.titleLabel.font = [UIFont systemFontOfSize:14];
[allSelBtn setTitleColor:[UIColor blackColor] forState:0];
[allSelBtn setTitleEdgeInsets:UIEdgeInsetsMake(0, 10, 0, 0)];
[allSelBtn addTarget:self action:@selector(allSelClick:) forControlEvents:UIControlEventTouchUpInside];
[bottomView addSubview:allSelBtn];


deleteBtn = [UIButton buttonWithType:0];
deleteBtn.frame = CGRectMake(_window_width-90, 10, 80, 30);
[deleteBtn setTitleColor:normalColors forState:0];
[deleteBtn setTitle:@"删除" forState:0];
deleteBtn.titleLabel.font = [UIFont systemFontOfSize:14];
deleteBtn.layer.cornerRadius = 15;
deleteBtn.layer.borderColor = normalColors.CGColor;
deleteBtn.layer.borderWidth = 1;
deleteBtn.layer.masksToBounds = YES;
[deleteBtn addTarget:self action:@selector(deleteClick) forControlEvents:UIControlEventTouchUpInside];
[bottomView addSubview:deleteBtn];


subView = [[UIView alloc]initWithFrame:CGRectMake(_window_width/2, 0, _window_width/2, 50)];
subView.backgroundColor = [UIColor whiteColor];
[bottomView addSubview:subView];

submitBtn = [UIButton buttonWithType:0];
submitBtn.frame = CGRectMake(subView.width-125, 7, 115, 36);
submitBtn.layer.cornerRadius = 18;
submitBtn.layer.masksToBounds = YES;
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = submitBtn.bounds;
gradientLayer.startPoint = CGPointMake(0, 0);
gradientLayer.endPoint = CGPointMake(1, 0);
gradientLayer.locations = @[@(0),@(1.0)];//渐变点
[gradientLayer setColors:@[(id)[RGB(252, 87, 48) CGColor],(id)[RGB(253, 125, 59) CGColor]]];//渐变数组
[submitBtn.layer addSublayer:gradientLayer];

[submitBtn setTitle:@"结算(0)" forState:0];
[submitBtn setTitleColor:[UIColor whiteColor] forState:0];
// [submitBtn setBackgroundColor:normalColors];
submitBtn.titleLabel.font = [UIFont systemFontOfSize:14];
[submitBtn addTarget:self action:@selector(SettlementClick) forControlEvents:UIControlEventTouchUpInside];
[subView addSubview:submitBtn];

allPriceLb = [[UILabel alloc]init];
allPriceLb.font = [UIFont systemFontOfSize:14];
NSString *normalStr = @"合计:¥0";
NSMutableAttributedString *contentStr = [[NSMutableAttributedString alloc] initWithString:normalStr];
NSRange redRange = NSMakeRange(3, normalStr.length-3);
[contentStr addAttributes:@{NSForegroundColorAttributeName:[UIColor orangeColor],NSFontAttributeName:[UIFont boldSystemFontOfSize:16]} range:redRange];
allPriceLb.attributedText = contentStr;
[subView addSubview:allPriceLb];
[allPriceLb mas_makeConstraints:^(MASConstraintMaker *make) {
make.right.equalTo(submitBtn.mas_left).offset(-5);
make.centerY.equalTo(submitBtn.mas_centerY);
}];

}

三、主体页面

用tableview来展示,初始化界面以及设置代理

-(UITableView *)carTable{
if (!_carTable) {
_carTable = [[UITableView alloc]initWithFrame:CGRectMake(0, 64+statusbarHeight, _window_width, _window_height-64-statusbarHeight) style:UITableViewStylePlain];
_carTable.delegate = self;
_carTable.dataSource = self;
_carTable.separatorStyle = UITableViewCellSeparatorStyleNone;
_carTable.mj_header = [MJRefreshHeader headerWithRefreshingBlock:^{
[self requstData];
}];
_carTable.mj_footer = [MJRefreshBackFooter footerWithRefreshingBlock:^{
[self requstData];

}];
}
return _carTable;
}

四、计算选中商品的价格

头部分组选中,在section上设置选中按钮,当点击按钮时选中当前分组,再次点击取消选中,同时计算选中商品的价格。

这里多说一句,我们文章开头提到的,某宝一次最多下单五十个商品,一是有对运营方面的考量,比如对客户信用值的考虑,二是为了缓解技术压力,尤其是在双十一等活动日,各种优惠措施叠加,计算选中商品的价格的时间会被延长,很容易影响加载时间,甚至导致服务器宕机,为避免这类尴尬情况,某宝不得已出台了相关措施。

电商直播系统一旦到了某个体量,就不得不出台一定的限制措施来节约资源了。

-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
ShopCarListModel*listModel = self.listArr[section];
_headerView = [tableView dequeueReusableHeaderFooterViewWithIdentifier:@"ShopHistoryHeader"];
if (_headerView == nil) {
_headerView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, _window_width, 40)];
_headerView.backgroundColor = [UIColor whiteColor];

}
_headerView.tag = section;
sectionBtn = [UIButton buttonWithType:0];
sectionBtn.frame = CGRectMake(15, 8, 22, 22);
sectionBtn.tag = section;
[sectionBtn setImage:[UIImage imageNamed:@"记录未选"] forState:UIControlStateNormal];
[sectionBtn setImage:[UIImage imageNamed:@"记录选中"] forState:UIControlStateSelected];
[sectionBtn addTarget:self action:@selector(sectionBtnClick:) forControlEvents:UIControlEventTouchUpInside];
[self.headerView addSubview:sectionBtn];
sectionBtn.hidden = YES;

UIImageView *shopicon = [[UIImageView alloc]init];
shopicon.layer.cornerRadius = 13;
shopicon.layer.masksToBounds = YES;
[shopicon sd_setImageWithURL:[[self.infos[section] valueForKey:@"shop_info"] valueForKey:@"avatar"]];
[_headerView addSubview:shopicon];
sectionBtn.hidden = NO;
shopicon.frame = CGRectMake(sectionBtn.right+10, 5, 26, 26)
UILabel *dateLb = [[UILabel alloc]init];
// dateLb.frame = CGRectMake(shopicon.right+10, 8, _window_width, 22);
dateLb.text = [[self.infos[section] valueForKey:@"shop_info"] valueForKey:@"name"];

dateLb.font = [UIFont systemFontOfSize:14];
dateLb.textColor = [UIColor blackColor];
[_headerView addSubview:dateLb];
[dateLb mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(shopicon.mas_right).offset(5);
make.centerY.equalTo(shopicon.mas_centerY);
}];

UIImageView *rightImg = [[UIImageView alloc]init];
rightImg.image = [UIImage imageNamed:@"shop_right"];
[_headerView addSubview:rightImg];
[rightImg mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(dateLb.mas_right);
make.centerY.equalTo(dateLb.mas_centerY);
make.width.height.mas_equalTo(16);
}];
sectionBtn.selected = listModel.groupSelected;
if (listModel.goods_list.count == 0) {
return nil;
}
return self.headerView;
}

五、电商直播源码中商品全选功能实现

首先修改全选按钮的状态。如果头部按钮不是选中状态,则调用头部选中按钮的方法选中整个分组

#pragma mark-----全部选择--------
-(void)allSelClick: (UIButton*)allSelectedBtn{
allSelectedBtn.selected = !allSelectedBtn.selected; // 修改全选按钮的状态
if (allSelectedBtn.selected) { // 如果全选按钮改变了为选中
for (int i = 0; i <self.listArr.count; i ++) {
ShopCarListModel * listModel = self.listArr[i];
if (!listModel.groupSelected) {//遍历如果组不是选中状态
[self headerSelectedBtnClick:i]; //模拟组头点击了一次
}
}
}else{
for (int i = 0; i < self.listArr.count; i ++) { // 遍历所有的组头点击
[self headerSelectedBtnClick:i];
}
}
}

六、头部分组点击选中功能实现

从数据源中依次取出列表的外层model,设置临时属性记录数量,设置里层model的选中状态,当个数相同时,整个分组成六、 全部选中状态

- (void)headerSelectedBtnClick:(NSInteger)section {
ShopCarListModel*listModel = self.listArr[section];
listModel.groupSelected = !listModel.groupSelected;
// 判断如果点击 | header选中
if (listModel.groupSelected) {
// /// 判断组头的点击改变全选按钮
NSInteger tempGroupSelectNum = 0;
for (ShopCarListModel *model in self.listArr) {
if (model.groupSelected) {
tempGroupSelectNum ++;
}
if (tempGroupSelectNum == self.listArr.count) {
allSelBtn.selected = YES;

}
}
for (ShopCarModel* goodsModel in listModel.goods_list) {
if (!goodsModel.isSelected) { //下面不是选中状态的cell
goodsModel.isSelected = YES;
}
}
} else { // 取消header选中 所有都取消
//全选按钮变为不选中
allSelBtn.selected = NO;

for (ShopCarModel* goodsModel in listModel.goods_list) {
goodsModel.isSelected = NO;
}
}

[_carTable reloadData];
[self getAllPric];
}

七、 电商直播源码中商品删除功能实现

从数据源中取出相应的model,如果model 的状态是选中状态,则放入选中数组,处理数据上传接口

-(void)deleteClick{

[selectHistory removeAllObjects];
for (int i = 0; i < self.listArr.count; i ++) {
ShopCarListModel*listModel = self.listArr[i];
for (ShopCarModel* goodsModel in listModel.goods_list) {
if (goodsModel.isSelected) {
[selectHistory addObject:goodsModel];
}
}
}
NSString *delId = @"";
for (ShopCarModel *model in selectHistory) {
delId = [delId stringByAppendingFormat:@"%@,",model.idStr];
}
NSRange range = NSMakeRange(delId.length-1, 1);
delId = [delId stringByReplacingCharactersInRange:range withString:@""];

NSString *url = [purl stringByAppendingFormat:@"?service=Buyer.delShopCartGoods"];

NSDictionary *signdic = @{@"uid":[Config getOwnID],@"token":[Config getOwnToken], @"time":[NSNumber numberWithLong: (long)[[NSDate date] timeIntervalSince1970]]};
NSString *sign = [YBToolClass dynamicSortString:signdic];

NSDictionary *dic = @{
@"uid":[Config getOwnID],
@"token":[Config getOwnToken],
@"time":[NSNumber numberWithLong: (long)[[NSDate date] timeIntervalSince1970]],
@"goodsids":delId,
@"sign":sign
};
NSLog(@"-=-=-=-=:%@", dic);
[YBNetworking postWithUrl:url Dic:dic Suc:^(NSDictionary *data, NSString *code, NSString *msg) {
if ([code isEqual:@"0"]) {
[self requstData];
}else{
[MBProgressHUD showError:msg];
}
} Fail:^(id fail) {

}];

}

以上就是本文全部内容,该源代码节选自云豹电商直播系统源码,仅供参考,如需商用请支持正版。

声明:以上内容为作者:云豹科技官方 本人原创,未经作者本人同意,禁止转载,否则将追究相关法律责任