jufubao-base 1.0.21 → 1.0.23-beta2

package/src/components/JfbBaseFooter/Attr.js

@@ -1,82 +1,151 @@
 'use strict';
+import ICONS from '@/ICONS'
+
 export default {
   style: [],
   advanced: [],
-  content: [
-    {
-      label: '', //label
-      ele: 'slot', //package 名称
-      slot: 'is_reference_title',
-    },
-    {
-      label: '背景颜色:', //label
-      ele: 'xd-color', //package 名称
-      valueKey: 'bgColor', //form[valueKey]
-      value: '#f9f9f9', //v-model
-      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', //样式名称 //input100,input80,input70,input60,input50,input40,input30,input20,
-      rules: [
-        {
-          required: true,
-          message: '请选择背景颜色',
-          trigger: 'change'
+      {
+        label: '菜单文字颜色:',
+        ele: 'xd-color',
+        valueKey: 'color',
+        groupKey:'content',
+        value: data['color'] || '',
+        setting: {
+          isAlpha: false
         },
-      ]
-    },
-    {
-      label: '菜单文字颜色:', //label
-      ele: 'xd-color', //package 名称
-      valueKey: 'color', //form[valueKey]
-      value: '#333', //v-model
-      setting: {
-        isAlpha: false
+        placeholder: '请选择菜单文字颜色',
+        classNmae: 'input80',
       },
-      placeholder: '请选择菜单文字颜色',
-      classNmae: 'input80', //样式名称 //input100,input80,input70,input60,input50,input40,input30,input20,
-    },
-    {
-      label: '菜单文字选中颜色:', //label
-      ele: 'xd-color', //package 名称
-      valueKey: 'selectedColor', //form[valueKey]
-      setting: {
-        isAlpha: false
+      {
+        label: '菜单文字选中颜色:',
+        ele: 'xd-color',
+        valueKey: 'selectedColor',
+        groupKey:'content',
+        setting: {
+          isAlpha: false
+        },
+        value:data['selectedColor'] || '',
+        placeholder: '请选择菜单文字选中颜色',
+        classNmae: 'input80',
       },
-      value: '#c00', //v-model
-      placeholder: '请选择菜单文字选中颜色',
-      classNmae: 'input80', //样式名称 //input100,input80,input70,input60,input50,input40,input30,input20,
-    },
-    {
-      label: '菜单配置:', //label
-      ele: 'xd-footer-setting', //package 名称
-      valueKey: 'footer-setting', //form[valueKey]
-      value: [],
-      setting: {
-        router: XdBus.getParentData('getPagesTree'),
+      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: '设置底部菜单的链接地址、标题(最多<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: '', //label
-      ele: 'slot', //package 名称
-      slot: 'is_reference',
-    },
-  ],
+    ].filter(i=>i);
+  },
 };
 

package/src/components/JfbBaseFooter/JfbBaseFooter.vue

@@ -1,27 +1,34 @@
 <template>
   <view
     class="jfb-base-footer"
-    @click="handleSelect"
-    :class="{ editx : isEditx && active }"
+    @click="handleEditxSelect"
+    :class="{
+      editx : isEditx && active,
+      noBorder: noBorder
+    }"
   >
     <!--#ifdef H5-->
     <view
       class="jfb-base-footer__edit"
       :class="{ editx : isEditx && active }"
-      v-if="isEditx && active"
+      v-if="isEditx && active && !noBorder"
     >
       <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"
-      ></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>
@@ -29,22 +36,39 @@
 <script>
   import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
   import XdFooterBar from "@/components/XdFooterBar/XdFooterBar";
-  import { jfbRootExec } from "@/utils/xd.event";
+  import { jfbRootExec, jfbRootFnExec } from "@/utils/xd.event";
   import JfbBaseFooterMixin from "./JfbBaseFooterMixin";
+  import componentsMixins from "@/mixins/componentsMixins";
+  import extsMixins from "@/mixins/extsMixins"
   import {getNoUrl} from "@/utils/nourl";
   import {
     getContainerPropsValue,
     getComponentAttr
   } from "@/utils/xd.base";
+  import getServiceUrl from "@/common/getServiceUrl";
+
   export default {
     name: "JfbBaseFooter",
     components: {
       XdFontIcon,
       XdFooterBar
     },
-    mixins: [
-      JfbBaseFooterMixin
-    ],
+    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,
@@ -52,38 +76,57 @@
         view: false,
         numObj: {},
         footerBarKey: 'footerBarKey', //刷新
-        
+        baseUrl: '',
+        backgroundImage: '',
       }
     },
     watch: {
-      container(value) {
-        this.init(value);
-        this.getNumber()
-        this.footerBarKey = this.$xdUniHelper.randomChar(20);
+      container(value,oloValue) {
+        if(JSON.stringify(value) === JSON.stringify(oloValue)) return;
+        if (this.$configProject['isPreview']){
+          this.init(value);
+          this.getNumber();
+          this.footerBarKey = this.$xdUniHelper.randomChar(20);
+        }
       }
     },
     created() {
-      this.view = window['jfbConfingView'] === 'preview';
-      
+      this.view = this.$configProject.isPreview;
+
+      //非预览模式
+      //#ifdef H5
+      if (!this.$configProject.isPreview){
+        this.baseUrl = this.projectAttr['deploy_dir']
+      }
+      //#endif
+
       //设置高度
-      if(window['jfbConfingView'] === 'preview') {
-        this.height = getComponentAttr(this.componentAttr, 'height') - 4;
+      if(this.$configProject.isPreview) {
+        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)
     },
     methods: {
+      handle(){
+        this.getNumber()
+      },
       onJfbLoad(options) {
         this.getNumber()
       },
-      
+
       /**
        * @description 从后台获取消息数量
        */
-      getNumber(){
+      async getNumber(){
+        let status = await jfbRootFnExec(this,'getCurrentPagesIsShow')();
         let bar = getContainerPropsValue(this.container, 'content.footer-setting', []);
         let params = [];
         bar.map((item, index) => {
@@ -98,7 +141,8 @@
             })
           }
         });
-        
+
+
         //预览模式
         if(this.view) {
           this.setNumber(params, params.map(item=>{
@@ -108,7 +152,9 @@
           }));
           return;
         }
-        
+
+        if(status ===false) return ;
+
         //打包模式
         getNoUrl(params)
           .then(res=>{
@@ -118,7 +164,7 @@
             console.log(error)
           });
       },
-      
+
       /**
        * @description 设置系统消息数量
        * @param params {Array} 请求参数
@@ -134,7 +180,14 @@
         this.init(this.container);
         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} 业务组件对象自己
@@ -142,17 +195,22 @@
       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'),
-          selectedColor: getContainerPropsValue(value, 'content.selectedColor', '#fff'),
+          bodyStyle: this.bodyStyle,
+          selectedColor: getContainerPropsValue(value, 'content.selectedColor', this.mainColor),
           color: getContainerPropsValue(value, 'content.color', '#333'),
           list: bar.map((item,index)=>{
             return {
-              name: item.name,
+              name: item.name.slice(0, 6),
               icon: item.icon,
               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'),
             }
           }),
         };
@@ -166,6 +224,7 @@
   @import "./JfbBaseFooterLess.less";
 
   .jfb-base-footer {
+
     &__body{
       box-sizing: border-box;
     }

package/src/components/JfbBaseFooter/JfbBaseFooterLess.less

@@ -13,18 +13,30 @@
 
 //start
 .jfb-base-footer {
-  border: 1px dashed rgba(0, 0, 0, 0);
   box-sizing: border-box;
 
-  &.editx {
-    position: relative;
-    border: 1px dashed blue;
-    box-sizing: border-box;
-
+  &__body{
+      position: relative;
+      overflow: hidden;
+      z-index: 2
   }
 
-  &:hover {
-    border: 1px dashed blue;
+  &.editx,&.editx:hover {
+    position: relative;
+    min-height: unit(100, rpx);
+    z-index: 3;
+    &::after {
+      border: 2rpx dashed blue;
+      content: " ";
+      position: absolute;
+      top:0;
+      left:0;
+      bottom:0;
+      right:0;
+      z-index: 4;
+      cursor: pointer;
+    }
+
   }
 
 
@@ -55,3 +67,13 @@
   }
 }
 //end
+
+
+/**notPreview**/
+.jfb-base-footer {
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
+}
+/**endNotPreview**/