jufubao-base 1.0.19 → 1.0.21

package/src/components/JfbBaseFooter/Attr.js

@@ -0,0 +1,82 @@
+'use strict';
+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
+      },
+      classNmae: 'input80', //样式名称 //input100,input80,input70,input60,input50,input40,input30,input20,
+      rules: [
+        {
+          required: true,
+          message: '请选择背景颜色',
+          trigger: 'change'
+        },
+      ]
+    },
+    {
+      label: '菜单文字颜色:', //label
+      ele: 'xd-color', //package 名称
+      valueKey: 'color', //form[valueKey]
+      value: '#333', //v-model
+      setting: {
+        isAlpha: false
+      },
+      placeholder: '请选择菜单文字颜色',
+      classNmae: 'input80', //样式名称 //input100,input80,input70,input60,input50,input40,input30,input20,
+    },
+    {
+      label: '菜单文字选中颜色:', //label
+      ele: 'xd-color', //package 名称
+      valueKey: 'selectedColor', //form[valueKey]
+      setting: {
+        isAlpha: false
+      },
+      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'),
+      },
+      handleCustom({action,data}){
+        console.log(`handleCustom.${action}`, data);
+        if(action === 'number') {
+          XdBus.getParentApi('getOptionsNoticeNumber')()
+            .then(res => {
+              data.cb(res.list)
+            })
+            .catch();
+        }
+      },
+      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',
+    },
+  ],
+};
+

package/src/components/JfbBaseFooter/JfbBaseFooter.vue

@@ -13,78 +13,149 @@
       <view class="jfb-base-footer__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
-    <view class="jfb-base-footer__body">
-      <view>测试插件( {{containerId}} )</view>
+    <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>
   </view>
 </template>
 
 <script>
   import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdFooterBar from "@/components/XdFooterBar/XdFooterBar";
   import { jfbRootExec } from "@/utils/xd.event";
   import JfbBaseFooterMixin from "./JfbBaseFooterMixin";
