商城后台添加多规格属性

数据库设计：

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

商城后台添加多规格属性

猜你喜欢