✅P207_商城业务-商品详情-详情页渲染

gong_yz大约 3 分钟谷粒商城

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

详情页渲染

加入Thymeleaf名称空间

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

<html lang="en" xmlns:th="http://www.thymeleaf.org">

渲染标题

th:text="${item.skuInfo.skuTitle}"
th:text="${item.skuInfo.skuSubtitle}"

默认图片展示

th:src="${item.skuInfo.skuDefaultImg}"

价格显示

整数保留3位,小数保留2位

th:text="${#numbers.formatDecimal(item.skuInfo.price,3,2)}"

有货无货信息显示

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

    /**
     * 6、是否有货
     */
    private boolean hasStock = true;
th:text="${item.hasStock?'有货':'无货'}"

所有图片的展示

<li th:each="image:${item.images}" th:if="${!#strings.isEmpty(image.imgUrl)}"><img th:src="${image.imgUrl}"/></li>

渲染销售属性

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

th:each="attrValue:${item.saleAttr}"
[[${attrValue.attrName}]]
th:each="val:${#strings.listSplit(attrValue.attrValues,',')}"

将下方红框中的两个div代码片段注释掉,


商品描述

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

th:src="${item.desc.decript}"

规格参数显示

去除超链接否则跳转出错

th:each="group:${item.groupAttrs}"
th:text="${group.groupName}"
th:each="attr:${group.attrs}"
th:text="${attr.attrName}"
th:text="${attr.attrValue}"

去除上方代码片段之后多余的<div class="guiGe">,一直到包装清单为止,