jufubao-base 1.0.199 → 1.0.200-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.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/JfbBasePosterBigSmall/JfbBasePosterBigSmall.vue +25 -25
  3. package/src/components/JfbBasePosterBigSmall/getWidthHeight.js +13 -9
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "jufubao-base",
3
- "version": "1.0.199",
3
+ "version": "1.0.200-beta3",
4
4
  "private": false,
5
5
  "description": "聚福宝业务组件基础插件包",
6
6
  "main": "index.js",
package/src/components/JfbBasePosterBigSmall/JfbBasePosterBigSmall.vue CHANGED
@@ -19,12 +19,12 @@
19
19
  class="jfb-base-poster-big-small__body-wrap"
20
20
  :style="{
21
21
  margin: margin,
22
- flexDirection: position === 1 ? 'row' : 'row-reverse',
23
22
  }"
24
23
  v-if="isShowAd"
25
24
  >
25
+ <!--大图-->
26
26
  <view
27
- v-if="isCarousel === 1"
27
+ v-if="isCarousel === 1&&bigList.length > 0"
28
28
  :style="{
29
29
  margin: msMarginComputed,
30
30
  width: bigWidth + 'rpx',
@@ -40,7 +40,7 @@
40
40
  borderRadius: radius + 'rpx',
41
41
  }"
42
42
  :src="bigList[0].image_url"
43
- mode="aspectFill"
43
+ mode="scaleToFill"
44
44
  ></image>
45
45
  </view>
46
46
  </view>
@@ -75,7 +75,7 @@
75
75
  <image
76
76
  :style="{borderRadius: radius + 'rpx',width: bigWidth + 'rpx',height: bigHeight + 'rpx',}"
77
77
  :src="item['image_url']"
78
- mode="aspectFill"></image>
78
+ mode="scaleToFill"></image>
79
79
  </swiper-item>
80
80
  </swiper>
81
81
  <!--#endif-->
@@ -91,13 +91,15 @@
91
91
  @animationfinish="handleBigAnimationfinish"
92
92
  >
93
93
  <template slot-scope="{ item, index }">
94
- <image :style="{borderRadius: radius + 'rpx',}" :src="item['image_url']" mode="aspectFill"></image>
94
+ <image :style="{borderRadius: radius + 'rpx',}" :src="item['image_url']" mode="scaleToFill"></image>
95
95
  </template>
96
96
  </xd-swiper>
97
97
  <!--#endif-->
98
98
  </xd-swiper-dot>
99
99
  <view v-if="isPreview" class="carousel-mask"></view>
100
100
  </view>
101
+ <!--大图-->
102
+ <!--小图-->
101
103
  <view
102
104
  :style="{
103
105
  width: bigWidth + 'rpx',
@@ -112,7 +114,7 @@
112
114
  }"
113
115
  >
114
116
  <view
115
- v-if="topIsCarousel === 1"
117
+ v-if="topIsCarousel === 1 && topList.lenght > 0"
116
118
  :style="{
117
119
  width: bigWidth + 'rpx',
118
120
  height: smallHeight + 'rpx',
@@ -126,7 +128,7 @@
126
128
  borderRadius: topRadius + 'rpx',
127
129
  }"
128
130
  :src="topList[0].image_url"
129
- mode="aspectFill"
131
+ mode="scaleToFill"
130
132
  ></image></view
131
133
  ></view>
132
134
  <view
@@ -159,7 +161,7 @@
159
161
  <image
160
162
  :style="{borderRadius: radius + 'rpx',width: bigWidth + 'rpx',height: smallHeight + 'rpx',}"
161
163
  :src="item['image_url']"
162
- mode="aspectFill"></image>
164
+ mode="scaleToFill"></image>
163
165
  </swiper-item>
164
166
  </swiper>
165
167
  <!--#endif-->
@@ -175,7 +177,7 @@
175
177
  @animationfinish="handleTopAnimationfinish"
176
178
  >
177
179
  <template slot-scope="{ item, index }">
178
- <image :style="{borderRadius: topRadius + 'rpx',}" :src="item['image_url']" mode="aspectFill"></image>
180
+ <image :style="{borderRadius: topRadius + 'rpx',}" :src="item['image_url']" mode="scaleToFill"></image>
179
181
  </template>
180
182
  </xd-swiper>
181
183
  <!--#endif-->
@@ -190,7 +192,7 @@
190
192
  }"
191
193
  >
192
194
  <view
193
- v-if="bottomIsCarousel === 1"
195
+ v-if="bottomIsCarousel === 1 && bottomList.lenght > 0"
194
196
  :style="{
195
197
  width: bigWidth + 'rpx',
196
198
  height: smallHeight + 'rpx',
@@ -204,7 +206,7 @@
204
206
  borderRadius: bottomRadius + 'rpx',
205
207
  }"
206
208
  :src="bottomList[0].image_url"
