jufubao-base 1.0.290-beta3 → 1.0.290

package/src/components/JfbBaseFooter/XdFooterBar.vue

@@ -0,0 +1,324 @@
+<template>
+  <view class="xd-footer-bar" :style="[boxStyleComp]">
+    <view class="xd-footer-bar__border">
+      <view
+        v-for="(item,index) in dataList"
+        :key="item.key"
+        class="xd-footer-bar__item"
+      >
+        <view
+          class="xd-footer-bar__item-badge"
+          v-if="item.num"
+          :style="[numStyleComp,{padding: item.num === '99+' ? '0 8rpx': '0'}]"
+        >{{item.num}}</view>
+        <navigator
+          class="xd-footer-bar__item-link"
+          open-type="redirect"
+          :url="view ? '': (item.path + '?' + params)"
+        >
+          <view class="xd-footer-bar__icon" :class="{noName:!item.name,isCenter:index === isCenterIndex}">
+            <view v-if="item.image" class="image">
+              <image :src="(activeUrl === getPath(item.path))?item['actImage']:item.image" />
+            </view>
+            <xd-font-icon
+              v-else-if="item.icon"
+              :size="(item.size ? item.size * 2 : 36) * nameSizeComp"
+              :icon="item.icon"
+              :style="{color: (activeUrl === getPath(item.path)) ? iconActColor : iconColor}"
+            ></xd-font-icon>
+          </view>
+          <view v-if="index !== isCenterIndex && item.name" class="xd-footer-bar__text" :style="{color: (activeUrl === getPath(item.path))?  nameActColor : nameColor}">{{item.name}}</view>
+        </navigator>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import {
+    getPlatformParamsValue,
+    getPlatformParamsForGroup
+  } from "@/project";
+  import storage from "@/common/storage";
+  import {
+    getParentsStyle,
+  } from '@/utils/xd.base';
+
+  /**
+   * XdFooterBar 全局Ui
+   * @description 底部功能
+   * @tutorial
+   * @property {Number} zIndex          层级数字 （可选）
+   * @property {Number} height          tabBar高度（可选）
+   * @property {Boolean} view           view显示模式（可选）
+   * @property {Object} styles          模版风格（可选）
+   * @property {Object} tabbar
+   *  tabBar.selectedColor  {String} tabBar当前选中文字颜色
+   *  tabBar.bgColor  {String} tabBar背景颜色值
+   *  tabBar.list {Array} tabBar列表
+   *  tabBar.list.name  {String} tabBar文案（4个汉字）
+   *  tabBar.list.path  {String} 链接路径
+   *  tabBar.list.icon  {String} iconfont图标
+   */
+
+  export default {
+    name: "XdFooterBar",
+    components: {
+      XdFontIcon
+    },
+    props: {
+      styles:{
+        type: Object,
+        default(){
+          return {}
+        },
+      },
+      view: {
+        type:Boolean,
+        default: false,
+      },
+      zIndex: {
+        type: Number,
+        default: 1500 //rpx
+      },
+      tabBar: {
+        type: Object,
+        required: true
+      },
+      height: {
+        type: Number,
+        default: 100 //rpx
+      },
+      baseUrl: {
+        type: String,
+        required: true
+      }
+    },
+
+    watch:{
+      tabBar(){
+        this.init();
+      }
+    },
+
+    computed:{
+      boxStyleComp(){
+        return {
+          zIndex: this.zIndex,
+          height: this.height + 'rpx',
+          "--center-border": `${this.centerBorderWidth * this.$rpxNum}px solid ${this.centerBorderColor}`,
+          "--center-background-color": this.centerBorderColor
+        }
+      },
+      numStyleComp(){
+        return {
+          backgroundColor: 'red',
+        }
+      },
+      nameSizeComp(){
+        if(this.hasName === false) return 80/52;
+        return 1
+      },
+    },
+
+    data(){
+      return {
+        dataList: [],
+        activeUrl: null, //当前路径
+        params: null, //系统透传参数
+        hasName:true,//展示文字
+
+        //文字样式
+        nameColor: '#333',
+        nameActColor: 'red',
+
+        //图标样式
+        iconColor: '#333',
+        iconActColor: 'red',
+
+        styleMainColor: null, //插件主题风格样式
+
+        //中间效果
+        isCenterIndex:-1,
+        centerBorderColor:'#333',
+        centerBorderWidth: 12
+
+      }
+    },
+
+    async created() {
+      this.styleMainColor = await getParentsStyle(this.$parent, '$mainColor');
+
+      //设置活动参数
+      let params = [];
+      let xParamsKey = getPlatformParamsForGroup([]);
+      xParamsKey.map(key=>{
+        let {paramKey, storageKey} = getPlatformParamsValue(key);
+        let value = storage.get(storageKey);
+        if(value) params.push(`${paramKey}=${value}`);
+      })
+      this.params = params.join("&");
+
+      this.init();
+    },
+
+    mounted() {
+      this.$nextTick(() => {
+        this.getActive()
+      })
+    },
+
+    methods:{
+
+      getPath(path){
+        if(this.baseUrl) path = require('path').normalize(`/${this.baseUrl}/${path}`);
+        return path;
+      },
+
+      getActive(){
+        let routes = this.$xdUniHelper.getCurrentPages(this.tabBar.home);
+        this.activeUrl = routes['path'];
+      },
+
+
+      /**
+       * @description 初始化数据
+       */
+      init(){
+        this.nameActColor = this.tabBar['selectedColor'] || this.styleMainColor || 'red';
+        this.nameColor = this.tabBar['color'] || '#333';
+        this.iconActColor = this.tabBar['selectedIconColor'] || this.styleMainColor || 'red';
+        this.iconColor = this.tabBar['iconColor'] || '#333';
+        this.hasName = this.tabBar['hasName'];
+        this.dataList = this.tabBar.list.map(item=>{
+          return {
+            key : this.$xdUniHelper.randomChar(20),
+            ...item
+          }
+        });
+        this.centerBorderWidth = this.tabBar['borderWidth'] || 12;
+        this.centerBorderColor = this.tabBar['borderColor'] || this.tabBar['bgColor'] || '#fff';
+
+        if(this.tabBar['tpl'] === 'itemCenterBig') {
+          if( this.dataList .length === 1) this.isCenterIndex = 0;
+          if( this.dataList .length === 3) this.isCenterIndex = 1;
+          if( this.dataList .length === 5) this.isCenterIndex = 2;
+        }
+        else {
+          this.isCenterIndex = -1
+        }
+      },
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-footer-bar {
+    height: 100%;
+    width: 100%;
+
+    &__icon {
+      width: 52rpx;
+      height: 52rpx;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &.noName {
+        width: 80rpx;
+        height: 80rpx;
+      }
+    }
+
+    &__text {
+      line-height:1.2rem;
+    }
+
+    &__border {
+      border-top: 1px solid #eee;
+      display: flex;
+      flex-wrap: nowrap;
+      justify-content: center;
+      align-items: center;
+      height: 100%;
+      box-sizing: border-box;
+    }
+
+    &__item {
+      height: 100%;
+      flex: 1;
+      font-size: @xd-font-size-sm;
+      text-align: center;
+      display: flex;
+      flex-wrap: nowrap;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+
+      &-link {
+        height: 100%;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        align-items: center;
+        position: relative;
+
+        & .isCenter {
+          width: 120rpx;
+          height: 120rpx;
+          position: absolute;
+          background-color: var(--center-background-color);
+          border-radius: 50%;
+          box-sizing: border-box;
+          left:50%;
+          margin-left: -60rpx;
+          bottom: 0;
+          border: var(--center-border);
+        }
+      }
+
+      & > view:nth-child(2) {
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+      }
+
+      &-badge {
+        position: absolute;
+        top: unit(0, rpx);
+        left: 50%;
+        color: #fff;
+        transform: translateX(unit(10,rpx));
+        min-width: unit(32, rpx);
+        height: unit(32, rpx);
+        line-height: unit(32, rpx);
+        border-radius: unit(16, rpx);
+        font-size: unit(18, rpx);
+        z-index: 20;
+      }
+    }
+
+
+    &__image {
+      display: flex;
+      flex-wrap: nowrap;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .image {
+      width: 100%;
+      height: 100%;
+
+      & > image {
+        max-width: 100%;
+        max-height: 100%;
+      }
+    }
+
+  }
+</style>

package/src/components/JfbBaseFooter/cusAttr/advanced.js

@@ -0,0 +1,12 @@
+'use strict';
+
+import ICONS from "@/ICONS";
+import tools from "./tools";
+
+export default (data, gValue, gColor, oldData={})=>{
+  const {footerSettingImage, footerSetting} = tools(data);
+  return [
+
+  ]
+}
+