jufubao-base 1.0.197 → 1.0.199

package/src/components/JfbBaseFastLink/JfbBaseFastLink.vue

@@ -16,17 +16,15 @@
     <view class="jfb-base-fast-link__body">
       <template v-if="is_layout === 'noraml'">
         <view class="x-line"></view>
-        <view class="fast-link" :style="{ margin: outMargin}" v-if="list.length > 0">
+        <view
+          class="fast-link"
+          :style="[bodyStyle]"
+          v-if="list.length > 0">
           <view
             class="fast-link__item"
             v-for="item in list"
             :key="item.key"
-            :style="{
-              background: backgroundColor,
-              border: borderBox,
-              borderRadius: radius + 'rpx',
-              marginBottom: padding + 'rpx'
-            }"
+            :style="[contStyle]"
             @click="handleClick(item)"
           >
             <view class="fast-link__item-icon" v-if="item.icon">
@@ -107,7 +105,8 @@
 
         //其他
         margin: {},
-        padding: 20, //间距
+        padding:{},
+        rowSpacing: 20, //间距
       }
     },
     watch: {
@@ -118,16 +117,32 @@
     },
 
     computed: {
-      outMargin(){
-        let str = `${this.checkValue(this.margin.top, 20)}rpx`;
-        str = `${str} ${this.checkValue(this.margin.right, 20)}rpx`;
-        str = `${str} ${this.checkValue(this.margin.bottom, 20)}rpx`;
-        str = `${str} ${this.checkValue(this.margin.left, 20)}rpx`;
-        return str
+      bodyStyle(){
+        let margin = `${this.checkValue(this.margin.top, 0)}rpx`;
+        margin = `${margin} ${this.checkValue(this.margin.right, 0)}rpx`;
+        margin = `${margin} ${this.checkValue(this.margin.bottom, 0)}rpx`;
+        margin = `${margin} ${this.checkValue(this.margin.left, 0)}rpx`;
+
+        let padding = `${this.checkValue(this.padding.top, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.padding.right, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.padding.bottom, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.padding.left, 20)}rpx`;
+
+        return {
+          margin,
+          padding
+        }
       },
-      borderBox() {
-        if (this.is_border === 'Y') return `${this.is_border_w}rpx solid ${this.is_border_c}`;
-        else return '0';
+
+      contStyle(){
+        let border = 0;
+        if (this.is_border === 'Y') border = `${this.is_border_w}rpx solid ${this.is_border_c}`;
+        return {
+          background: this.backgroundColor,
+          borderRadius: this.radius + 'rpx',
+          marginBottom: this.rowSpacing + 'rpx',
+          border
+        }
       },
 
       subNameSize(){
@@ -152,6 +167,7 @@
         }
       },
       handleClick(item){
+        if (this.$configProject['isPreview']) return
         if(item.path && item.path.value) {
           this.$xdUniHelper.navigateTo({
             url : `${item.path.value}`
@@ -168,9 +184,8 @@
         this.fontSize = getContainerPropsValue(container, 'content.fontSize', 26);
         this.radius = getContainerPropsValue(container, 'content.radius', 10);
         this.iconColor = getContainerPropsValue(container, 'content.iconColor', '#999');
-        this.padding = getContainerPropsValue(container, 'content.padding', 20);
+        this.rowSpacing = getContainerPropsValue(container, 'content.rowSpacing', 20);
         this.is_layout = getContainerPropsValue(container, 'content.is_layout', 'noraml');
-        //this.fastName = getContainerPropsValue(container, 'content.fastName', '快速导航');
         this.is_border = getContainerPropsValue(container, 'content.is_border', 'N');
         this.is_border_c = getContainerPropsValue(container, 'content.is_border_c', '#fff');
         this.is_border_w = getContainerPropsValue(container, 'content.is_border_w', 2);
@@ -181,7 +196,8 @@
             size: item.size * this.$pxNum
           }
         });
-        this.margin = getContainerPropsValue(container, 'content.margin', {top: 0, left: 0, right: 0, bottom: 0});
+        this.margin = getContainerPropsValue(container, 'content.margin', {});
+        this.padding = getContainerPropsValue(container, 'content.padding', {})
         this.subColor = getContainerPropsValue(container, 'content.textSubColor', '#000');
         this.fontSubSize = getContainerPropsValue(container, 'content.fontSubSize', 24);
         this.isNotExpand = getContainerPropsValue(container, 'content.isNotExpand', 'Y');
@@ -213,8 +229,8 @@
           }).filter((item,index)=>{
             return index < 3
           });
-        }
 
