jufubao-base 1.0.131 → 1.0.132-beta2

package/src/components/JfbBaseVideo/JfbBaseVideo.vue

@@ -14,16 +14,29 @@
     </view>
     <!-- #endif -->
     <view class="jfb-base-video__body">
-      <view class="float"></view>
-      <view class="video" v-if="video !== null">
+      <view class="x-line"></view>
+      <view
+        class="x-video"
+        :style="{
+          backgroundColor:bgColor,
+          margin:outMargin,
+          borderRadius:radius + 'rpx',
+          padding:outPadding,
+          width: contentWidth + 'rpx',
+          height:contentHeight + 'rpx'
+        }"
+      >
+
         <xd-video
+          v-if="video !== null && video !== ''"
           :key="videoKey"
-          :margin="margin"
           :poster="videoSetting"
           :video="video"
-          :radius="radius"
           :pack-this="$vm"
         ></xd-video>
+        <view class="not-video" v-if="video === ''">
+          <image :src="getVideoSrc"></image>
+        </view>
       </view>
     </view>
   </view>
@@ -55,6 +68,10 @@
         video: null,
         videoSetting: null,
         margin:{},
+        padding:{},
+        height:0,
+        width:750,
+        bgColor:'',
         radius:0,
         $vm: {},
         videoKey : Date.now()
@@ -67,39 +84,51 @@
         if(this.autoplay === 'R') return 'iconplayreplay';
       },
       contentWidth(){
+        let margin = Number(this.checkValue(this.margin.left, 0)) + Number(this.checkValue(this.margin.right, 0));
+        let padding = Number(this.checkValue(this.padding.left, 0)) + Number(this.checkValue(this.padding.right, 0));
         let border = 0;
-        if(this.isPreview) border = 2;
-        return 750 - (this.margin.left + this.margin.right + border);
+        //if(this.isPreview) border = 2;
+        return this.width - (padding + margin + border);
       },
       contentHeight(){
+        let margin = Number(this.checkValue(this.margin.left, 0)) + Number(this.checkValue(this.margin.right, 0));
+        let padding = Number(this.checkValue(this.padding.left, 0)) + Number(this.checkValue(this.padding.right, 0));
         let border = 0;
-        if(this.isPreview) border = 2;
-        let winWidth = 750 - ((this.margin.left||0) + (this.margin.right||0) + border);
+        //if(this.isPreview) border = 2;
+        let winWidth = this.width - (padding + margin + border);
         return winWidth * this.height/this.width;
       },
