126 lines
3.9 KiB
Vue
126 lines
3.9 KiB
Vue
<template>
|
|
<wd-tabbar
|
|
v-model="active"
|
|
fixed
|
|
bordered
|
|
safe-area-inset-bottom
|
|
placeholder
|
|
active-color="#1677FF"
|
|
inactive-color="#8A9199"
|
|
@change="onChange"
|
|
>
|
|
<wd-tabbar-item title="消息">
|
|
<template #icon="{ active }">
|
|
<view class="ico" :class="{ on: active }"><view class="bubble" /><view class="tail" /></view>
|
|
</template>
|
|
</wd-tabbar-item>
|
|
<wd-tabbar-item title="通讯录">
|
|
<template #icon="{ active }">
|
|
<view class="ico heads" :class="{ on: active }">
|
|
<view class="head"><view class="dot" /><view class="body" /></view>
|
|
<view class="head b"><view class="dot" /><view class="body" /></view>
|
|
</view>
|
|
</template>
|
|
</wd-tabbar-item>
|
|
<wd-tabbar-item title="打卡">
|
|
<template #icon="{ active }">
|
|
<view class="ico" :class="{ on: active }"><view class="clock"><view class="hh" /><view class="mh" /></view></view>
|
|
</template>
|
|
</wd-tabbar-item>
|
|
<wd-tabbar-item title="工作台">
|
|
<template #icon="{ active }">
|
|
<view class="ico grid" :class="{ on: active }">
|
|
<view /><view /><view /><view />
|
|
</view>
|
|
</template>
|
|
</wd-tabbar-item>
|
|
<wd-tabbar-item title="我">
|
|
<template #icon="{ active }">
|
|
<view class="ico" :class="{ on: active }"><view class="me"><view class="dot" /><view class="body" /></view></view>
|
|
</template>
|
|
</wd-tabbar-item>
|
|
</wd-tabbar>
|
|
</template>
|
|
|
|
<script>
|
|
const PATHS = [
|
|
'/pages/tabs/messages',
|
|
'/pages/tabs/contacts',
|
|
'/pages/tabs/clock',
|
|
'/pages/tabs/workbench',
|
|
'/pages/tabs/me'
|
|
]
|
|
|
|
export default {
|
|
data() {
|
|
return { active: 0 }
|
|
},
|
|
mounted() {
|
|
this.sync()
|
|
uni.$on('fy-tab', (i) => { this.active = i })
|
|
},
|
|
unmounted() {
|
|
uni.$off('fy-tab')
|
|
},
|
|
methods: {
|
|
sync() {
|
|
const pages = getCurrentPages()
|
|
const route = pages.length ? '/' + pages[pages.length - 1].route : ''
|
|
const i = PATHS.indexOf(route)
|
|
if (i >= 0) this.active = i
|
|
},
|
|
onChange({ value }) {
|
|
const url = PATHS[value]
|
|
if (url) uni.switchTab({ url })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.ico { width: 44rpx; height: 44rpx; position: relative; }
|
|
.bubble {
|
|
width: 30rpx; height: 22rpx; margin: 6rpx auto 0;
|
|
border: 3rpx solid #8A9199; border-radius: 8rpx; box-sizing: border-box;
|
|
}
|
|
.on .bubble { border-color: #1677FF; }
|
|
.tail {
|
|
width: 0; height: 0; margin-left: 14rpx;
|
|
border-top: 8rpx solid #8A9199; border-right: 8rpx solid transparent;
|
|
}
|
|
.on .tail { border-top-color: #1677FF; }
|
|
.heads { display: flex; align-items: flex-end; height: 44rpx; padding-left: 2rpx; }
|
|
.head {
|
|
width: 22rpx; display: flex; flex-direction: column; align-items: center;
|
|
}
|
|
.head.b { margin-left: -6rpx; }
|
|
.dot {
|
|
width: 12rpx; height: 12rpx; border: 3rpx solid #8A9199; border-radius: 50%; box-sizing: border-box;
|
|
}
|
|
.body {
|
|
width: 18rpx; height: 8rpx; margin-top: 2rpx;
|
|
border: 3rpx solid #8A9199; border-bottom: none; border-radius: 10rpx 10rpx 0 0; box-sizing: border-box;
|
|
}
|
|
.on .dot, .on .body { border-color: #1677FF; }
|
|
.clock {
|
|
width: 30rpx; height: 30rpx; margin: 6rpx auto 0;
|
|
border: 3rpx solid #8A9199; border-radius: 50%; box-sizing: border-box; position: relative;
|
|
}
|
|
.on .clock { border-color: #1677FF; }
|
|
.hh, .mh { position: absolute; background: #8A9199; border-radius: 2rpx; }
|
|
.on .hh, .on .mh { background: #1677FF; }
|
|
.hh { width: 3rpx; height: 10rpx; left: 12rpx; top: 4rpx; }
|
|
.mh { width: 8rpx; height: 3rpx; left: 12rpx; top: 12rpx; }
|
|
.grid {
|
|
width: 32rpx; height: 32rpx; margin: 6rpx auto 0;
|
|
display: flex; flex-wrap: wrap; gap: 4rpx;
|
|
}
|
|
.grid view {
|
|
width: 12rpx; height: 12rpx; border: 3rpx solid #8A9199; border-radius: 3rpx; box-sizing: border-box;
|
|
}
|
|
.on .grid view { border-color: #1677FF; }
|
|
.me { display: flex; flex-direction: column; align-items: center; padding-top: 4rpx; }
|
|
.me .dot { width: 14rpx; height: 14rpx; }
|
|
.me .body { width: 26rpx; height: 10rpx; }
|
|
</style>
|