jufubao-base 1.0.235 → 1.0.236-beta1

package/src/components/JfbBaseNotice/JfbBaseNotice.vue

@@ -103,10 +103,14 @@
                   color:textColor,
                   borderRadius: contRadius,
                   padding: paddingUi,
-                  lineHeight: '50rpx'
+                  lineHeight: '50rpx',
                 }"
                 v-if="content"
               >
+                <image v-if="show_tip_icon==='Y' && staticTipIcon" :src="staticTipIcon"
+                  :style="{height: tipIconHeight+'rpx'}"
+                  style="width: auto;margin-right: 12rpx;" mode="heightFix"
+                ></image>
                 <xd-content-xss
                   :key="contentKey"
                   :html="content"
@@ -162,6 +166,7 @@
   import extsMixins from "@/mixins/extsMixins"
   import XdDownDrawer from "@/components/XdDownDrawer/XdDownDrawer.vue";
   import { getContainerPropsValue } from "@/utils/xd.base";
+  import getServiceUrl from "@/common/getServiceUrl";
   import storage from "@/common/storage";
   import Color from "color";
   const color = require('color');
@@ -219,6 +224,9 @@
 
         backgroundColor: '',
         is_hide_dailog:'N',
+        show_tip_icon: "",
+        staticTipIcon: "",
+        tipIconHeight: 50,
 
         isMp:false,
 
@@ -337,12 +345,16 @@
         this.btnConfirmWidth = getContainerPropsValue(container, 'content.btnConfirmWidth', '');
         this.btnConfirmBgColor = getContainerPropsValue(container, 'content.btnConfirmBgColor', '');
         this.btnConfirmTextColor = getContainerPropsValue(container, 'content.btnConfirmTextColor', '');
+        this.show_tip_icon = getContainerPropsValue(container, 'content.show_tip_icon', '');
+        let staticTipIcon = getContainerPropsValue(container, 'content.staticTipIcon', '');
+        this.staticTipIcon = staticTipIcon ? getServiceUrl(staticTipIcon.url) : '';
+        this.tipIconHeight = getContainerPropsValue(container, 'content.tipIconHeight', 50);
         if (this.fontSize === 20) this.titleFontSize = 28;
         if (this.fontSize === 26) this.titleFontSize = 36;
         if (this.fontSize === 36) this.titleFontSize = 44;
         this.isTitle = getContainerPropsValue(container, 'content.isTitle', false);
 
-        console.log("this.btnConfirmTextColor", this.btnConfirmTextColor);
+        console.log("this.staticTipIcon", this.staticTipIcon);
 
         if(this.style === '2') {
           this.num = getContainerPropsValue(container, 'content.num', 1);
@@ -520,6 +532,8 @@
 
       &-content {
         padding: unit(8, rpx) unit(10, rpx);
+        display: flex;
+        align-items: center;
       }
     }
 

package/src/components/JfbBasePosterType/Attr.js

@@ -34,6 +34,35 @@ export default {
     if(params['textColor']) fontColor = params['textColor']
     if(params.titleStyle && params.titleStyle.color) fontColor = params.titleStyle.color;
 
+    //图片高度= 上下内边距 + 单个内容高度*行数 + 指示器高度
+    //图片宽度= 750 - 左右外边距
+    let outWidth = 750;
+    if(!params.margin) params.margin = {};
+    if(!params.contentPadding) params.contentPadding = {};
+    let marginLeft = params.margin.left || 0;
+    let marginRight = params.margin.right || 0;
+    let paddingLeft = params.contentPadding.left || 0;
+    let paddingRight = params.contentPadding.right || 0;
+    let paddingTop = params.contentPadding.top || 0;
+    let paddingBottom = params.contentPadding.bottom || 0;
+    let columnSpacing = params.columnSpacing || 0;
+    let columnSpacings = columnSpacing * (params.cells-1);
+    let textHeight = 40;
+    if(params.titleStyle && params.titleStyle.lineHeight) textHeight = parseInt(params.titleStyle.lineHeight);
+
+    let itemWidth = (outWidth - (marginLeft + marginRight + paddingLeft + paddingRight + columnSpacings))/ params.cells;
+    let itemHeight = textHeight + itemWidth;
+    let indicatorHeight = 0;
+
+    if(params.dot_type){
+      if(['indexes', 'nav'].includes(params['dot_type'])) indicatorHeight = 60;
+      else indicatorHeight = params.dot_type === 'normal'?0:48;
+    }
+    let bgImgHeight = params.jdRows * itemHeight + paddingTop + paddingBottom + indicatorHeight;
+    let bgImgWidth = 750 - (marginLeft + marginRight);
+    // console.log("itemHeight", bgImgHeight, bgImgWidth, params['dot_type'])
+
+
     return [
       {
         label: '导航配置:',
@@ -512,6 +541,23 @@ export default {
           showAlpha: true
         },
       },
+      {
+        label: "背景图片：",
+        ele: 'xd-upload',
+        valueKey: 'bgImage',
+        groupKey: 'style',
+        value: params.bgImage || null,
+        defaultValue: params.bgImage || null,
+        slot: true,
+        tipsformet: `上传文件格式：@imageType@，不超过@size@MB.，建议尺寸：${bgImgWidth}*${bgImgHeight}像素`,
+        type: ['jpg', 'png', 'jpeg'],
+        styleType: 'one',
+        oneWidth: bgImgWidth/2,
+        oneHeight: bgImgHeight/2,
+        uploadType: 'aliyun',
+        size: 5, //5M
+        action: 'aliyun',
+      },
       {
         label: "圆角设置：",
         groupKey: 'style',

package/src/components/JfbBasePosterType/JfbBasePosterType.vue

@@ -82,6 +82,7 @@
         contentPadding:{},
         bgColor:'rgba(0,0,0,0)',
         bgRadius: 0,
+        bgImage: "",
       }
     },
 		computed: {
@@ -192,6 +193,7 @@
           margin: this.getMarginAndPadding(this.margin, 0),
           padding:this.getMarginAndPadding(this.contentPadding, 0),
           backgroundColor: this.bgColor,
+          backgroundImage: this.bgImage ? `url(${getServiceUrl(this.bgImage)})` : '',
           borderRadius: this.bgRadius + 'rpx'
         }
       }
@@ -273,6 +275,7 @@
 
         //样式设置
         this.bgColor = getContainerPropsValue(container, 'content.bgColor','rgba(0,0,0,0)');
+        this.bgImage = getServiceUrl(getContainerPropsValue(container, 'content.bgImage', {url: ""}).url)
         this.bgRadius = getContainerPropsValue(container, 'content.bgRadius', '0');
         this.contentPadding = getContainerPropsValue(container, 'content.contentPadding', {});
         this.margin = getContainerPropsValue(container, 'content.margin', {});
@@ -327,6 +330,7 @@
         justify-content: center;
         align-items: center;
         display: flex;
+        background-size: cover;
       }
 
     }