You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
96 lines
2.3 KiB
96 lines
2.3 KiB
<template>
|
|
<view class="custom-tabbar fix flex-center fill-base b-1px-t">
|
|
<view @tap.stop="changeTab(index)" class="flex-center flex-column mt-sm"
|
|
:style="{width: 100/configInfo.tabBar.length + '%',color:cur == index ? primaryColor : '#666'}"
|
|
v-for="(item,index) in configInfo.tabBar" :key="index">
|
|
<i class="iconfont" :class="cur == index ? item.selected_img : item.default_img"></i>
|
|
<!-- <image :src="`../static/i.png`" mode=""></image> -->
|
|
<view class="text">{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapState,
|
|
mapMutations
|
|
} from "vuex"
|
|
export default {
|
|
components: {},
|
|
props: {
|
|
cur: {
|
|
type: Number || String,
|
|
default () {
|
|
return '0'
|
|
}
|
|
},
|
|
},
|
|
data() {
|
|
return {}
|
|
},
|
|
computed: mapState({
|
|
primaryColor: state => state.config.configInfo.primaryColor,
|
|
subColor: state => state.config.configInfo.subColor,
|
|
configInfo: state => state.config.configInfo,
|
|
commonOptions: state => state.user.commonOptions,
|
|
activeIndex: state => state.order.activeIndex,
|
|
}),
|
|
mounted() {
|
|
let that = this;
|
|
let sysheight = uni.getSystemInfoSync().windowHeight
|
|
let configInfo = JSON.parse(JSON.stringify(this.configInfo))
|
|
let {
|
|
navBarHeight
|
|
} = configInfo
|
|
const query = uni.createSelectorQuery().in(this);
|
|
query.select('.custom-tabbar').boundingClientRect(data => {
|
|
let curSysHeight = sysheight - data.height - navBarHeight
|
|
configInfo.curSysHeight = curSysHeight
|
|
configInfo.tabbarHeight = data.height
|
|
this.updateConfigItem({
|
|
key: 'configInfo',
|
|
val: configInfo
|
|
})
|
|
}).exec();
|
|
},
|
|
methods: {
|
|
...mapMutations(['updateConfigItem']),
|
|
// 点击跳转
|
|
changeTab(index) {
|
|
let {
|
|
activeIndex
|
|
} = this
|
|
let page = {
|
|
0: `/pages/service`,
|
|
1: `/pages/technician`,
|
|
2: `/pages/order?tab=${activeIndex}`,
|
|
3: `/pages/mine`,
|
|
}
|
|
if (index == this.cur) return
|
|
this.$util.goUrl({
|
|
url: page[index],
|
|
openType: `reLaunch`
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.custom-tabbar {
|
|
height: 98rpx;
|
|
bottom: 0;
|
|
height: calc(98rpx + env(safe-area-inset-bottom) / 2);
|
|
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
|
|
|
.iconfont {
|
|
font-size: 40rpx;
|
|
}
|
|
|
|
.text {
|
|
font-size: 22rpx;
|
|
margin-top: 5rpx;
|
|
height: 32rpx;
|
|
}
|
|
}
|
|
</style>
|
|
|