@10yun/cv-mobile-ui 0.5.29 → 0.5.31

package/ui-fireui/fui-tabbar/fui-tabbar.vue

@@ -0,0 +1,283 @@
+<template>
+  <view
+    class="fui-tabbar"
+    :class="{ 'fui-tabbar-fixed': isFixed, 'fui-unlined': unlined }"
+    :style="{ background: backgroundColor }"
+  >
+    <block v-for="(item, index) in tabBar" :key="index">
+      <view
+        class="fui-tabbar-item"
+        :class="{ 'fui-item-hump': item.hump }"
+        :style="{ backgroundColor: item.hump ? backgroundColor : 'none' }"
+        @tap="tabbarSwitch(index, item.hump, item.pagePath, item.verify)"
+      >
+        <view class="fui-icon-box" :class="{ 'fui-tabbar-hump': item.hump }">
+          <image
+            :src="current == index ? item.selectedIconPath : item.iconPath"
+            :class="[item.hump ? '' : 'fui-tabbar-icon']"
+          ></image>
+          <view
+            :class="[item.isDot ? 'fui-badge-dot' : 'fui-badge']"
+            :style="{ color: badgeColor, backgroundColor: badgeBgColor }"
+            v-if="item.num"
+          >
+            {{ item.isDot ? '' : item.num }}
+          </view>
+        </view>
+        <view
+          class="fui-text-scale"
+          :class="{ 'fui-text-hump': item.hump }"
+          :style="{ color: current == index ? selectedColor : color }"
+        >
+          {{ item.text }}
+        </view>
+      </view>
+    </block>
+    <view :class="{ 'fui-hump-box': hump }" v-if="hump && !unlined"></view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'fuiTabbar',
+  props: {
+    //当前索引
+    current: {
+      type: Number,
+      default: 0
+    },
+    //字体颜色
+    color: {
+      type: String,
+      default: '#666'
+    },
+    //字体选中颜色
+    selectedColor: {
+      type: String,
+      default: '#5677FC'
+    },
+    //背景颜色
+    backgroundColor: {
+      type: String,
+      default: '#FFFFFF'
+    },
+    //是否需要中间凸起按钮
+    hump: {
+      type: Boolean,
+      default: false
+    },
+    //固定在底部
+    isFixed: {
+      type: Boolean,
+      default: true
+    },
+    //tabbar
+    // "pagePath": "/pages/my/my", 页面路径
+    // "text": "thor", 标题
+    // "iconPath": "thor_gray.png", 图标地址
+    // "selectedIconPath": "thor_active.png", 选中图标地址
+    // "hump": true, 是否为凸起图标
+    // "num": 2,   角标数量
+    // "isDot": true,  角标是否为圆点
+    // "verify": true  是否验证  （如登录）
+    tabBar: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    //角标字体颜色
+    badgeColor: {
+      type: String,
+      default: '#fff'
+    },
+    //角标背景颜色
+    badgeBgColor: {
+      type: String,
+      default: '#F74D54'
+    },
+    unlined: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {};
+  },
+  watch: {
+    current() {}
+  },
+  methods: {
+    tabbarSwitch(index, hump, pagePath, verify) {
+      // console.log('current', this.current);
+      this.$emit('click', {
+        index: index,
+        hump: hump,
+        pagePath: pagePath,
+        verify: verify
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.fui-tabbar {
+  width: 100%;
+  height: 100rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+}
+
+.fui-tabbar-fixed {
+  position: fixed;
+  z-index: 9;
+  left: 0;
+  bottom: 0;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+  box-sizing: content-box !important;
+}
+
+.fui-tabbar::before {
+  content: ' ';
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: scaleY(0.5) translateZ(0);
+  transform-origin: 0 0;
+  display: block;
+  z-index: 3;
+}
+
+.fui-tabbar-item {
+  height: 100%;
+  flex: 1;
+  display: flex;
+  text-align: center;
+  align-items: center;
+  flex-direction: column;
+  /* justify-content: space-between; */
+  justify-content: center;
+  position: relative;
+  padding: 10rpx 0;
+  box-sizing: border-box;
+  z-index: 5;
+}
+
+.fui-icon-box {
+  position: relative;
+}
+
+.fui-item-hump {
+  height: 98rpx;
+}
+
+.fui-tabbar-icon {
+  width: 44rpx;
+  height: 44rpx;
+  display: block;
+}
+
+.fui-hump-box {
+  width: 88rpx;
+  height: 78rpx;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: -50rpx;
+  border-radius: 50%;
+  z-index: 4;
+}
+
+.fui-hump-box::after {
+  content: ' ';
+  height: 200%;
+  width: 200%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: scale(0.5) translateZ(0);
+  transform-origin: 0 0;
+  border-radius: 120rpx;
+  box-sizing: border-box;
+  display: block;
+}
+
+.fui-unlined::after {
+  height: 0 !important;
+}
+
+.fui-tabbar-hump {
+  width: 80rpx;
+  height: 80rpx;
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%) rotate(0deg);
+  transform: translateX(-50%) rotate(0deg);
+  /* top: -27.5rpx; */
+  -webkit-transition: all 0.2s linear;
+  transition: all 0.2s linear;
+  border-radius: 50%;
+  z-index: 5;
+}
+
+.fui-tabbar-hump image {
+  width: 76rpx;
+  height: 76rpx;
+  display: block;
+}
+
+.fui-hump-active {
+  -webkit-transform: translateX(-50%) rotate(135deg);
+  transform: translateX(-50%) rotate(135deg);
+}
+
+.fui-text-scale {
+  font-weight: bold;
+  transform: scale(0.8);
+  font-size: 25rpx;
+  line-height: 28rpx;
+  transform-origin: center 100%;
+}
+
+.fui-text-hump {
+  position: absolute;
+  left: 50%;
+  bottom: 10rpx;
+  transform: scale(0.8) translateX(-50%);
+  transform-origin: 0 100%;
+}
+
+.fui-badge {
+  position: absolute;
+  font-size: 24rpx;
+  height: 32rpx;
+  min-width: 20rpx;
+  padding: 0 6rpx;
+  border-radius: 40rpx;
+  right: 0;
+  top: -5rpx;
+  transform: translateX(70%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fui-badge-dot {
+  position: absolute;
+  height: 16rpx;
+  width: 16rpx;
+  border-radius: 50%;
+  right: -4rpx;
+  top: -4rpx;
+}
+
+.pic_noTitle {
+  height: 60rpx;
+  width: 60rpx;
+}
+</style>

package/ui-fireui/fui-tabs/fui-tabs.vue

@@ -0,0 +1,284 @@
+<template>
+  <view
+    class="fui-tabs-view"
+    :class="[isFixed ? 'fui-tabs-fixed' : 'fui-tabs-relative', unlined ? 'fui-unlined' : '']"
+    :style="{
+      height: height + 'rpx',
+      padding: `0 ${padding}rpx`,
+      background: backgroundColor,
+      top: isFixed ? top + 'px' : 'auto'
+    }"
+  >
+    <view
+      v-for="(item, index) in tabs"
+      :key="index"
+      class="fui-tabs-item"
+      :style="{ width: itemWidth, borderRight: index < tabs.length - 1 ? borderRight : '' }"
+      @tap.stop="swichTabs(index)"
+    >
+      <view
+        class="fui-tabs-title"
+        :class="{ 'fui-tabs-active': currentTab == index, 'fui-tabs-disabled': item.disabled }"
+        :style="{
+          color: currentTab == index ? selectedColor : color,
+          fontSize: size + 'rpx',
+          lineHeight: lineHeight + 'rpx',
+          fontWeight: bold && currentTab == index ? 'bold' : 'normal'
+        }"
+      >
+        {{ item.name }}
+      </view>
+    </view>
+    <view
+      class="fui-tabs-slider"
+      :style="{
+        transform: 'translateX(' + scrollLeft + 'px)',
+        width: sliderWidth + 'rpx',
+        height: sliderHeight + 'rpx',
+        borderRadius: sliderRadius,
+        bottom: bottom,
+        background: sliderBgColor,
+        marginBottom: bottom == '50%' ? '-' + sliderHeight / 2 + 'rpx' : 0
+      }"
+    ></view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'fuiTabs',
+  props: {
+    //标签页
+    tabs: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    //rpx
+    height: {
+      type: Number,
+      default: 88
+    },
+    //rpx 只对左右padding起作用，上下为0
+    padding: {
+      type: Number,
+      default: 30
+    },
+    //背景色
+    backgroundColor: {
+      type: String,
+      default: '#FFFFFF'
+    },
+    //是否固定
+    isFixed: {
+      type: Boolean,
+      default: false
+    },
+    //px
+    top: {
+      type: Number,
+      // #ifdef APP-PLUS
+      default: 70,
+      // #endif
+      // #ifdef H5
+      default: 44,
+      // #endif
+
+      // #ifdef MP
+      default: 54
+      // #endif
+    },
+    //是否去掉底部线条
+    unlined: {
+      type: Boolean,
+      default: false
+    },
+    //当前选项卡
+    currentTab: {
+      type: Number,
+      default: 0
+    },
+    //滑块宽度
+    sliderWidth: {
+      type: Number,
+      default: 68
+    },
+    //滑块高度
+    sliderHeight: {
+      type: Number,
+      default: 6
+    },
+    //滑块背景颜色
+    sliderBgColor: {
+      type: String,
+      default: '#6468D5'
+    },
+    sliderRadius: {
+      type: String,
+      default: '50rpx'
+    },
+    //滑块bottom
+    bottom: {
+      type: String,
+      default: '0'
+    },
+    borderRight: {
+      type: String,
+      default: '0'
+    },
+    //标签页宽度
+    itemWidth: {
+      type: String,
+      default: '25%'
+    },
+    //字体颜色
+    color: {
+      type: String,
+      default: '#333333'
+    },
+    //选中后字体颜色
+    selectedColor: {
+      type: String,
+      default: '#6468D5'
+    },
+    //字体大小
+    size: {
+      type: Number,
+      default: 32
+    },
+    lineHeight: {
+      type: Number,
+      default: 32
+    },
+    //选中后 是否加粗 ，未选中则无效
+    bold: {
+      type: Boolean,
+      default: false
+    },
+    // 滑块向左偏移位置
+    scrollRight: {
+      type: Number,
+      default: 0
+    }
+  },
+  watch: {
+    currentTab() {
+      this.checkCor();
+    },
+    tabs() {
+      this.checkCor();
+    }
+  },
+  created() {
+    setTimeout(() => {
+      // 高度自适应
+      uni.getSystemInfo({
+        success: (res) => {
+          this.winWidth = res.windowWidth;
+          this.checkCor();
+        }
+      });
+    }, 50);
+  },
+  data() {
+    return {
+      winWidth: 0,
+      scrollLeft: 0
+    };
+  },
+  methods: {
+    checkCor() {
+      let tabsNum = this.tabs.length;
+      let padding = (this.winWidth / 750) * this.padding;
+      let width = this.winWidth - padding * 2;
+      console.log('checkCor', width, tabsNum, this.winWidth, this.sliderWidth, padding);
+      let left = (width / tabsNum - (this.winWidth / 750) * this.sliderWidth) / 2 + padding;
+      let scrollLeft = left;
+      if (this.currentTab > 0) {
+        scrollLeft = scrollLeft + (width / tabsNum) * this.currentTab;
+      }
+      this.scrollLeft = scrollLeft;
+    },
+    // 点击标题切换当前页时改变样式
+    swichTabs(index) {
+      let item = this.tabs[index];
+      if (item && item.disabled) return;
+      if (this.currentTab == index) {
+        return false;
+      } else {
+        this.$emit('change', {
+          index: Number(index)
+        });
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.fui-tabs-view {
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 995;
+}
+
+.fui-tabs-relative {
+  position: relative;
+}
+
+.fui-tabs-fixed {
+  position: fixed;
+  left: 0;
+}
+
+.fui-tabs-fixed::before,
+.fui-tabs-relative::before {
+  content: '';
+  position: absolute;
+  border-bottom: 1rpx solid #eaeef1;
+  -webkit-transform: scaleY(0.5) translateZ(0);
+  transform: scaleY(0.5) translateZ(0);
+  transform-origin: 0 100%;
+  bottom: 0;
+  right: 0;
+  left: 0;
+}
+
+.fui-unlined::before {
+  border-bottom: 0 !important;
+}
+
+.fui-tabs-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fui-tabs-disabled {
+  opacity: 0.6;
+}
+
+.fui-tabs-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 2;
+}
+
+.fui-tabs-active {
+  transition: all 0.15s ease-in-out;
+}
+
+.fui-tabs-slider {
+  position: absolute;
+  left: 0;
+  transition: all 0.15s ease-in-out;
+  z-index: 0;
+  transform: translateZ(0);
+}
+</style>