mobileclient/v1_5_0_C/tabbar.js

const tabComponent = {
  template: `
        <ul class="tabList" 
            v-if="tabData.iswitch==='1'&&isSwitchCount>1" 
            :style="{background:(tabData.background?'url('+tabData.background+')':'#fff'),backgroundSize:'100% 100%'}"
        >
          <template  v-for="item in list">
            <li 
              :key="item.id" 
              v-if="item.iswitch==='1'"  
              @click='iconHandler(item)' 
              :style="{color:(current===item.id?tabData.selectText:tabData.defaultText)}"
            >
              <img :src="current===item.id?item.pic?.selectShow:item.pic?.show" alt="">
            <p>{{item.text}}</p>
            </li>
          </template>
        </ul>`,

  data() {
    return {
      tabData: {},
      list: [],
      isSwitchCount: 1
    }
  },

  props: {
    /* tab选中下标 */
    current: {
      type: Number,
      default: 1
    }
  },

  methods: {
    /* 根据不同icon进行跳转 */
    iconHandler(item) {
      window.location.replace(item.link)
    }
  },

  mounted() {
    let { bottomBar } = JSON.parse(sessionStorage.getItem("product_list"))
    this.tabData = bottomBar
    bottomBar.navlist.map((item) => {
      if (item.iswitch === "1") {
        this.isSwitchCount++
      }
      item.id = Number(item.id)
      if (item.id === 1) {
        item.link = "./couponCollection.html"
      }
      if (item.id === 2) {
        item.link = "./myOrder.html"
      }
      if (item.id === 3) {
        item.link = "./myCoupon.html"
      }
    })
    this.list = bottomBar.navlist
  }
}