品优购项目商品规格详情

后端

 public function goodsItem($id){

       $goods=\app\api\model\Goods::with(['images','specGoods'])->find($id)->toArray();
       $goods['goods_attr']=json_decode($goods['goods_attr']);
       $valueIds=array_unique(explode('_',implode('_',array_column($goods['specGoods'],'value_ids'))));
       $spec=Spec_value::with('spec')->whereIn('id',$valueIds)->select()->toArray();
       $res=[];
       foreach ($spec as $val){
           $res[$val['spec_id']]=[
               'spec_id'=>$val['spec_id'],
               'spec_name'=>$val['spec_name'],
               'spec_values'=>[]
           ];
       }
       foreach ($spec as $val){
           $res[$val['spec_id']]['spec_values'][]=$val;
       }
       // 组合当前商品的SKU的集合
        $values_ids_map=[];
       foreach($goods['specGoods'] as $val){
           $values_ids_map[$val['value_ids']]=[
               'id'=>$val['id'],
               'price'=>$val['price']
           ];
       }
       // 转换成JSON格式
        $values_ids_map=json_encode($values_ids_map,JSON_UNESCAPED_UNICODE);
        return view('item',[
            'info'=>$goods,
            'spec'=>$res,
            'values_ids_map'=>$values_ids_map
        ]);
    }

前段js事件

<script>
	$(function () {
		// raw是过滤方法，意思是：不使用（默认）转义
		values_ids_map={$values_ids_map|raw}

		// 给a绑定点击事件
		$('#specification').find('a').click(function () {
			// 当前这一行所有的a标签选中效果删除
			$(this).parents('dl').find('a').removeClass();
			// 给当前选中的的a标签设置class
			$(this).addClass('selected')
			//获取当前点击a标签的spec_value_id
			var spec_value_id=[];
			$('#specification a.selected').each(function (i) {
				spec_value_id.push($("#specification a.selected").eq(i).attr('spec_value_id'))
			})
			// 拼接成字符串
			spec_value_id=spec_value_id.join('_')
			// 取出商品价格
			var goodsPrice= values_ids_map[spec_value_id].price
			$('#goodsPrice').html(goodsPrice)
		})
	})
</script>