sulibao-mini/tuniao-ui/components/tn-goods-nav/tn-goods-nav.vue

<template>
  <view
    class="tn-goods-nav-class tn-goods-nav"
    :class="[
      backgroundColorClass,
      {
        'tn-goods-nav--fixed': fixed,
        'tn-safe-area-inset-bottom': safeAreaInsetBottom,
        'tn-goods-nav--shadow': shadow
      }
    ]"
    :style="[backgroundColorStyle, navStyle]"
  >
    <view class="options">
      <view
        v-for="(item, index) in optionsData"
        :key="index"
        class="options__item"
        :class="[{'options__item--avatar': item.showAvatar}]"
        @tap="handleOptionClick(index)"
      >
        <block v-if="item.showAvatar">
          <tn-avatar
            :src="item.avatar"
            size="sm"
            :badge="item.showBadge"
            :badgeText="item.count"
            :badgeBgColor="item.countBackgroundColor"
            :badgeColor="item.countFontColor"
            :badgeSize="26"
          ></tn-avatar>
        </block>
        <block v-else>
          <view class="options__item__icon" :class="[`tn-icon-${item.icon}`]" :style="[optionStyle(index, 'icon')]">
            <tn-badge v-if="item.showBadge" :absolute="true" :backgroundColor="item.countBackgroundColor" :fontColor="item.countFontColor" :fontSize="16" padding="2rpx 5rpx">{{ item.count }}</tn-badge>
          </view>
          <view class="options__item__text" :style="[optionStyle(index, 'text')]">{{ item.text }}</view>
        </block>
      </view>
    </view>
    <view class="buttons">
      <view
        v-for="(item, index) in buttonGroupsData"
        :key="index"
        class="buttons__item"
        :class="[buttonClass(index)]"
        :style="[buttonStyle(index)]"
        @tap="handleButtonClick(index)"
      >
        <view class="buttons__item__text">{{ item.text }}</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'tn-goods-nav',
    props: {
      // 选项信息
      // 建议不超过3个
      // {
      //   icon: '', // 图标名称
      //   text: '', // 显示的文本
      //   count: '', // 角标的值
      //   countBackgroundColor: '', // 角标背景颜色
      //   countFontColor: '', // 角标字体颜色
      //   iconColor: '', // 图标颜色
      //   textColor: '', // 文本颜色
      //   avatar: '', // 显示头像（此时将不显示图标和文本）
      // }
      options: {
        type: Array,
        default() {
          return [{
            icon: 'shop',
            text: '店铺'
          },{
            icon: 'service',
            text: '客服'
          },{
            icon: 'star',
            text: '收藏'
          }]
        }
      },
      // 按钮组
      // 建议不超过2个
      // {
      //   text: '', // 显示的文本
      //   backgroundColor: '', // 按钮背景颜色
      //   color: '' // 文本颜色
      // }
      buttonGroups: {
        type: Array,
        default() {
          return [{
            text: '加入购物车',
            backgroundColor: '#FFA726',
            color: '#FFFFFF'
          },{
            text: '结算',
            backgroundColor: '#FF7043',
            color: '#FFFFFF'
          }]
        }
      },
      // 背景颜色
      backgroundColor: {
        type: String,
        default: ''
      },
      // 导航的高度，单位rpx
      height: {
        type: Number,
        default: 0
      },
      // 显示阴影
      shadow: {
        type: Boolean,
        default: false
      },
      // 导航的层级
      zIndex: {
        type: Number,
        default: 0
      },
      // 按钮类型
      // rect -> 方形 paddingRect -> 上下带边距方形 round -> 圆角
      buttonType: {
        type: String,
        default: 'rect'
      },
      // 是否固定在底部
      fixed: {
        type: Boolean,
        default: false
      },
      // 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
      safeAreaInsetBottom: {
      	type: Boolean,
      	default: false
      }
    },
    computed: {
      backgroundColorStyle() {
        return this.$t.color.getBackgroundColorStyle(this.backgroundColor)
      },
      backgroundColorClass() {
        return this.$t.color.getBackgroundColorInternalClass(this.backgroundColor)
      },
      navStyle() {
        let style = {}
        if (this.height) {
          style.height = this.height + 'rpx'
        }
        style.zIndex = this.zIndex ? this.zIndex : this.$t.zIndex.goodsNav
        return style
      },
      // 选项style
      optionStyle() {
        return (index, type) => {
          let style = {}
          const item = this.optionsData[index]
          if (type === 'icon' && item.iconColor) {
            style.color = item.iconColor
          } else if (type === 'text' && item.fontColor) {
            style.color = item.fontColor
          }
          return style
        }
      },
      // 按钮class
      buttonClass() {
        return (index) => {
          let clazz = ''
          const item = this.buttonGroupsData[index]
          if (item.backgroundColorClass) {
            clazz += ` ${item.backgroundColorClass}`
          }
          if (item.colorClass) {
            clazz += ` ${item.colorClass}`
          }
          
          clazz += ` buttons__item--${this.$t.string.humpConvertChar(this.buttonType, '-')}`
          
          return clazz
        }
      },
      // 按钮style
      buttonStyle() {
        return (index) => {
          let style = {}
          const item = this.buttonGroupsData[index]
          if (item.backgroundColorStyle) {
            style.backgroundColor = item.backgroundColorStyle
          }
          if (item.colorStyle) {
            style.color = item.colorStyle
          }
          return style
        }
      }
    },
    watch: {
      options(val) {
        this.initData()
      },
      buttonGroups(val) {
        this.initData()
      }
    },
    data() {
      return {
        // 保存选项数据
        optionsData: [],
        // 保存按钮组数据
        buttonGroupsData: []
      }
    },
    created() {
      this.initData()
    },
    methods: {
      // 初始化选项和按钮数据
      initData() {
        this.handleOptionsData()
        this.handleButtonGroupsData()
      },
      // 选项点击事件
      handleOptionClick(index) {
        this.$emit('optionClick', {
          index: index
        })
      },
      // 按钮点击事件
      handleButtonClick(index) {
        this.$emit('buttonClick', {
          index: index
        })
      },
      // 处理选项组数据
      handleOptionsData() {
        this.optionsData = this.options.map((item) => {
          let option = {...item}
          option.showAvatar = item.hasOwnProperty('avatar')
          if (item.hasOwnProperty('count')) {
            const count = this.$t.number.formatNumberString(item.count, 2)
            option.showBadge = true
            option.count = typeof count === 'number' ? String(count) : count
            option.countBackgroundColor = item.countBackgroundColor ? item.countBackgroundColor : '#01BEFF'
            option.countFontColor = item.countFontColor ? item.countFontColor : '#FFFFFF'
          }
          
          return option
        })
      },
      // 处理按钮组数据
      handleButtonGroupsData() {
        this.buttonGroupsData = this.buttonGroups.map((item) => {
          let button = {...item}
          if (item.hasOwnProperty('backgroundColor')) {
            button.backgroundColorClass = this.$t.color.getBackgroundColorInternalClass(item.backgroundColor)
            button.backgroundColorStyle = this.$t.color.getBackgroundColorStyle(item.backgroundColor)
          }
          if (item.hasOwnProperty('color')) {
            button.colorClass = this.$t.color.getBackgroundColorInternalClass(item.color)
            button.colorStyle = this.$t.color.getBackgroundColorStyle(item.color)
          }
          return button
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .tn-goods-nav {
    background-color: #FFFFFF;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 88rpx;
    width: 100%;
    box-sizing: content-box;
    
    &--shadow {
      box-shadow: 0rpx -10rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);
      
      &::before {
        content: " ";
        position: absolute;
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        background-color: transparent;
        z-index: -1;
      }
    }
    
    &--fixed {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
    }
    
    .options {
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 100%;
      color: #AAAAAA;
      
      &__item {
        padding: 0 26rpx;
        
        &--avatar {
          padding: 0rpx 0rpx 0rpx 26rpx !important;
        }
        
        &__icon {
          position: relative;
          font-size: 36rpx;
          margin-bottom: 6rpx;
        }
        
        &__text {
          font-size: 22rpx;
        }
      }
    }
    
    .buttons {
      flex: 1;
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 100%;
      
      &__item {
        flex: 1;
        padding: 0 10rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        
        &--rect {
          height: 100%;
        }
        
        &--padding-rect {
          height: 80%;
        }
        
        &--round {
          height: 75%;
          &:first-child {
            border-top-left-radius: 100rpx;
            border-bottom-left-radius: 100rpx;
          }
          &:last-child {
            border-top-right-radius: 100rpx;
            border-bottom-right-radius: 100rpx;
          }
        }
        
        &__text {
          display: inline-block;
          font-weight: bold;
          font-size: 30rpx;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
  }
</style>