+        }
       },
     }
   }

package/src/components/JfbBaseFooter/Attr.js

@@ -1,86 +1,152 @@
 'use strict';
+import ICONS from '@/ICONS'
+
 export default {
   style: [],
   advanced: [],
-  content: [
-    {
-      label: '',
-      ele: 'slot',
-      slot: 'is_reference_title',
-      groupKey: 'advanced',
-    },
-    {
-      label: '背景颜色:',
-      ele: 'xd-color',
-      valueKey: 'bgColor',
-      groupKey:'style',
-      value: '',
-      placeholder: '请选择背景颜色',
-      setting: {
-        isAlpha: false
+  content:(data)=>{
+    let footerSettingImage = [];
+    let footerSetting = [];
+    if(data['footerSettingImage'] && data['footerSettingImage'].length > 0 ) {
+      footerSettingImage = data['footerSettingImage'];
+    }
+    if(data['footer-setting'] && data['footer-setting'].length > 0){
+      footerSetting = data['footer-setting'];
+      footerSetting.map((item,index)=>{
+        if(!footerSettingImage[index]) footerSettingImage[index] = {};
+        footerSettingImage[index] = Object.assign({},JSON.parse(JSON.stringify(item)),footerSettingImage[index])
+      })
+    }
+    return [
+      {
+        label: '',
+        ele: 'slot',
+        slot: 'is_reference_title',
+        groupKey: 'advanced',
+      },
+      {
+        label: '背景图设置:',
+        ele: 'xd-upload',
+        valueKey: 'backgroundImage',
+        groupKey:'content',
+        value: data.backgroundImage || {},
+        defaultValue: data.backgroundImage || null,
+        slot: true,
+        oneWidth: 375,
+        oneHeight: 55,
+        elinputClassName: 'input40',
+        tipsformet: '上传文件格式：@imageType@，不超过@size@MB。建议尺寸：<span style="color:red">750*110</span>像素',
+        type: ['jpg', 'png', 'jpeg'],
+        styleType: 'one',
+        uploadType: 'aliyun',
+        size: .5,
+        action: 'action',
+        sort: true,
+        maxlen: 1,
+      },
+      {
+        label: '背景颜色:',
+        ele: 'xd-color',
+        valueKey: 'bgColor',
+        groupKey:'content',
+        value: data['bgColor'] || '',
+        placeholder: '请选择背景颜色',
+        setting: {
+          isAlpha: false
+        },
+        classNmae: 'input80',
       },
-      classNmae: 'input80',
-    },
-    {
-      label: '菜单文字颜色:',
-      ele: 'xd-color',
-      valueKey: 'color',
-      groupKey:'style',
-      value: '',
-      setting: {
-        isAlpha: false
+      {
+        label: '菜单文字颜色:',
+        ele: 'xd-color',
+        valueKey: 'color',
+        groupKey:'content',
+        value: data['color'] || '',
+        setting: {
+          isAlpha: false
+        },
+        placeholder: '请选择菜单文字颜色',
+        classNmae: 'input80',
       },
-      placeholder: '请选择菜单文字颜色',
-      classNmae: 'input80',
-    },
-    {
-      label: '菜单文字选中颜色:',
-      ele: 'xd-color',
-      valueKey: 'selectedColor',
-      groupKey:'style',
-      setting: {
-        isAlpha: false
+      {
+        label: '菜单文字选中颜色:',
+        ele: 'xd-color',
+        valueKey: 'selectedColor',
+        groupKey:'content',
+        setting: {
+          isAlpha: false
+        },
+        value:data['selectedColor'] || '',
+        placeholder: '请选择菜单文字选中颜色',
+        classNmae: 'input80',
       },
-      value: '',
-      placeholder: '请选择菜单文字选中颜色',
-      classNmae: 'input80',
-    },
-    {
-      label: '菜单配置:',
-      ele: 'xd-footer-setting',
-      valueKey: 'footer-setting',
-      groupKey:'advanced',
-      value: [],
-      setting: {
-        router: XdBus.getParentApi('getPagesTree'),
-        showField: {
-          path: true,
-          icon: true,
-          notice: true
-        }
+      footerSetting.length > 0 && {
+        label: '菜单图片配置:',
+        ele: 'xd-footer-setting',
+        valueKey: 'footerSettingImage',
+        groupKey:'content',
+        value: footerSettingImage,
+        setting: {
+          router: XdBus.getParentApi('getPagesTree'),
+          hideAdd: true,
+          showField: {
+            path: false,
+            icon: false,
+            notice: false,
+            image: true,
+            actImage: true
+          }
+        },
+        handleCustom({action,data}){
+          if(action === 'number') {
+            XdBus.getParentApi('getOptionsNoticeNumber')()
+              .then(res => {
+                data.cb(res.list)
+              })
+              .catch();
+          }
+        },
+      },
+
+      {
+        label: '菜单配置:',
+        ele: 'xd-footer-setting',
+        valueKey: 'footer-setting',
+        groupKey:'advanced',
+        value: footerSetting,
+        setting: {
+          router: XdBus.getParentApi('getPagesTree'),
+          icons:ICONS,
+
+          showField: {
+            path: true,
+            icon: true,
+            notice: true,
+          }
+        },
+        handleCustom({action,data}){
+          console.log(`handleCustom.${action}`, data);
+          if(action === 'number') {
+            XdBus.getParentApi('getOptionsNoticeNumber')()
+              .then(res => {
+                data.cb(res.list)
+              })
+              .catch();
+          }
+        },
+        inline: false,
+        notice: '设置底部菜单的链接地址1、标题(最多<sapn style="color: red">五个汉字</sapn>)、ICON图标（<a href="https://www.iconfont.cn/manage/index?spm=a313x.7781069.1998910419.db775f1f3&manage_type=myprojects&projectId=3378319&keyword=&project_type=&page=" style="color: blue" target="_blank">ICONFONT库</a>）、ICON大小（单位：<sapn style="color: red">像素</sapn>）和是否有消息数量显示（无数量显示可以不填写）',
+        rules: [
+          {required: true, message: '请添加内容', trigger: 'change'},
+        ],
       },
-      handleCustom({action,data}){
-        console.log(`handleCustom.${action}`, data);
-        if(action === 'number') {
-          XdBus.getParentApi('getOptionsNoticeNumber')()
-            .then(res => {
-              data.cb(res.list)
-            })
-            .catch();
-        }
+      {
+        label: '',
+        ele: 'slot',
+        slot: 'is_reference',
+        groupKey: 'advanced',
       },
-      inline: false,
-      notice: '设置底部菜单的链接地址1、标题(最多<sapn style="color: red">五个汉字</sapn>)、ICON图标（<a href="https://www.iconfont.cn/manage/index?spm=a313x.7781069.1998910419.db775f1f3&manage_type=myprojects&projectId=3378319&keyword=&project_type=&page=" style="color: blue" target="_blank">ICONFONT库</a>）、ICON大小（单位：<sapn style="color: red">像素</sapn>）和是否有消息数量显示（无数量显示可以不填写）',
-      rules: [
-        {required: true, message: '请添加内容', trigger: 'change'},
-      ],
-    },
-    {
-      label: '',
-      ele: 'slot',
-      slot: 'is_reference',
-      groupKey: 'advanced',
-    },
-  ],
+    ].filter(i=>i);
+  },
 };
 

package/src/components/JfbBaseFooter/JfbBaseFooter.vue

@@ -16,16 +16,19 @@
       <view class="jfb-base-footer__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
-    <view class="jfb-base-footer__body" :style="{height:height + 'rpx'}">
-      <xd-footer-bar
-        v-if="list !== null"
-        :height="height"
-        :tabbar="list"
-        :view="view"
-        :styles="styles"
-        :key="footerBarKey"
-        :base-url="baseUrl"
-      ></xd-footer-bar>
+    <view class="jfb-base-footer__body">
+      <view :style="[bodyStyle]">
+        <xd-footer-bar
+          style="height:100%"
+          v-if="list !== null"
+          :height="height"
+          :tabbar="list"
+          :view="view"
+          :styles="styles"
+          :key="footerBarKey"
+          :base-url="baseUrl"
+        ></xd-footer-bar>
+      </view>
     </view>
   </view>
 </template>
@@ -42,6 +45,7 @@
     getContainerPropsValue,
     getComponentAttr
   } from "@/utils/xd.base";
+  import getServiceUrl from "@/common/getServiceUrl";
 
   export default {
     name: "JfbBaseFooter",
@@ -50,6 +54,21 @@
       XdFooterBar
     },
     mixins: [componentsMixins,extsMixins,JfbBaseFooterMixin],
+    computed:{
+      bodyStyle(){
+        let background = 'url(none)';
+        if(this.backgroundImage && this.backgroundImage.url) {
+          background = `url(${getServiceUrl(this.backgroundImage.url)})`;
+        }
+        return {
+          height: this.height + 'rpx',
+          backgroundImage: background,
+          backgroundSize: '100% 100%',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'top center',
+        }
+      }
+    },
     data() {
       return {
         height: 0,
@@ -58,6 +77,7 @@
         numObj: {},
         footerBarKey: 'footerBarKey', //刷新
         baseUrl: '',
+        backgroundImage: '',
       }
     },
     watch: {
@@ -73,21 +93,23 @@
     created() {
       this.view = this.$configProject.isPreview;
 
-      //生产模式 + 非预览模式
-      if (this.$configProject.UNI_PLATFORM === 'h5'
-        && this.$configProject.NODE_ENV === 'production'
-      ){
+      //非预览模式
+      //#ifdef H5
+      if (!this.$configProject.isPreview){
         this.baseUrl = this.projectAttr['deploy_dir']
       }
+      //#endif
 
       //设置高度
       if(this.$configProject.isPreview) {
-        this.height = getComponentAttr(this.componentAttr, 'height') - 4;
+        this.height = getComponentAttr(this.componentAttr, 'height');
       }
       else {
         this.height = getComponentAttr(this.componentAttr, 'height');
       }
 
+      this.height =  Number(this.height);
+
       this.init(this.container);
       //监听重试消息数量
       this.$xdRoot.$on('restFooterNumber', this.handle)
@@ -159,6 +181,13 @@
         this.footerBarKey = this.$xdUniHelper.randomChar(20);
       },
 
+      getImage(list=[],index,key){
+        if(!list[index]) return '';
+        if(list[index] && !list[index][key]) return  '';
+        let item = list[index][key];
+        return getServiceUrl(item.url, 'size1');
+      },
+
       /**
        * @description 监听事件变化
        * @param value {object} 业务组件对象自己
@@ -166,8 +195,11 @@
       init(value) {
         //设置底部菜单
         let bar = getContainerPropsValue(value, 'content.footer-setting', []);
+        let imageIcons = getContainerPropsValue(value, 'content.footerSettingImage', []);
+        this.backgroundImage = getContainerPropsValue(value, 'content.backgroundImage', '');
         this.list = {
           bgColor: getContainerPropsValue(value, 'content.bgColor', '#fff'),
+          bodyStyle: this.bodyStyle,
           selectedColor: getContainerPropsValue(value, 'content.selectedColor', this.mainColor),
           color: getContainerPropsValue(value, 'content.color', '#333'),
           list: bar.map((item,index)=>{
@@ -177,6 +209,8 @@
               path: item.path.value,
               size: item.size,
               num: this.numObj[index] ? this.numObj[index]: 0 ,
+              image: this.getImage(imageIcons,index,'image') || this.getImage(imageIcons,index,'actImage'),
+              actImage: this.getImage(imageIcons,index,'actImage') || this.getImage(imageIcons,index,'image'),
             }
           }),
         };
@@ -190,6 +224,7 @@
   @import "./JfbBaseFooterLess.less";
 
   .jfb-base-footer {
+
     &__body{
       box-sizing: border-box;
     }