jufubao-base 1.0.197-beta4 → 1.0.197-beta7

package/src/components/JfbBasePosterBigSmall/JfbBasePosterBigSmall.vue

@@ -1,4 +1,4 @@
-<script src="JfbBasePosterBigSmallMixin.js"></script>
+
 <template>
   <view
     class="jfb-base-poster-big-small"
@@ -17,14 +17,12 @@
     <view class="jfb-base-poster-big-small__body">
       <view
         class="jfb-base-poster-big-small__body-wrap"
-        :style="{
-          margin: margin,
-          flexDirection: position === 1 ? 'row' : 'row-reverse',
-        }"
+        :style="{margin: margin,flexDirection: position === 1 ? 'row' : 'row-reverse'}"
         v-if="isShowAd"
       >
+        <!--大图-->
         <view
-          v-if="isCarousel === 1"
+          v-if="isCarousel === 1 && bigList.length > 0"
           :style="{
             margin: msMarginComputed,
             width: bigWidth + 'rpx',
@@ -40,7 +38,7 @@
                 borderRadius: radius + 'rpx',
               }"
               :src="bigList[0].image_url"
-              mode="aspectFill"
+              mode="scaleToFill"
             ></image>
         </view>
         </view>
@@ -75,7 +73,7 @@
                 <image
                   :style="{borderRadius: radius + 'rpx',width: bigWidth + 'rpx',height: bigHeight + 'rpx',}"
                   :src="item['image_url']"
-                  mode="aspectFill"></image>
+                  mode="scaleToFill"></image>
               </swiper-item>
             </swiper>
             <!--#endif-->
@@ -91,13 +89,15 @@
               @animationfinish="handleBigAnimationfinish"
             >
               <template slot-scope="{ item, index }">
-                <image :style="{borderRadius: radius + 'rpx',}" :src="item['image_url']" mode="aspectFill"></image>
+                <image :style="{borderRadius: radius + 'rpx',}" :src="item['image_url']" mode="scaleToFill"></image>
               </template>
             </xd-swiper>
             <!--#endif-->
           </xd-swiper-dot>
           <view v-if="isPreview" class="carousel-mask"></view>
         </view>
+        <!--大图-->
+        <!--小图-->
         <view
           :style="{
             width: bigWidth + 'rpx',
@@ -112,7 +112,7 @@
             }"
           >
             <view
-              v-if="topIsCarousel === 1"
+              v-if="topIsCarousel === 1 && topList.lenght > 0"
               :style="{
                 width: bigWidth + 'rpx',
                 height: smallHeight + 'rpx',
@@ -126,7 +126,7 @@
                     borderRadius: topRadius + 'rpx',
                   }"
                   :src="topList[0].image_url"
-                  mode="aspectFill"
+                  mode="scaleToFill"
                 ></image></view
             ></view>
             <view
@@ -159,7 +159,7 @@
                     <image
                       :style="{borderRadius: radius + 'rpx',width: bigWidth + 'rpx',height: smallHeight + 'rpx',}"
                       :src="item['image_url']"
-                      mode="aspectFill"></image>
+                      mode="scaleToFill"></image>
                   </swiper-item>
                 </swiper>
                 <!--#endif-->
@@ -175,7 +175,7 @@
                   @animationfinish="handleTopAnimationfinish"
                 >
                   <template slot-scope="{ item, index }">
-                    <image :style="{borderRadius: topRadius + 'rpx',}" :src="item['image_url']" mode="aspectFill"></image>
+                    <image :style="{borderRadius: topRadius + 'rpx',}" :src="item['image_url']" mode="scaleToFill"></image>
                   </template>
                 </xd-swiper>
                 <!--#endif-->
@@ -190,7 +190,7 @@
             }"
           >
             <view
-              v-if="bottomIsCarousel === 1"
+              v-if="bottomIsCarousel === 1 &&  bottomList.lenght > 0"
               :style="{
                 width: bigWidth + 'rpx',
                 height: smallHeight + 'rpx',
@@ -204,7 +204,7 @@
                     borderRadius: bottomRadius + 'rpx',
                   }"
                   :src="bottomList[0].image_url"
