https://www.jarmoo.com/assets/js/unit/detail-comment-list.js

1class ScriptDetailCommentList extends Script {
2  constructor(params) {
3    super(params)
4    this.$dom = document.querySelector(`#${this.attrId}`)
5    this.proId = Number(window.app.info.page.content_id)
6    this.vue = null
7  }
8
9  async init() {
10    await new Load('/assets/plugins/vue.min.js')
11    this.initVue()
12  }
13
14  initVue() {
15    this.vue = new Vue({
16      el: `#${this.attrId} .unit-detail-comment`,
17      mixins: [this.data],
18      methods: {
19        async init() {
20          // this.countryDatas = await window.app.info.getCountryList()
21          this._getCommentData()
22        },
23        async _getCommentData() {
24          await this.getCommentData({
25            site_id: window.app.info.site.site_id,
26            product_id: this.proId,
27            page_number: this.page.page_number,
28            page_size: this.page.page_size,
29            position: 1,
30            status: 1
31          }).then(res => {
32            this.scoreAvg = res.data.score_avg === 0 ? '5.0' : Number(res.data.score_avg).toFixed(1)
33            if(res.data.score.length){
34              const scorelist = JSON.parse(JSON.stringify(this.scoreData))
35              if(res.data.score.find(_val=>_val.score === 1)){
36                scorelist[0].score = res.data.score.find(_val=>_val.score === 1).score
37                scorelist[0].pre = res.data.score.find(_val=>_val.score === 1).pre
38              }
39              if(res.data.score.find(_val=>_val.score === 2)){
40                scorelist[1].score = res.data.score.find(_val=>_val.score === 2).score
41                scorelist[1].pre = res.data.score.find(_val=>_val.score === 2).pre
42              }
43              if(res.data.score.find(_val=>_val.score === 3)){
44                scorelist[2].score = res.data.score.find(_val=>_val.score === 3).score
45                scorelist[2].pre = res.data.score.find(_val=>_val.score === 3).pre
46              }
47              if(res.data.score.find(_val=>_val.score === 4)){
48                scorelist[3].score = res.data.score.find(_val=>_val.score === 4).score
49                scorelist[3].pre = res.data.score.find(_val=>_val.score === 4).pre
50              }
51              if(res.data.score.find(_val=>_val.score === 5)){
52                scorelist[4].score = res.data.score.find(_val=>_val.score === 5).score
53                scorelist[4].pre = res.data.score.find(_val=>_val.score === 5).pre
54              }
55              this.scoreData = scorelist
56            }
57            if(res.data.list.length){
58              res.data.list.forEach((item, index) => {
59                // item.country_name = this.countryDatas.find(_val=>_val.id == item.country_id) ? this.countryDatas.find(_val=>_val.id == item.country_id).en_name : ''
60                if(item.product_attr_value){
61                  item.product_attr_value = JSON.parse(item.product_attr_value)
62                }
63                const attrObj = item.product_attr_value
64                item.attrs = []
65                for (const i in attrObj) {
66                  const o = {}
67                  o.params_key = i
68                  o.params_value = attrObj[i]
69                  item.attrs.push(o)
70                }
71              })
72            }
73            this.commentList = res.data.list
74            this.page.page = res.data.total
75            this.page.page_count = res.data.page_count
76          })
77        },
78        async onPagination(index) {
79          this.page.page_number = index
80          await this._getCommentData()
81          this.$nextTick(()=>{
82            document.querySelector('.unit-detail-html-tabs').scrollIntoView()
83          })
84        },
85        itemClasses(score_){
86          score_ = typeof score_ === 'number' ? score_: Number(score_)
87          score_ = score_ >= 5 ? 5 : score_
88          let result = []
89          let score = Math.floor(score_ * 2) / 2
90          // 半星 (通过跟1取余判断是否为小数)
91          let hasDecimal = score_ % 1 !== 0
92          // 全星 （向下取整，获取全星部分）
93          let integer = Math.floor(score)
94          // 遍历全星
95          for(let i = 0; i < integer; i++){
96            result.push("icon-base-collection on")
97          }
98          // 处理半星
99          if(hasDecimal){
100            result.push("icon-base-collection half")
101          }
102          // 补齐
103          while(result.length < 5){ // 到这里还不够五颗星，则凑空星
104            result.push("icon-base-collection off")
105          }
106          return result
107        },
108        /** 评论列表 */
109        getCommentData(params) {
110          return new Promise((resolve, reject) => {
111            Utilts.ins().request({
112              url: '/product-comment/list-page',
113              method: 'GET',
114              params
115            }).then(res => {
116              if (res.code === 0) resolve(res)
117              else reject(res)
118            }).catch(err => reject(err))
119          })
120        }
121      }
122    })
123  }
124
125   /** 基本数据信息 */
126  get data() {
127    return {
128      data: {
129        page: {
130          page_number: 1,
131          page_size: 10,
132          page_count: 1,
133          page_total: 1
134        },
135        proId: this.proId,
136        commentList: [],
137        scoreAvg: 5.0,
138        countryDatas: [],
139        scoreData: [
140          {
141            count: 0,
142            pre: 0,
143            score: 1,
144          },
145          {
146            count: 0,
147            pre: 0,
148            score: 2,
149          },
150          {
151            count: 0,
152            pre: 0,
153            score: 3,
154          },
155          {
156            count: 0,
157            pre: 0,
158            score: 4,
159          },
160          {
161            count: 0,
162            pre: 0,
163            score: 5,
164          }
165        ]
166      }
167    }
168  }
169
170  render() {
171    if (!window.app.info.productDetail.detail_comment_content_show) {
172      this.$dom.querySelector('.unit-detail-comment').style.display = 'none'
173      return
174    }

175    this.vue.init()
176  }
177}