商品詳情

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

分成上下兩部分：

• 上部：展示的是規格屬性列表

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

屬性列表（作業）

這部分內容與規格參數部分重復，我就不帶大家做了，大家可以自己完成

商品詳情

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

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

最終展示效果：

規格包裝

規格包裝分成兩部分：

• 規格參數

• 包裝列表

而且規格參數需要按照組來顯示

規格參數

最終的效果：

我們模型中有一個groups，跟這個數據結果很像：

分成8個組，組內都有params，里面是所有的參數。不過，這些參數都沒有值！

規格參數的值分為兩部分：

• 通用規格參數：保存在SpuDetail中的genericSpec中

• 特有規格參數：保存在sku的ownSpec中

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

?

從spuDetail中取出genericSpec并取出groups：

把genericSpec引入到Vue實例：

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

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>

最終效果：

售后服務

售后服務也可以通過Thymeleaf進行渲染：

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

效果：

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。