zoukankan      html  css  js  c++  java
  • 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) "{"u989cu8272":"27u82f1u5bf8"}"
        }
        [1] => array(3) {
          ["is_active"] => string(1) "1"
          ["string"] => string(10) "21.5英寸"
          ["json"] => string(35) "{"u989cu8272":"21.5u82f1u5bf8"}"
        }
      }
      ["版本"] => array(2) {
        [0] => array(2) {
          ["string"] => string(35) " i5-8400 8G 1T 2G独显 WIFI 蓝牙"
          ["json"] => string(66) "{"u7248u672c":" i5-8400 8G 1T 2Gu72ecu663e WIFI u84ddu7259"}"
        }
        [1] => array(3) {
          ["is_active"] => string(1) "1"
          ["string"] => string(25) "i5-8400 8G 1T WIFI 蓝牙"
          ["json"] => string(50) "{"u7248u672c":"i5-8400 8G 1T WIFI u84ddu7259"}"
        }
      }
    }

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

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

    代表该项spu属性值是当前sku的属性值,在前台页面会被默认选中,代表当前的sku
     ["string"] => string(25) "i5-8400 8G 1T WIFI 蓝牙"
    代表前台展示的规格待选取项
    ["json"] => string(50) "{"u7248u672c":"i5-8400 8G 1T WIFI u84ddu7259"}"
    代表当前规格,对应的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=" 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=" 40px;" min="1" max="{$goodssku.stock}" value="1">&nbsp;  &nbsp; &nbsp;库存:{$goodssku.stock}件</div>
    
                    <button onclick="add_cart({$goodssku.id})" style="margin-top: 20px;  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']];
            }
        }
  • 相关阅读:
    1144 The Missing Number (20分)
    1145 Hashing
    1146 Topological Order (25分)
    1147 Heaps (30分)
    1148 Werewolf
    1149 Dangerous Goods Packaging (25分)
    TypeReference
    Supervisor安装与配置()二
    谷粒商城ES调用(十九)
    Found interface org.elasticsearch.common.bytes.BytesReference, but class was expected
  • 原文地址:https://www.cnblogs.com/cl94/p/9626999.html
Copyright © 2011-2022 走看看