这里写自定义目录标题

实现京东商品详情页面的商品切换功能功能介绍：根据选择商品参数不同，选择后跳转到对应的商品详情页面数据库表查询语句查询结果前台页面实现选择参数、切换商品

实现京东商品详情页面的商品切换功能

功能介绍：根据选择商品参数不同，选择后跳转到对应的商品详情页面

数据库表

Sku商品属性与销售属性对应关系表（sku_sale_attr_value）：

查询语句

SELECT GROUP_CONCAT(sale_attr_value_id ORDER BY sale_attr_value_id SEPARATOR "|") vauleIds, sku_idFROM sku_sale_attr_valueWHERE spu_id = #{spuId}GROUP BY sku_id

查询结果

可以以List<Map<String, Object>>得到商品属性集合与sku商品id的关系集合，将该集合返回至前台页面

前台页面实现选择参数、切换商品

spuSaleAttrFun(index, spuSaleAttrValueId) {debuggerthis.isAddCart = truevar valuesSkuJson = JSON.parse(this.valuesSkuJson);//根据索引替换已选中的spuSaleAttrValueIdthis.selectValuesSkus[index] = spuSaleAttrValueIdvar valuesSku = this.selectValuesSkus.join('|')//查看新组装的数据是否存在skuId，如果存在跳到该页面，如果不存在控制选中状态var curSkuId = valuesSkuJson[valuesSku]if (curSkuId) {if(curSkuId != this.skuId) {window.location.href = '/' + curSkuId + '.html'} else {this.isAddCart = true}} else {//控制购物车是否可选this.isAddCart = false}//控制销售属性是否选中this.spuSaleAttrList.forEach((spuSaleAttr, i) => {spuSaleAttr.spuSaleAttrValueList.forEach((spuSaleAttrValue) => {if (index == i) {if (spuSaleAttrValueId == spuSaleAttrValue.id) {spuSaleAttrValue.isChecked = 1} else {spuSaleAttrValue.isChecked = 0}}})})},