商城后台添加多规格属性

数据库设计:

1、商品表 

2、商品和属性的关系表

3、属性表

4、属性值表

5、商品和属性值的关系表

6、SKU表

大概关系如下:

根据实际需要,增删表结构

我们后台管理系统中需要实现的效果图如下:

后台代码重点逻辑

如何将属性和属性值,如图排列显示,这里我们用到递归排序的方法

    private $index=0;

    //属性值组合
    public function combineAttributes($attr){
        $m_len = count($attr);
        if($m_len >= 2){
            $result = $this->recurse($attr[$this->index],$attr[++$this->index],$m_len,$attr);
        }else{
            $result = $attr[0];
        }
        foreach ($result as $k=>$v){
            $result[$k] = explode(",",$v);
        }
        return $result;
    }
    //属性名 递归拼接属性
    public function recurse($array1,$array2,$m_len,$attr){
        $res = array();
        foreach ($array1 as $a1){
            foreach ($array2 as $a2){
                array_push($res,$a1.','.$a2);
            }
        }
        $this->index++;
        if($this->index <= $m_len-1){
            return $this->recurse($res,$attr[$this->index],$m_len,$attr);
        }else{
            return $res;
        }
    }

将拼接好属性值组合存入sku表中,这样每种搭配对应的价格,库存都是不一样的

前端实现随机点属性值组合,传给后端获取对应的库存和价格,代码思路如下:

 //type=1是单规格,type!=1是多规格
  
 <view class="spec" wx:if="{{product.arrGoodsSku.type=='1'}}">
    <view class="name">产品规格</view>
    <view class="list">
      <view class="type {{selectId===item.id?'type-active':''}}" wx:for="{{product.arrGoodsSku.data}}" wx:key="index" bindtap="selectType" data-id="{{item.id}}">{{item.color}}</view>
    </view>
  </view>
  <view class="spec" wx:if="{{product.arrGoodsSku.type!='1'}}" wx:for="{{product.arrGoodsSku.data}}" wx:key="index" wx:for-item="dataitem" wx:for-index="dataindex">
    <view class="name">{{dataitem.name}}</view>
    <view class="list">
      <view class="type {{selectId[dataindex]===item.id?'type-active':''}}" wx:for="{{dataitem.attr_val}}" wx:key="index" bindtap="selectType" data-id="{{item.id}}" data-dataindex="{{dataindex}}">{{item.name}}</view>
    </view>
  </view>
  async selectType(e) {      
      let id = $attr(e, 'id');      
      //获取到当前点击的父级的下标
      let dataindex = parseInt($attr(e, 'dataindex'));
      //获取到的id存入数组
      this.data.skuarr[dataindex] = id
      //把数组转换成字符串
      let stringsku = this.data.skuarr.join(',');
  }

参考思路:https://www.lovchun.com/posts/83089735-9b7e-4d49-bc98-43cd243e226e.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值