-  import { getContainerPropsValue } from "@/utils/xd.base";
+  import {getNoUrl} from "@/utils/nourl";
+  import {
+    getContainerPropsValue,
+    getComponentAttr
+  } from "@/utils/xd.base";
   export default {
     name: "JfbBaseFooter",
     components: {
-      XdFontIcon
+      XdFontIcon,
+      XdFooterBar
     },
     mixins: [
       JfbBaseFooterMixin
     ],
     data() {
       return {
-
-        //todo
+        height: 0,
+        list: null,
+        view: false,
+        numObj: {},
+        footerBarKey: 'footerBarKey', //刷新
+        
       }
     },
     watch: {
       container(value) {
-        this.init(value)
+        this.init(value);
+        this.getNumber()
+        this.footerBarKey = this.$xdUniHelper.randomChar(20);
       }
     },
     created() {
+      this.view = window['jfbConfingView'] === 'preview';
+      
+      //设置高度
+      if(window['jfbConfingView'] === 'preview') {
+        this.height = getComponentAttr(this.componentAttr, 'height') - 4;
+      }
+      else {
+        this.height = getComponentAttr(this.componentAttr, 'height');
+      }
+      
       this.init(this.container);
-
-      //todo
     },
     methods: {
       onJfbLoad(options) {
-
-        // jfbRootExec('baiduUserLogin', {
-
-        //   vm: this,//   data: {
-
-        //     account: 'gaoshiyong',//     password: '123456789',//     type: 3,//     ...options
-
-        //   }
-
-        // }).then().catch()
+        this.getNumber()
       },
+      
       /**
-       * @description 监听事件变化
-       * @param container {object} 业务组件对象自己
+       * @description 从后台获取消息数量
        */
-      init(value) {
-
-        //this.bgcolor = getContainerPropsValue(value, 'content.bgcolor', '#fff');
-
-        //this.height = getContainerPropsValue(value, 'content.height', 10);
-      },
-      onJfbScroll(options) {
-        console.log('event.onJfbScroll', options)
-      },
-      onJfbReachBottom(options) {
-        console.log('event.onJfbReachBottom', options)
+      getNumber(){
+        let bar = getContainerPropsValue(this.container, 'content.footer-setting', []);
+        let params = [];
+        bar.map((item, index) => {
+          if(item.api) {
+            let urlObj = this.$xdUniHelper.parseURL(item.api);
+            params.push({
+              url: urlObj.path,
+              index: index,
+              params: {
+                ...urlObj.params,
+              }
+            })
+          }
+        });
+        
+        //预览模式
+        if(this.view) {
+          this.setNumber(params, params.map(item=>{
+            return {
+              num: [9,99,199][this.$xdUniHelper.random(0,2)]
+            }
+          }));
+          return;
+        }
+        
+        //打包模式
+        getNoUrl(params)
+          .then(res=>{
+            this.setNumber(params, res);
+          })
+          .catch(error=>{
+            console.log(error)
+          });
       },
-      onJfbShow(options) {
-        console.log('event.onJfbShow', options)
-      },
-      onJfbHide(options) {
-        console.log('event.onJfbHide', options)
+      
+      /**
+       * @description 设置系统消息数量
+       * @param params {Array} 请求参数
+       * @param result {Array} 返回结果
+       */
+      setNumber(params, result){
+        let index = {};
+        params.map((item, idx)=>{
+          if(result[idx]['num'] > 99) result[idx]['num'] = '99+';
+          index[item.index] = result[idx]['num'];
+        });
+        this.numObj = index;
+        this.init(this.container);
+        this.footerBarKey = this.$xdUniHelper.randomChar(20);
       },
-      onJfbBack(options) {
-        console.log('event.onJfbBack', options)
+      
+      /**
+       * @description 监听事件变化
+       * @param value {object} 业务组件对象自己
+       */
+      init(value) {
+        //设置底部菜单
+        let bar = getContainerPropsValue(value, 'content.footer-setting', []);
+        this.list = {
+          bgColor: getContainerPropsValue(value, 'content.bgColor', '#fff'),
+          selectedColor: getContainerPropsValue(value, 'content.selectedColor', '#fff'),
+          color: getContainerPropsValue(value, 'content.color', '#333'),
+          list: bar.map((item,index)=>{
+            return {
+              name: item.name,
+              icon: item.icon,
+              path: item.path.value,
+              size: item.size,
+              num: this.numObj[index] ? this.numObj[index]: 0 ,
+            }
+          }),
+        };
       },
     }
   }
@@ -96,7 +167,7 @@
 
   .jfb-base-footer {
     &__body{
-
+      box-sizing: border-box;
     }
   }
 </style>

package/src/components/JfbBaseFooter/JfbBaseFooterMixin.js

@@ -1,5 +1,9 @@
 'use strict';
 
+//@AttrImport
+import Attr from "./Attr";
+//@EndAttrImport
+
 import {getContainerPropsValue} from "@/utils/xd.base";
 export default {
   props: {
@@ -88,13 +92,32 @@ export default {
       containerId: null, //容器ID
       //#ifdef H5
       
+      //@AttrData
+      Attr:{}, //对外开发编辑属性
+      //@EndAttrData
+      
       active: false, //是否选择当前状态
       isEditx: true, //当前为Editx模式
       edit: false, //是否开启编辑模式
       // #endif
+
+      //风格键
+      mainColor: '',
+      successColor: '',
+      warningColor: '',
+      subMainColor: '',
+      infoColor: '',
+      defaultColor: '',
+      dangerColor: ''
     }
   },
   created() {
+    
+    //@AttrDataCreated
+    this.Attr = this.$xdUniHelper.customClone(Attr);
+    //@EndAttrDataCreated
+    
+
     //设置插件cid
     if (this.cid) {
       this.containerId = this.cid;
@@ -102,6 +125,9 @@ export default {
       this.containerId = this.$xdUniHelper.randomChar(20);
     }
 
+    //初始化风格
+    this.initThemesToData();
+
     //#ifdef H5
     //监听用户点击状态显示虚框
     XdBus.addEvent('select', ({containerId}) => {
@@ -124,6 +150,26 @@ export default {
     onCheck() {
     },
 
+    /***
+     * @description 业务组件风格map到data中
+     */
+    initThemesToData() {
+      Object.keys(this.styles).map(key => {
+        let k = key.replace('$', '');
+        if (this[k] !== undefined) this[k] = this.styles[key];
+      });
+      console.log('initThemesToData',this)
+    },
+
+    /**
+     * @description 其子级插件获取当前插件的业务组件风格列表
+     * @returns {*}
+     */
+    getParentThemes(){
+      return this.styles;
+    },
+
+
     //#ifdef H5
     /**
      * @description 点击删除操作按钮
@@ -145,8 +191,8 @@ export default {
       //#ifdef H5
       if (this.active) return;
       this.active = true;
-      let AttrObj = this.$xdUniHelper.checkVarType(Attr) === 'object' ?
-        Attr: { style: [], advanced: [], content: []};
+      let AttrObj = this.$xdUniHelper.checkVarType(this.Attr) === 'object' ?
+        this.Attr : { style: [], advanced: [], content: []};
       console.log('handleSelect.Attr', AttrObj);
 
       //设置已绑定数据
@@ -161,7 +207,7 @@ export default {
       XdBus.send('onSelectPackage', {
         containerId: this.containerId,
         Attr: AttrObj,
-        container: this.container
+        container: this.$xdUniHelper.cloneDeep(this.container)
       });
 
       //绑定选中插件事件

package/src/components/JfbBaseLine/JfbBaseLineMixin.js

@@ -93,16 +93,31 @@ export default {
       //#ifdef H5
       
       //@AttrData
-      Attr, //对外开发编辑属性
+      Attr:{}, //对外开发编辑属性
       //@EndAttrData
       
       active: false, //是否选择当前状态
       isEditx: true, //当前为Editx模式
       edit: false, //是否开启编辑模式
       // #endif
+
+      //风格键
+      mainColor: '',
+      successColor: '',
+      warningColor: '',
+      subMainColor: '',
+      infoColor: '',
+      defaultColor: '',
+      dangerColor: ''
     }
   },
   created() {
+    
+    //@AttrDataCreated
+    this.Attr = this.$xdUniHelper.customClone(Attr);
+    //@EndAttrDataCreated
+    
+
     //设置插件cid
     if (this.cid) {
       this.containerId = this.cid;
@@ -110,6 +125,9 @@ export default {
       this.containerId = this.$xdUniHelper.randomChar(20);
     }
 
+    //初始化风格
+    this.initThemesToData();
+
     //#ifdef H5
     //监听用户点击状态显示虚框
     XdBus.addEvent('select', ({containerId}) => {
@@ -132,6 +150,26 @@ export default {
     onCheck() {
     },
 
+    /***
+     * @description 业务组件风格map到data中
+     */
+    initThemesToData() {
+      Object.keys(this.styles).map(key => {
+        let k = key.replace('$', '');
+        if (this[k] !== undefined) this[k] = this.styles[key];
+      });
+      console.log('initThemesToData',this)
+    },
+
+    /**
+     * @description 其子级插件获取当前插件的业务组件风格列表
+     * @returns {*}
+     */
+    getParentThemes(){
+      return this.styles;
+    },
+
+
     //#ifdef H5
     /**
      * @description 点击删除操作按钮
@@ -153,8 +191,8 @@ export default {
       //#ifdef H5
       if (this.active) return;
       this.active = true;
-      let AttrObj = this.$xdUniHelper.checkVarType(Attr) === 'object' ?
-        Attr: { style: [], advanced: [], content: []};
+      let AttrObj = this.$xdUniHelper.checkVarType(this.Attr) === 'object' ?
+        this.Attr : { style: [], advanced: [], content: []};
       console.log('handleSelect.Attr', AttrObj);
 
       //设置已绑定数据
@@ -169,7 +207,7 @@ export default {
       XdBus.send('onSelectPackage', {
         containerId: this.containerId,
         Attr: AttrObj,
-        container: this.container
+        container: this.$xdUniHelper.cloneDeep(this.container)
       });
 
       //绑定选中插件事件