jichuangshe/mini/components/NavBar/index.vue

<template>
  <view class="nav-bar main-center cross-center">
    <view
      v-for="(item,index) in navItem"
      :key="index"
      class="item dir-top-wrap cross-center"
      @click="handleRedirect(item)"
    >
      <view
        class="icon"
        :style="{
          backgroundImage: `url(${item.icon})`
        }"
      />
      <text>{{ item.name }}</text>
    </view>
    <!--充值-->
    <recharge :show.sync="recharge.show" />
  </view>
</template>

<script>

import Recharge from '../Recharge/index'
export default {
  name: 'NavBar',
  components: { Recharge },
  data() {
    return {
      types: {
        1: { href: '/pages/index/rank' },
        2: { href: '/pages/index/news' },
        3: { href: '/pages/member/index' },
        4: { href: '/pages/sign/index' },
        5: { type: 'recharge' }
      },
      navItem: [
        { icon: '', name: '排行榜', href: '/pages/index/rank' },
        { icon: '', name: '最新', href: '/pages/index/news' },
        { icon: '', name: '会员', href: '/pages/member/index' },
        { icon: '', name: '签到', href: '/pages/sign/index' },
        { icon: '', name: '充值', type: 'recharge' }
      ],
      recharge: { show: false }
    }
  },
  computed: {},
  created() {
    this.getData()
  },
  methods: {
    handleRedirect(item) {
      if (item.type === 'recharge') {
        this.recharge.show = true
      } else if (item.href) {
        this.$u.route(item.href)
      }
    },
    getData() {
      /**
       * type 1 -排行榜 2 -最新  3 -会员 4 -签到 5 -充值
       */
      this.$api.setting.navBar().then(res => {
        const data = res.data
        data.forEach(obj => {
          Object.assign(obj, this.types[obj.type])
        })
        this.navItem = data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .nav-bar {
    .item{
      flex: 1;
      font-size: 32rpx;
      .icon{
        width: 100rpx;
        height: 100rpx;
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: center;
      }
      text{
        color: #fff;
      }
    }
  }
</style>