-
       outMargin(){
-        let margin = `${this.margin.top !== null ? this.margin.top : 0}rpx`;
-        margin = `${margin} ${this.margin.right !== null ? this.margin.right : 0}rpx`;
-        margin = `${margin} ${this.margin.bottom !== null ? this.margin.bottom :0}rpx`;
-        margin = `${margin} ${this.margin.left !== null ? this.margin.left : 0}rpx`;
-        return margin;
+        let str = `${this.checkValue(this.margin.top, 0)}rpx`;
+        str = `${str} ${this.checkValue(this.margin.right, 0)}rpx`;
+        str = `${str} ${this.checkValue(this.margin.bottom, 0)}rpx`;
+        str = `${str} ${this.checkValue(this.margin.left, 0)}rpx`;
+        return str
+      },
+      outPadding(){
+        let str = `${this.checkValue(this.padding.top, 0)}rpx`;
+        str = `${str} ${this.checkValue(this.padding.right, 0)}rpx`;
+        str = `${str} ${this.checkValue(this.padding.bottom, 0)}rpx`;
+        str = `${str} ${this.checkValue(this.padding.left, 0)}rpx`;
+        return str
+      },
+      getVideoSrc(){
+        let width = Math.floor(this.contentWidth * this.$rpxNum);
+        let height = Math.floor(this.contentHeight * this.$rpxNum);
+        return `//dummyimage.com/${width}x${height}`;
       }
 		},
     watch: {
-      container(value) {
+      container(value, oloValue) {
+        if(JSON.stringify(value) === JSON.stringify(oloValue)) return;
         this.init(value);
-        if(this.timer) clearTimeout(this.timer);
-        this.timer = setTimeout(()=>{
-          if (this.$configProject['isPreview']) this.onJfbLoad(this.options)
-				}, 400)
+        if (this.$configProject['isPreview']) this.onJfbLoad(this.options)
       }
     },
     created() {
       this.$vm = this;
       this.isPreview = this.$configProject.isPreview;
       this.init(this.container);
-
     },
     methods: {
 
@@ -109,8 +138,14 @@
        */
       init(container) {
         this.videoSetting = getContainerPropsValue(container, 'content.video', {size:{width: 400, height: 300}, type: '1'});
-        this.margin = getContainerPropsValue(container, 'content.margin', {top:0, bottom:0, right:0, left: 0});
+        if(this.videoSetting && this.videoSetting.size && this.videoSetting.size.height) {
+          this.height = Number(this.videoSetting.size.height) || 563;
+          this.width = 750;
+        }
+        this.margin = getContainerPropsValue(container, 'content.margin', {});
+        this.padding = getContainerPropsValue(container, 'content.padding', {});
         this.radius = getContainerPropsValue(container, 'content.radius', 0);
+        this.bgColor = getContainerPropsValue(container, 'content.bgColor', 'rgba(0,0,0,0)');
       },
 
       onJfbLoad(options) {
@@ -127,6 +162,7 @@
             if(res && res.list &&  res.list.length > 0) {
               this.video = res.list[0];
             }
+            else this.video = '';
             this.videoKey = Date.now()
           })
           .catch(error => {
@@ -148,15 +184,20 @@
 
   .jfb-base-video {
     &__body{
+      .x-video {
+        overflow: hidden;
+      }
 
-    }
-
-  }
+      .not-video {
+        width: 100%;
+        height: 100%;
 
-  .float {
-    height: 1px;
-    width: 100%;
-    overflow: hidden;
+        & > image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
   }
 
 </style>

package/src/components/JfbBaseVideo/JfbBaseVideoLess.less

@@ -13,9 +13,8 @@
 
 //start
 .jfb-base-video {
-  border: 1px dashed rgba(0, 0, 0, 0);
   box-sizing: border-box;
-  min-height: unit(50, rpx);
+  min-height: unit(100, rpx);
 
   &__body{
       position: relative;
@@ -23,21 +22,21 @@
       z-index: 2
   }
 
-  &.editx {
+  &.editx,&:hover {
     position: relative;
-    border: 1px dashed blue;
-    box-sizing: border-box;
-    z-index: 3
-
-  }
-
-  &:hover {
-    border: 1px dashed blue;
-  }
+    z-index: 3;
+    &::after {
+      border: 2rpx dashed blue;
+      content: " ";
+      position: absolute;
+      top:0;
+      left:0;
+      bottom:0;
+      right:0;
+      z-index: 4;
+      cursor: pointer;
+    }
 
-  &.noBorder {
-    border-color: rgba(0,0,0,0);
-    border-width: 0;
   }
 
 
@@ -72,9 +71,9 @@
 
 /**notPreview**/
 .jfb-base-video {
-  &:before {
-    content: " ";
-    display: table;
-  }
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
 }
 /**endNotPreview**/

package/src/components/JfbBaseVideo/XdVideo.vue

@@ -1,18 +1,6 @@
 <template>
-  <view
-    class="video-box"
-    :style="{
-      width: contentWidth + 'rpx',
-      height:contentHeight + 'rpx',
-      margin: outMargin
-    }"
-  >
-    <view
-      class="thumb"
-      :class="{noImageUrl: !imageUrl}"
-      v-if="!playStatus"
-      :style="{borderRadius: radius + 'rpx'}"
-    >
+  <view class="video-box">
+    <view class="thumb" :class="{noImageUrl: !imageUrl}" v-if="!playStatus">
       <image :src="imageUrl" v-if="imageUrl" />
       <view v-if="videoUrl" @click="handlePlay()">
         <xd-font-icon
@@ -20,7 +8,6 @@
           size="100"
           color="#fff"
         ></xd-font-icon>
-
       </view>
     </view>
     <view
@@ -52,12 +39,7 @@
       margin:{
         type: Object,
         default(){
-          return {
-            top:0,
-            left:0,
-            right:0,
-            bottom:0
-          }
+          return {}
         }
       },
       poster:{
@@ -81,10 +63,6 @@
       return {
         isPreview: false,
 
-        //css
-        width: 0,
-        height: 0,
-
         //play
         imageUrl: '',
         videoUrl: '',
@@ -98,25 +76,6 @@
         if(this.autoplay === 'E') return 'iconshibai';
         if(this.autoplay === 'R') return 'iconplayreplay';
       },
-      contentWidth(){
-        let border = 0;
-        if(this.isPreview) border = 2;
-        return 750 - (this.margin.left + this.margin.right + border);
-      },
-      contentHeight(){
-        let border = 0;
-        if(this.isPreview) border = 2;
-        let winWidth = 750 - ((this.margin.left||0) + (this.margin.right||0) + border);
-        return winWidth * this.height/this.width;
-      },
-
-      outMargin(){
-        let margin = `${this.margin.top !== null ? this.margin.top : 0}rpx`;
-        margin = `${margin} ${this.margin.right !== null ? this.margin.right : 0}rpx`;
-        margin = `${margin} ${this.margin.bottom !== null ? this.margin.bottom :0}rpx`;
-        margin = `${margin} ${this.margin.left !== null ? this.margin.left : 0}rpx`;
-        return margin;
-      }
     },
     watch:{
       poster(){
@@ -173,6 +132,9 @@
 
 <style scoped lang="less">
 .video-box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
   view.noImageUrl {
     background: rgba(0,0,0,.6);
   }

package/src/components/JfbBaseWallet/JfbBaseWalletLess.less

@@ -13,9 +13,8 @@
 
 //start
 .jfb-base-wallet {
-  border: 1px dashed rgba(0, 0, 0, 0);
   box-sizing: border-box;
-  min-height: unit(50, rpx);
+  min-height: unit(100, rpx);
 
   &__body{
       position: relative;
@@ -23,21 +22,21 @@
       z-index: 2
   }
 
-  &.editx {
+  &.editx,&:hover {
     position: relative;
-    border: 1px dashed blue;
-    box-sizing: border-box;
-    z-index: 3
-
-  }
-
-  &:hover {
-    border: 1px dashed blue;
-  }
+    z-index: 3;
+    &::after {
+      border: 2rpx dashed blue;
+      content: " ";
+      position: absolute;
+      top:0;
+      left:0;
+      bottom:0;
+      right:0;
+      z-index: 4;
+      cursor: pointer;
+    }
 
-  &.noBorder {
-    border-color: rgba(0,0,0,0);
-    border-width: 0;
   }
 
 
@@ -72,9 +71,9 @@
 
 /**notPreview**/
 .jfb-base-wallet {
-  &:before {
-    content: " ";
-    display: table;
-  }
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
 }
 /**endNotPreview**/

package/src/components/JfbBaseWalletDetail/JfbBaseWalletDetailLess.less

@@ -13,9 +13,8 @@
 
 //start
 .jfb-base-wallet-detail {
-  border: 1px dashed rgba(0, 0, 0, 0);
   box-sizing: border-box;
-  min-height: unit(50, rpx);
+  min-height: unit(100, rpx);
 
   &__body{
       position: relative;
@@ -23,21 +22,21 @@
       z-index: 2
   }
 
-  &.editx {
+  &.editx,&:hover {
     position: relative;
-    border: 1px dashed blue;
-    box-sizing: border-box;
-    z-index: 3
-
-  }
-
-  &:hover {
-    border: 1px dashed blue;
-  }
+    z-index: 3;
+    &::after {
+      border: 2rpx dashed blue;
+      content: " ";
+      position: absolute;
+      top:0;
+      left:0;
+      bottom:0;
+      right:0;
+      z-index: 4;
+      cursor: pointer;
+    }
 
-  &.noBorder {
-    border-color: rgba(0,0,0,0);
-    border-width: 0;
   }
 
 
@@ -72,9 +71,9 @@
 
 /**notPreview**/
 .jfb-base-wallet-detail {
-  &:before {
-    content: " ";
-    display: table;
-  }
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
 }
 /**endNotPreview**/

package/src/components/JfbBaseWalletDetail/JfbBaseWalletDetailMixin.js

@@ -1,30 +1,18 @@
 'use strict';
 
 
-//@AttrImport
-import Attr from "./Attr";
-//@EndAttrImport
-
 
 export default {
   data() {
     return {
       //#ifdef H5
       
-      //@AttrData
-      Attr:{}, //对外开发编辑属性
-      //@EndAttrData
-      
       // #endif
       cssRoot: 'jfb-base-wallet-detail'
     }
   },
   created() {
     
-    //@AttrDataCreated
-    this.Attr = this.$xdUniHelper.customClone(Attr);
-    //@EndAttrDataCreated
-    
 
   },
 }

package/src/components/JfbBaseWalletEffective/JfbBaseWalletEffectiveLess.less

@@ -13,9 +13,8 @@
 
 //start
 .jfb-base-wallet-effective {
-  border: 1px dashed rgba(0, 0, 0, 0);
   box-sizing: border-box;
-  min-height: unit(50, rpx);
+  min-height: unit(100, rpx);
 
   &__body{
       position: relative;
@@ -23,21 +22,21 @@
       z-index: 2
   }
 
-  &.editx {
+  &.editx,&:hover {
     position: relative;
-    border: 1px dashed blue;
-    box-sizing: border-box;
-    z-index: 3
-
-  }
-
-  &:hover {
-    border: 1px dashed blue;
-  }
+    z-index: 3;
+    &::after {
+      border: 2rpx dashed blue;
+      content: " ";
+      position: absolute;
+      top:0;
+      left:0;
+      bottom:0;
+      right:0;
+      z-index: 4;
+      cursor: pointer;
+    }
 
-  &.noBorder {
-    border-color: rgba(0,0,0,0);
-    border-width: 0;
   }
 
 
@@ -72,9 +71,9 @@
 
 /**notPreview**/
 .jfb-base-wallet-effective {
-  &:before {
-    content: " ";
-    display: table;
-  }
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
 }
 /**endNotPreview**/

package/src/components/JfbBaseWalletIndex/JfbBaseWalletIndexLess.less

@@ -13,9 +13,8 @@
 
 //start
 .jfb-base-wallet-index {
-  border: 1px dashed rgba(0, 0, 0, 0);
   box-sizing: border-box;
-  min-height: unit(50, rpx);
+  min-height: unit(100, rpx);
 
   &__body{
       position: relative;
@@ -23,21 +22,21 @@
       z-index: 2
   }
 
-  &.editx {
+  &.editx,&:hover {
     position: relative;
-    border: 1px dashed blue;
-    box-sizing: border-box;
-    z-index: 3
-
-  }
-
-  &:hover {
-    border: 1px dashed blue;
-  }
+    z-index: 3;
+    &::after {
+      border: 2rpx dashed blue;
+      content: " ";
+      position: absolute;
+      top:0;
+      left:0;
+      bottom:0;
+      right:0;
+      z-index: 4;
+      cursor: pointer;
+    }
 
-  &.noBorder {
-    border-color: rgba(0,0,0,0);
-    border-width: 0;
   }
 
 
@@ -72,9 +71,9 @@
 
 /**notPreview**/
 .jfb-base-wallet-index {
-  &:before {
-    content: " ";
-    display: table;
-  }
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
 }
 /**endNotPreview**/

package/src/components/JfbBaseWalletItem/JfbBaseWalletItemLess.less

@@ -13,9 +13,8 @@
 
 //start
 .jfb-base-wallet-item {
-  border: 1px dashed rgba(0, 0, 0, 0);
   box-sizing: border-box;
-  min-height: unit(50, rpx);
+  min-height: unit(100, rpx);
 
   &__body{
       position: relative;
@@ -23,21 +22,21 @@
       z-index: 2
   }
 
-  &.editx {
+  &.editx,&:hover {
     position: relative;
-    border: 1px dashed blue;
-    box-sizing: border-box;
-    z-index: 3
-
-  }
-
-  &:hover {
-    border: 1px dashed blue;
-  }
+    z-index: 3;
+    &::after {
+      border: 2rpx dashed blue;
+      content: " ";
+      position: absolute;
+      top:0;
+      left:0;
+      bottom:0;
+      right:0;
+      z-index: 4;
+      cursor: pointer;
+    }
 
-  &.noBorder {
-    border-color: rgba(0,0,0,0);
-    border-width: 0;
   }
 
 
@@ -72,9 +71,9 @@
 
 /**notPreview**/
 .jfb-base-wallet-item {
-  &:before {
-    content: " ";
-    display: table;
-  }
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
 }
 /**endNotPreview**/