crowd-test-service-frontend/src/components/commons/Header2.0.vue

<template>
  <div class="header-nav">
    <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">广州</span>
        </div>
        <div class="nav-list pull-right">
          <ul>
            <li v-if="isLogin">
              <el-dropdown>
                <span class="el-dropdown-link">
                  {{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="{ name: 'UserCenter',params:{userId:user.userVO.id}}">
                      <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 v-if="user.authStatus.text == '审核通过' &&  !this.user.personalAuthVO && this.user.agencyVO">
                    <router-link :to="{ name: 'Agency',params:{userId:user.userVO.id}}">
                      <el-link icon="el-icon-edit" :underline="false">
                        修改机构信息
                      </el-link>
                    </router-link>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="user.authStatus.text == '未实名认证' && !rolesPermissions.isSystemAdministrator">
                    <router-link :to="{ name: 'AuthenticationIndex'}">
                      <el-link type="info" icon="el-icon-warning-outline" :underline="false">
                        未实名认证
                      </el-link>
                    </router-link>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="user.authStatus.text == '认证审核中'" @click.native="handleClickAuthChecking()">
                    <el-link type="warning" icon="el-icon-loading" :underline="false">
                      认证审核中
                    </el-link>
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="handleClickAuthPass()" v-if="user.authStatus.text == '审核通过'">
                    <el-link type="primary" icon="el-icon-check" :underline="false">
                      已认证
                    </el-link>
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="handleClickAuthReject()" v-if="user.authStatus.text == '审核未通过'">
                    <el-link type="danger" icon="el-icon-close" :underline="false">
                      认证失败
                    </el-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="loginUrl">免费注册</a>
            </li>
              <span v-if="!isLogin">&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</span>
            <li v-if="isLogin">
              <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">&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</span>
            <li>
              <a @click="gotoHome" style="cursor: pointer">首页</a>
            </li>
            &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
            <li>
              <a href="#">机构入驻</a>
            </li>
            &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
            <li>
              <a href="#">客服中心</a>
            </li>
          </ul>
        </div>
    </div>
  </div>
</template>

<script>
  import {
      defaultValue,
      deleteAuthInfo,
      getCurrentAgencyAuthInfo,
      getCurrentEnterpriseAuthInfo,
      getCurrentIndividualAuthenInfo,
      getCurrentUser,
      getRolesPermissions,
      logout,
      storageGet,
      storageSave
  } from '@/js/index'
  export default {
    name: "Header2.0",
    data(){
      return {
        user: {},
        fullScreenLoading: true,
        loginUrl: process.env.LOGIN_URL,
        registerUrl: process.env.REGISTER_URL,
        authInfo: {},
        isShowAuthCheckingDialog: false,
        isShowAuthRejectDialog: false,
        isShowAuthPassDialog: false,
        //loading: true,
        openNavBar: false,
        defaultValue: defaultValue,
        userIdentity: '',
        isLogin: false,
        rolesPermissions: {}
      }
    },
    watch: {
        'user.authStatus' (val) {
            this.user.authStatus = val
            // console.log('changed')
            // console.log(this.user.authStatus)
        },
        deep: true
    },
    methods: {
        gotoHome(){
            this.$router.push('/home');
        },
        openNavBarFunc () {
            this.openNavBar = !this.openNavBar
        },
        setUserInfo () {
            if (storageGet('user') == null) {
                storageSave('rolesPermissions', {
                    'isRegionManager': false,
                    'isIndividualUser': false,
                    'isEnterpriseUser': false,
                    'isAgency': false,
                    'isSystemAdministrator': false
                });
                console.log('本地没有用户信息,开始加载用户信息')
                getCurrentUser().then((res) => {
                    // console.log(res)
                    storageSave('user', res)
                    this.user = res
                    this.rolesPermissions = getRolesPermissions(res.roleList)
                    storageSave('rolesPermissions', getRolesPermissions(res.roleList))
                    console.log('用户信息加载成功')
                    this.isLogin = true
                    this.fullScreenLoading = false
                }).catch((error) => {
                    console.log('用户信息加载失败')
                    this.fullScreenLoading = false
                })
            } else {
                this.user = storageGet('user')
                this.fullScreenLoading = false
                this.isLogin = true
            }
        },
        getCurrentUserSuccess (res) {
            // console.log(res)
            storageSave('user', res)
            this.user = res
            this.rolesPermissions = getRolesPermissions(res.roleList)
            storageSave('rolesPermissions', getRolesPermissions(res.roleList))
            console.log('用户信息加载成功')
            this.isLogin = true
            this.fullScreenLoading = false
        },
        getCurrentUserFail (error) {
            console.log('用户信息加载失败')
            this.fullScreenLoading = false
        },
        userLogout () {
            this.isLogin = false
            logout().then((res) => {
                // location.reload();
                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.setUserInfo()
        // if (storageGet('user' != null)){
        //   this.isLogin = true
        // }
        console.log(this.isLogin)
    }
  }
</script>

<style scoped>
  .header-nav {
    padding: 10px 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>