101 lines
2.2 KiB
Vue
101 lines
2.2 KiB
Vue
<template>
|
|
<view class="u-page">
|
|
<view class="u-page__item">
|
|
<u-tabbar :zIndex="99999" :value="thisChecked" @change="changeTargets" :fixed="true" :placeholder="true"
|
|
:safeAreaInsetBottom="true" activeColor="#FF4D03">
|
|
<u-tabbar-item text="首页" icon="https://img.agrimedia.cn/chwl/v2/sy.png">
|
|
</u-tabbar-item>
|
|
<u-tabbar-item text="分类" icon="https://img.agrimedia.cn/chwl/v2/fl.png"></u-tabbar-item>
|
|
<u-tabbar-item text="购物车" icon="https://img.agrimedia.cn/chwl/v2/gwc.png"></u-tabbar-item>
|
|
<u-tabbar-item text="我的" icon="https://img.agrimedia.cn/chwl/v2/wd-active.png"></u-tabbar-item>
|
|
</u-tabbar>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapGetters,
|
|
mapMutations
|
|
} from 'vuex'
|
|
export default {
|
|
name: "tabbars",
|
|
data() {
|
|
return {
|
|
link: [
|
|
'/pages/index/index',
|
|
'/pages/sort/sort',
|
|
'/pages/myCart/myCart',
|
|
'/pages/uCenter/uCenter',
|
|
],
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
thisChecked: 'tabbar/thisChecked',
|
|
}),
|
|
},
|
|
created() {
|
|
let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
|
|
let curRoute = routes[routes.length - 1].route //获取当前页面路由
|
|
if(curRoute == 'pages/index/index'){
|
|
this.setCurrent(0)
|
|
}
|
|
if(curRoute == 'pages/sort/sort'){
|
|
this.setCurrent(1)
|
|
}
|
|
if(curRoute == 'pages/myCart/myCart'){
|
|
this.setCurrent(2)
|
|
}
|
|
if(curRoute == 'pages/uCenter/uCenter'){
|
|
this.setCurrent(3)
|
|
}
|
|
console.log(curRoute,'tabbar')
|
|
},
|
|
|
|
methods: {
|
|
...mapMutations({
|
|
setCurrent: 'tabbar/setCurrent'
|
|
}),
|
|
changeTargets(e) {
|
|
|
|
console.log(e, 'changeTargets')
|
|
this.setCurrent(e)
|
|
uni.reLaunch({
|
|
url: this.link[e],
|
|
complete(res) {
|
|
console.log(res)
|
|
}
|
|
})
|
|
// name => value6 = name
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.u-page {
|
|
padding: 0;
|
|
|
|
&__item {
|
|
|
|
&__title {
|
|
color: $u-primary;
|
|
background-color: $u-primary;
|
|
padding: 15px;
|
|
font-size: 15px;
|
|
|
|
&__slot-title {
|
|
color: $u-primary;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
&__slot-icon {
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|