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"> 收藏商品</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"> 件 库存：{$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']]; } }
