https://www.kimeery.com/src/package/unit.js

1import Package from './package.js'
2import Content from './content.js'
3import configCollect from '../config/index.js'
4import hooks from '../hooks/unit/index.js'
5import HookUnit from '../hooks/unit.js'
6import Style from '../style.js'
7
8/** 每个组件具有哪些权限 */
9const unitAllow = {
10  'article-contents-button-inquiry': ['form','button'],
11  'article-contents-table-two': ['article_contents_table'],
12  'article-contents-table': ['article_contents_table'],
13  'attr-search': ['search'],
14  'attr-text-search': ['search'],
15  'attr-sort-search': ['search'],
16  'global-search': ['global_search','search'],
17  'user-agreement': ['text'],
18  'map': ['map'],
19  'form': ['form', 'button'],
20  'text': ['text'],
21  'faq': ['list', 'faq'],
22  'image': ['image', 'video'],
23  'graph': ['image', 'graph'],
24  'page-title': ['text'],
25  'page-desc': ['text'],
26  'breadcrumb': ['text', 'image', 'video'],
27  'button': ['button'],
28  'tab': ['tab', 'swiper'],
29  'list': ['form', 'button', 'list', 'resize', 'swiper', 'image', 'video'],
30  'coupon-list': ['coupon_list', 'swiper', 'image'],
31  'detail-info': ['date'],
32  'detail-show-time': ['date'],
33  'detail-might-like': ['list', 'swiper', 'image'],
34  'detail-lastest-product': ['list', 'swiper', 'image'],
35  'detail-album': ['album', 'image', 'video'],
36  'detail-customized': ['form', 'button'],
37  'detail-button-inquiry': ['form', 'button'],
38  'detail-video': ['video'],
39  'recommend-article': ['list', 'swiper', 'image'],
40  'recommend-links': ['list'],
41  'polymerize-article': ['list', 'swiper', 'image'],
42  'polymerize-product': ['list', 'swiper', 'image'],
43  'polymerize-multiple-detail': ['list', 'swiper', 'image'],
44  'polymerize-extrend': ['list', 'swiper', 'image'],
45  'product-list': ['product_list', 'swiper', 'image'],
46  'product-sort': ['search'],
47  'product-lives': ['list', 'swiper', 'image', 'form', 'button'],
48  'video-list': ['list', 'swiper', 'image'],
49  'video-popup': ['video', 'image'],
50  'download-list': ['list', 'swiper', 'image'],
51  'header': ['header'],
52  'header-nav': ['header'],
53  'header-menu': ['header', 'image'],
54  'header-search': ['search'],
55  'header-language': ['text', 'language'],
56  'search': ['search'],
57  'pagination': ['pagination'],
58  'list_sort': ['list_sort', 'text'],
59  'list-nav': ['list_nav'],
60  'b2c-header': ['header'],
61  'ai-article-detail-2': ['form', 'button', 'list', 'swiper'],
62  'ai-article-detail-3': ['form', 'button', 'list', 'swiper'],
63  'ai-product-detail-extrend': ['list', 'swiper', 'image'],
64  'logo': ['image'],
65  'pop-up': ['pop_up'],
66  'social-list': ['social_list'],
67  'social-info': ['social_list', 'social_info'],
68  'tab-list': ['tab_list', 'swiper', 'image'],
69  'tag-list': ['tag_list'],
70  'tabs': ['tabs', 'image'],
71  'column-tabs': ['tabs'],
72  'type-tabs': ['tabs'],
73  'dev-history': ['dev_history', 'image', 'swiper'],
74  'dev-history2': ['dev_history2', 'image', 'button'],
75  'dev-history3': ['dev_history3', 'image', 'button'],
76  'store-list': ['store_list','dev_history3', 'image', 'button', 'swiper'],
77  'logistics-tracking': ['logistics_tracking', 'image', 'button'],
78  'product-detail': ['product_detail', 'album', 'image', 'form', 'button', 'social_list', 'video'],
79  'download-text-search': ['search'],
80  'store-search': ['store_search','search'],
81  'store-info': ['store_info','image', 'swiper'],
82  'faq-text-search': ['search'],
83  'page-content-description':['text'],
84  'detail-title':['text'],
85  'content-list': ['form', 'button', 'list', 'resize', 'swiper', 'image', 'video', 'content_list'],
86  'content-detail': ['form', 'button',  'video', 'image', 'text', 'content_detail'],
87  'content-comment': ['content_detail'],
88  'detail-html-tabs':['text'],
89  'content-tag': ['text'],
90  'faq-detail-head': ['text']
91}
92
93class Unit extends Package {
94  /**
95   * 构造函数
96   * @param {JSON} config
97   */
98  constructor({ ctx, params, sequence, parent_attr_id, parent_hide_phone }) {
99    super({ ctx, params, type: 'unit', sequence, parent_attr_id, parent_hide_phone })
100  }
101  /** 处理接口返回的差异 */
102  initCloudData(thisPackage, isLocal) {
103    this.type = thisPackage.type
104    this.use_html = thisPackage.use_html
105    this.transfer = thisPackage.transfer || ''
106    this.current_hide_phone = this.current_hide_phone || this.hide_phone || 0
107    this.is_default = true
108    if (isLocal) {
109      this.cols_col = thisPackage.cols_col || 12
110      this.cols_md = thisPackage.cols_md || 12

111      this.cols_xl = thisPackage.cols_xl || 12
112      this.config = thisPackage.config || {}
113      this.content = thisPackage.content || {}
114      this.content.data = thisPackage.data || this.content.data || []
115      this.generate_config = thisPackage.generate_config || {}
116    } else {
117      this.is_default = false
118      this.cols_col = thisPackage.cols_col
119      this.cols_md = thisPackage.cols_md
120      this.cols_xl = thisPackage.cols_xl
121      this.content = thisPackage.content && !Array.isArray(thisPackage.content) ? thisPackage.content : {}
122      this.config = thisPackage.allow_config && !Array.isArray(thisPackage.allow_config) ? thisPackage.allow_config : {}
123      this.generate_config = thisPackage.generate_config
124    }
125  }
126
127  /** 初始化组件 */
128  async initSelf(data, params) {
129    this.initHooks()
130    this.initConfig()
131    await this.initContent()
132    if (!globalThis.Server.checkDesign(this.getCtx())) {
133      this.adjustStyle()
134    }
135    this.is_default = false
136  }
137  /** 初始化config */
138  initConfig() {
139    const ctx = this.getCtx()
140    const thisConfigList = unitAllow[this.type] || []
141    thisConfigList.forEach(key => {
142      this.config[key] = new configCollect[key](ctx, this.config[key], this)
143      if (ctx.state.site.site_type === 1 && this.is_default && this.config[key].type === 'product_detail') {
144        this.config[key].show_content = this.config[key].show_content.filter(_val => _val !== "like")
145      }
146      if (!ctx.state.page.isDetail && !ctx.state.template.otherData.config_has_h1 && this.config[key].heading_type === '1') {
147        ctx.state.template.otherData.config_has_h1 = 1
148      }
149    })
150  }
151  /** 初始化content  */
152  async initContent() {
153    const ctx = this.getCtx()
154    this.content = new Content(ctx, this)
155    await this.content.init()
156  }
157  /** 调整样式 */
158  adjustStyle() {
159    const ctx = this.getCtx()
160    if (this.content?.data?.length && this.config.image && (!this.config.image.scale || this.config.image.scale === 'origin')) {
161      // 计算图片内容高度
162      for (let i = 0; i < this.content.data.length; i ++) {
163        let listFlexDirection = 'column'
164        let item = this.content.data[i]
165        if (item.img_width && item.img_height) {
166          let prevHeight = 0
167          let itemStyle = {['.base-image__img[img-index="' + i + '"]']: { default: {}, md: {}, xl: {} }}
168          const screenList = ['default', 'md', 'xl']
169          screenList.forEach(screen => {
170            const flexDirection = this.style['.unit-list__item-inner']?.[screen]?.['flex-direction']
171            if ((flexDirection && flexDirection.indexOf('row') > -1) || ['dev-history2', 'dev-history3'].includes(this.type)) {
172              listFlexDirection = 'row'
173            }
174
175            let itemWidth = 0
176            let itemRatio = 1
177            let effectWidth = this.style['.base-image__img']?.[screen]?.['width']
178            effectWidth = typeof effectWidth === 'undefined' ? '' : effectWidth
179            let effectHeight = this.style['.base-image__img']?.[screen]?.['height']
180            effectHeight = typeof effectHeight === 'undefined' ? '' : effectHeight
181
182            if (prevHeight) {
183              if (!effectWidth && !effectHeight) {
184                // 当前终端没有设置图片宽高，则跳过该终端设置
185                if (listFlexDirection === 'row') {
186                  itemStyle['.base-image__img[img-index="' + i + '"]'][screen] = {height: 'auto'}
187                }
188                return true
189              }
190              if (effectWidth.indexOf('px') === -1 || listFlexDirection === 'row') {
191                itemStyle['.base-image__img[img-index="' + i + '"]'][screen] = {height: effectHeight || 'auto'}
192                return true
193              }
194            }
195
196            if (
197              (item.img_width > 100 && (!effectWidth || effectWidth.indexOf('px') === -1)) ||
198              (effectHeight && effectHeight !== 'auto' && effectHeight.indexOf('%') === -1)
199            ) {
200              if (effectHeight) {
201                prevHeight = effectHeight
202              }
203              // 宽度大于100且没有设置具体宽度值的在image层使用比例进行控制、高度设了具体值的不做处理
204              return true
205            }
206
207            if (!effectWidth || effectWidth === 'auto') {
208              itemWidth = item.img_width
209            } else if (effectWidth.indexOf('px') > 0) {
210              itemRatio = item.img_width / item.img_height
211            } else if (effectWidth.indexOf('%') > 0) {
212              // 占位
213              prevHeight = '100%'
214            }
215
216            if (listFlexDirection !== 'row') {
217              if (itemWidth) {
218                prevHeight = parseFloat(itemWidth / item.img_width * item.img_height) + 'px'
219                itemStyle['.base-image__img[img-index="' + i + '"]'][screen] = {height: prevHeight, display: 'inline-block'}
220              } else if (itemRatio) {
221                prevHeight = parseFloat(itemWidth / item.img_width * item.img_height) + 'px'
222                itemStyle['.base-image__img[img-index="' + i + '"]'][screen] = {['aspect-ratio']: itemRatio, display: 'inline-block'}
223              }
224            }
225          })
226          this.style.append(itemStyle)
227        }
228      }
229    }
230  }
231
232  /** 初始化钩子函数 */
233  initHooks() {
234    const ctx = this.getCtx()
235    if (hooks[this.type]) {
236      this.hook = new hooks[this.type](ctx, {}, this)
237    } else {
238      this.hook = new HookUnit(ctx, {}, this)
239    }
240  }
241}
242
243export default Unit