150 lines
3.3 KiB
Vue
150 lines
3.3 KiB
Vue
<template>
|
|
<view
|
|
class="tab-bar"
|
|
v-if="
|
|
['Recharge', 'Withdraw', 'Index', 'User', 'Transfer'].includes(routeName)
|
|
"
|
|
>
|
|
<view
|
|
class="item"
|
|
:class="{ active: routeName == item.name }"
|
|
v-for="(item, index) in list"
|
|
:key="index"
|
|
@click="goTab(item)"
|
|
>
|
|
<image
|
|
class="icon"
|
|
:src="routeName == item.name ? item.selectedIconPath : item.iconPath"
|
|
alt=""
|
|
></image>
|
|
<view class="text">{{ item.text }}</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from "vuex";
|
|
export default {
|
|
tabBar: true,
|
|
data() {
|
|
return {
|
|
routeName: "",
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
userInfo: (state) => state.app.userInfo,
|
|
list: (state) => {
|
|
const userInfo = state.app.userInfo;
|
|
const $lang = state.app.lang[state.app.language];
|
|
let channel = [];
|
|
if (userInfo.pay_channel) {
|
|
if (userInfo.pay_channel == 'OPR') {
|
|
channel = [
|
|
{
|
|
text: $lang.recharge,
|
|
name: "Recharge",
|
|
pagePath: "pages/rechargeopr",
|
|
iconPath: "/static/tabBar/recharge.png",
|
|
selectedIconPath: "/static/tabBar/recharge_active.png",
|
|
},
|
|
];
|
|
} else {
|
|
channel = [
|
|
{
|
|
text: $lang.recharge,
|
|
name: "Recharge",
|
|
pagePath: "pages/recharge",
|
|
iconPath: "/static/tabBar/recharge.png",
|
|
selectedIconPath: "/static/tabBar/recharge_active.png",
|
|
},
|
|
{
|
|
text: $lang.withdraw,
|
|
name: "Withdraw",
|
|
pagePath: "pages/withdraw",
|
|
iconPath: "/static/tabBar/withdrawal.png",
|
|
selectedIconPath: "/static/tabBar/withdrawal_active.png",
|
|
},
|
|
];
|
|
}
|
|
|
|
}
|
|
|
|
let list = [
|
|
{
|
|
text: $lang.home,
|
|
name: "Index",
|
|
pagePath: "pages/index",
|
|
iconPath: "/static/tabBar/index-ba.png",
|
|
selectedIconPath: "/static/tabBar/index-ba-active.png",
|
|
},
|
|
...channel,
|
|
// {
|
|
// text: $lang.transfer,
|
|
// name: "Transfer",
|
|
// pagePath: "pages/transfer",
|
|
// iconPath: "/static/tabBar/transfer.png",
|
|
// selectedIconPath: "/static/tabBar/transfer_active.png",
|
|
// },
|
|
{
|
|
text: $lang.user,
|
|
name: "User",
|
|
pagePath: "pages/user/index",
|
|
iconPath: "/static/tabBar/user.png",
|
|
selectedIconPath: "/static/tabBar/user_active.png",
|
|
},
|
|
];
|
|
return list;
|
|
},
|
|
}),
|
|
},
|
|
methods: {
|
|
goTab(item) {
|
|
uni.switchTab({
|
|
url: item.pagePath,
|
|
});
|
|
},
|
|
},
|
|
watch: {
|
|
$route: {
|
|
handler(route) {
|
|
this.routeName = route.name;
|
|
},
|
|
immediate: true,
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.tab-bar {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
background: #000;
|
|
justify-content: space-between;
|
|
height: 50px;
|
|
.item {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
color: #fff;
|
|
&.active {
|
|
color: #deb366;
|
|
}
|
|
.icon {
|
|
width: 25px;
|
|
height: 25px;
|
|
}
|
|
.text {
|
|
font-size: 12px;
|
|
padding-top: 2px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|