jufubao-base 1.0.186 → 1.0.187-beta2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -16,17 +16,15 @@
16
16
  <view class="jfb-base-fast-link__body">
17
17
  <template v-if="is_layout === 'noraml'">
18
18
  <view class="x-line"></view>
19
- <view class="fast-link" :style="{ margin: outMargin}" v-if="list.length > 0">
19
+ <view
20
+ class="fast-link"
21
+ :style="[bodyStyle]"
22
+ v-if="list.length > 0">
20
23
  <view
21
24
  class="fast-link__item"
22
25
  v-for="item in list"
23
26
  :key="item.key"
24
- :style="{
25
- background: backgroundColor,
26
- border: borderBox,
27
- borderRadius: radius + 'rpx',
28
- marginBottom: padding + 'rpx'
29
- }"
27
+ :style="[contStyle]"
30
28
  @click="handleClick(item)"
31
29
  >
32
30
  <view class="fast-link__item-icon" v-if="item.icon">
@@ -107,7 +105,8 @@
107
105
 
108
106
  //其他
109
107
  margin: {},
110
- padding: 20, //间距
108
+ padding:{},
109
+ rowSpacing: 20, //间距
111
110
  }
112
111
  },
113
112
  watch: {
@@ -118,16 +117,32 @@
118
117
  },
119
118
 
120
119
  computed: {
121
- outMargin(){
122
- let str = `${this.checkValue(this.margin.top, 20)}rpx`;
123
- str = `${str} ${this.checkValue(this.margin.right, 20)}rpx`;
124
- str = `${str} ${this.checkValue(this.margin.bottom, 20)}rpx`;
125
- str = `${str} ${this.checkValue(this.margin.left, 20)}rpx`;
126
- return str
120
+ bodyStyle(){
121
+ let margin = `${this.checkValue(this.margin.top, 0)}rpx`;
122
+ margin = `${margin} ${this.checkValue(this.margin.right, 0)}rpx`;
123
+ margin = `${margin} ${this.checkValue(this.margin.bottom, 0)}rpx`;
124
+ margin = `${margin} ${this.checkValue(this.margin.left, 0)}rpx`;
125
+
126
+ let padding = `${this.checkValue(this.margin.top, 20)}rpx`;
127
+ padding = `${padding} ${this.checkValue(this.margin.right, 20)}rpx`;
128
+ padding = `${padding} ${this.checkValue(this.margin.bottom, 20)}rpx`;
129
+ padding = `${padding} ${this.checkValue(this.margin.left, 20)}rpx`;
130
+
131
+ return {
132
+ margin,
133
+ padding
134
+ }
127
135
  },
128
- borderBox() {
129
- if (this.is_border === 'Y') return `${this.is_border_w}rpx solid ${this.is_border_c}`;
130
- else return '0';
136
+
137
+ contStyle(){
138
+ let border = 0;
139
+ if (this.is_border === 'Y') border = `${this.is_border_w}rpx solid ${this.is_border_c}`;
140
+ return {
141
+ background: this.backgroundColor,
142
+ borderRadius: this.radius + 'rpx',
143
+ marginBottom: this.rowSpacing + 'rpx',
144
+ border
145
+ }
131
146
  },
132
147
 
133
148
  subNameSize(){
@@ -152,6 +167,7 @@
152
167
  }
153
168
  },
154
169
  handleClick(item){
170
+ if (this.$configProject['isPreview']) return
155
171
  if(item.path && item.path.value) {
156
172
  this.$xdUniHelper.navigateTo({
157
173
  url : `${item.path.value}`
@@ -168,9 +184,8 @@
168
184
  this.fontSize = getContainerPropsValue(container, 'content.fontSize', 26);
169
185
  this.radius = getContainerPropsValue(container, 'content.radius', 10);
170
186
  this.iconColor = getContainerPropsValue(container, 'content.iconColor', '#999');
171
- this.padding = getContainerPropsValue(container, 'content.padding', 20);
187
+ this.rowSpacing = getContainerPropsValue(container, 'content.rowSpacing', 20);
172
188
  this.is_layout = getContainerPropsValue(container, 'content.is_layout', 'noraml');
173
- //this.fastName = getContainerPropsValue(container, 'content.fastName', '快速导航');
174
189
  this.is_border = getContainerPropsValue(container, 'content.is_border', 'N');
175
190
  this.is_border_c = getContainerPropsValue(container, 'content.is_border_c', '#fff');
176
191
  this.is_border_w = getContainerPropsValue(container, 'content.is_border_w', 2);
@@ -213,8 +228,8 @@
213
228
  }).filter((item,index)=>{
214
229
  return index < 3
215
230
  });
216
- }
217
231
 
232
+ }
218
233
  },
219
234
  }
