https://www.pioneerplastechs.com/assets/js/unit/comment.js

1class ScriptComment 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.pageType = window.app.info.page.page_type
7    this.vue = null
8  }
9
10  async init() {
11    await new Load('/assets/plugins/vue.min.js')
12    this.initVue()
13  }
14
15  initVue() {
16    this.vue = new Vue({
17      el: `#${this.attrId} .unit-comment`,
18      mixins: [this.data],
19      methods: {
20        async init() {
21          // this.countryDatas = await window.app.info.getCountryList()
22          if (!this.isDesign) {
23            await this.updataDetailCommentConfig()
24          } else {
25            this.commentConfig.content_show = 1
26            this.commentConfig.score_show = 1
27            this.commentConfig.btn_show = 1
28            this.commentConfig.login_show = 1
29          }
30          if (this.commentConfig.content_show === 1) {
31            this._getCommentData()
32            if (window.app.info.user.is_login) {
33              this.getUserInfo()
34            }
35          } else {
36            this.currentDom.parentNode?.removeChild(this.currentDom)
37          }
38        },
39        getUserInfo() {
40          Utilts.ins().request({
41            url: '/member/detail',
42            method: 'GET',
43            params: {}
44          }).then(res => {
45            if (res.code === 0) {
46              window.app.info.user.nickname = res.data.nickname
47              console.log('window.app.info.user', window.app.info.user);
48            }
49          }).catch(err => reject(err))
50        },
51        treeToList(tree) {
52          const list = [];
53          function traverse(node) {
54            let resNode = {...node}
55            delete resNode.children
56            list.push(resNode);
57            if (node.children) node.children.forEach(traverse);
58          }
59          tree.forEach(traverse);
60          return list;
61        },
62        async _getCommentData() {
63          await this.getCommentData({
64            site_id: window.app.info.site.site_id,
65            product_id: this.proId,
66            page_number: this.page.page_number,
67            page_size: this.page.page_size,
68            position: 1,
69            status: 1,
70            comment_type: this.pageType === 'article_detail' ? 2 : 3
71          }).then(res => {
72            if(res.data.list.length){
73              res.data.list.forEach((item, index) => {
74                item.group_comment_tree = this.treeToList(item.group_comment_tree)
75              })
76            }
77            console.log('res.data.list', res.data.list);
78            this.commentList = res.data.list
79            this.page.total = res.data.total
80            this.page.page_count = res.data.page_count
81          })
82        },
83        async onPagination(index) {
84          this.page.page_number = index
85          await this._getCommentData()
86          this.$nextTick(()=>{
87            document.querySelector('.unit-detail-html-tabs').scrollIntoView()
88          })
89        },
90        itemClasses(score_){
91          score_ = typeof score_ === 'number' ? score_: Number(score_)
92          score_ = score_ >= 5 ? 5 : score_
93          let result = []
94          let score = Math.floor(score_ * 2) / 2
95          // 半星 (通过跟1取余判断是否为小数)
96          let hasDecimal = score_ % 1 !== 0
97          // 全星 （向下取整，获取全星部分）
98          let integer = Math.floor(score)
99          // 遍历全星
100          for(let i = 0; i < integer; i++){
101            result.push("icon-base-collection on")
102          }
103          // 处理半星
104          if(hasDecimal){
105            result.push("icon-base-collection half")
106          }
107          // 补齐
108          while(result.length < 5){ // 到这里还不够五颗星，则凑空星
109            result.push("icon-base-collection off")
110          }
111          return result
112        },
113        /** 评论列表 */
114        getCommentData(params) {
115          return new Promise((resolve, reject) => {
116            Utilts.ins().request({
117              url: '/product-comment/list-page',
118              method: 'GET',
119              params
120            }).then(res => {
121              if (res.code === 0) resolve(res)
122              else reject(res)
123            }).catch(err => reject(err))
124          })
125        },
126        async addReview(parent_id = 0) {
127          if (this.commentConfig.login_show && !window.app.info.user.is_login){
128            window.location.href = globalThis.Server.getRinseHref('/login.html', window.app.info.site)
129            return false
130          }
131          await new Load('/assets/plugins/comment-form.js')
132          let params = {page_type: this.pageType}
133          params.product_id = window.app.info.page.content_id
134          if (parent_id) params.parent_id = parent_id
135          new PluginCommentForm(params).modal()
136        },
137        async updataDetailCommentConfig() {
138          return new Promise((resolve, reject) => {
139            Utilts.ins().request({
140              url: '/product-comment/get-comment-config',
141              method: 'GET',
142              params: {
143                site_id: window.app.info.site.site_id,
144                type: this.pageType === 'article_detail' ? 2 : 3
145              }
146            })
147              .then(res => {
148                this.commentConfig.content_show = res.data.is_show_module || 0
149                this.commentConfig.score_show = res.data.is_show_detail || 0
150                this.commentConfig.btn_show = res.data.is_show || 0
151                this.commentConfig.login_show = res.data.is_login || 0
152                resolve()
153              })
154              .catch(err => reject(err))
155          })
156        }
157      }
158    })
159  }
160
161   /** 基本数据信息 */
162  get data() {
163    return {
164      data: {
165        page: {
166          page_number: 1,
167          page_size: 10,
168          page_count: 1,
169          total: 0
170        },
171        proId: this.proId,
172        pageType: this.pageType,
173        commentList: [],
174        scoreAvg: 5.0,
175        countryDatas: [],
176        scoreData: [
177          {
178            count: 0,
179            pre: 0,
180            score: 1,
181          },
182          {
183            count: 0,
184            pre: 0,
185            score: 2,
186          },
187          {
188            count: 0,
189            pre: 0,
190            score: 3,
191          },
192          {
193            count: 0,
194            pre: 0,
195            score: 4,
196          },
197          {
198            count: 0,
199            pre: 0,
200            score: 5,
201          }
202        ],
203        videoFormat: ['.mp4', '.flv', '.f4v', '.avi', '.mov', '.wmv'],
204        commentConfig: {
205          score_show: 0,
206          content_show: 0,
207          btn_show: 0,
208          login_show: 0
209        },
210        currentDom: this.$dom,
211        isDesign: this.utilts.checkDesign()
212      }
213    }
214  }
215
216  render() {

217    this.vue.init()
218  }
219}