xdd-uniapp-new/components/xdd-tabbar/index.vue

<template>
  <view
    :style="{
      'background-image': 'url(' + webUrl + '/home/tabbar-bg.png);'
    }"
    class="xdd-tabbar-wrap"
  >
    <view class="center-img" id="quweiIcon" @click="switchTabFn('/pages/cloud/haveFun')">
      <image
        :src="webUrl + '/home/tabbar-center.png'"
        class="img"
      />
      <view
        :class="currIndex === 4 ? 'curr' : ''"
        class="name"
      >吃喝玩乐</view>
    </view>
    <view class="tabbar-list">
      <view
        v-for="(tabbarItem, tabbarIndex) in tabbar"
        :key="tabbarIndex"
        class="tabbar-item"
      >
        <view
          v-for="(item, index) in tabbarItem"
          :key="index"
          :class="currIndex === item.index ? 'curr' : ''"
          :id="'icon' + index"
          class="item"
          @click="gotoPage(item.url, item.type, item.index)"
        >
          <view class="img-wrap">
            <image
              :src="item.onIcon"
              class="img on"
            />
            <image
              :src="item.offIcon"
              class="img off"
            />
          </view>
          <view class="name">{{ item.name }}</view>
          <view
            v-if="item.name === '消息' && showUnreadBadge"
            class="badge"
          >
            {{ unreadCountText }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import store from '@/store'
import { getUnreadMessageCount } from '@/api/rooms'
export default {
  name: 'XddTabbar',
  props: {
    currIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      webUrl: this.$VUE_APP_RESOURCES_URL,
      tabbar: [[
        {
          name: '首页',
          onIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-01-on.png',
          offIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-01-off.png',
          url: '/pages/home/index',
          type: 1,
          index: 0
        },
        {
          name: '消息',
          onIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-02-on.png',
          offIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-02-off.png',
          url: '/pkg_common/views/roomLogs',
          type: 2,
          index: 1
        }
      ],[
        {
          name: '购物车',
          onIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-03-on.png',
          offIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-03-off.png',
          url: '/pages/cart',
          type: 1,
          index: 2
        },
        {
          name: '我的',
          onIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-04-on.png',
          offIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-04-off.png',
          url: '/pages/user/User/index',
          type: 1,
          index: 3
        }
      ]],
      unreadCount: 0
    }
  },
  computed: {
    isLogin() {
      return store.getters.isLogin
    },
    showUnreadBadge() {
      return this.isLogin && this.unreadCount > 0
    },
    unreadCountText() {
      if (this.unreadCount > 99) {
        return '99+'
      }
      return this.unreadCount
    }
  },
  watch: {
    isLogin(val) {
      if (val) {
        this.fetchUnreadCount()
      } else {
        this.unreadCount = 0
        uni.$emit('updateUnreadMessageCount', 0)
      }
    }
  },
  mounted() {
    this.getElementData('#quweiIcon')
    this.getIconData('#icon1')
    if (this.isLogin) {
      this.fetchUnreadCount()
    }
    uni.$on('updateUnreadMessageCount', this.handleUpdateUnreadMessageCount)
  },
  beforeDestroy() {
    uni.$off('updateUnreadMessageCount', this.handleUpdateUnreadMessageCount)
  },
  methods: {
    handleUpdateUnreadMessageCount(count) {
      if (!this.isLogin) {
        this.unreadCount = 0
        return
      }
      if (typeof count === 'number') {
        this.unreadCount = count
      } else {
        this.fetchUnreadCount()
      }
    },
    getElementData(el) {
      const query = uni.createSelectorQuery().in(this)
      query.select(el).boundingClientRect().exec((res)=> {
        if(res[0]) {
          this.$emit('getElementData', res[0])
        }
      })
    },
    getIconData(el) {
      const query = uni.createSelectorQuery().in(this)
      query.select(el).boundingClientRect().exec((res)=> {
        if(res[0]) {
          this.$emit('getIcon', res[0])
        }
      })
    },
    fetchUnreadCount() {
      getUnreadMessageCount().then(res => {
        const { success, data } = res
        if (success) {
          const count = data || 0
          this.unreadCount = count
          uni.$emit('updateUnreadMessageCount', count)
        } else {
          this.unreadCount = 0
          uni.$emit('updateUnreadMessageCount', 0)
        }
      }).catch(() => {
        this.unreadCount = 0
        uni.$emit('updateUnreadMessageCount', 0)
      })
    },
    gotoPage(url, type = 1, index) {
      if (this.currIndex === index) return
      if (type === 1) {
        this.switchTabFn(url)
      }
      if (type === 2) {
        uni.navigateTo({ url })
      }
    },
    switchTabFn(url) {
      uni.switchTab({ url })
    }
  }
}
</script>

<style scoped lang="less">
.xdd-tabbar-wrap {
  position: fixed;
  bottom: 21rpx;
  left: 21rpx;
  right: 21rpx;
  z-index: 99;
  height: 164rpx;
  background-size: 708rpx 164rpx;
  background-repeat: no-repeat;
  .center-img {
    position: absolute;
    top: -20rpx;
    left: 50%;
    z-index: 5;
    transform: translateX(-50%);
    .img {
      width: 136rpx;
      height: 136rpx;
    }
    .name {
      text-align: center;
      font-size: 24rpx;
      color: #9a9a9a;
      transform: translateY(-4rpx);
      &.curr {
        color: #C52733;
      }
    }
  }
  .tabbar-list {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    padding: 70rpx 0 0 0;
    .tabbar-item {
      display: flex;
      align-items: center;
      width: calc(50% - 78rpx);
      .img-wrap {
        .img {
          display: block;
          width: 44rpx;
          height: 44rpx;
          margin: 0 auto;
          &.on {
            display: none;
          }
          &.off {
            display: block;
          }
        }
      }
      .name {
        padding: 10rpx 0 0 0;
        text-align: center;
        font-size: 24rpx;
        color: #9a9a9a;
      }
      .item {
        width: 140rpx;
        position: relative;
        &.curr {
          .name {
            color: #C52733;
          }
          .on {
            display: block;
          }
          .off {
            display: none;
          }
        }
      }
      .badge {
        position: absolute;
        top: -4rpx;
        right: 32rpx;
        min-width: 28rpx;
        padding: 0 6rpx;
        height: 28rpx;
        line-height: 28rpx;
        border-radius: 14rpx;
        background-color: #FF564A;
        color: #ffffff;
        font-size: 20rpx;
        text-align: center;
        box-sizing: border-box;
      }
    }
  }
}
</style>