✅P271_商城业务-订单服务-订单确认页渲染

gong_yz大约 2 分钟谷粒商城

收货人信息渲染

cfmall-order/src/main/resources/templates/confirm.html

<!--地址-->
<div class="top-3" th:each="address:${confirmOrderData.memberAddressVos}">
	<p>[[${address.name}]]</p><span>[[${address.province}]] [[${address.detailAddress}]] [[${address.phone}]]</span>
</div>

购物项渲染

OrderItemVo.java新增“是否有货”和“商品重量”两个字段

package com.gyz.cfmall.order.vo;

import lombok.Data;

import java.math.BigDecimal;
import java.util.List;

/**
 * @author gong_yz
 * @Description
 */
@Data
public class OrderItemVo {

    /**
     * 是否有货
     */
    private Boolean hasStock;

    /**
     * 重量
     */
    private BigDecimal weight;
    
    //省略其它代码...

}

前端回显

cfmall-order/src/main/resources/templates/confirm.html

<div class="to_right">
	<h5>商家:谷粒学院自营</h5>
	<div><button>换购</button><span>已购满20.00元,再加49.90元,可返回购物车领取赠品</span></div>
	<!--图片-->
	<div class="yun1" th:each="item:${confirmOrderData.items}">
		<img th:src="${item.image}" class="yun"/>
		<div class="mi">
			<p>[[${item.title}]]<span style="color: red;" th:text="'¥' + ${#numbers.formatDecimal(item.price,3,2)}"> ¥ 499.00</span>
				<span> [[${item.count}]] </span> <span>[[${item.hasStock?"有货":"无货"}}]]</span></p>
			<p> <span>[[${item.weight}]]kg</span></p>
			<p class="tui-1"><img src="/static/order/confirm/img/i_07.png" />支持7天无理由退货</p>
		</div>
	</div>
	<div class="hh1"></div>
	<p>退换无忧 <span class="money">¥ 0.00</span></p>
</div>

商品总数量、总金额渲染

商品总数量结算:cfmall-order/src/main/java/com/gyz/cfmall/order/vo/OrderConfirmVo.java

package com.gyz.cfmall.order.vo;

import lombok.Getter;
import lombok.Setter;

import java.math.BigDecimal;
import java.util.List;
import java.util.Map;

/**
 * @author gong_yz
 * @Description 订单确认页VO
 */

public class OrderConfirmVo {
    public Integer getCount() {
        Integer count = 0;
        if (items != null && items.size() > 0) {
            for (OrderItemVo item : items) {
                count += item.getCount();
            }
        }
        return count;
    }
    
    //省略其它代码...
}

前端回显

cfmall-order/src/main/resources/templates/confirm.html

<p class="qian_y">
	<span>[[${confirmOrderData.getCount()}]]</span>
	<span>件商品,总商品金额:[[${#numbers.formatdecimal(confirmOrderData.getTotal(),1,2)}]]</span>
	<span class="rmb">¥28.90</span>
</p>

应付金额渲染

cfmall-order/src/main/resources/templates/confirm.html

<div class="yfze">
	<p class="yfze_a"><span class="z">应付总额:</span><span class="hq">¥[[${#numbers.formatdecimal(confirmOrderData.getPayPrice(),1,2)}]]</span></p>
	<p class="yfze_b">寄送至: 北京 朝阳区 三环到四环之间 朝阳北路复兴国际大厦23层麦田房产 IT-中心研发二部 收货人:赵存权 188****5052</p>
</div>