|
|
@@ -0,0 +1,208 @@
|
|
|
+<template>
|
|
|
+ <van-tabbar
|
|
|
+ :active-key="getNowActiveKey"
|
|
|
+ class="footer-box"
|
|
|
+ :fixed="false"
|
|
|
+ :safe-area-inset-bottom="true"
|
|
|
+ active-color="#2DA0FF"
|
|
|
+ inactive-color="#B7B7B7"
|
|
|
+ v-model="nowNavKey"
|
|
|
+ @change="onChange"
|
|
|
+ >
|
|
|
+ <van-tabbar-item
|
|
|
+ v-for="item in navs"
|
|
|
+ :name="item.key"
|
|
|
+ :key="item.key"
|
|
|
+ >
|
|
|
+ <div class="tabbar-image" slot="icon" slot-scope="props">
|
|
|
+ <AppIcon v-show="!props.active" :name="item.icon" />
|
|
|
+ <div
|
|
|
+ v-show="props.active"
|
|
|
+ class="lottie-an-tabbar"
|
|
|
+ ref="lottie"
|
|
|
+ :data-lottie-key="item.lottie"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <span
|
|
|
+ class="tabbar-title"
|
|
|
+ :class="{ active: props.active }"
|
|
|
+ slot-scope="props"
|
|
|
+ >{{ item.label }}</span
|
|
|
+ >
|
|
|
+ </van-tabbar-item>
|
|
|
+ </van-tabbar>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+// TODO 混合旧项目，暂时无法直接使用 route 模式，需手动跳转路由
|
|
|
+import lottie from 'lottie-web'
|
|
|
+import { Tabbar, TabbarItem } from 'vant'
|
|
|
+import { AppIcon } from '@/ui'
|
|
|
+import TabbarAnimationData from '@/assets/lottie/tabbar'
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'FooterTabbar',
|
|
|
+ components: {
|
|
|
+ [Tabbar.name]: Tabbar,
|
|
|
+ [TabbarItem.name]: TabbarItem,
|
|
|
+ [AppIcon.name]: AppIcon
|
|
|
+ },
|
|
|
+ props: {},
|
|
|
+ data: function () {
|
|
|
+ return {
|
|
|
+ isMounted: false,
|
|
|
+ nowNavKey: this.$route.meta?.tabbar || 'search',
|
|
|
+ navs: [
|
|
|
+ {
|
|
|
+ key: 'search',
|
|
|
+ label: '首页',
|
|
|
+ link: '/home',
|
|
|
+ icon: 'nav_un_home',
|
|
|
+ lottie: 'home'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'subscribe',
|
|
|
+ label: '订阅',
|
|
|
+ link: '/subscribe',
|
|
|
+ icon: 'nav_un_book',
|
|
|
+ lottie: 'subscribe'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'message',
|
|
|
+ label: '消息',
|
|
|
+ link: '/message',
|
|
|
+ icon: 'nav_un_message',
|
|
|
+ lottie: 'message'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'box',
|
|
|
+ label: '工作台',
|
|
|
+ link: '/box',
|
|
|
+ icon: 'workSpace',
|
|
|
+ lottie: 'box'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'me',
|
|
|
+ label: '我的',
|
|
|
+ link: '/me',
|
|
|
+ icon: 'nav_un_mine',
|
|
|
+ lottie: 'mine'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ getTabbarKeys() {
|
|
|
+ return this.navs.map((v) => v.key)
|
|
|
+ },
|
|
|
+ getNowActiveKey() {
|
|
|
+ const nowKey = this.$route.meta?.tabbar
|
|
|
+ if (this.isMounted) {
|
|
|
+ this.refreshActiveIndex()
|
|
|
+ }
|
|
|
+ return nowKey
|
|
|
+ },
|
|
|
+ ...mapGetters('user', ['isLogin'])
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this._LottieItems = this.navs.map((v, index) => {
|
|
|
+ return {
|
|
|
+ op: TabbarAnimationData[v.lottie].op,
|
|
|
+ lottie: lottie.loadAnimation({
|
|
|
+ animationData: Object.assign({}, TabbarAnimationData[v.lottie]),
|
|
|
+ loop: false,
|
|
|
+ autoplay: false,
|
|
|
+ renderer: 'svg',
|
|
|
+ container: this.$refs.lottie[index]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.isMounted = true
|
|
|
+ this.setActiveIcon(this.nowNavKey)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getIndex(key) {
|
|
|
+ return this.getTabbarKeys.indexOf(key)
|
|
|
+ },
|
|
|
+ refreshActiveIndex() {
|
|
|
+ this.nowNavKey = this.$route.meta?.tabbar
|
|
|
+ this.setActiveIcon(this.nowNavKey)
|
|
|
+ },
|
|
|
+ setActiveIcon(key) {
|
|
|
+ const index = this.getIndex(key)
|
|
|
+ if (index === -1) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this._LottieItems[index].lottie.goToAndPlay(0, true)
|
|
|
+ },
|
|
|
+ onChange(key) {
|
|
|
+ const navIndex = this.getIndex(key)
|
|
|
+ if (navIndex === -1) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const item = this.navs[navIndex]
|
|
|
+ this.setActiveIcon(key)
|
|
|
+ if (key === 'subscribe') {
|
|
|
+ window.location.replace('/jyapp/frontPage/seo/free/subscribe')
|
|
|
+ } else if (key === 'box') {
|
|
|
+ window.location.replace('/jyapp/frontPage/seo/free/workbench')
|
|
|
+ } else {
|
|
|
+ this.$router.replace({
|
|
|
+ name: `tabbar-${item.key}`
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+$icon-size: 24px;
|
|
|
+$label-color: #171826;
|
|
|
+$label-color--active: #2abed1;
|
|
|
+
|
|
|
+.footer-box {
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: inset 0px 0.5px 0px rgba(0, 0, 0, 0.04);
|
|
|
+ &::after {
|
|
|
+ border-color: transparent;
|
|
|
+ }
|
|
|
+}
|
|
|
+.van-tabbar-item__icon {
|
|
|
+ margin-bottom: 1px;
|
|
|
+}
|
|
|
+.van-tabbar-item {
|
|
|
+ padding-top: 5px;
|
|
|
+ justify-content: flex-start;
|
|
|
+ ::v-deep .van-info {
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.tabbar-image {
|
|
|
+ position: relative;
|
|
|
+ width: $icon-size;
|
|
|
+ height: $icon-size;
|
|
|
+ .lottie-an-tabbar {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 1;
|
|
|
+ width: inherit;
|
|
|
+ height: inherit;
|
|
|
+ }
|
|
|
+ i {
|
|
|
+ font-size: $icon-size;
|
|
|
+ color: $label-color;
|
|
|
+ }
|
|
|
+}
|
|
|
+.van-tabbar-item__text span.tabbar-title {
|
|
|
+ &.active {
|
|
|
+ color: $label-color--active;
|
|
|
+ }
|
|
|
+ color: $label-color;
|
|
|
+ font-size: 10px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 16px;
|
|
|
+ transition: color 0.2s;
|
|
|
+}
|
|
|
+</style>
|
