jufubao-base 1.0.194-beta1 → 1.0.194-beta3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jufubao-base",
-  "version": "1.0.194-beta1",
+  "version": "1.0.194-beta3",
   "private": false,
   "description": "聚福宝业务组件基础插件包",
   "main": "index.js",

package/src/components/JfbBaseImageBlock/Attr.js

@@ -0,0 +1,85 @@
+'use strict';
+
+/**
+ * @description 当表单组件中有联动操作时候，使用方法进行返回
+ */
+export default {
+  style: [],
+  content: (data) => {
+    let width = 750,height = 562.5;
+    if(data.height) height = Number(data.height);
+    if(data.width) width = Number(data.width);
+
+    return [
+      {
+        label: '',
+        ele: 'slot',
+        slot: 'is_reference_title',
+        groupKey:'advanced',
+      },
+      {
+        label: '边距设置:',
+        ele: 'xd-margin-padding',
+        valueKey: 'margin',
+        groupKey:'content',
+        value: data.margin || null,
+        setting: {
+          type: 'margin',
+        },
+        placeholder: '请设置边距设置',
+        inline: false,
+        notice: '设置边距充，<span style="color: red">单位：像素（px）</span>。默认值：<span style="color: red">0</span>像素',
+
+      },
+      {
+        label: '图片真实宽度:',
+        groupKey:'content',
+        ele: 'el-input',
+        type: 'number',
+        valueKey: 'width',
+        value: data.width || '',
+        className: 'input60',
+        inline:false,
+        notice:'图片真实宽度设置，单位像素，默认：<span style="color:red">750</span>px',
+      },
+      {
+        label: '图片真实高度:',
+        groupKey:'content',
+        ele: 'el-input',
+        type: 'number',
+        valueKey: 'height',
+        value: data.height||'',
+        className: 'input60',
+        inline:false,
+        notice:'图片真实高度设置，单位像素，默认：<span style="color:red">562.5</span>px',
+      },
+      {
+        label: '占位背景图片:',
+        ele: 'xd-upload',
+        valueKey: 'backgroundImage',
+        groupKey:'content',
+        value: data.backgroundImage || {},
+        defaultValue: data.backgroundImage || null,
+        slot: true,
+        oneWidth: 300,
+        oneHeight: 300 * height / width,
+        elinputClassName: 'input40',
+        tipsformet: `上传文件格式：@imageType@，不超过@size@MB，图片尺寸:<span style="color:red"> ${width}*${height}</span>像素`,
+        type: ['jpg', 'png', 'jpeg'],
+        styleType: 'one',
+        uploadType: 'aliyun',
+        size: 1,
+        action: 'action',
+        sort: true,
+        maxlen: 1,
+      },
+      {
+        label: '',
+        ele: 'slot',
+        slot: 'is_reference',
+        groupKey:'advanced',
+      },
+    ].filter(i=>i)
+  },
+  advanced: [],
+};

package/src/components/JfbBaseImageBlock/JfbBaseImageBlock.vue

@@ -14,7 +14,10 @@
     </view>
     <!-- #endif -->
     <view class="jfb-base-image-block__body">
-      <view>测试插件( {{containerId}} )</view>
+      <view class="x-line"></view>
+      <view class="image" :style="[bodyStyle]">
+        <image :src="backgroundImageComp" alt="bgImage"></image>
+      </view>
     </view>
   </view>
 </template>
@@ -26,6 +29,7 @@
   import { getContainerPropsValue } from "@/utils/xd.base";
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins";
+  import getServiceUrl from "@/common/getServiceUrl";
   export default {
     name: "JfbBaseImageBlock",
     components: {
@@ -34,10 +38,43 @@
     mixins: [
       componentsMixins, extsMixins, JfbBaseImageBlockMixin
     ],
+    computed:{
+      marginComp(){
+        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;
+      },
+
+      backgroundImageComp(){
+        if(this.$xdUniHelper.checkVarType(this.backgroundImage) === 'object') {
+          if(this.backgroundImage.url) return getServiceUrl(this.backgroundImage.url,'size8')
+          else return ''
+        }
+        return '';
+      },
+
+      bodyStyle(){
+        let outWidth = uni.getSystemInfoSync().safeArea.width * this.$pxNum;
+        let outMarginRL = this.checkValue(this.margin.right, 0) + this.checkValue(this.margin.left, 0);
+        let bgColor = 'rgba(0,0,0,0)';
+        if(this.backgroundImageComp === '') bgColor = '#f8f8f8'
+        return {
+          margin: this.marginComp,
+          width: (outWidth - outMarginRL) +'rpx',
+          height: this.height * (outWidth - outMarginRL)/this.width + 'rpx',
+          backgroundColor: bgColor
+        }
+      }
+    },
     data() {
       return {
-
-        //todo
+        closeMask: true,
+        height: 562.5,
+        width: 750,
+        margin:{},
+        backgroundImage:{},
       }
     },
     watch: {
@@ -48,52 +85,19 @@
     },
     created() {
       this.init(this.container);
-
-      //todo
     },
     methods: {
       onJfbLoad(options) {
-
-        // jfbRootExec('baiduUserLogin', {
-
-        //   vm: this,//   data: {
-
-        //     account: 'gaoshiyong',//     password: '123456789',//     type: 3,//     ...options
-
-        //   }
-
-        // }).then().catch()
       },
       /**
        * @description 监听事件变化
        * @param container {object} 业务组件对象自己
        */
       init(container) {
-
-        //this.bgcolor = getContainerPropsValue(container, 'content.bgcolor', '#fff');
-
-        //this.height = getContainerPropsValue(container, 'content.height', 10);
-      },
-      onJfbScroll(options) {
-        console.log('event.onJfbScroll', options)
-      },
-      onJfbReachBottom(options) {
-        console.log('event.onJfbReachBottom', options)
-      },
-      onJfbShow(options) {
-        console.log('event.onJfbShow', options)
-      },
-      onJfbHide(options) {
-        console.log('event.onJfbHide', options)
-      },
-      onJfbBack(options) {
-        console.log('event.onJfbBack', options)
-      },
-      onJfbUpdate(...data) {
-        console.log('event.onJfbUpdate', data)
-      },
-      onJfbCustomEvent(options) {
-        console.log('event.onJfbReachBottom', options)
+        this.height = Number(getContainerPropsValue(container, 'content.height', 562.5));
+        this.width = Number(getContainerPropsValue(container, 'content.width', 750));
+        this.margin = getContainerPropsValue(container, 'content.margin', {});
+        this.backgroundImage = getContainerPropsValue(container, 'content.backgroundImage', {})
       },
     }
   }
@@ -104,8 +108,12 @@
   @import "./JfbBaseImageBlockLess.less";
 
   .jfb-base-image-block {
+    min-height: 20rpx!important;
     &__body{
-
+      .image image {
+        height: 100%;
+        width: 100%;
+      }
     }
   }
 </style>

package/src/components/JfbBaseImageBlock/JfbBaseImageBlockMixin.js

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