207
- mode="aspectFill"
209
+ mode="scaleToFill"
208
210
  ></image> </view
209
211
  ></view>
210
212
  <view
@@ -237,7 +239,7 @@
237
239
  <image
238
240
  :style="{borderRadius: radius + 'rpx',width: bigWidth + 'rpx',height: smallHeight + 'rpx',}"
239
241
  :src="item['image_url']"
240
- mode="aspectFill"></image>
242
+ mode="scaleToFill"></image>
241
243
  </swiper-item>
242
244
  </swiper>
243
245
  <!--#endif-->
@@ -258,7 +260,7 @@
258
260
  borderRadius: bottomRadius + 'rpx',
259
261
  }"
260
262
  :src="item['image_url']"
261
- mode="aspectFill"
263
+ mode="scaleToFill"
262
264
  ></image>
263
265
  </template>
264
266
  </xd-swiper>
@@ -268,6 +270,7 @@
268
270
  </view>
269
271
  </view>
270
272
  </view>
273
+ <!--小图-->
271
274
  </view>
272
275
  </view>
273
276
  </view>
@@ -297,12 +300,7 @@ export default {
297
300
  return {
298
301
  params:{},
299
302
  height: 0, //组件高度
300
- mS: {
301
- top: 0,
302
- bottom: 0,
303
- left: 0,
304
- right: 0,
305
- }, //间距
303
+ mS: {}, //间距
306
304
  isPreview: false, //是否预览
307
305
  test: {
308
306
  content_id: "KpBbUKdj4aBejwe7Fh1ki",
@@ -364,9 +362,7 @@ export default {
364
362
  },
365
363
  computed: {
366
364
  margin() {
367
- return `${this.mS.top || 0}rpx ${this.mS.right || 0}rpx ${
368
- this.mS.bottom || 0
369
- }rpx ${this.mS.left || 0}rpx`;
365
+ return this.getMarginAndPadding(this.mS, 0);
370
366
  },
371
367
  msMarginComputed() {
372
368
  if (this.position === 1) {
@@ -793,10 +789,11 @@ export default {
793
789
  // 获取大小图之间间距，如果没有则设置默认值
794
790
  this.msMargin = getContainerPropsValue(container, "content.msMargin", 10);
795
791
  // 获取安全区域宽度，减去margin的值，再除以2，获取大图宽度
796
- this.bigWidth = getWidthHeight(this.height,this.mS,this.msMargin).bigWidth;
797
- this.bigHeight = getWidthHeight(this.height,this.mS,this.msMargin).bigHeight;
792
+ this.bigWidth = getWidthHeight(this.height,this.mS,this.msMargin , this).bigWidth;
793
+ this.bigHeight = getWidthHeight(this.height,this.mS,this.msMargin, this).bigHeight;
798
794
  // 获取容器高度，减去margin的值，再除以2，获取小图高度
799
- this.smallHeight = getWidthHeight(this.height,this.mS,this.msMargin).smallHeight;
795
+ this.smallHeight = getWidthHeight(this.height, this.mS, this.msMargin, this).smallHeight;
796
+
800
797
  // 获取大图数据
801
798
  this.isCarousel = getContainerPropsValue(
802
799
  container,
@@ -882,6 +879,9 @@ export default {
882
879
  &__body {
883
880
  &-wrap {
884
881
  display: flex;
882
+ justify-content: space-between;
883
+ align-items: flex-start;
884
+ overflow: hidden;
885
885
  }
886
886
  }
887
887
  }
package/src/components/JfbBasePosterBigSmall/getWidthHeight.js CHANGED
@@ -1,12 +1,16 @@
1
- function getWidthHeight(height, mS= {}, msMargin={}) {
2
- let bigWidth =
3
- uni.getSystemInfoSync().safeArea.width -
4
- (mS.left + mS.right + Number(msMargin)) / 2;
5
- let bigHeight = height - (mS.top + mS.bottom);
1
+
2
+ function checkValue(value, dValue = 0){
3
+ if(value === undefined || value === '' || value === null) return dValue;
4
+ return Number(value || 0);
5
+ }
6
+
7
+ export default (height, mS= {}, msMargin={}, $vm) =>{
8
+ let marginRL = checkValue(mS.left, 0) + checkValue(mS.right, 0);
9
+ let marginTB = checkValue(mS.top, 0) + checkValue(mS.bottom, 0);
10
+ let bigWidth = (750 - (marginRL + Number(msMargin)))/2;
11
+ let bigHeight = height - marginTB;
6
12
  // 获取容器高度，减去margin的值，再除以2，获取小图高度
7
- let smallHeight =
8
- (height - (mS.top + mS.bottom + Number(msMargin))) /
9
- 2;
13
+ let smallHeight = (height - (marginTB + Number(msMargin)))/2;
10
14
  return { bigWidth, bigHeight, smallHeight };
11
15
  }
12
- export default getWidthHeight;
16
+