220
235
  }
@@ -1,86 +1,152 @@
1
1
  'use strict';
2
+ import ICONS from '@/ICONS'
3
+
2
4
  export default {
3
5
  style: [],
4
6
  advanced: [],
5
- content: [
6
- {
7
- label: '',
8
- ele: 'slot',
9
- slot: 'is_reference_title',
10
- groupKey: 'advanced',
11
- },
12
- {
13
- label: '背景颜色:',
14
- ele: 'xd-color',
15
- valueKey: 'bgColor',
16
- groupKey:'style',
17
- value: '',
18
- placeholder: '请选择背景颜色',
19
- setting: {
20
- isAlpha: false
7
+ content:(data)=>{
8
+ let footerSettingImage = [];
9
+ let footerSetting = [];
10
+ if(data['footerSettingImage'] && data['footerSettingImage'].length > 0 ) {
11
+ footerSettingImage = data['footerSettingImage'];
12
+ }
13
+ if(data['footer-setting'] && data['footer-setting'].length > 0){
14
+ footerSetting = data['footer-setting'];
15
+ footerSetting.map((item,index)=>{
16
+ if(!footerSettingImage[index]) footerSettingImage[index] = {};
17
+ footerSettingImage[index] = Object.assign({},JSON.parse(JSON.stringify(item)),footerSettingImage[index])
18
+ })
19
+ }
20
+ return [
21
+ {
22
+ label: '',
23
+ ele: 'slot',
24
+ slot: 'is_reference_title',
25
+ groupKey: 'advanced',
26
+ },
27
+ {
28
+ label: '背景图设置:',
29
+ ele: 'xd-upload',
30
+ valueKey: 'backgroundImage',
31
+ groupKey:'content',
32
+ value: data.backgroundImage || {},
33
+ defaultValue: data.backgroundImage || null,
34
+ slot: true,
35
+ oneWidth: 375,
36
+ oneHeight: 55,
37
+ elinputClassName: 'input40',
38
+ tipsformet: '上传文件格式:@imageType@,不超过@size@MB。建议尺寸:<span style="color:red">750*110</span>像素',
39
+ type: ['jpg', 'png', 'jpeg'],
40
+ styleType: 'one',
41
+ uploadType: 'aliyun',
42
+ size: .5,
43
+ action: 'action',
44
+ sort: true,
45
+ maxlen: 1,
46
+ },
47
+ {
48
+ label: '背景颜色:',
49
+ ele: 'xd-color',
50
+ valueKey: 'bgColor',
51
+ groupKey:'content',
52
+ value: data['bgColor'] || '',
53
+ placeholder: '请选择背景颜色',
54
+ setting: {
55
+ isAlpha: false
56
+ },
57
+ classNmae: 'input80',
21
58
  },
22
- classNmae: 'input80',
23
- },
24
- {
25
- label: '菜单文字颜色:',
26
- ele: 'xd-color',
27
- valueKey: 'color',
28
- groupKey:'style',
29
- value: '',
30
- setting: {
31
- isAlpha: false
59
+ {
60
+ label: '菜单文字颜色:',
61
+ ele: 'xd-color',
62
+ valueKey: 'color',
63
+ groupKey:'content',
64
+ value: data['color'] || '',
65
+ setting: {
66
+ isAlpha: false
67
+ },
68
+ placeholder: '请选择菜单文字颜色',
69
+ classNmae: 'input80',
32
70
  },
33
- placeholder: '请选择菜单文字颜色',
34
- classNmae: 'input80',
35
- },
36
- {
37
- label: '菜单文字选中颜色:',
38
- ele: 'xd-color',
39
- valueKey: 'selectedColor',
40
- groupKey:'style',
41
- setting: {
42
- isAlpha: false
71
+ {
72
+ label: '菜单文字选中颜色:',
73
+ ele: 'xd-color',
74
+ valueKey: 'selectedColor',
75
+ groupKey:'content',
76
+ setting: {
77
+ isAlpha: false
78
+ },
79
+ value:data['selectedColor'] || '',
80
+ placeholder: '请选择菜单文字选中颜色',
81
+ classNmae: 'input80',
43
82
  },
44
- value: '',
45
- placeholder: '请选择菜单文字选中颜色',
46
- classNmae: 'input80',
47
- },
48
- {
49
- label: '菜单配置:',
50
- ele: 'xd-footer-setting',
51
- valueKey: 'footer-setting',
52
- groupKey:'advanced',
53
- value: [],
54
- setting: {
55
- router: XdBus.getParentApi('getPagesTree'),
56
- showField: {
57
- path: true,
58
- icon: true,
59
- notice: true
60
- }
83
+ footerSetting.length > 0 && {
84
+ label: '菜单图片配置:',
85
+ ele: 'xd-footer-setting',
86
+ valueKey: 'footerSettingImage',
87
+ groupKey:'content',
88
+ value: footerSettingImage,
89
+ setting: {
90
+ router: XdBus.getParentApi('getPagesTree'),
91
+ hideAdd: true,
92
+ showField: {
93
+ path: false,
94
+ icon: false,
95
+ notice: false,
96
+ image: true,
97
+ actImage: true
98
+ }
99
+ },
100
+ handleCustom({action,data}){
101
+ if(action === 'number') {
102
+ XdBus.getParentApi('getOptionsNoticeNumber')()
103
+ .then(res => {
104
+ data.cb(res.list)
105
+ })
106
+ .catch();
107
+ }
108
+ },
109
+ },
110
+
111
+ {
112
+ label: '菜单配置:',
113
+ ele: 'xd-footer-setting',
114
+ valueKey: 'footer-setting',
115
+ groupKey:'advanced',
116
+ value: footerSetting,
117
+ setting: {
118
+ router: XdBus.getParentApi('getPagesTree'),
119
+ icons:ICONS,
120
+
121
+ showField: {
122
+ path: true,
123
+ icon: true,
124
+ notice: true,
125
+ }
126
+ },
127
+ handleCustom({action,data}){
128
+ console.log(`handleCustom.${action}`, data);
129
+ if(action === 'number') {
130
+ XdBus.getParentApi('getOptionsNoticeNumber')()
131
+ .then(res => {
132
+ data.cb(res.list)
133
+ })
134
+ .catch();
135
+ }
136
+ },
137
+ inline: false,
138
+ notice: '设置底部菜单的链接地址1、标题(最多<sapn style="color: red">五个汉字</sapn>)、ICON图标(<a href="https://www.iconfont.cn/manage/index?spm=a313x.7781069.1998910419.db775f1f3&manage_type=myprojects&projectId=3378319&keyword=&project_type=&page=" style="color: blue" target="_blank">ICONFONT库</a>)、ICON大小(单位:<sapn style="color: red">像素</sapn>)和是否有消息数量显示(无数量显示可以不填写)',
139
+ rules: [
140
+ {required: true, message: '请添加内容', trigger: 'change'},
141
+ ],
61
142
  },
62
- handleCustom({action,data}){
63
- console.log(`handleCustom.${action}`, data);
64
- if(action === 'number') {
65
- XdBus.getParentApi('getOptionsNoticeNumber')()
66
- .then(res => {
67
- data.cb(res.list)
68
- })
69
- .catch();
70
- }
143
+ {
144
+ label: '',
145
+ ele: 'slot',
146
+ slot: 'is_reference',
147
+ groupKey: 'advanced',
71
148
  },
72
- inline: false,
73
- notice: '设置底部菜单的链接地址1、标题(最多<sapn style="color: red">五个汉字</sapn>)、ICON图标(<a href="https://www.iconfont.cn/manage/index?spm=a313x.7781069.1998910419.db775f1f3&manage_type=myprojects&projectId=3378319&keyword=&project_type=&page=" style="color: blue" target="_blank">ICONFONT库</a>)、ICON大小(单位:<sapn style="color: red">像素</sapn>)和是否有消息数量显示(无数量显示可以不填写)',
74
- rules: [
75
- {required: true, message: '请添加内容', trigger: 'change'},
76
- ],
77
- },
78
- {
79
- label: '',
80
- ele: 'slot',
81
- slot: 'is_reference',
82
- groupKey: 'advanced',
83
- },
84
- ],
149
+ ].filter(i=>i);
150
+ },
85
151
  };
86
152
 
@@ -16,16 +16,19 @@
16
16
  <view class="jfb-base-footer__edit-icon" @click="delEdit">删除</view>
17
17
  </view>
18
18
  <!-- #endif -->
19
- <view class="jfb-base-footer__body" :style="{height:height + 'rpx'}">
20
- <xd-footer-bar
21
- v-if="list !== null"
22
- :height="height"
23
- :tabbar="list"
24
- :view="view"
25
- :styles="styles"
26
- :key="footerBarKey"
27
- :base-url="baseUrl"
28
- ></xd-footer-bar>
19
+ <view class="jfb-base-footer__body">
20
+ <view :style="[bodyStyle]">
21
+ <xd-footer-bar
22
+ style="height:100%"
23
+ v-if="list !== null"
24
+ :height="height"
25
+ :tabbar="list"
26
+ :view="view"
27
+ :styles="styles"
28
+ :key="footerBarKey"
29
+ :base-url="baseUrl"
30
+ ></xd-footer-bar>
31
+ </view>
29
32
  </view>
30
33
  </view>
31
34
  </template>
@@ -42,6 +45,7 @@
42
45
  getContainerPropsValue,
43
46
  getComponentAttr
44
47
  } from "@/utils/xd.base";
48
+ import getServiceUrl from "@/common/getServiceUrl";
45
49
 
46
50
  export default {
47
51
  name: "JfbBaseFooter",
@@ -50,6 +54,21 @@
50
54
  XdFooterBar
51
55
  },
52
56
  mixins: [componentsMixins,extsMixins,JfbBaseFooterMixin],
57
+ computed:{
58
+ bodyStyle(){
59
+ let background = 'url(none)';
60
+ if(this.backgroundImage && this.backgroundImage.url) {
61
+ background = `url(${getServiceUrl(this.backgroundImage.url)})`;
62
+ }
63
+ return {
64
+ height: this.height + 'rpx',
65
+ backgroundImage: background,
66
+ backgroundSize: '100% 100%',
67
+ backgroundRepeat: 'no-repeat',
68
+ backgroundPosition: 'top center',
69
+ }
70
+ }
71
+ },
53
72
  data() {
54
73
  return {
55
74
  height: 0,
@@ -58,6 +77,7 @@
58
77
  numObj: {},
59
78
  footerBarKey: 'footerBarKey', //刷新
60
79
  baseUrl: '',
80
+ backgroundImage: '',
61
81
  }
62
82
  },
63
83
  watch: {
@@ -82,12 +102,14 @@
82
102
 
83
103
  //设置高度
84
104
  if(this.$configProject.isPreview) {
85
- this.height = getComponentAttr(this.componentAttr, 'height') - 4;
105
+ this.height = getComponentAttr(this.componentAttr, 'height');
86
106
  }
87
107
  else {
88
108
  this.height = getComponentAttr(this.componentAttr, 'height');
89
109
  }
90
110
 
111
+ this.height = Number(this.height);
112
+
91
113
  this.init(this.container);
92
114
  //监听重试消息数量
93
115
  this.$xdRoot.$on('restFooterNumber', this.handle)
@@ -159,6 +181,13 @@
159
181
  this.footerBarKey = this.$xdUniHelper.randomChar(20);
160
182
  },
161
183
 
184
+ getImage(list=[],index,key){
185
+ if(!list[index]) return '';
186
+ if(list[index] && !list[index][key]) return '';
187
+ let item = list[index][key];
188
+ return getServiceUrl(item.url, 'size1');
189
+ },
190
+
162
191
  /**
163
192
  * @description 监听事件变化
164
193
  * @param value {object} 业务组件对象自己
@@ -166,8 +195,11 @@
166
195
  init(value) {
167
196
  //设置底部菜单
168
197
  let bar = getContainerPropsValue(value, 'content.footer-setting', []);
198
+ let imageIcons = getContainerPropsValue(value, 'content.footerSettingImage', []);
199
+ this.backgroundImage = getContainerPropsValue(value, 'content.backgroundImage', '');
169
200
  this.list = {
170
201
  bgColor: getContainerPropsValue(value, 'content.bgColor', '#fff'),
202
+ bodyStyle: this.bodyStyle,
171
203
  selectedColor: getContainerPropsValue(value, 'content.selectedColor', this.mainColor),
172
204
  color: getContainerPropsValue(value, 'content.color', '#333'),
173
205
  list: bar.map((item,index)=>{
@@ -177,6 +209,8 @@
177
209
  path: item.path.value,
178
210
  size: item.size,
179
211
  num: this.numObj[index] ? this.numObj[index]: 0 ,
212
+ image: this.getImage(imageIcons,index,'image') || this.getImage(imageIcons,index,'actImage'),
213
+ actImage: this.getImage(imageIcons,index,'actImage') || this.getImage(imageIcons,index,'image'),
180
214
  }
181
215
  }),
182
216
  };
@@ -190,6 +224,7 @@
190
224
  @import "./JfbBaseFooterLess.less";
191
225
 
192
226
  .jfb-base-footer {
227
+
193
228
  &__body{
194
229
  box-sizing: border-box;
195
230
  }
@@ -332,48 +332,50 @@ export default {
332
332
  notice: '间距设置,<span style="color: red">单位:像素</span>。默认值:<span style="color: red">20</span>像素',
333
333
  },
334
334
  {
335
- ele: 'title',
336
- label: '投影设置',
337
- size: 'small',
335
+ label: "主体信息行间距:",
336
+ ele: 'el-input',
337
+ type: 'number',
338
+ valueKey: 'lineHeight',
338
339
  groupKey:'style',
340
+ value: data['lineHeight'] || 20,
341
+ placeholder: '请输入主体信息行间距',
342
+ className: 'input80',
339
343
  },
340
344
  {
341
- label: '是否有投影:',
342
- ele: 'xd-radio',
345
+ label: '投影设置:',
346
+ ele: "xd-shadow",
347
+ valueKey: "sectionShadow",
348
+ value: data.sectionShadow || {},
343
349
  groupKey:'style',
344
- valueKey: 'is_shadow',
345
- value: data['is_shadow'] || 'N',
346
- placeholder: '请选择是否投影',
347
- multiple: false,
348
- className: 'input80',
349
- list: [
350
- { label: '是', value: 'Y' },
351
- { label: '否', value: 'N' },
352
- ]
350
+ handleCustom({action, data}) {
351
+ XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_style_radius'})
352
+ .then(res => {
353
+ data.cb(res.list)
354
+ })
355
+ .catch(error => {
356
+ console.error(error);
357
+ data.cb([])
358
+ });
359
+ },
353
360
  },
354
- data['is_shadow'] === 'Y' && {
355
- label: '投影颜色:',
356
- ele: 'xd-color',
361
+ {
362
+ label: "边框设置:",
363
+ ele: "xd-border",
364
+ valueKey: "sectionBorder",
365
+ value: data.sectionBorder || {},
357
366
  groupKey:'style',
358
- valueKey: 'is_shadow_bg',
359
- value: data['is_shadow_bg'] || '',
360
- placeholder: '请选择投影颜色',
361
- classNmae: 'input80',
362
367
  },
363
- data['is_shadow'] === 'Y' && {
364
- label: '投影范围:',
368
+ {
369
+ label: '内容圆角设置:',
365
370
  ele: 'xd-site-select-list',
366
- valueKey: 'is_shadow_w',
371
+ valueKey: 'radius',
367
372
  groupKey:'style',
368
- value: data['is_shadow_w'] || '10',
369
- placeholder: '请选择投影范围',
373
+ value: data['radius'] || '',
374
+ placeholder: '请选择内容圆角设置',
370
375
  multiple: false,
371
376
  className: 'input80',
372
377
  handleCustom({ action, data }) {
373
- XdBus.getParentApi('getOptionsSettingList')({
374
- setting_id: 'edtix_style_radius',
375
- key: Date.now()
376
- })
378
+ XdBus.getParentApi('getOptionsSettingList')({ setting_id: 'edtix_style_radius' })
377
379
  .then(res => {
378
380
  data.cb(res.list)
379
381
  })
@@ -383,50 +385,45 @@ export default {
383
385
  },
384
386
  },
385
387
  {
386
- ele: 'title',
387
- label: '边框设置',
388
- size: 'small',
389
- groupKey:'style',
388
+ label: "底部按钮配置",
389
+ ele: "title",
390
+ groupKey: "style",
391
+ size: "small"
390
392
  },
391
393
  {
392
- label: '是否有边框:',
393
- ele: 'xd-radio',
394
- valueKey: 'is_border',
395
- value: data['is_border'] || 'N',
394
+ label: "容器内边距:",
395
+ ele: 'xd-margin-padding',
396
+ valueKey: 'bottomPadding',
397
+ value: data['bottomPadding'] || null,
396
398
  groupKey:'style',
397
- placeholder: '请选择是否有边框',
398
- multiple: false,
399
- className: 'input80',
400
- list: [
401
- { label: '是', value: 'Y' },
402
- { label: '否', value: 'N' },
403
- ]
399
+ setting: {
400
+ type: 'padding',
401
+ },
402
+ placeholder: '请设置容器内边距',
404
403
  },
405
- data['is_border'] === 'Y' && {
406
- label: '边框颜色:',
407
- ele: 'xd-color',
408
- groupKey:'style',
409
- valueKey: 'is_border_c',
410
- value: data['is_border_c'] || '',
411
- placeholder: '请选择边框颜色',
412
- classNmae: 'input80',
404
+ {
405
+ label: "容器背景颜色:",
406
+ ele: "xd-color",
407
+ valueKey: "bottomBgColor",
408
+ value: data.bottomBgColor || null,
409
+ groupKey: "style",
413
410
  },
414
- data['is_border'] === 'Y' && {
415
- label: '边框大小:',
416
- groupKey:'style',
417
- ele: 'el-input',
411
+ {
412
+ label: "按钮高度:",
413
+ ele: "el-input",
418
414
  type: 'number',
419
- valueKey: 'is_border_w',
420
- value: data['is_border_w'] || '',
421
- placeholder: '请输入边框颜色',
415
+ valueKey: "bottomBtnHeight",
416
+ groupKey:'style',
417
+ value: data['bottomBtnHeight'] || 60,
418
+ placeholder: '请输入按钮高度',
422
419
  className: 'input80',
423
420
  },
424
421
  {
425
- label: '内容圆角设置:',
426
- ele: 'xd-site-select-list',
427
- valueKey: 'radius',
422
+ label: '按钮圆角:',
423
+ ele: "xd-site-select-list",
424
+ valueKey: "bottomBtnRadius",
425
+ value: data['bottomBtnRadius'] || '',
428
426
  groupKey:'style',
429
- value: data['radius'] || '',
430
427
  placeholder: '请选择内容圆角设置',
431
428
  multiple: false,
432
429
  className: 'input80',
@@ -440,7 +437,6 @@ export default {
440
437
  });
441
438
  },
442
439
  },
443
-
444
440
  {
445
441
  label: '查看品牌路径:',
446
442
  ele: 'xd-select-pages-path',