https://www.linyangpvc.com/assets/js/unit/detail-comment-score.js

1class ScriptDetailCommentScore extends Script {
2  constructor(params) {
3    super(params)
4    this.$dom = document.querySelector(`#${this.attrId}`)
5    this.proId = window.app.info.page.content_id
6    this.scoreAvg = 5.0
7    this.$scoreComponents = this.$dom.querySelector('.unit-detail-comment-score__icons')
8    this.$commentScore = this.$dom.querySelector('.unit-detail-comment-score__scores')
9    this.$commentScoreBox = this.$dom.querySelector('.unit-detail-comment-score')
10  }
11  async init() { }
12  render() {
13    if (window.app.info.productDetail.detail_comment_score_show) this.$commentScoreBox.classList.remove('d-none')
14    this.scoreAvg = Number(window.app.info.productDetail.detail_comment_score).toFixed(1) || 5.0
15    const collectionArr = this.getScoreArr(this.scoreAvg)
16    if(collectionArr.length){
17      this.$scoreComponents.innerHTML = ''
18      for(let i = 0; i < collectionArr.length; i++){
19        const $span = document.createElement('span')
20        $span.className = `iconfont star-item ${collectionArr[i]}`
21        this.$scoreComponents.appendChild($span)
22      }
23    }
24    this.$commentScore.innerHTML = this.scoreAvg
25  }
26  getScoreArr(num){
27    num = typeof num === 'number' ? num: Number(num)
28    num = num >= 5 ? 5 : num
29    let result = []
30    let score = Math.floor(num * 2) / 2
31    // 半星 (通过跟1取余判断是否为小数)
32    let hasDecimal = num % 1 !== 0
33    // 全星 （向下取整，获取全星部分）
34    let integer = Math.floor(score)
35    // 遍历全星
36    for(let i = 0; i < integer; i++){
37      result.push("icon-base-collection on")
38    }
39    // 处理半星
40    if(hasDecimal){
41      result.push("icon-base-collection half")
42    }
43    // 补齐
44    while(result.length < 5){ // 到这里还不够五颗星，则凑空星
45      result.push("icon-base-collection off")
46    }
47    return result
48  }
49  /** 评论列表 */
50  getCommentData(params) {
51    return new Promise((resolve, reject) => {
52      Utilts.ins().request({
53        url: '/product-comment/list-page',
54        method: 'GET',
55        params
56      }).then(res => {
57        if (res.code === 0) resolve(res)
58        else reject(res)
59      }).catch(err => reject(err))
60    })
61  }
62}