jufubao-base 1.0.310 → 1.0.311-beta101

package/src/components/JfbBaseImageBlock/Attr.js

@@ -1,14 +1,29 @@
 'use strict';
 
+import {dataVal, statusDataVal, statusShow,getAttrData} from "@/utils/AttrTools";
+
 /**
  * @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);
+  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
+    });
 
     return [
       {
@@ -18,19 +33,110 @@ export default {
         groupKey:'advanced',
       },
       {
-        label: '边距设置:',
+        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: '',
         ele: 'xd-margin-padding',
-        valueKey: 'margin',
         groupKey:'content',
-        value: data.margin || null,
+        valueKey: 'margin',
+        value: dataVal({
+          data,
+          key:'margin',
+          dValue:0,
+          gValue,
+          isPM: true,
+        }),
+        hidden: !statusShow({data, key: 'marginStatus', fields:['margin'], gValue}),
         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',
@@ -39,6 +145,7 @@ export default {
         valueKey: 'width',
         value: data.width || '',
         className: 'input60',
+        hidden: true,
         inline:false,
         notice:'图片真实宽度设置，单位像素，默认：<span style="color:red">750</span>px',
       },
@@ -50,35 +157,55 @@ 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',
-        groupKey:'content',
-        value: data.backgroundImage || {},
-        defaultValue: data.backgroundImage || null,
+        defaultValue: dataVal({data, key:'backgroundImage', dValue: {}, gValue}),
+        value: dataVal({data, key:'backgroundImage', dValue:{}, gValue}),
+        labelInline:true,
         slot: true,
-        oneWidth: 300,
-        oneHeight: 300 * height / width,
-        elinputClassName: 'input40',
-        tipsformet: `上传文件格式：@imageType@，不超过@size@MB，图片尺寸:<span style="color:red"> ${width}*${height}</span>像素`,
+        tipsformet: `<span style="font-size: 12px; color: #999;line-height: 16px">上传文件格式：@imageType@，不超过@size@MB.，建议尺寸为:<span style="color:red">${widthAndHeight.width}*${widthAndHeight.height}</span>像素。</span>`,
         type: ['jpg', 'png', 'jpeg'],
         styleType: 'one',
         uploadType: 'aliyun',
-        size: 1,
-        action: 'action',
-        sort: true,
+        size: 2,
+        action: 'aliyun',
+        oneWidth: 350,
+        oneHeight: 350 * (widthAndHeight.height)/ widthAndHeight.width,
+        groupKey: 'content',
         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:'advanced',
+        groupKey:'content',
       },
+
     ].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="[bodyStyle]">
-        <image :src="backgroundImageComp" alt="bgImage"></image>
+      <view class="image" :style="[bodyStyleComp]">
+        <image v-if="backgroundImageComp" :src="backgroundImageComp" alt="bgImage"></image>
       </view>
     </view>
   </view>
@@ -23,9 +23,8 @@
 
 <script>
   import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
-  import { jfbRootExec } from "@/utils/xd.event";
   import JfbBaseImageBlockMixin from "./JfbBaseImageBlockMixin";
-  import { getContainerPropsValue } from "@/utils/xd.base";
+  import { gCPVal } from "@/utils/xd.base";
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins";
   import getServiceUrl from "@/common/getServiceUrl";
@@ -38,14 +37,6 @@
       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')
@@ -54,26 +45,32 @@
         return '';
       },
 
-      bodyStyle(){
-        let outWidth = uni.getSystemInfoSync().safeArea.width * this.$pxNum;
-        let outMarginRL = this.checkValue(this.margin.right, 0) + this.checkValue(this.margin.left, 0);
+      bodyStyleComp(){
+        let {width,height} = this.widthAndHeight;
+        let outWidth = 750 - this.getPMValue(this.margin,'RL',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
+          margin: this.getMarginAndPadding(this.margin,0),
+          width: outWidth +'rpx',
+          height: (Number(height) * (outWidth)/Number(width)) + 'rpx',
+          backgroundColor: bgColor,
+          borderRadius: this.radius + 'rpx',
+          overflow:'hidden'
         }
       }
     },
     data() {
       return {
         closeMask: true,
-        height: 562.5,
-        width: 750,
-        margin:{},
-        backgroundImage:{},
+        margin:{},//边距
+        backgroundImage:{},//图片
+        radius:0,//圆角
+        //高宽
+        widthAndHeight:{
+          width: 750,
+          height: 562
+        },
       }
     },
     watch: {
@@ -87,16 +84,21 @@
     },
     methods: {
       onJfbLoad(options) {
+
       },
+
       /**
        * @description 监听事件变化
        * @param container {object} 业务组件对象自己
        */
       init(container) {
-        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', {})
+        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;
+
       },
     }
   }