gxd-uni-library-editx 1.0.0

package/src/components/XdFooterBar/XdFooterBar.vue

@@ -0,0 +1,291 @@
+<template>
+  <view
+    class="xd-footer-tabbar"
+    :style="{
+      height: height +'rpx',
+      background: bgColor,
+      zIndex: zIndex,
+    }"
+  >
+    <view class="xd-footer-tabbar__border">
+      <template v-if="view">
+        <view
+          v-for="(item) in dataList"
+          :key="item.key"
+          class="xd-footer-tabbar__item"
+        >
+          <view class="xd-footer-tabbar__item-badge"
+            v-if="item.num"
+              :style="{
+              background: 'red',
+              padding: item.num === '99+' ? '0 8rpx': '0'
+            }"
+          >{{item.num}}
+          </view>
+          <view class="xd-footer-tabbar__item-link"
+            open-type="redirect"
+            :url="item.path + '?' + parmas"
+          >
+            <view class="xd-footer-tabbar__icon" v-if="item.icon">
+              <xd-font-icon
+                :size="item.size ? item.size * 2 : 36"
+                :icon="item.icon"
+                :style="{
+                color: (activeUrl === item.path) ? selectedTextColor : textColor
+              }"
+              ></xd-font-icon>
+            </view>
+            <view class="xd-footer-tabbar__text"
+              :style="{
+                color: (activeUrl === item.path)?  selectedTextColor : textColor
+              }"
+            >{{item.name}}</view>
+          </view>
+        </view>
+      </template>
+      <template v-else>
+        <view
+          v-for="(item) in dataList"
+          :key="item.key"
+          class="xd-footer-tabbar__item"
+        >
+          <view class="xd-footer-tabbar__item-badge"
+            v-if="item.num"
+            :style="{
+              background: 'red',
+              padding: item.num === '99+' ? '0 8rpx': '0'
+            }"
+          >{{item.num}}</view>
+          <navigator class="xd-footer-tabbar__item-link"
+            open-type="redirect"
+            :url="item.path + '?' + parmas"
+          >
+            <view class="xd-footer-tabbar__icon" v-if="item.icon">
+              <xd-font-icon
+                :size="item.size ? item.size * 2 : 36"
+                :icon="item.icon"
+                :style="{
+                color: (activeUrl === item.path) ? selectedTextColor : textColor
+              }"
+              ></xd-font-icon>
+            </view>
+            <view class="xd-footer-tabbar__text"
+              :style="{
+                color: (activeUrl === item.path)?  selectedTextColor : textColor
+              }"
+            >{{item.name}}</view>
+          </navigator>
+        </view>
+      </template>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import {PLATFORM_PARAM_SETTING} from "@/project";
+  import {
+    getParentsStyle,
+  } from '@/utils/xd.base';
+
+  /**
+   * XdFooterTabbar 全局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
+      }
+    },
+
+    data(){
+      return {
+        show: false, //是否显示底部导航
+        
+        dataList: [],
+        activeUrl: null, //当前路径
+        parmas: null, //系统透传参数
+        
+        bgColor: '',
+        selectedTextColor: null,
+        textColor:null,
+        
+        styleMainColor: null, //插件主题风格样式
+      }
+    },
+    
+    watch:{
+      tabbar(){
+        this.init();
+      }
+    },
+  
+    async created() {
+      this.styleMainColor = await getParentsStyle(this.$parent, '$mainColor');
+      
+      //设置活动参数
+      let parmas = '';
+      if (getApp().globalData.$xd && getApp().globalData.$xd.$storage) {
+        let event = getApp().globalData.$xd.$storage.get(PLATFORM_PARAM_SETTING.EVENT_PARAM_SAVE_KEY);
+        if (event) {
+          parmas = `${PLATFORM_PARAM_SETTING.EVENT_PARAM_NAME}=${event}`
+        }
+      }
+      this.parmas = parmas;
+      
+      this.init();
+    },
+
+    mounted() {
+      this.$nextTick(() => {
+        this.getActive()
+      })
+    },
+
+    methods:{
+
+      getActive(){
+        let routes = this.$xdUniHelper.getCurrentPages(this.tabbar.home);
+        this.activeUrl = routes['path'];
+      },
+
+      /**
+       * @description
+       * @param list
+       * @param find
+       * @returns {boolean}
+       */
+      inArray(list,find){
+        return this.$xdUniHelper.inArray(list,find)
+      },
+      
+
+      /**
+       * @description 初始化数据
+       */
+      init(){
+        this.bgColor = this.tabbar['bgColor'];
+        this.selectedTextColor = this.tabbar['selectedColor'] || this.styleMainColor;
+        this.textColor = this.tabbar['color'] || '#333';
+        this.dataList = this.tabbar.list.map(item=>{
+          return {
+            key : this.$xdUniHelper.randomChar(20),
+            ...item
+          }
+        });
+        console.log('init',this.dataList);
+      },
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-footer-tabbar {
+    height: 100%;
+    width: 100%;
+
+    &__icon {
+
+    }
+
+    &__border {
+      border-top: 1px solid #eee;
+      display: flex;
+      flex-wrap: nowrap;
+      justify-content: center;
+      align-items: center;
+      height: 100%;
+    }
+
+    &__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;
+      }
+
+      > * {
+        height: 100%;
+        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);
+      }
+    }
+
+
+    &__image {
+      display: flex;
+      flex-wrap: nowrap;
+      justify-content: center;
+      align-items: center;
+    }
+
+
+
+  }
+</style>

