crowd-test-service-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 v-if="rolesPermissions.isSystemAdministrator">
                    <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">&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</span>
            <li v-if="isLogin&&rolesPermissions.isSystemAdministrator">
              <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();
            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
                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
                    this.hideLoading();
                })
            } 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>