https://www.goodwaytechs.com/assets/js/unit/detail-product-match.js

1class ScriptProductMatch extends Script {
2  constructor(params) {
3    super(params)
4    this.attrId = params.attrId
5    this.matchProducts = JSON.parse(params.matchProducts)
6    this.$select = null
7
8    this.originalTotalPrice = null
9    this.totalPrice = null
10    this.allCheckboxs = null
11    this.parentElement = null
12    this.showMore = null
13    this.checkedsku = []
14  }
15  async init() {
16    // 运行selector
17    await new Load('/assets/plugins/selector.js')
18    this.parentElement = document.querySelector(`#${this.attrId}`)
19    this.originalTotalPrice = document.querySelector(`#${this.attrId} .pm-original-total-price`)
20    this.totalPrice = document.querySelector(`#${this.attrId} .pm-total-price`)
21    this.allCheckboxs = document.querySelectorAll(`#${this.attrId} .pm-checkbox input`)
22    this.showMore = document.querySelector(`#${this.attrId} .pm-click-more`)
23    if (this.showMore) {
24      this.showMore.onclick = () => {
25        this.parentElement.classList.toggle('show-more')
26      }
27    }
28    this.allCheckboxs.forEach(el => {
29      el.onchange = () => {
30        if (this.parentElement) {
31          this.setTotalPrice()
32        }
33      }
34    })
35    this.initSelect()
36  }
37  async initSelect() {
38    this.$select = document.querySelectorAll(`#${this.attrId} .pm-select`)
39    this.$select.forEach((el, i) => {
40      let option = []
41      let product = this.matchProducts[i]
42      product.attr_list.forEach(attrs => {
43        let obj = { ...attrs, value: attrs.price_id, thumb_prefix: product.thumb, title: product.title, product_id: product.product_id, page_url: product.page_url }
44        let name = ''
45        attrs.product_attr_detail.forEach(details => {
46          name += `${details.title}: ${details.content}; `
47        })
48        obj.name = name
49        option.push(obj)
50      })
51      let matchPrice = document.querySelector(`#product_id_${this.matchProducts[i].product_id} .pm-price`)
52      let originalPrice = document.querySelector(`#product_id_${this.matchProducts[i].product_id} .pm-original-price`)
53      let attrImg = document.querySelector(`#product_id_${this.matchProducts[i].product_id} .pm-img img`)
54      // 初始化selector
55      let pluginsSelector = new PluginSelector({
56        target: el,
57        option,
58        onChange: res => {
59          matchPrice.innerHTML = '$' + (res.match_price / 100).toFixed(2)
60          originalPrice.innerHTML = '$' + (res.cost_price / 100).toFixed(2)
61          attrImg.src = res.thumb || res.thumb_prefix
62          this.checkedsku[i] = res
63          this.setTotalPrice()
64        }
65      })
66      // this.allOptions.push(option)
67      pluginsSelector.init()
68      // 默认选中第一项
69      pluginsSelector.setValue(option[0].value);
70      matchPrice.innerHTML = '$' + (option[0].match_price / 100).toFixed(2)
71      originalPrice.innerHTML = '$' + (option[0].cost_price / 100).toFixed(2)
72
73      this.checkedsku.push(option[0])
74    })
75    this.setTotalPrice()
76  }
77  // showMore() {
78  //   this.parentElement.classList.toggle('show-more')
79  // }
80  setTotalPrice() {
81    let totalPrice = 0
82    let totalOriginalPrice = 0
83    let matchProducts = []
84    this.allCheckboxs.forEach((el, i) => {
85      if (el.checked) {
86        totalPrice += this.checkedsku[i].match_price
87        totalOriginalPrice += this.checkedsku[i].cost_price
88        matchProducts.push(this.checkedsku[i])
89      }
90    })
91    // window.app.info.productDetail.matchProducts = this.checkedsku
92    // 设置搭配产品总价
93    window.app.info.productDetail.matchProductsTotal = totalPrice / 100
94    window.app.info.productDetail.matchProductsOriginalTotal = totalOriginalPrice / 100
95    // 获取当前主产品的价格
96    let mainPrice = window.app.info.productDetail.mainPrice || 0
97    let mainOriginalPrice = window.app.info.productDetail.mainOriginalPrice || 0
98    sessionStorage.removeItem('matchProducts')
99    sessionStorage.setItem('matchProducts', JSON.stringify(matchProducts))
100    this.totalPrice.innerHTML = '$' + (totalPrice / 100 + mainPrice).toFixed(2)
101    this.originalTotalPrice.innerHTML = '$' + (totalOriginalPrice / 100 + mainOriginalPrice).toFixed(2)
102  }
103}