my_loan/htmldev/TBTools/src/views/main-navbar.vue

<template>
  <nav class="site-navbar">
    <div class="site-navbar clearfix">
      <ul class="TT-nav">
        <li>
          <router-link :to="{name: 'home'}">首页</router-link>
        </li>
        <li>
          <el-dropdown class="TT-login" :show-timeout="0" placement="bottom" style="cursor: pointer;">
            <span class="el-dropdown-link">淘宝工具</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <router-link :to="{name: 'toolsAnalyze'}">竞品透析</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link :to="{name: 'toolsCredit'}">旺旺透视</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link :to="{name: 'toolsOnline'}">指数转换</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link :to="{name: 'toolsPricetrend'}">价格走势</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link :to="{name: 'toolsOrdersearch'}">淘客订单查询</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link :to="{name: 'toolsStarkeysearch'}">淘宝下拉框选词</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link :to="{name: 'toolsShopinfo'}">店铺信息查询</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link :to="{name: 'toolsFeedback'}">商品评论查询</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link :to="{name: 'toolsProductinfo'}">商品信息查询</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link :to="{name: 'toolsProductaskinfo'}">商品问大家</router-link>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </li>
      </ul>
      <template v-if="token">
        <el-dropdown class="TT-login" :show-timeout="0" placement="bottom" style="cursor: pointer;">
          <span class="el-dropdown-link">个人中心</span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <router-link :to="{name: 'minePaycheck'}">充值</router-link>
            </el-dropdown-item>
            <el-dropdown-item>
              <router-link :to="{name: 'mineWallet'}">我的钱包</router-link>
            </el-dropdown-item>
            <el-dropdown-item @click.native="updatePasswordHandle()">修改密码</el-dropdown-item>
            <el-dropdown-item @click.native="logoutHandle()">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
      <template v-else>
        <router-link :to="{name: 'login'}" replace>登录</router-link>
        <router-link :to="{name: 'register'}" replace>/注册</router-link>
      </template>
    </div>
    <!-- 弹窗, 修改密码 -->
    <update-password v-if="updatePassowrdVisible" ref="updatePassowrd"/>
  </nav>
</template>

<script>
import UpdatePassword from './main-navbar-update-password'
import { clearLoginInfo } from '@/utils'
import Vue from 'vue'

export default {
  components: {
    UpdatePassword
  },
  data () {
    return {
      updatePassowrdVisible: false
    }
  },
  computed: {
    token () {
      return this.$store.state.user.token || Vue.cookie.get('token')
    }
  },
  methods: {
    // 修改密码
    updatePasswordHandle () {
      this.updatePassowrdVisible = true
      this.$nextTick(() => {
        this.$refs.updatePassowrd.init()
      })
    },
    // 退出
    logoutHandle () {
      this.$confirm(`确定进行[退出]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/user/loginout'),
          method: 'post',
          data: this.$http.adornData()
        }).then(({ data }) => {
          if (data.status) {
            clearLoginInfo()
            this.$router.push({ name: 'login' })
          }
        })
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.site-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10%;
  background: #fff;

  .TT-nav {
    flex: 1;
    display: flex;
    align-items: center;
    list-style: none;

    li {
      display: flex;
      justify-content: center;
      width: 12.5%;
      padding: 0 20px;
    }
  }
}

a {
  display: block;
  font-size: 16px;
  color: #666;
  text-decoration: none;
}
</style>