商品詳情

商品詳情頁面如下圖所示：

分成上下兩部分：

• 上部：展示的是規(guī)格屬性列表

• 下部：展示的是商品詳情

屬性列表（作業(yè)）

這部分內(nèi)容與規(guī)格參數(shù)部分重復(fù)，我就不帶大家做了，大家可以自己完成

商品詳情

商品詳情是HTML代碼，我們不能使用 th:text，應(yīng)該使用th:utext

<!--商品詳情--> <div class="intro-detail" th:utext="${spuDetail.description}"> </div>

最終展示效果：

規(guī)格包裝

規(guī)格包裝分成兩部分：

• 規(guī)格參數(shù)

• 包裝列表

而且規(guī)格參數(shù)需要按照組來顯示

規(guī)格參數(shù)

最終的效果：

我們模型中有一個groups，跟這個數(shù)據(jù)結(jié)果很像：

分成8個組，組內(nèi)都有params，里面是所有的參數(shù)。不過，這些參數(shù)都沒有值！

規(guī)格參數(shù)的值分為兩部分：

• 通用規(guī)格參數(shù)：保存在SpuDetail中的genericSpec中

• 特有規(guī)格參數(shù)：保存在sku的ownSpec中

我們需要把這兩部分值取出來，放到groups中。

?

從spuDetail中取出genericSpec并取出groups：

把genericSpec引入到Vue實例：

因為sku是動態(tài)的，所以我們編寫一個計算屬性，來進行值的組合：

groups(){groups.forEach(group => {group.params.forEach(param => {if(param.generic){// 通用屬性，去spu的genericSpec中獲取param.v = this.genericSpec[param.id] || '其它';}else{// 特有屬性值，去SKU中獲取param.v = JSON.parse(this.sku.ownSpec)[param.id]}})})return groups; }

然后在頁面渲染：

<div class="Ptable"><div class="Ptable-item" v-for="group in groups" :key="group.name"><h3>{{group.name}}</h3><dl><div v-for="p in group.params"><dt>{{p.name}}</dt><dd>{{p.v + (p.unit || '')}}</dd></div></dl></div> </div>

包裝列表

包裝列表在商品詳情中，我們一開始并沒有賦值到Vue實例中，但是可以通過Thymeleaf來渲染

<div class="package-list"><h3>包裝清單</h3><p th:text="${spuDetail.packingList}"></p> </div>

最終效果：

售后服務(wù)

售后服務(wù)也可以通過Thymeleaf進行渲染：

<div id="three" class="tab-pane"><p>售后保障</p><p th:text="${spuDetail.afterService}"></p> </div>

效果：

?

總結(jié)

以上是生活随笔為你收集整理的商品详情及规格参数的渲染的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。