https://www.cnsmepump.com/src/package/package.js

1import Ctx from '../ctx.js'
2import Style from '../style.js'
3class Package extends Ctx {
4  constructor({ ctx, params, type, sequence, parent_attr_id, parent_hide_phone }) {
5    ctx = ctx || window.design.ctx
6    params = params || {}
7    super(ctx)
8    this.sequence = sequence || []
9    this.current_hide_phone = parent_hide_phone || 0
10    this.dir = type
11    this.parent_attr_id = parent_attr_id || ''
12    this._initStructure(params)
13    if (params.renderActive) ctx.state.postCtxState.renderPackage = this
14  }
15  /** 处理服务端和本地的数据差异 */
16  _initStructure(params) {
17    if (typeof params === 'string') {
18      const ctx = this.getCtx()
19      const thisPackage = ctx.state.template.originalPackages[this.dir][params]
20      if (!thisPackage) console.log('sign 不存在:', params)
21      this.sign = params
22      this.style = thisPackage.style_sign
23      this.code = thisPackage.code || ''
24      this.hide_phone = thisPackage.hide_phone || 0
25      this.hide_pad = thisPackage.hide_pad || 0
26      this.hide_pc = thisPackage.hide_pc || 0
27      this.name_sign = params.name_sign || ''
28      this.initCloudData(thisPackage)
29    } else {
30      this.sign = params.sign || globalThis.Server.getSign()
31      this.style = params.style
32      this.code = params.code || ''
33      this.hide_phone = params.hide_phone || 0
34      this.hide_pad = params.hide_pad || 0
35      this.hide_pc = params.hide_pc || 0
36      this.name_sign = params.name_sign || ''
37      this.initCloudData(params, true)
38    }
39    // 更新attr_id
40    this.attr_id = `${this.dir}-${this.sign}`
41  }
42  /** 初始化数据 */
43  async init(data) {
44    const ctx = this.getCtx()
45    // 更新其他字段
46    if (data) Object.keys(data).forEach(key => this[key] = data[key])
47    // 初始化样式
48    this.initStyle()
49    // 初始化自己，一般是处理children，但unit不是
50    await this.initSelf()
51    const name_sign = this.name_sign || ''
52    // 翻译后的名称
53    this.i18n_name = ctx.state.template.globalData?.html?.[name_sign]?.text || ''
54    // 等待子级全部完成
55    if (this.children) await Promise.all(this.children.map(item => item.init()))
56    return this
57  }
58  /** 初始化样式 */
59  initStyle() {
60    const ctx = this.getCtx()
61    this.style = new Style(ctx, this.style, this.attr_id)
62  }
63  /** 获取背景图懒加载的字符串，在main.js中会使用 */
64  getLazyBGString() {
65    function addSlash(str) {
66      return str.replace(/([\\'"])/g, "\\$1")
67    }
68    const ctx = this.getCtx()
69    var resJson = {
70      default: this.style.default.default['background-image'] ? 'url(' + this.style.default.default['background-image'] + ')' : '',
71      md: this.style.default.md['background-image'] ? 'url(' + this.style.default.md['background-image'] + ')' : '',
72      xl: this.style.default.xl['background-image'] ? 'url(' + this.style.default.xl['background-image'] + ')' : '',
73    }
74    let resString = ''
75    if (resJson.default || resJson.md || resJson.xl) {
76      if (ctx.state.site.prefix_domain) {
77        resJson.default = globalThis.Server.replaceImgDomain(resJson.default, ctx.state.site.prefix_domain, ctx.state.site.is_replace_domain)
78        resJson.md = globalThis.Server.replaceImgDomain(resJson.md, ctx.state.site.prefix_domain, ctx.state.site.is_replace_domain)
79        resJson.xl = globalThis.Server.replaceImgDomain(resJson.xl, ctx.state.site.prefix_domain, ctx.state.site.is_replace_domain)
80      }
81      if (resJson.default || resJson.md || resJson.xl) resString += ' lazy-type="background"'
82      if (resJson.default) resString += ` lazy-src="${addSlash(resJson.default)}"`
83      if (resJson.md) resString += ` lazy-md="${addSlash(resJson.md)}"`
84      if (resJson.xl) resString += ` lazy-xl="${addSlash(resJson.xl)}"`
85    }
86
87    const screenList = ['default', 'md', 'xl']
88    const gradientAttrMap = { // 位
89      default: 1,
90      md: 2,
91      xl: 4,
92    }
93    const gradientValue = screenList.reduce((prev, screen) => {
94      const style = this.style.default?.[screen]
95      const gradient = style?.linear || style?.['--linear'] || ''
96      if (gradient && gradient.toLowerCase().indexOf('gradient') > -1) {
97        prev += gradientAttrMap[screen]
98      }
99      return prev
100    }, 0)
101    const gradientAttr = gradientValue ? ` gradient="${gradientValue}" ` : ''
102    resString += gradientAttr
103    return resString
104  }
105  /** 获取列表背景图懒加载的字符串*/
106  getLazyListBGString(selector = '.unit-list__item-inner') {
107    const ctx = this.getCtx()
108    const style = this.style[selector] || {
109      default: { 'background-image': '' },
110      md: { 'background-image': '' },
111      xl: { 'background-image': '' }
112    }
113    const resJson = {
114      default: style.default['background-image'] || '',
115      md: style.md['background-image'] || '',
116      xl: style.xl['background-image'] || ''
117    }
118    let resString = ''
119    if (resJson.default || resJson.md || resJson.xl) {
120      if (ctx.state.site.prefix_domain) {
121        resJson.default = globalThis.Server.replaceImgDomain(resJson.default, ctx.state.site.prefix_domain, ctx.state.site.is_replace_domain)
122        resJson.md = globalThis.Server.replaceImgDomain(resJson.md, ctx.state.site.prefix_domain, ctx.state.site.is_replace_domain)
123        resJson.xl = globalThis.Server.replaceImgDomain(resJson.xl, ctx.state.site.prefix_domain, ctx.state.site.is_replace_domain)
124      }
125      resString += ` lazy-bg=`
126      if (resJson.default) resString += `default:${resJson.default};`
127      if (resJson.md) resString += `md:${resJson.md};`
128      if (resJson.xl) resString += `xl:${resJson.xl};`
129      resString += ``
130    }
131    return resString
132  }
133  /** 获取显示状态 */
134  getDisplayStatus() {
135    let resString = ''
136    if (this.hide_phone) resString += ` hide-phone`
137    if (this.hide_pad) resString += ` hide-pad`
138    if (this.hide_pc) resString += ` hide-pc`
139    return resString
140  }
141  /** 初始化子级，需要在不同package中写好 */
142  initSelf() { }
143  /** 处理接口返回的差异，需要在不同package中写好 */
144  initCloudData() { }
145}
146
147export default Package