jufubao-base 1.0.311-beta101 → 1.0.311-beta3

package/src/components/JfbBaseImageBlock/Attr.js

@@ -1,29 +1,14 @@
 'use strict';
 
-import {dataVal, statusDataVal, statusShow,getAttrData} from "@/utils/AttrTools";
-
 /**
  * @description 当表单组件中有联动操作时候，使用方法进行返回
  */
 export default {
   style: [],
-  content: (data, gValue,gColor,oldData) => {
-    debugger
-    const defWidth = 750,defHeight = 562;
-    let height = defHeight, width = defWidth;
-    if(data.height !== undefined) height = Number(data.height) || defHeight;
-    if(data.width !== undefined) width = Number(data.width) || defWidth;
-
-    let defOldWidthAndHeight = {width:750,height:562};
-    if(data['widthAndHeight'] === undefined && height && width) defOldWidthAndHeight = {height,width};
-
-    //高宽的
-    let widthAndHeight = getAttrData(data,'widthAndHeight', [{width:750,height:562},defOldWidthAndHeight],{
-      sKey: 'widthAndHeightStatus',
-      fields:['widthAndHeight'],
-      isData: true,
-      gValue
-    });
+  content: (data) => {
+    let width = 750,height = 562.5;
+    if(data.height) height = Number(data.height);
+    if(data.width) width = Number(data.width);
 
     return [
       {
@@ -33,110 +18,19 @@ export default {
         groupKey:'advanced',
       },
       {
-        ele: 'title',
-        label: '基础',
-        size: 'small',
-        groupKey:'content',
-      },
-      {
-        label: '外边距',
-        ele: 'xd-radio',
-        groupKey: 'content',
-        valueKey: 'marginStatus',
-        value: statusDataVal({data, key:'marginStatus', fields:['margin'],gValue}),
-        labelInline:true,
-        list: [
-          {label: '默认', value: 'D'},
-          {label: '自定义', value: 'C'},
-        ]
-      },
-      {ele: 'group_start'},
-      {
-        label: '',
+        label: '边距设置:',
         ele: 'xd-margin-padding',
-        groupKey:'content',
         valueKey: 'margin',
-        value: dataVal({
-          data,
-          key:'margin',
-          dValue:0,
-          gValue,
-          isPM: true,
-        }),
-        hidden: !statusShow({data, key: 'marginStatus', fields:['margin'], gValue}),
+        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>像素',
+
       },
-      {ele: 'group_end'},
-      {
-        label: '圆角',
-        ele: 'xd-radio',
-        groupKey: 'content',
-        valueKey: 'radiusStatus',
-        value: statusDataVal({data, key:'radiusStatus',cValue: 'N', fields:['radius'],gValue}),
-        labelInline:true,
-        list: [
-          {label: '默认', value: 'D'},
-          {label: '无圆角', value: 'N'},
-          {label: '自定义', value: 'C'},
-        ]
-      },
-      {ele: 'group_start'},
-      {
-        label: '',
-        ele: 'xd-site-select-list',
-        labelInline: true,
-        valueKey: 'radius',
-        value: dataVal({data, key:'radius', dValue:'10', gValue}),
-        hidden: !statusShow({data, key: 'radiusStatus', fields:['radius'], gValue}),
-        placeholder: '请选择圆角',
-        multiple: false,
-        className: 'input80',
-        groupKey:'content',
-        handleCustom({action, data}) {
-          XdBus.getParentApi('getOptionsSettingList')({
-            setting_id: 'edtix_style_radius',
-            key: Date.now()
-          })
-            .then(res => {
-              res.list = res.list.filter(item=>{
-                return item.label !== '无';
-              });
-              data.cb(res.list)
-            })
-            .catch(error => {
-              console.error(error);
-            });
-        },
-      },
-      {ele: 'group_end'},
-      {
-        label: '比例/尺寸',
-        ele: 'xd-radio',
-        groupKey: 'content',
-        valueKey: 'widthAndHeightStatus',
-        value: statusDataVal({data, key:'widthAndHeightStatus', fields:['widthAndHeight'],gValue}),
-        labelInline:true,
-        list: [
-          {label: '默认（750x562像素）', value: 'D'},
-          {label: '自定义', value: 'C'},
-        ]
-      },
-      {ele: 'group_start'},
-      {
-        label: '',
-        ele: 'xd-width-and-height',
-        groupKey:'content',
-        valueKey: 'widthAndHeight',
-        value: dataVal({data, key:'widthAndHeight', dValue:gValue.isAdd && gValue.isFirst ?{width:750,height:562}:defOldWidthAndHeight, gValue}),
-        hidden: !statusShow({data, key: 'widthAndHeightStatus', fields:['widthAndHeight'], gValue}),
-        setting: {
-          disabledWidth: true,
-          disabledHeight: false,
-        }
-      },
-      {ele: 'group_end'},
       {
         label: '图片真实宽度:',
         groupKey:'content',
@@ -145,7 +39,6 @@ export default {
         valueKey: 'width',
         value: data.width || '',
         className: 'input60',
-        hidden: true,
         inline:false,
         notice:'图片真实宽度设置，单位像素，默认：<span style="color:red">750</span>px',
       },
@@ -157,55 +50,35 @@ export default {
         valueKey: 'height',
         value: data.height||'',
         className: 'input60',
-        hidden: true,
         inline:false,
         notice:'图片真实高度设置，单位像素，默认：<span style="color:red">562.5</span>px',
       },
       {
-        label: '图片路径',
+        label: '占位背景图片:',
         ele: 'xd-upload',
         valueKey: 'backgroundImage',
-        defaultValue: dataVal({data, key:'backgroundImage', dValue: {}, gValue}),
-        value: dataVal({data, key:'backgroundImage', dValue:{}, gValue}),
-        labelInline:true,
+        groupKey:'content',
+        value: data.backgroundImage || {},
+        defaultValue: data.backgroundImage || null,
         slot: true,
-        tipsformet: `<span style="font-size: 12px; color: #999;line-height: 16px">上传文件格式：@imageType@，不超过@size@MB.，建议尺寸为:<span style="color:red">${widthAndHeight.width}*${widthAndHeight.height}</span>像素。</span>`,
+        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: 2,
-        action: 'aliyun',
-        oneWidth: 350,
-        oneHeight: 350 * (widthAndHeight.height)/ widthAndHeight.width,
-        groupKey: 'content',
+        size: 1,
+        action: 'action',
+        sort: true,
         maxlen: 1,
-        extendClass:['itemBackgroundColor']
-      },
-      {
-        label: '版本号:',
-        ele: 'el-input',
-        type: 'text',
-        groupKey: 'content',
-        valueKey: 'version',
-        value: 'v2.0',
-        hidden: true,
-      },
-      {
-        label: '过滤引用模版字段:',
-        ele: 'el-input',
-        type: 'text',
-        groupKey: 'content',
-        valueKey: 'refFilterKey',
-        value: '[]',
-        hidden: true,
       },
       {
         label: '',
         ele: 'slot',
         slot: 'is_reference',
-        groupKey:'content',
+        groupKey:'advanced',
       },
-
     ].filter(i=>i)
   },
   advanced: [],

package/src/components/JfbBaseImageBlock/JfbBaseImageBlock.vue

@@ -14,8 +14,8 @@
     </view>
     <!-- #endif -->
     <view class="jfb-base-image-block__body">
-      <view class="image" :style="[bodyStyleComp]">
-        <image v-if="backgroundImageComp" :src="backgroundImageComp" alt="bgImage"></image>
+      <view class="image" :style="[bodyStyle]">
+        <image :src="backgroundImageComp" alt="bgImage"></image>
       </view>
     </view>
   </view>
@@ -23,8 +23,9 @@
 
 <script>
   import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import { jfbRootExec } from "@/utils/xd.event";
   import JfbBaseImageBlockMixin from "./JfbBaseImageBlockMixin";
-  import { gCPVal } from "@/utils/xd.base";
+  import { getContainerPropsValue } from "@/utils/xd.base";
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins";
   import getServiceUrl from "@/common/getServiceUrl";
@@ -37,6 +38,14 @@
       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')
@@ -45,32 +54,26 @@
         return '';
       },
 
-      bodyStyleComp(){
-        let {width,height} = this.widthAndHeight;
-        let outWidth = 750 - this.getPMValue(this.margin,'RL',0);
+      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.getMarginAndPadding(this.margin,0),
-          width: outWidth +'rpx',
-          height: (Number(height) * (outWidth)/Number(width)) + 'rpx',
-          backgroundColor: bgColor,
-          borderRadius: this.radius + 'rpx',
-          overflow:'hidden'
+          margin: this.marginComp,
+          width: (outWidth - outMarginRL) +'rpx',
+          height: this.height * (outWidth - outMarginRL)/this.width + 'rpx',
+          backgroundColor: bgColor
         }
       }
     },
     data() {
       return {
         closeMask: true,
-        margin:{},//边距
-        backgroundImage:{},//图片
-        radius:0,//圆角
-        //高宽
-        widthAndHeight:{
-          width: 750,
-          height: 562
-        },
+        height: 562.5,
+        width: 750,
+        margin:{},
+        backgroundImage:{},
       }
     },
     watch: {
@@ -84,21 +87,16 @@
     },
     methods: {
       onJfbLoad(options) {
-
       },
-
       /**
        * @description 监听事件变化
        * @param container {object} 业务组件对象自己
        */
       init(container) {
-        let height = Number(gCPVal(container, 'height', 562));
-        let width = Number(gCPVal(container, 'width', 750));
-        this.margin = gCPVal(container, 'margin', 0,{sKey: 'marginStatus', fields: ['margin'], isPMR: true});
-        this.widthAndHeight = gCPVal(container, 'widthAndHeight', [{width: 750, height: 562},{width,height}],{sKey: 'widthAndHeightStatus', fields: ['widthAndHeight']});
-        this.backgroundImage = gCPVal(container, 'backgroundImage', {});
-        this.radius = gCPVal(container, 'radius', [this.gStyleValue.radius,0],{sKey: 'radiusStatus', fields: ['radius']})||0;
-
+        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', {})
       },
     }
   }