mayou/htmldev/cps/src/App.vue

<template>
  <div>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"/>
    <van-tabbar
      :placeholder="true"
      z-index="50"
      v-model="active"
      v-if="$route.meta.showTabbar">
      <van-tabbar-item replace to="/" icon="wap-home-o" name="MarketingSave">首页</van-tabbar-item>
      <van-tabbar-item replace to="/invite" icon="gold-coin-o" name="Invite">分享赚钱</van-tabbar-item>
      <van-tabbar-item replace to="/mine" icon="user-o" name="Mine">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from 'vant'
import { platform } from './utils/platform'
import funWxShare from './utils/wxShare0.0'

export default {
  name: 'App',
  components: {
    'van-tabbar': Tabbar,
    'van-tabbar-item': TabbarItem
  },
  data () {
    return {
      shareImg: require('./views/recommend/image/share.png'),
      active: 'MarketingSave'
    }
  },
  watch: {
    '$route.name': {
      handler: function (newVal) {
        const condition = ['PaymentCode', 'ShareMiddle', 'CategoryIndex', 'CategoryDetail'].findIndex(item => item === newVal) === -1
        if (!newVal) {
          return
        }
        if (['MarketingReturn', 'MarketingMake'].findIndex(item => item === newVal) > -1) {
          this.active = 'MarketingSave'
        } else {
          this.active = newVal
        }
        // 为中转页的时候不调用
        if (!this.$store.getters['common/isInit'] && condition) {
          this.$store.dispatch('common/getUserInfo')
          this.$store.dispatch('common/getOrdertype')
          this.$store.commit('common/UPDATE_ISINIT', true)
        }
      },
      immediate: true
    }
  },
  created () {
    platform.isWeixin && funWxShare('返不停', '一个省钱、赚钱又返钱的生活平台', `${location.origin}/img/share.png`, `${location.origin}`)
  }
}
</script>

<style lang="scss">
@import "./assets/styles/reset";
@import "./assets/styles/shop.css";

body {
  background: #F7F6F9;
}

.clearfix {
  display: inline-block;

  &:after {
    display: block;
    content: ".";
    height: 0;
    line-height: 0;
    clear: both;
    visibility: hidden;
  }
}
</style>