cofortest-frontend/src/components/commons/Header2.0.vue

<template>
  <div class="header-nav" v-loading="loading">
    <div class="container">
      <div class="nav-location pull-left">
        <i class="el-icon-location-outline" style="margin-right: 5px"></i>
        <span style="line-height: 34px" v-if="!city || city == ''">暂无</span>
        <span style="line-height: 34px" v-else>{{ city }}</span>
      </div>
      <div class="nav-list pull-right">
        <ul>
          <li>
            <a @click="gotoHome" style="cursor: pointer">首页</a>
          </li>
          &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
          <li>
          <li v-if="isLogin">
            <el-dropdown>
                <span class="el-dropdown-link" style="color:rgb(153,153,153)">
                  {{ user.userVO.name }}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <router-link :to="{ path:'/personal/mine'}">
                    <el-link icon="el-icon-user" :underline="false">
                      个人中心
                    </el-link>
                  </router-link>
                </el-dropdown-item>
                <el-dropdown-item>
                  <router-link :to="{ path:'/bookkeeptest'}">
                    <el-link icon="el-icon-user" :underline="false">
                      个人账单
                    </el-link>
                  </router-link>
                </el-dropdown-item>
                <el-dropdown-item v-if="rolesPermissions.isSystemAdministrator || rolesPermissions.isRegionalAdmin">
                  <router-link :to="{ name: 'AuthenticationManage'}">
                    <el-link icon="el-icon-view" :underline="false">
                      审核认证信息
                    </el-link>
                  </router-link>
                </el-dropdown-item>
                <el-dropdown-item divided @click.native="userLogout()">登出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </li>
          <li v-if="!isLogin">
            <a :href="loginUrl">请登录</a>
          </li>
          &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
          <li v-if="!isLogin">
            <a :href="registerUrl">免费注册</a>
          </li>

          <li v-if="isLogin">
            <span v-if="!isLogin">&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</span>
            <router-link v-if="isLogin" to="/mine">
              <a class="dropdown-toggle nav-link" data-toggle="dropdown">
                <!--                  <img class="icon" src="@/assets/img/mine_icon.svg">-->
                <span>我的众测</span>
              </a>
            </router-link>
          </li>

<!--          <span v-if="isLogin&&rolesPermissions.isSystemAdministrator">&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</span>-->
<!--          <li v-if="isLogin&&rolesPermissions.isSystemAdministrator">-->
<!--            <router-link v-if="isLogin" to="/statistics">-->
<!--              <span>机构统计</span>-->
<!--            </router-link>-->
<!--          </li>-->

          <span v-if="isLogin && (rolesPermissions.isSystemAdministrator || rolesPermissions.isRegionalAdmin)">&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</span>
          <li v-if="isLogin && (rolesPermissions.isSystemAdministrator || rolesPermissions.isRegionalAdmin)">
            <router-link v-if="isLogin" to="/companys">
              <span>服务企业</span>
            </router-link>
          </li>

          <!--            <span v-if="isLogin&&(rolesPermissions.isSystemAdministrator || rolesPermissions.isRegionManager)">&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</span>-->
          <!--            <li v-if="isLogin&&(rolesPermissions.isSystemAdministrator || rolesPermissions.isRegionManager)">-->
          <!--              <a :href="manage_url" v-if="manage_url">后台管理</a>-->
          <!--            </li>-->
        </ul>
      </div>
    </div>
  </div>

</template>

<script>
import {
  defaultValue,
  deleteAuthInfo,
  getCurrentAgencyAuthInfo,
  getCurrentEnterpriseAuthInfo,
  getCurrentIndividualAuthenInfo,
  getCurrentUser,
  getRolesPermissions,
  logout,
  storageGet,
  storageSave,
  storageRemove
} from '@/js/index'
import Http from '@/js/http.js'
import Apis from '@/js/api.js'
import {mapActions} from 'vuex'
import {login_url, register_url, CONFIG} from '../../config/index'

