mobileclient/v1_5_0_C/tabbar.js

64 lines
1.5 KiB
JavaScript

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
}
}