MySQL-THINKPHP 商城系统二 商品模块的展示

上回已经说到，商品被分为spu商品和sku商品  ，  

 

---------------------------------------------------------------------------------------------------------------------------------

难点一   商品列表页的展示

 

由于spu商品没有价格，所有商品列表展示页，我们决定展示sku商品

    public function index()
    {
        $where = [];
        $where[\'status\'] = \'1\';
        $where[\'stock\'] = [\'GT\' , \'0\' ];
        
        $list = Goodssku::order(\'create_time\',\'desc\')->where($where)->paginate(6);


        $this->assign(\'goods_sku_list\',$list);
        return $this->fetch();
    }

 

 

 

---------------------------------------------------------------------------------------------------------------------------------

难点二    商品详情页的展示

 

我们采用sku和spu的组合展示

即 ： sku基于spu ，spu生成sku

 

 

比如用户点击商品列表的某个sku商品，

前台逻辑：

　　1，接收sku_id

　　2,由sku_id 得到 sku商品数组和spu商品数组

　　3，把spu的json（sku_attribute_list） 和spu的json（specs_list）分别转换成数组

　　4，遍历它们，得到一个新数组

array(2) {
  ["颜色"] => array(2) {
    [0] => array(2) {
      ["string"] => string(8) "27英寸"
      ["json"] => string(33) "{"\u989c\u8272":"27\u82f1\u5bf8"}"
    }
    [1] => array(3) {
      ["is_active"] => string(1) "1"
      ["string"] => string(10) "21.5英寸"
      ["json"] => string(35) "{"\u989c\u8272":"21.5\u82f1\u5bf8"}"
    }
  }
  ["版本"] => array(2) {
    [0] => array(2) {
      ["string"] => string(35) " i5-8400 8G 1T 2G独显 WIFI 蓝牙"
      ["json"] => string(66) "{"\u7248\u672c":" i5-8400 8G 1T 2G\u72ec\u663e WIFI \u84dd\u7259"}"
    }
    [1] => array(3) {
      ["is_active"] => string(1) "1"
      ["string"] => string(25) "i5-8400 8G 1T WIFI 蓝牙"
      ["json"] => string(50) "{"\u7248\u672c":"i5-8400 8G 1T WIFI \u84dd\u7259"}"
    }
  }
}

这个数组将展示到前台为规格选项，其中

["is_active"] => string(1) "1"

代表该项spu属性值是当前sku的属性值，在前台页面会被默认选中，代表当前的sku

 ["string"] => string(25) "i5-8400 8G 1T WIFI 蓝牙"

代表前台展示的规格待选取项

["json"] => string(50) "{"\u7248\u672c":"i5-8400 8G 1T WIFI \u84dd\u7259"}"
代表当前规格，对应的json字符串

展示为：

 

 

 

---------------------------------------------------------------------------------------------------------------------------------

难点二    实现用户，重选属性，生成新的sku

逻辑：用户点击了一个属性之后就判断：

　　是否每一项属性都有一个属性值是active的状态，如果不是 return

　　如果是，那么就代表可以生成新的sku商品，

　　此时，得到每个选中属性值的json，用ajax传送到后台，

　　后台把json串联成一个json字符串，再在goodsssku模型 里面找到匹配这个json字符串的sku_id

　　前台js接收到sku_id,跳转到指定sku页面，重新渲染

 

 

　　前台代码

</style>
    <div class="col-md-8">
        <div class="row">
            <div class="col-md-5"> 
                    <div class="row">
                    <img  class="detail_img" style="width: 100%;" src="__STATIC__/uploads/
                        {if $goodssku.small_img!=\'\'}
                                {$goodssku.small_img}        
                        {else/}
                                {$goods.img}
                        {/if}
                          " alt="...">
                    </div>
                    <div class="row" style="color: gray; margin-left: 10px;margin-top: 10px;">
                         <a onclick="save({$goodssku.id},this)" href="#"><span class="glyphicon glyphicon-star"></span><span id="save">&nbsp;收藏商品</span></a>
                    </div>
            </div>

            <div class="col-md-7">
                <div class="title">  <h4>{$goods.name}</h4>     
                    <span  style="color:red"> {$goodssku.keyword}</span>
                    
                </div>
                <br>
                <div class="price" style="background-color: #FFF8DC;">特惠价:<span style="color: red; font-weight: 3px; font-size: 22px;"> {$goodssku.price}¥</span>
                    <span style="float: right;">累计评价<br>0</span>
                </div>
                <br>
                {foreach name="sku_data" item="vo"}
                    <div><span style="color: gray;" class="key_class  tonek"> 选择{$key}：</span>
                        {volist name="vo" id="attr"}
                            <li><button onclick="main(this)" class="btn btn-default
                            {if isset($attr.is_active) && ($attr.is_active == \'1\')}
                                active
                            {/if}                            
                                " type="button" >{$attr.string} </button><input type="hidden" value=\'{$attr.json}\'></li>
                        {/volist}

                    </div>
                {/foreach}
                

                <div class="stock" style="color:gray;margin-top: 20px;">  数量 <input type="number" id="sku_num" style="width: 40px;" min="1" max="{$goodssku.stock}" value="1"> 件   &nbsp;  &nbsp; &nbsp;库存：{$goodssku.stock}件</div>

                <button onclick="add_cart({$goodssku.id})" style="margin-top: 20px; width: 150px;" type="button" class="btn btn-danger btn-lg" 
                 {if $goodssku.stock<1}
                    disabled
                 {/if}

                >

                  
                 {if $goodssku.stock<1}
                     无货
                     {else/}
                     加入购物车
                 {/if}
                </button>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12"> 
                <hr>
                <div >

                </div>
            </div>
        </div>
    </div>

    <script>
        function main(obj){
            //如果每个都有一个button被选择了就。。。
            $(obj).parent().siblings().each(function(){
                $(this).children(\'button\').removeClass(\'active\');
            });
            
            $(obj).addClass(\'active\');

            //每一个菜单都有一个选中
            var jsonData = new Array();
            $(".key_class").each(function(){
                var length = $(this).siblings(\'li\').children(\'button.active\').length;
                if(length==1){
                    var json = $(this).siblings(\'li\').children(\'button.active\').next().val();
                    jsonData.push(json);
                }

            });

            if({:count($sku_data)} == jsonData.length){
                console.log(jsonData);
            }

            $.post("{:url(\'goods/getSkuId\')}",{jsonData:jsonData},function(data){
                if(data.ok == \'1\'){
                    //跳转到指定sku页面
                    $url = "{:url(\'goods/detail\')}?sku="+data.sku_id;
                    window.location.href=$url;
                    /*alert($url);*/
                }else{

                }
            });

        }

 

　

后台代码

    //得到sku
    public function getSkuId(){
        $data = $_POST[\'jsonData\'];
        $json = \'{\';
        foreach ($data as $key => $value) {
            $x = substr($value,1,strlen($value)-2);
    
            $json .= $x;

            if((count($data) - $key) != 1){
                $json.= \',\';
            }
        }
        $json .= \'}\';

        $goodssku = Goodssku::get([\'specs_list\'=>$json]);
        if($goodssku){
            return [\'ok\'=>\'1\',\'sku_id\'=>$goodssku[\'id\']];
        }
    }