商品详情
1.后台代码
public function detail($id) { //验证参数 商品id是否为纯数字 if (!intval($id)) { $this->error('参数不正确', '/home/goods/index'); } //根据id查询商品表和商品相册表，规格商品表 $goods = \app\home\model\Goods::with('goodsImage,specGoods')->find($id)->toArray(); //页面默认显示 商品第一个sku的价格,库存，成本价 替换到$goods中 if (!empty($goods['spec_goods'])) { //判断第一个sku的商品价格是否大于0 是就将值替换到$goods中 if ($goods['spec_goods'][0]['price'] > 0) { $goods['goods_price'] = $goods['spec_goods'][0]['price']; } //将sku的成本价替换到商品表中 if ($goods['spec_goods'][0]['cost_price'] > 0) { $goods['cost_price'] = $goods['spec_goods'][0]['cost_price']; } if ($goods['spec_goods'][0]['store_count'] > 0) { $goods['goods_number'] = $goods['spec_goods'][0]['store_count']; } else { $goods['goods_number'] = 0; } } //将商品属性转化为数组 $goods['goods_attr'] = json_decode($goods['goods_attr']); /*echo "<pre>"; print_r($goods);die();*/ //查询规格主键id $value_ids = array_column($goods['spec_goods'], 'value_ids'); $value_ids = array_unique(explode('_', implode('_', $value_ids))); // print_r($value_ids);die(); Array ( [0] => 18 [1] => 21 [3] => 22 [4] => 19 ) //根据value_ids 查询规格值 $specValue = SpecValue::with('spec')->where('id', 'in', $value_ids)->select(); $specValue = collection($specValue)->toArray(); /*echo "<pre>"; print_r($specValue);die();*/ //将specValue的格式处理 $res = []; foreach ($specValue as $v) { $res[$v['spec_id']] = [ 'spec_id' => $v['spec_id'], 'spec_name' => $v['spec_name'], 'spec_values' => [] ]; } foreach ($specValue as $v) { $res[$v['spec_id']]['spec_values'][] = $v; } /*echo "<pre>"; print_r($res); die();*/ //Array ( // [19] => // Array ( // [spec_id] => 19 [spec_name] => 颜色 [spec_values] => // Array ( [0] => Array ( [id] => 18 [spec_id] => 19 [spec_value] => 黑色 [type_id] => 16 [spec_name] => 颜色 ) // [1] => Array ( [id] => 19 [spec_id] => 19 [spec_value] => 白色 [type_id] => 16 [spec_name] => 颜色 ) ) ) // [20] => // Array ( // [spec_id] => 20 [spec_name] => 版本 [spec_values] => // Array ( // [0] => Array ( [id] => 21 [spec_id] => 20 [spec_value] => 全网通 [type_id] => 16 [spec_name] => 版本 ) // [1] => Array ( [id] => 22 [spec_id] => 20 [spec_value] => 单网通 [type_id] => 16 [spec_name] => 版本 ) ) ) ) $value_ids_map = []; foreach ($goods['spec_goods'] as $v) { $row = [ 'id' => $v['id'], 'price' => $v['price'] ]; $value_ids_map[$v['value_ids']] = $row; } // $value_ids_map = json_encode($value_ids_map); /*echo $value_ids_map;die();*/ //{"18_21":{"id":801,"price":"1000.00"},"18_22":{"id":802,"price":"1100.00"},"19_21":{"id":803,"price":"1200.00"},"19_22":{"id":804,"price":"1200.00"}} $this->assign('value_ids_map', $value_ids_map); $this->assign('specs', $res); $this->assign('goods', $goods); return view(); }
2.前端页面展示 jquery
1 <div id="specification" class="summary-wrap clearfix"> 2 {foreach $specs as $v} 3 <dl> 4 <dt> 5 <div class="fl title"> 6 <i>{$v.spec_name}</i> 7 </div> 8 </dt> 9 {foreach $v['spec_values'] as $k=>$vo} 10 <dd><a spec_values_id="{$vo.id}" href="javascript:;" class="{if($k==0)}selected{/if}">{$vo.spec_value}<span 11 title="点击取消选择"> </span></a></dd> 12 {/foreach} 13 </dl> 14 {/foreach} 15</div> 16 <div class="summary-wrap"> 17 <div class="fl title"> 18 <div class="control-group"> 19 <div class="controls"> 20 <input id="number" autocomplete="off" type="text" value="1" minnum="1" 21 class="itxt"/> 22 <a href="javascript:void(0)" id="plus" class="increment plus">+</a> 23 <a href="javascript:void(0)" id="mins" class="increment mins">-</a> 24 </div> 25 </div> 26 </div> 27 <div class="fl"> 28 <ul class="btn-choose unstyled"> 29 <li> 30 <a href="javascript:;" id="addshopcar" class="sui-btn btn-danger addshopcar">加入购物车</a> 31 </li> 32 </ul> 33 </div> 34 </div> 35 <script> 36 $(function () { 37 //规格值ids 到 规格商品id的映射关系 38 var value_ids_map = {$value_ids_map}; 39 //加入购物车 40 $("#addshopcar").click(function () { 41 //先获取选中的规格值的组合 例如：18_19 42 var value_ids = ''; 43 $(".selected").each(function (k,v) { 44 value_ids += $(v).attr('spec_values_id') + '_'; 45 }) 46 //将最后一个_消除 47 value_ids = value_ids.slice(0,-1); 48 //获取对应的商品规格sku里面的id spec_goods_id 考虑到部分商品可能没有SKU 使用三元判断 49 var spec_goods_id = value_ids_map[value_ids]?value_ids_map[value_ids].id:''; 50 //将spec_goods_id放入隐藏表单中 51 $('input[name=spec_goods_id]').val(spec_goods_id); 52 //获取购买商品数量 53 var number = $("#number").val(); 54 //将商品数量放入隐藏表单中 55 $('input[name=number]').val(number); 56 //提交表单 57 $('form').submit(); 58 }) 59 60 61 //规格值选中效果 find() 循环遍历 id 为specification div 下的a元素 62 $("#specification").find('a').click(function () { 63 //给当前当标签 移除selected这个class 64 $(this).closest('dl').find('a').removeClass('selected'); 65 //再给当前点击的a标签加上selected 66 $(this).addClass('selected'); 67 68 //获取选中的规格值组合 69 var value_ids = ''; 70 $(".selected").each(function (k,v) { 71 value_ids += $(v).attr('spec_values_id')+'_';//拼接 为18_19_ 72 }) 73 //去掉最后一个下划线 slice(开始下标，结尾下标:为负数从后面开始) 方法选取基于索引的元素的子集。 74 value_ids = value_ids.slice(0,-1); 75 //获取对应的商品规格sku里面的值 76 var spec_goods_price = value_ids_map[value_ids].price; 77 //将价格显示到页面上 78 $("#goods_price").html(spec_goods_price); 79 }) 80 81 //购买数量 加 82 $("#plus").click(function () { 83 //先获取input 里面的值 parseInt()返回一个整数 84 var number = parseInt($("#number").val()); 85 number += 1; 86 $("#number").val(number); 87 }) 88 //减 89 $("#mins").click(function () { 90 var number = parseInt($("#number").val()); 91 if (number == 1) return; 92 number -= 1; 93 $("#number").val(number) 94 }) 95 96 }) 97 </script>
