【原】家政維修平臺實戰(zhàn)29：服務(wù)評價展示

低代碼布道師 2025-06-27 發(fā)布于內(nèi)蒙古

展開全文

上一篇我們實現(xiàn)了用戶端對服務(wù)進行評價的功能，有了基礎(chǔ)的評分之后就需要在小程序進行展示，我們一共有兩個地方需要展示，首頁需要展示服務(wù)的評分，而詳情頁需要展示用戶具體的評價信息。本篇我們就實現(xiàn)一下具體的功能。

1 首頁顯示評分

在我們的原型圖里，熱門服務(wù)會顯示具體的分數(shù)
在這里插入圖片描述
打開首頁，在價格的組件添加一個普通容器，里邊再添加一個普通容器，繼續(xù)添加一個圖標組件和文本組件用來顯示評分

先選擇最外層的普通容器，設(shè)置寬度為100%，橫向排列，兩端對齊
在這里插入圖片描述
選擇內(nèi)層的普通容器，設(shè)置橫向排列水平垂直居中

圖標更換為五角星，文本內(nèi)容綁定為具體的分數(shù)字段

2 服務(wù)詳情頁展示評分

我們先實現(xiàn)一下原型里標題下邊的評分
在這里插入圖片描述
打開詳情頁，在標題下邊添加普通容器，里邊添加評分組件

關(guān)閉顯示標題

綁定評分值

添加文本組件，用表達式進行綁定

設(shè)置普通容器橫向排列，垂直居中

設(shè)置評分組件的寬度為120px

組件默認會有一個邊框，我們用樣式進行覆蓋

:root {
  width: 120px;
}
:scope .wd-form-item-wrap{
  border:none;
}

3 實現(xiàn)用戶評價展示

詳情頁我們的頁簽有一項是展示用戶評價
在這里插入圖片描述
先搭建評分的展示項內(nèi)容，具體布局如下

綁定對應(yīng)的字段

好評這個要復(fù)雜一點，我們需要通過SQL語句來獲取，創(chuàng)建一個mysql查詢

選擇內(nèi)置連接器

輸入如下SQL語句

SELECT COUNT(*) AS good_reviews_count
FROM `Reviews-preview`
WHERE serviceId ='{{$w.page.dataset.params.itemid}}'
AND overall_rating >=4;

再定義一個SQL查詢，用來查詢中評的數(shù)據(jù)

SELECT COUNT(*) AS neutral_reviews_count
FROM `Reviews-preview`
WHERE serviceId ='{{$w.page.dataset.params.itemid}}'
AND overall_rating >=2 AND overall_rating <4;

繼續(xù)創(chuàng)建SQL查詢，用來查詢差評的數(shù)據(jù)

SELECT COUNT(*) AS bad_reviews_count
FROM Reviews
WHERE serviceId ='{{$w.page.dataset.params.itemid}}'
AND overall_rating =1;

然后放入標簽選擇組件，綁定具體的標簽項
在這里插入圖片描述

[
{
"label":"全部("+$w.dataView1.record.total_reviews+")",
"value":"1",
"__sortid__":"CkqYnaJB9G-Hnwx4dDSw2"
},
{
"label":"好評("+$w.queryGoodReviewsCount.data.records[0].good_reviews_count+")",
"value":"2",
"__sortid__":"y0zcOTcXXAdWoF-FmGhv4"
},
{
"label":"中評("+$w.queryNeutralReviewsCount.data.records[0].neutral_reviews_count+")",
"value":"3",
"__sortid__":"KZMCH-d-_WxTlnots3xo5"
},
{
"label":"差評("+$w.queryBadReviewsCount.data.records[0].bad_reviews_count+")",
"value":"4",
"__sortid__":"fgiurHu7mQFCp1A7ic9hW"
}
]