package/src/components/XdFooterTabbar/XdFooterTabbar.vue

@@ -0,0 +1,284 @@
+<template>
+  <view
+    class="xd-footer-tabbar"
+    v-if="show"
+    :style="{
+      height: height +'rpx',
+      background: backgroundColor,
+      zIndex: zIndex,
+    }"
+  >
+    <view class="xd-footer-tabbar__border">
+      <view
+        v-for="(item,index) in dataList"
+        :key="index"
+        class="xd-footer-tabbar__item"
+      >
+        <view
+          class="xd-footer-tabbar__item-badge"
+          v-if="item.num"
+          :style="{
+            background: uiColor,
+            padding: item.num === '99+' ? '0 8rpx': '0'
+          }"
+        >{{item.num}}</view>
+        <navigator class="xd-footer-tabbar__item-link" open-type="redirect" :url="item.pagePath + '?' + parmas">
+          <view class="xd-footer-tabbar__icon" v-if="item.icon">
+            <xd-font-icon
+              :size="item.size ? item.size : 40"
+              :icon="item.icon"
+              :style="{
+                color: (activeUrl === item.pagePath || item.customPath && inArray([activeUrl],item.customPath)) ? tabbar.selectedColor : tabbar.color
+              }"
+            ></xd-font-icon>
+          </view>
+          <view class="xd-footer-tabbar__image" v-else>
+            <view :style="{
+              height: '40rpx',
+              width: '40rpx',
+              paddingBottom: '4rpx',
+              background: 'url(' + ((activeUrl === item.pagePath || item.customPath && inArray([activeUrl],item.customPath))? item.selectedIconPath : item.iconPath) + ') no-repeat left top',
+              backgroundSize: '100% 100%',
+            }"></view>
+          </view>
+          <view
+            class="xd-footer-tabbar__text"
+            :style="{
+              color: (activeUrl === item.pagePath || item.customPath && inArray([activeUrl],item.customPath))? tabbar.selectedColor : tabbar.color
+            }"
+          >{{item.text}}</view>
+        </navigator>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import {PLATFORM_PARAM_SETTING} from "@/project";
+  import { mapState } from 'vuex'
+
+  /**
+   * XdFooterTabbar 全局Ui
+   * @description 底部tabbar功能
+   * @tutorial
+   * @property {Number} zIndex          层级数字 （可选）
+   * @property {Number} height          tabbar高度（可选）
+   * @property {Object} tabbar
+   *  tabbar.selectedColor  {String} tabbar当前选中文字颜色
+   *  tabbar.backgroundColor  {String} tabbar背景颜色值
+   *  tabbar.showIcon tabbar图标类型 false=》图片（本地路径与base64）推荐使用base64 true=》iconfont图标（需要自己自定义）
+   *  tabbar.list {Array} tabbar列表
+   *  tabbar.list.text  {String} tabbar文案（4个汉字）
+   *  tabbar.list.iconPath  {String} tabbar图标图片路径
+   *  tabbar.list.selectedIconPath  {String} tabbar当前路径图标图片路径
+   *  tabbar.list.pagePath  {String} 链接路径
+   *  tabbar.list.icon  {String} iconfont图标
+   */
+
+  export default {
+    name: "XdFooterTabbar",
+    components: {XdFontIcon},
+    props: {
+      zIndex: {
+        type: Number,
+        default: 1500 //rpx
+      },
+      tabbar: {
+        type: Object,
+        required: true
+      },
+      height: {
+        type: Number,
+        default: 100 //rpx
+      }
+    },
+
+    data(){
+      return {
+        backgroundColor: '',
+        show: false, //是否显示底部导航
+        dataList: [],
+        activeUrl: null,
+        parmas: null, //当前路径
+        uiColor: '', //数字显示背景颜色
+      }
+    },
+
+    computed: {
+      ...mapState(['footerBarBadge']),
+    },
+
+    watch:{
+      footerBarBadge(value){
+        this.setFormatDataList(value);
+      }
+    },
+
+    created() {
+      //监听设置tabBar数字
+      getApp().globalData.footTabbar = true;
+
+      //设置活动参数
+      let parmas = '';
+      if (getApp().globalData.$xd && getApp().globalData.$xd.$storage) {
+        let event = getApp().globalData.$xd.$storage.get(PLATFORM_PARAM_SETTING.EVENT_PARAM_SAVE_KEY);
+        if (event) {
+          parmas = `${PLATFORM_PARAM_SETTING.EVENT_PARAM_NAME}=${event}`
+        }
+      }
+      this.parmas = parmas;
+
+      //设置选中颜色
+      this.uiColor = this.webSetting['selectedColor'] || this.$mainColor;
+
+      this.init(this.tabbar);
+    },
+
+    mounted() {
+      this.$nextTick(() => {
+        this.getActive()
+      })
+    },
+
+    methods:{
+
+      getActive(){
+        let routes = this.$xdUniHelper.getCurrentPages(this.tabbar.home);
+        this.activeUrl = routes['path'];
+      },
+
+      /**
+       * @description
+       * @param list
+       * @param find
+       * @returns {boolean}
+       */
+      inArray(list,find){
+        return this.$xdUniHelper.inArray(list,find)
+      },
+
+      /**
+       * @description 初始化tabbar数据
+       */
+      formatDataList(value){
+        console.log('formatDataList',value);
+        this.dataList = this.tabbar.list.map((item, idx)=>{
+          if(value && value[idx] !== undefined && value[idx]  >= 0) {
+            if(value[idx] >= 100) item.num = '99+';
+            else  item.num = value[idx];
+            return item;
+          }
+          else return {
+            ...item,
+            num: 0
+          };
+        });
+      },
+
+      /**
+       * @description 设置数字
+       * @param value
+       */
+      setFormatDataList(value){
+        console.log('setFooterBarBadge', value);
+        this.dataList = this.dataList.map((item,idx) => {
+          if(value && value[idx] !== undefined && value[idx]  >= 0) {
+            if(value[idx] >= 100) item.num = '99+';
+            else  item.num = value[idx];
+            return item;
+          }
+          else return item;
+        });
+      },
+
+      /**
+       * @description 初始化数据
+       */
+      init(){
+        this.backgroundColor = this.tabbar['backgroundColor'];
+        //配置tabbar列表存在显示tabbar
+        if(this.$xdUniHelper.checkVarType(this.tabbar.list) === 'array' && this.tabbar.list.length > 0) {
+          this.formatDataList(this.footerBarBadge);
+          this.show = true;
+        }else{
+          this.show = false;
+        }
+      },
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-footer-tabbar {
+    height: 100%;
+    width: unit(750,rpx);
+
+    &__icon {
+
+    }
+
+    &__border {
+      border-top: 1px solid #eee;
+      display: flex;
+      flex-wrap: nowrap;
+      justify-content: center;
+      align-items: center;
+      height: 100%;
+    }
+
+    &__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;
+      }
+
+      > * {
+        height: 100%;
+        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);
+      }
+    }
+
+
+    &__image {
+      display: flex;
+      flex-wrap: nowrap;
+      justify-content: center;
+      align-items: center;
+    }
+
+
+
+  }
+</style>