-                  mode="aspectFill"
+                  mode="scaleToFill"
                 ></image> </view
             ></view>
             <view
@@ -237,7 +237,7 @@
                     <image
                       :style="{borderRadius: radius + 'rpx',width: bigWidth + 'rpx',height: smallHeight + 'rpx',}"
                       :src="item['image_url']"
-                      mode="aspectFill"></image>
+                      mode="scaleToFill"></image>
                   </swiper-item>
                 </swiper>
                 <!--#endif-->
@@ -258,7 +258,7 @@
                         borderRadius: bottomRadius + 'rpx',
                       }"
                       :src="item['image_url']"
-                      mode="aspectFill"
+                      mode="scaleToFill"
                     ></image>
                   </template>
                 </xd-swiper>
@@ -268,6 +268,7 @@
             </view>
           </view>
         </view>
+        <!--小图-->
       </view>
     </view>
   </view>
@@ -297,12 +298,7 @@ export default {
     return {
       params:{},
       height: 0, //组件高度
-      mS: {
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0,
-      }, //间距
+      mS: {}, //间距
       isPreview: false, //是否预览
       test: {
         content_id: "KpBbUKdj4aBejwe7Fh1ki",
@@ -364,9 +360,7 @@ export default {
   },
   computed: {
     margin() {
-      return `${this.mS.top || 0}rpx ${this.mS.right || 0}rpx ${
-        this.mS.bottom || 0
-      }rpx ${this.mS.left || 0}rpx`;
+      return this.getMarginAndPadding(this.mS, 0);
     },
     msMarginComputed() {
       if (this.position === 1) {
@@ -793,10 +787,11 @@ export default {
       // 获取大小图之间间距，如果没有则设置默认值
       this.msMargin = getContainerPropsValue(container, "content.msMargin", 10);
       // 获取安全区域宽度，减去margin的值，再除以2，获取大图宽度
-      this.bigWidth = getWidthHeight(this.height,this.mS,this.msMargin).bigWidth;
-      this.bigHeight = getWidthHeight(this.height,this.mS,this.msMargin).bigHeight;
+      this.bigWidth = getWidthHeight(this.height,this.mS,this.msMargin , this).bigWidth;
+      this.bigHeight = getWidthHeight(this.height,this.mS,this.msMargin, this).bigHeight;
       // 获取容器高度，减去margin的值，再除以2，获取小图高度
-      this.smallHeight = getWidthHeight(this.height,this.mS,this.msMargin).smallHeight;
+      this.smallHeight = getWidthHeight(this.height, this.mS, this.msMargin, this).smallHeight;
+
       // 获取大图数据
       this.isCarousel = getContainerPropsValue(
         container,
@@ -882,6 +877,9 @@ export default {
   &__body {
     &-wrap {
       display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      overflow: hidden;
     }
   }
 }

package/src/components/JfbBasePosterBigSmall/getWidthHeight.js

@@ -1,12 +1,16 @@
-function getWidthHeight(height, mS= {}, msMargin={}) {
-  let bigWidth =
-    uni.getSystemInfoSync().safeArea.width -
-    (mS.left + mS.right + Number(msMargin)) / 2;
-  let bigHeight = height - (mS.top + mS.bottom);
+
+function checkValue(value, dValue = 0){
+  if(value === undefined || value === '' || value === null) return dValue;
+  return Number(value || 0);
+}
+
+export default (height, mS= {}, msMargin={}, $vm) =>{
+  let marginRL = checkValue(mS.left, 0) +  checkValue(mS.right, 0);
+  let marginTB = checkValue(mS.top, 0) +  checkValue(mS.bottom, 0);
+  let bigWidth = (750 - (marginRL + Number(msMargin)))/2;
+  let bigHeight = height - marginTB;
   // 获取容器高度，减去margin的值，再除以2，获取小图高度
-  let smallHeight =
-    (height - (mS.top + mS.bottom + Number(msMargin))) /
-    2;
+  let smallHeight = (height - (marginTB + Number(msMargin)))/2;
   return { bigWidth, bigHeight, smallHeight };
 }
-export default getWidthHeight;
+