电商----货品组合（详情页展示）

最新推荐文章于 2024-12-26 10:35:04 发布

liuhy_blog

最新推荐文章于 2024-12-26 10:35:04 发布

阅读量1.4k

点赞数

文章标签：货品电商数据

本文链接：https://blog.youkuaiyun.com/liuhy_blog/article/details/53215737

版权

数据处理成为一下格式：

Array
(
    [goods_id] => 1
    [goods_name] => 三星(SAMSUNG) W2016双卡双待 4G手机 尊贵金 4G标配版
    [attr] => Array
        (
            [70] => Array
                (
                    [attr_name] => 颜色
                    [attr_value] => Array
                        (
                            [0] => Array
                                (
                                    [attr_value] => 土豪金
                                    [goods_attr_id] => 3
                                )

                            [3] => Array
                                (
                                    [attr_value] => 金属黑
                                    [goods_attr_id] => 6
                                )

                        )

                )

            [72] => Array
                (
                    [attr_name] => 选择版本
                    [attr_value] => Array
                        (
                            [1] => Array
                                (
                                    [attr_value] => 双网通
                                    [goods_attr_id] => 4
                                )

                            [2] => Array
                                (
                                    [attr_value] => 全网通
                                    [goods_attr_id] => 5
                                )

                        )

                )

        )

)

控制器层处理

public function product()
    {
    	header('content-type:text/html;charset=utf-8');
    	$id= Request::instance()->get('id');
    	$pro = Db::table('goods')
    	->alias('a')
    	->where(['a.goods_id'=>$id])
    	->join('goods_attr b','a.goods_id = b.goods_id')
    	->join('attribute c','b.attr_id = c.attr_id')
    	->select();
    	
    	$arr=[];
    	foreach($pro as $key => $val)
    	{
    		static $i=0;
    		$arr['goods_id'] 		= $val['goods_id'];
    		$arr['goods_name']		= $val['goods_name'];
    		$arr['attr'][$val['attr_id']]['attr_name'] = $val['attr_name'];
    		$arr['attr'][$val['attr_id']]['attr_value'][$i]['attr_value']	= $val['attr_value'];
    		$arr['attr'][$val['attr_id']]['attr_value'][$i]['goods_attr_id']	= $val['goods_attr_id'];
    		$i++;
    	}
    	print_r($arr);die;
    	$this->assign('arr',$arr);
    	return view('product');
    }

视图层处理

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	.out{
		border: 1px dashed #d6d6d8;
	    color: #cdcdcd;
	    cursor: not-allowed;
	    margin: 0;
	}
	.che{
		border: 2px solid #be0106;
    	margin: -1px;
	}
</style>
<body>
	<table>
		<tr>
			<td>商品名称</td>
			<td>{$arr['goods_name']}</td>
		</tr>
		<tr>
			<td>商品价格</td>
			<td>520</td>
		</tr>
		{volist name="arr['attr']" id="arr"}
		<tr class="len">
			<td>{$arr['attr_name']}</td>
			<td>
				{volist name="arr['attr_value']" id="val"}
					<span class="r" spec="{$val['goods_attr_id']}">{$val['goods_attr_id']}{$val['attr_value']}</span>
				{/volist}
			</td>
		</tr>
		{/volist}
	</table>
</body>
</html>
<script src="__PUBLIC__jquery.1.12.min.js"></script>
<script>
$(function(){
	var exist_arr =[]; //存在组合的货品，把不存在的框变为不可选
	var tmp_arr;//值变数组，判断是否有类型
	var now_checked = [];//同级元素
	var check_group = ['3,4','5,6','3,6','6,4'];//本商品的全部单品
	// var check_group = ['41,40','41,38']
	var all_spec = $('.r');
	check_no_spec(all_spec,check_group)
	$(".r").click(function(){
		
		var _this = $(this);
		var id = _this.attr('spec');

		//判断是否是不可点的属性
		if(_this.hasClass("out"))
		{
			return false;
		}else{
			add_red(_this)
			now_checked = checked_group_spec(_this);
			exit_spec = check_spec(id,check_group);
			console.log(now_checked)
			console.log(exit_spec)
	        for(var j=0;j<all_spec.length;j++){
				if($.inArray($(all_spec[j]).attr('spec'),now_checked)>=0){

				}else if($.inArray($(all_spec[j]).attr('spec'),exit_spec)>=0){
					$(all_spec[j]).hasClass('out')?$(all_spec[j]).removeClass('out'):'';
				}else{
					
					$(all_spec[j]).hasClass('out')?$(all_spec[j]).removeClass('out'):$(all_spec[j]).addClass('out');
				}
			}				
		}
	})
	//本商品全部属性
	function goods_spec()
	{
		var r = $(".r");
		var tmp_arr = [];
		for(var i=0;i<r.length;i++)
		{
			tmp_arr.push(r.eq(i).attr('spec'));
		}
		return tmp_arr;
	}

	//页面加载检测是否有不存在的数据
	function check_no_spec(all_arr,yet_spec)
	{
		//将组合属性拆分
		var tmp_yet_spec = [];
		for(var i=0;i<yet_spec.length;i++)
		{
			//临时数组
			
			var tmp_arr = [];
			tmp_arr = yet_spec[i].split(',');
			for(var b=0;b<tmp_arr.length;b++)
			{
				tmp_yet_spec.push(tmp_arr[b])
			}
		}
		
		//循环所有货品属性，查看是否存在本商品已有属性中
		for(var i=0;i<all_arr.length;i++)
		{
			if($.inArray($(all_arr[i]).attr('spec'),tmp_yet_spec)<0)
			{
				$(all_arr[i]).addClass('out')
			}
		}
	}
	//add  red
	function add_red(_this)
	{
		if(_this.siblings().hasClass("che"))
		{
			_this.siblings().removeClass("che")
			cancel(_this)
		}else{
			cancel(_this)
		}
	}

	//选中&取消选中
	function cancel(_this)
	{
		if(_this.hasClass('che'))
		{
			_this.removeClass('che')
		}else{
			_this.addClass("che")
		}
	}

	//存在组合的货品，把不存在的框变为不可选
	function remove_class()
	{
		var _this = $(".r");
		for(var i=0;i<_this.length;i++)
		{
			// alert(exist_arr)
			// 对象_this.eq(i)   数组_this.[i]
			if($.inArray(_this.eq(i).attr('spec'),exist_arr)<0)
			{
				_this.eq(i).addClass("out");
			}
		}
	}

	//存在的组合货品
	function check_spec(id,check_group)
	{
		var tmp_exist = [];
		//循环所有货品
		for(var i=0;i<check_group.length;i++)
		{
			//将单个货品分割成数组
			tmp_arr = check_group[i].split(',');
			
			if($.inArray(id,tmp_arr)>=0)
			{
				for(var b=0;b<tmp_arr.length;b++)
				{
					if(id!=tmp_arr[b])
					{
						tmp_exist.push(tmp_arr[b])
					}
				}
			}
		}
		return tmp_exist;
	}

	//已选择的规格
	function checked_group_spec($val)
	{
		var temp_spec = [];
		$data = $val.parent().children();
		
		for(var i=0;i<$data.length;i++){
			temp_spec.push($($data[i]).attr('spec'))
		}
		return temp_spec;
	}
})
</script>