✅P208_商城业务-商品详情-销售属性渲染

开篇

渲染商品的销售属性

---

渲染实现

如何确定选择skuId呢？

具有粉色属性的skuId集合与256GB内存的skuId集合作交集，sql语句如下：

改写封装的销售属性的Vo

cfmall-product/src/main/java/com/gyz/cfmall/product/vo/SkuItemSaleAttrVo.java

@Data
@ToString
public class SkuItemSaleAttrVo {

    private Long attrId;

    private String attrName;

    private List<AttrValueWithSkuIdVo> attrValues;

}

@Data
public class AttrValueWithSkuIdVo {

    private String attrValue;

    private String skuIds;

}

改写sql语句

cfmall-product/src/main/resources/mapper/product/SkuSaleAttrValueDao.xml

<select id="getSaleAttrBySpuId" resultMap="skuItemSaleAttrVo">
    SELECT
        ssav.attr_id attr_id,
        ssav.attr_name attr_name,
        ssav.attr_value,
        group_concat( DISTINCT info.sku_id ) sku_ids
    FROM
        pms_sku_info info
            LEFT JOIN pms_sku_sale_attr_value ssav ON ssav.sku_id = info.sku_id
    WHERE
        info.spu_id = #{spuId}
    GROUP BY
        ssav.attr_id,
        ssav.attr_name,
        ssav.attr_value
</select>

改写之前写的页面

th:each="attr:${attrValue.attrValues}"
[[${attr.attrValue}]]

回显功能显示

注意：变量名称有所改变！ 1、拥有该属性值的skuId集合包含当前查询的skuId时，将class设置为checked

<div class="box-attr-3">
	<div class="box-attr clear" th:each="attr:${item.saleAttr}">
		<dl>
			<dt>选择[[${attr.attrName}]]</dt>
			<dd th:each="val:${attr.attrValues}">
				<a th:attr="class=${#lists.contains(#strings.listSplit(val.skuIds,','),item.skuInfo.skuId.toString())
           ? 'sku_attr_value checked': 'sku_attr_value'}, skus=${val.skuIds} "
				>
					[[${val.attrValue}]]
				</a>
			</dd>
		</dl>
	</div>
</div>

2、为被选中的属性值设置样式

当页面加载完成后，将所有css设置为未被选中样式，然后checked为选中样式

cfmall-product/src/main/resources/templates/item.html

<script>
$(function () {
     $(".sku_attr_value").parent().css({"border": "solid 1px #CCCCCC"});
     $(".sku_attr_value.checked").parent().css({"border": "solid 1px red"});
 });
</script>