export default {
  name: 'Header2.0',
  data () {
    return {
      user: {},
      loading: false,
      fullScreenLoading: true,
      loginUrl: login_url,
      registerUrl: register_url,
      manage_url: CONFIG.manage_url,
      authInfo: {},
      isShowAuthCheckingDialog: false,
      isShowAuthRejectDialog: false,
      isShowAuthPassDialog: false,
      //loading: true,
      openNavBar: false,
      defaultValue: defaultValue,
      userIdentity: '',
      isLogin: false,
      rolesPermissions: {},
      city: ''
    }
  },
  watch: {
    'user.authStatus' (val) {
      this.user.authStatus = val
      // console.log('changed')
      // console.log(this.user.authStatus)
    },
    deep: true
  },
  methods: {
    ...mapActions(['setUser']),
    gotoHome () {
      this.$router.push('/home')
    },
    openNavBarFunc () {
      this.openNavBar = !this.openNavBar
    },
    getAddress () {
      Http.get(Apis.USER.GET_ADDRESS).then((res) => {
        this.city = res.city
      }).catch((error) => {
        this.hideLoading()
        notify('error', '获取定位失败:' + error.data)
      })
    },

    showLoading () {
      this.loading = true
    },
    hideLoading () {
      this.loading = false
    },
    setUserInfo () {
      this.showLoading()
      getCurrentUser().then((res) => {
        storageSave('user', res)
        this.setUser(res)
        this.user = res
        storageSave('rolesPermissions', getRolesPermissions(res.roleList))
        this.rolesPermissions = storageGet('rolesPermissions')
        console.log('用户信息加载成功')
        this.isLogin = true
        // this.fullScreenLoading = false
        this.hideLoading()
      }).catch((error) => {
        console.log('用户信息加载失败')
        // this.fullScreenLoading = false
        storageRemove('user')
        this.hideLoading()
      })
      // if (storageGet('user') == null) {
      //   storageSave('rolesPermissions', {
      //     'isRegionManager': false,
      //     'isIndividualUser': false,
      //     'isEnterpriseUser': false,
      //     'isAgency': false,
      //     'isSystemAdministrator': false
      //   })
      //   // console.log('本地没有用户信息,开始加载用户信息')
      //   //暂时注释
      //   // this.user = storageGet('user')
      //   // this.rolesPermissions = getRolesPermissions(storageGet('user')&&storageGet('user').roleList)
      //   // storageSave('rolesPermissions', getRolesPermissions(torageGet('user')&&storageGet('user').roleList))
      //   // this.isLogin = true
      //   // this.fullScreenLoading = false
      //
      // } else {
      //   this.user = storageGet('user')
      //   this.rolesPermissions = storageGet('rolesPermissions')
      //   // this.fullScreenLoading = false
      //   this.isLogin = true
      // }
      this.hideLoading()
    },
    getCurrentUserSuccess (res) {
      storageSave('user', res)
      this.user = res
      storageSave('rolesPermissions', getRolesPermissions(res.roleList))
      this.rolesPermissions = storageGet('rolesPermissions')
      console.log('用户信息加载成功')
      this.isLogin = true
      this.fullScreenLoading = false
    },
    getCurrentUserFail (error) {
      console.log('用户信息加载失败')
      this.fullScreenLoading = false
    },
    userLogout () {
      this.isLogin = false
      storageRemove('user')
      logout().then((res) => {
        // location.reload();
        if (this.$route.fullPath.includes('/home')) {
          location.reload()
        } else {
          this.$router.push('/home')
        }

      })

    },
    // showLoading () {
    //     this.fullScreenLoading = true
    // },
    // hideLoading () {
    //     this.fullScreenLoading = false
    // },
    handleClickAuthReject () {
      if (this.user.userVO.authType == 'agency') {
        this.$router.push({
          name: 'AgencyAuthentication',
          params: {userId: this.user.userVO.id}
        })
      }
      if (this.user.userVO.authType == 'enterprise') {
        this.$router.push({
          name: 'EnterpriseAuthentication',
          params: {userId: this.user.userVO.id}
        })
      }
      if (this.user.userVO.authType == 'personal') {
        this.$router.push({
          name: 'IndividualAuthentication',
          params: {userId: this.user.userVO.id}
        })
      }

      //this.getAuthInfo()
    },
    handleClickAuthPass () {
      if (this.user.personalAuthVO) {
        this.$router.push({
          name: 'IndividualAuthentication',
          params: {userId: this.user.userVO.id}
        })
      } else if (this.user.agencyVO) {
        this.$router.push({
          name: 'AgencyAuthentication',
          params: {userId: this.user.userVO.id}
        })
      } else if (this.user.enterpriseAuthVO) {
        this.$router.push({
          name: 'EnterpriseAuthentication',
          params: {userId: this.user.userVO.id}
        })
      }

      //this.getAuthInfo()
    },
    handleClickAuthChecking () {
      //this.getAuthInfo()
      if (this.user.userVO.authType == 'agency') {
        this.$router.push({
          name: 'AgencyAuthentication',
          params: {userId: this.user.userVO.id}
        })
      }
      if (this.user.userVO.authType == 'enterprise') {
        this.$router.push({
          name: 'EnterpriseAuthentication',
          params: {userId: this.user.userVO.id}
        })
      }
      if (this.user.userVO.authType == 'personal') {
        this.$router.push({
          name: 'IndividualAuthentication',
          params: {userId: this.user.userVO.id}
        })
      }
    },
    showAuthRejectDialog () {
      this.isShowAuthRejectDialog = true
    },
    showAuthPassDialog () {
      this.isShowAuthPassDialog = true
    },
    showAuthCheckingDialog () {
      this.isShowAuthCheckingDialog = true
    },
    hideAuthRejectDialog () {
      this.isShowAuthRejectDialog = false
    },
    hideAuthPassDialog () {
      this.isShowAuthPassDialog = false
    },
    hideAuthCheckingDialog () {
      this.isShowAuthCheckingDialog = false
    },
    deleteOldAuthInfo () {
      this.hideAuthCheckingDialog()
      this.hideAuthRejectDialog()
      this.hideAuthPassDialog()
      this.showLoading()
      deleteAuthInfo().then((res) => {
        this.hideLoading()
        notify('success', '成功删除认证信息')
      }).catch((error) => {
        this.hideLoading()
        notify('error', '删除认证信息失败:' + error.data)
      })
    },
    getAuthInfo () {
      this.showLoading()
      if (this.user.userVO.authType == 'agency') {
        getCurrentAgencyAuthInfo(this.user.userVO.id, this.getCurrentAgencyAuthInfoSuccess, this.getCurrentAgencyAuthInfoFail)
      }
      if (this.user.userVO.authType == 'personal') {
        getCurrentIndividualAuthenInfo(this.user.userVO.id, this.getCurrentIndividualAuthenInfoSuccess, this.getCurrentIndividualAuthenInfoFail)
      }
      if (this.user.userVO.authType == 'enterprise') {
        getCurrentEnterpriseAuthInfo(this.user.userVO.id, this.getCurrentEnterpriseAuthInfoSuccess, this.getCurrentEnterpriseAuthInfoFail)
      }
    },
    getCurrentAgencyAuthInfoSuccess () {
      this.hideLoading()
    },
    getCurrentAgencyAuthInfoFail () {
      this.hideLoading()
    },
    getCurrentIndividualAuthenInfoSuccess () {
      this.hideLoading()
    },
    getCurrentIndividualAuthenInfoFail () {
      this.hideLoading()
    },
    getCurrentEnterpriseAuthInfoSuccess () {
      this.hideLoading()
    },
    getCurrentEnterpriseAuthInfoFail () {
      this.hideLoading()
    },
    handleUpdateAuthInfo () {
      this.hideAuthPassDialog()
      this.hideAuthRejectDialog()
      this.hideAuthCheckingDialog()
      if (this.user.userVO.authType == 'personal') {
        this.$router.push({
          name: 'IndividualAuthentication',
          params: {
            userId: this.authInfo.userId
          }
        })
      }
      if (this.authInfo.type == 'enterprise') {
        this.$router.push({
          name: 'EnterpriseAuthentication',
          params: {
            userId: this.authInfo.userId
          }
        })
      }
      if (this.authInfo.type == 'agency') {
        this.$router.push({
          name: 'AgencyAuthentication',
          params: {
            userId: this.authInfo.userId
          }
        })
      }
    }
  },
  created () {
    var self = this
    this.$root.$on('user', function (val) {
      self.user = val
    })
  },
  beforeMount () {
    this.getAddress()
    this.setUserInfo()
    // if (storageGet('user' != null)){
    //   this.isLogin = true
    // }
  },
}
</script>

<style scoped>
.header-nav {
  padding: 5px 0;
  text-align: center;
  display: flex;
  font-size: 16px;
  color: rgba(153, 153, 153, 1);
  /*height:58px;*/
  background: rgba(243, 244, 247, 1);
}

.header-nav ul {
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

.header-nav ul li {
  display: inline-block;
}

.header-nav ul li a {
  color: inherit;
  padding: 5px;
  font-weight: 500;
  text-transform: uppercase;
  border-radius: 3px;
  position: relative;
  display: block;
}

.header-nav .copyright {
  padding: 5px 0;
  color: #333;
}

.copyright a {
  color: #666;
}
</style>