jufubao-base 1.0.193 → 1.0.194-beta3
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.
- package/package.json +1 -1
- package/src/components/JfbBaseImageBlock/Attr.js +85 -0
- package/src/components/JfbBaseImageBlock/JfbBaseImageBlock.vue +119 -0
- package/src/components/JfbBaseImageBlock/JfbBaseImageBlockLess.less +79 -0
- package/src/components/JfbBaseImageBlock/JfbBaseImageBlockMixin.js +30 -0
- package/src/components/JfbBasePoster/Attr.js +10 -4
- package/src/components/JfbBasePoster/JfbBasePoster.vue +6 -4
- package/src/components/JfbBasePoster/MoreScreen.vue +8 -2
package/package.json
CHANGED
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @description 当表单组件中有联动操作时候，使用方法进行返回
|
|
5
|
+
*/
|
|
6
|
+
export default {
|
|
7
|
+
style: [],
|
|
8
|
+
content: (data) => {
|
|
9
|
+
let width = 750,height = 562.5;
|
|
10
|
+
if(data.height) height = Number(data.height);
|
|
11
|
+
if(data.width) width = Number(data.width);
|
|
12
|
+
|
|
13
|
+
return [
|
|
14
|
+
{
|
|
15
|
+
label: '',
|
|
16
|
+
ele: 'slot',
|
|
17
|
+
slot: 'is_reference_title',
|
|
18
|
+
groupKey:'advanced',
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
label: '边距设置:',
|
|
22
|
+
ele: 'xd-margin-padding',
|
|
23
|
+
valueKey: 'margin',
|
|
24
|
+
groupKey:'content',
|
|
25
|
+
value: data.margin || null,
|
|
26
|
+
setting: {
|
|
27
|
+
type: 'margin',
|
|
28
|
+
},
|
|
29
|
+
placeholder: '请设置边距设置',
|
|
30
|
+
inline: false,
|
|
31
|
+
notice: '设置边距充，<span style="color: red">单位：像素（px）</span>。默认值：<span style="color: red">0</span>像素',
|
|
32
|
+
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
label: '图片真实宽度:',
|
|
36
|
+
groupKey:'content',
|
|
37
|
+
ele: 'el-input',
|
|
38
|
+
type: 'number',
|
|
39
|
+
valueKey: 'width',
|
|
40
|
+
value: data.width || '',
|
|
41
|
+
className: 'input60',
|
|
42
|
+
inline:false,
|
|
43
|
+
notice:'图片真实宽度设置，单位像素，默认：<span style="color:red">750</span>px',
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
label: '图片真实高度:',
|
|
47
|
+
groupKey:'content',
|
|
48
|
+
ele: 'el-input',
|
|
49
|
+
type: 'number',
|
|
50
|
+
valueKey: 'height',
|
|
51
|
+
value: data.height||'',
|
|
52
|
+
className: 'input60',
|
|
53
|
+
inline:false,
|
|
54
|
+
notice:'图片真实高度设置，单位像素，默认：<span style="color:red">562.5</span>px',
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
label: '占位背景图片:',
|
|
58
|
+
ele: 'xd-upload',
|
|
59
|
+
valueKey: 'backgroundImage',
|
|
60
|
+
groupKey:'content',
|
|
61
|
+
value: data.backgroundImage || {},
|
|
62
|
+
defaultValue: data.backgroundImage || null,
|
|
63
|
+
slot: true,
|
|
64
|
+
oneWidth: 300,
|
|
65
|
+
oneHeight: 300 * height / width,
|
|
66
|
+
elinputClassName: 'input40',
|
|
67
|
+
tipsformet: `上传文件格式：@imageType@，不超过@size@MB，图片尺寸:<span style="color:red"> ${width}*${height}</span>像素`,
|
|
68
|
+
type: ['jpg', 'png', 'jpeg'],
|
|
69
|
+
styleType: 'one',
|
|
70
|
+
uploadType: 'aliyun',
|
|
71
|
+
size: 1,
|
|
72
|
+
action: 'action',
|
|
73
|
+
sort: true,
|
|
74
|
+
maxlen: 1,
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
label: '',
|
|
78
|
+
ele: 'slot',
|
|
79
|
+
slot: 'is_reference',
|
|
80
|
+
groupKey:'advanced',
|
|
81
|
+
},
|
|
82
|
+
].filter(i=>i)
|
|
83
|
+
},
|
|
84
|
+
advanced: [],
|
|
85
|
+
};
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<view
|
|
3
|
+
class="jfb-base-image-block"
|
|
4
|
+
@click="handleEditxSelect"
|
|
5
|
+
:class="{ editx : isEditx && active }"
|
|
6
|
+
>
|
|
7
|
+
<!--#ifdef H5-->
|
|
8
|
+
<view
|
|
9
|
+
class="jfb-base-image-block__edit"
|
|
10
|
+
:class="{ editx : isEditx && active }"
|
|
11
|
+
v-if="isEditx && active"
|
|
12
|
+
>
|
|
13
|
+
<view class="jfb-base-image-block__edit-icon" @click="delEdit">删除</view>
|
|
14
|
+
</view>
|
|
15
|
+
<!-- #endif -->
|
|
16
|
+
<view class="jfb-base-image-block__body">
|
|
17
|
+
<view class="x-line"></view>
|
|
18
|
+
<view class="image" :style="[bodyStyle]">
|
|
19
|
+
<image :src="backgroundImageComp" alt="bgImage"></image>
|
|
20
|
+
</view>
|
|
21
|
+
</view>
|
|
22
|
+
</view>
|
|
23
|
+
</template>
|
|
24
|
+
|
|
25
|
+
<script>
|
|
26
|
+
import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
|
|
27
|
+
import { jfbRootExec } from "@/utils/xd.event";
|
|
28
|
+
import JfbBaseImageBlockMixin from "./JfbBaseImageBlockMixin";
|
|
29
|
+
import { getContainerPropsValue } from "@/utils/xd.base";
|
|
30
|
+
import componentsMixins from "@/mixins/componentsMixins";
|
|
31
|
+
import extsMixins from "@/mixins/extsMixins";
|
|
32
|
+
import getServiceUrl from "@/common/getServiceUrl";
|
|
33
|
+
export default {
|
|
34
|
+
name: "JfbBaseImageBlock",
|
|
35
|
+
components: {
|
|
36
|
+
XdFontIcon
|
|
37
|
+
},
|
|
38
|
+
mixins: [
|
|
39
|
+
componentsMixins, extsMixins, JfbBaseImageBlockMixin
|
|
40
|
+
],
|
|
41
|
+
computed:{
|
|
42
|
+
marginComp(){
|
|
43
|
+
let str = `${this.checkValue(this.margin.top, 0)}rpx`;
|
|
44
|
+
str = `${str} ${this.checkValue(this.margin.right, 0)}rpx`;
|
|
45
|
+
str = `${str} ${this.checkValue(this.margin.bottom, 0)}rpx`;
|
|
46
|
+
str = `${str} ${this.checkValue(this.margin.left,0)}rpx`;
|
|
47
|
+
return str;
|
|
48
|
+
},
|
|
49
|
+
|
|
50
|
+
backgroundImageComp(){
|
|
51
|
+
if(this.$xdUniHelper.checkVarType(this.backgroundImage) === 'object') {
|
|
52
|
+
if(this.backgroundImage.url) return getServiceUrl(this.backgroundImage.url,'size8')
|
|
53
|
+
else return ''
|
|
54
|
+
}
|
|
55
|
+
return '';
|
|
56
|
+
},
|
|
57
|
+
|
|
58
|
+
bodyStyle(){
|
|
59
|
+
let outWidth = uni.getSystemInfoSync().safeArea.width * this.$pxNum;
|
|
60
|
+
let outMarginRL = this.checkValue(this.margin.right, 0) + this.checkValue(this.margin.left, 0);
|
|
61
|
+
let bgColor = 'rgba(0,0,0,0)';
|
|
62
|
+
if(this.backgroundImageComp === '') bgColor = '#f8f8f8'
|
|
63
|
+
return {
|
|
64
|
+
margin: this.marginComp,
|
|
65
|
+
width: (outWidth - outMarginRL) +'rpx',
|
|
66
|
+
height: this.height * (outWidth - outMarginRL)/this.width + 'rpx',
|
|
67
|
+
backgroundColor: bgColor
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
data() {
|
|
72
|
+
return {
|
|
73
|
+
closeMask: true,
|
|
74
|
+
height: 562.5,
|
|
75
|
+
width: 750,
|
|
76
|
+
margin:{},
|
|
77
|
+
backgroundImage:{},
|
|
78
|
+
}
|
|
79
|
+
},
|
|
80
|
+
watch: {
|
|
81
|
+
container(value, oldValue) {
|
|
82
|
+
if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
|
|
83
|
+
if (this.$configProject['isPreview']) this.init(value)
|
|
84
|
+
},
|
|
85
|
+
},
|
|
86
|
+
created() {
|
|
87
|
+
this.init(this.container);
|
|
88
|
+
},
|
|
89
|
+
methods: {
|
|
90
|
+
onJfbLoad(options) {
|
|
91
|
+
},
|
|
92
|
+
/**
|
|
93
|
+
* @description 监听事件变化
|
|
94
|
+
* @param container {object} 业务组件对象自己
|
|
95
|
+
*/
|
|
96
|
+
init(container) {
|
|
97
|
+
this.height = Number(getContainerPropsValue(container, 'content.height', 562.5));
|
|
98
|
+
this.width = Number(getContainerPropsValue(container, 'content.width', 750));
|
|
99
|
+
this.margin = getContainerPropsValue(container, 'content.margin', {});
|
|
100
|
+
this.backgroundImage = getContainerPropsValue(container, 'content.backgroundImage', {})
|
|
101
|
+
},
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
</script>
|
|
106
|
+
|
|
107
|
+
<style scoped lang="less">
|
|
108
|
+
@import "./JfbBaseImageBlockLess.less";
|
|
109
|
+
|
|
110
|
+
.jfb-base-image-block {
|
|
111
|
+
min-height: 20rpx!important;
|
|
112
|
+
&__body{
|
|
113
|
+
.image image {
|
|
114
|
+
height: 100%;
|
|
115
|
+
width: 100%;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
</style>
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @desc 获取绝对路径完整地址
|
|
3
|
+
* @param @path
|
|
4
|
+
**/
|
|
5
|
+
//例如：https://image.jufubao.cn/20220501010108/image/bg/default_gonghui_bg.png
|
|
6
|
+
@basePath: 'business/';
|
|
7
|
+
@doMain: '//sandbox-img.jufubao.cn/';
|
|
8
|
+
|
|
9
|
+
.getBusinessImageUrl(@path, @size: 'size8') {
|
|
10
|
+
@url: "@{doMain}@{basePath}@{path}?x-oss-process=style/@{size}";
|
|
11
|
+
background-image: url(@url);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
//start
|
|
15
|
+
.jfb-base-image-block {
|
|
16
|
+
box-sizing: border-box;
|
|
17
|
+
|
|
18
|
+
&__body{
|
|
19
|
+
position: relative;
|
|
20
|
+
overflow: hidden;
|
|
21
|
+
z-index: 2
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
&.editx,&.editx:hover {
|
|
25
|
+
position: relative;
|
|
26
|
+
min-height: unit(100, rpx);
|
|
27
|
+
z-index: 3;
|
|
28
|
+
&::after {
|
|
29
|
+
border: 2rpx dashed blue;
|
|
30
|
+
content: " ";
|
|
31
|
+
position: absolute;
|
|
32
|
+
top:0;
|
|
33
|
+
left:0;
|
|
34
|
+
bottom:0;
|
|
35
|
+
right:0;
|
|
36
|
+
z-index: 4;
|
|
37
|
+
cursor: pointer;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
&__edit {
|
|
44
|
+
cursor: pointer;
|
|
45
|
+
position: absolute;
|
|
46
|
+
right: unit(0, rpx);
|
|
47
|
+
top: unit(-52, rpx);
|
|
48
|
+
height: unit(50, rpx);
|
|
49
|
+
line-height: unit(50, rpx);
|
|
50
|
+
display: flex;
|
|
51
|
+
justify-content: center;
|
|
52
|
+
align-items: center;
|
|
53
|
+
background: rgba(0, 0, 0, .6);
|
|
54
|
+
border-radius: unit(10, rpx);
|
|
55
|
+
box-shadow: 0 0 10px rbga(0, 0, 0, 0.3);
|
|
56
|
+
color: #fff;
|
|
57
|
+
font-size: unit(22, rpx);
|
|
58
|
+
|
|
59
|
+
&-icon{
|
|
60
|
+
padding: 0 unit(20, rpx);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
&.editx {
|
|
64
|
+
box-sizing: border-box;
|
|
65
|
+
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
//end
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
/**notPreview**/
|
|
73
|
+
.jfb-base-image-block {
|
|
74
|
+
//&:before {
|
|
75
|
+
//content: " ";
|
|
76
|
+
//display: table;
|
|
77
|
+
//}
|
|
78
|
+
}
|
|
79
|
+
/**endNotPreview**/
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
//@AttrImport
|
|
5
|
+
import Attr from "./Attr";
|
|
6
|
+
//@EndAttrImport
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
export default {
|
|
10
|
+
data() {
|
|
11
|
+
return {
|
|
12
|
+
//#ifdef H5
|
|
13
|
+
|
|
14
|
+
//@AttrData
|
|
15
|
+
Attr:{}, //对外开发编辑属性
|
|
16
|
+
//@EndAttrData
|
|
17
|
+
|
|
18
|
+
// #endif
|
|
19
|
+
cssRoot: 'jfb-base-image-block'
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
created() {
|
|
23
|
+
|
|
24
|
+
//@AttrDataCreated
|
|
25
|
+
this.Attr = this.$xdUniHelper.customClone(Attr);
|
|
26
|
+
//@EndAttrDataCreated
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
},
|
|
30
|
+
}
|
|
@@ -355,11 +355,17 @@ export default {
|
|
|
355
355
|
{"label": "三行", "value": 3},
|
|
356
356
|
]
|
|
357
357
|
},
|
|
358
|
+
{
|
|
359
|
+
ele: 'title',
|
|
360
|
+
label: '广告样式设置',
|
|
361
|
+
size: 'small',
|
|
362
|
+
groupKey:'content',
|
|
363
|
+
},
|
|
358
364
|
{
|
|
359
365
|
label: '广告位边距设置:',
|
|
360
366
|
ele: 'xd-margin-padding',
|
|
361
367
|
valueKey: 'margin',
|
|
362
|
-
groupKey:'
|
|
368
|
+
groupKey:'content',
|
|
363
369
|
value: params.margin || null,
|
|
364
370
|
setting: {
|
|
365
371
|
type: 'margin',
|
|
@@ -374,7 +380,7 @@ export default {
|
|
|
374
380
|
ele: 'xd-margin-padding',
|
|
375
381
|
valueKey: 'bgImagePadding',
|
|
376
382
|
value: params['bgImagePadding'] || null,
|
|
377
|
-
groupKey:'
|
|
383
|
+
groupKey:'content',
|
|
378
384
|
setting: {
|
|
379
385
|
type: 'padding',
|
|
380
386
|
},
|
|
@@ -388,7 +394,7 @@ export default {
|
|
|
388
394
|
type: 'number',
|
|
389
395
|
valueKey: 'padding',
|
|
390
396
|
value: params.padding || 0,
|
|
391
|
-
groupKey:'
|
|
397
|
+
groupKey:'content',
|
|
392
398
|
className: 'input40',
|
|
393
399
|
placeholder: '请广告内容之间间距设置',
|
|
394
400
|
notice: '请广告内容之间间距设置。<span style="color: red">单位：像素（px）</span>。默认值：<span style="color: red">0</span>像素',
|
|
@@ -398,7 +404,7 @@ export default {
|
|
|
398
404
|
label: '广告圆角设置:',
|
|
399
405
|
ele: 'xd-site-select-list',
|
|
400
406
|
valueKey: 'radius',
|
|
401
|
-
groupKey:'
|
|
407
|
+
groupKey:'content',
|
|
402
408
|
value: params['radius'] || '20',
|
|
403
409
|
placeholder: '请选择广告圆角设置',
|
|
404
410
|
multiple: false,
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
<!-- #endif -->
|
|
16
16
|
<view class="jfb-base-poster__body" v-if="noData">
|
|
17
17
|
<view class="x-line"></view>
|
|
18
|
-
<view class="jfb-base-poster-cont" :style="getBodyStyle">
|
|
18
|
+
<view class="jfb-base-poster-cont" :style="[getBodyStyle]">
|
|
19
19
|
<!--一分屏-->
|
|
20
20
|
<template v-if="posterType === '1'">
|
|
21
21
|
<view
|
|
@@ -106,7 +106,7 @@
|
|
|
106
106
|
</view>
|
|
107
107
|
</view>
|
|
108
108
|
<!--解决图片缓冲预加载问题-->
|
|
109
|
-
<view v-for="(item,index) in info" :key="index" style="position: absolute; top: -19999px; left: -100000px">
|
|
109
|
+
<view v-if="item.image_background_url" v-for="(item,index) in info" :key="index" style="position: absolute; top: -19999px; left: -100000px">
|
|
110
110
|
<image :src="item.image_background_url" ></image>
|
|
111
111
|
</view>
|
|
112
112
|
<!--解决图片缓冲预加载问题-->
|
|
@@ -180,9 +180,9 @@
|
|
|
180
180
|
}
|
|
181
181
|
image = Object.assign({},image,{
|
|
182
182
|
margin: this.margin,
|
|
183
|
-
padding: this.outPadding
|
|
183
|
+
padding: this.outPadding,
|
|
184
184
|
})
|
|
185
|
-
return
|
|
185
|
+
return image
|
|
186
186
|
},
|
|
187
187
|
getOneWidth(){
|
|
188
188
|
let margin = this.checkValue(this.mS.left, 0) + this.checkValue(this.mS.right, 0);
|
|
@@ -212,6 +212,7 @@
|
|
|
212
212
|
carouselTime: this.carouselTime,
|
|
213
213
|
radius: this.radius,
|
|
214
214
|
padding: this.padding,
|
|
215
|
+
bgImagePadding: this.bgImagePadding,
|
|
215
216
|
rows: this.rows,
|
|
216
217
|
cell,
|
|
217
218
|
height,
|
|
@@ -655,6 +656,7 @@
|
|
|
655
656
|
@import "./JfbBasePosterLess.less";
|
|
656
657
|
|
|
657
658
|
.jfb-base-poster {
|
|
659
|
+
min-height: 60rpx!important;
|
|
658
660
|
&__body{
|
|
659
661
|
& > view.jfb-base-poster-cont {
|
|
660
662
|
box-sizing: border-box;
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
field="content_name"
|
|
34
34
|
:mode="config.mode"
|
|
35
35
|
:dots-styles="config.dotStyleData"
|
|
36
|
-
:style="{height:(
|
|
36
|
+
:style="{height:(outHeight) + 'px', width:'100%'}"
|
|
37
37
|
>
|
|
38
38
|
<!--#ifdef MP-WEIXIN-->
|
|
39
39
|
<swiper
|
|
@@ -151,7 +151,13 @@
|
|
|
151
151
|
let height = this.height * this.config.rows;
|
|
152
152
|
let padding = 0;
|
|
153
153
|
if (this.config.rows >= 2) padding = Number(this.config.padding) * this.$rpxNum * (this.config.rows -1);
|
|
154
|
-
return height + padding
|
|
154
|
+
return height + padding
|
|
155
|
+
},
|
|
156
|
+
|
|
157
|
+
outHeight(){
|
|
158
|
+
let modeHeight = 46 * this.$rpxNum ;
|
|
159
|
+
if(this.config.mode === "normal") modeHeight = 0;
|
|
160
|
+
return this.getHeight + modeHeight;
|
|
155
161
|
},
|
|
156
162
|
},
|
|
157
163
|
watch: {
|