在vue中{{}}中进行方法调用

<!-- Home.vue -->
<template>
  <div>
    <el-row type="flex" justify="space-between" class="head-box">
      <el-col class="head-logo">
        <img class="head-logo" src="./images/head-logo.jpg" alt="">
      </el-col>
      <el-col>
        <el-row>
          <el-col>
            <span class="detail-strong">您好，{{userInfo.userFullname}}</span>
            <span class="detail-unauth" v-if="userInfo.isCertification === 1">已实名认证</span>
            <span class="detail-unauth" v-if="userInfo.isCertification !== 1">【未实名认证】请</span>
            <span class="to-auth" @click="openAuthPopbox" v-if="userInfo.isCertification !== 1">认证</span>
          </el-col>
          <el-col class="detail-hap">欢迎来到上海科技，祝您使用愉快！</el-col>
          <el-col class="edit-detail">
            <i class="el-icon-edit edit-icon"></i>
            <router-link :to="{'name':'setting'}">编辑个人信息</router-link>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row>
      <el-collapse-transition>
        <el-col v-show="isShowGuide" class="guide-wrap">
          <el-row type="flex" justify="space-between">
            <el-col class="guide-tip"><span>如需办理业务，请依照以下步骤</span></el-col>
            <el-col>
              <i class="el-icon-close close-tag cursor" @click="closeGuide"></i>
            </el-col>
          </el-row>
          <el-row type="flex" align="middle">
            <el-col :span="7">
              <el-row class="guide-do-left" type="flex" justify="space-between">
                <el-col :span="11">
                  <strong>实名认证</strong>
                  <span>提供您的身份信息</span>
                  <el-button type="primary" size="mini" plain class="do-btn" :disabled="disabledLidt" @click="openAuthPopbox">立即认证</el-button>
                </el-col>
                <el-col :span="7">
                  <i class="do-bg-img realname-confirm"></i>
                </el-col>
                <el-col :span="6">
                  <el-row type="flex" justify="center" align="middle" style="height: 100%">
                    <i class="el-icon-plus plus-right"></i>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="7">
              <el-row class="guide-do-left" type="flex" justify="space-between">
                <el-col :span="11">
                  <strong>资料完善</strong>
                  <span>填写您的个人履历</span>
                  <el-button @click="toProfile" type="primary" size="mini" plain class="do-btn">
                    立即填写
                    <!-- <router-link :to="{'name':'profile'}">
                      立即填写
                    </router-link> -->
                  </el-button>
                </el-col>
                <el-col :span="7">
                  <i class="do-bg-img add-info"></i>
                </el-col>
                <el-col :span="6">
                  <el-row type="flex" justify="center" align="middle" style="height: 100%">
                    <i class="el-icon-plus plus-right"></i>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="7">
              <el-row class="guide-do-left" type="flex" justify="space-between">
                <el-col :span="11">
                  <strong>关联单位</strong>
                  <span>申请您的单位认证</span>
                  <el-button type="primary" size="mini" plain class="do-btn" @click="openApplyPopbox">立即申请</el-button>
                </el-col>
                <el-col :span="6">
                  <i class="do-bg-img unit-confirm"></i>
                </el-col>
                <el-col :span="7">
                  <el-row type="flex" justify="center" align="middle" style="height: 100%">
                    <i class="iconfont icon-icon-66 plus-right"></i>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6">
              <el-row class="guide-do-left" type="flex" justify="space-between">
                <el-col :span="13">
                  <strong>业务办理</strong>
                  <span>进行您的业务办理</span>
                  <el-button type="primary" size="mini" plain class="do-btn" :disabled="true">立即办理</el-button>
                </el-col>
                <el-col :span="11">
                  <i class="do-bg-img do-deal"></i>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
      </el-collapse-transition>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card v-if="unitList.length > 0" class="grid-content pd0" shadow="never">
          <el-row type="flex" justify="space-between" class="header-top">
            <el-col class="card-title">
              <span>单位管理</span>
            </el-col>
            <el-col>
              <el-button class="head-btn fr" type="text" v-if="unitList.length > 0" @click="openApplyPopbox">关联新单位</el-button>
              <el-button class="head-btn fr" type="text" v-if="unitList.length > 0" @click="userUnitSetDefault">设置为默认</el-button>
            </el-col>
          </el-row>
          <el-row v-for="(item, i) in unitList" :key="i" type="flex" justify="space-between" @click.native="checkUnit(item)" :class="{'unit-list':true, 'mb0': i+1 === unitList.length, 'active-list': item.isDefault === 1, 'selected-list': item.unit.id == checkedUnitId, 'cursor':true}">
            <el-col :span="16">
              <el-row class="unit-name">
                <span class='hiddle'>{{ item.unit.unitName }}</span><strong class="default-tip" v-if="item.isDefault === 1">默认单位</strong>
              </el-row>
              <el-row class="unit-address">
                <span>{{parseArea(item.unit.unitArea)}}</span>
              </el-row>
              <el-row class="info-status" v-if="item.percentage<100">
                <span v-if="item.isAdmin === 1">
                  当前公司信息未完善，请及时<router-link :to="{name:'unitinfo', query:{id:item.unit.id}}" class="add-info">完善公司信息</router-link>
                </span>
                <span v-else>
                  当前公司信息未完善，请及时联系管理员
                </span>
              </el-row>
            </el-col>
            <el-col :span="7">
              <el-row type="flex" justify="end" class="info-percent">
                <strong class="percent">{{item.percentage}}</strong>
                <span>%完善度</span>
              </el-row>
              <el-row type="flex" justify="end" class="edit-icons">
                <router-link v-if="item.isAdmin === 1" :to="{name:'unituser',query:{id:item.unit.id}}">
                  <i class="iconfont icon-icon-151 cursor" title="单位用户管理"></i>
                </router-link>
                <router-link v-if="item.isAdmin === 1" :to="{name:'unitinfo', query:{id:item.unit.id}}">
                  <i class="el-icon-edit icon-space cursor" title="单位信息管理"></i>
                </router-link>
                <i class="el-icon-delete icon-space cursor" title="与单位解绑" @click="deleteUserUnit(item)"></i>
              </el-row>
            </el-col>
          </el-row>
        </el-card>
        <el-card v-else class="grid-content-default" shadow="never">
          <el-row class="card-title-default">
            <span>单位管理</span>
          </el-row>
          <el-row type="flex" justify="center">
            <el-button class="plus-wrap" @click="openApplyPopbox">
              <i class="el-icon-plus plus-icon"></i>
            </el-button>
          </el-row>
          <el-row type="flex" justify="center">
            <span class="apply-default" @click="openApplyPopbox">申请关联单位</span>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12" v-if="list">
        <el-row>
          <el-card class="grid-content" shadow="never">
            <el-row type="flex" justify="space-between" class="header-top">
              <el-col class="card-title">
                <span>指南征集</span>
              </el-col>
              <el-col>
                <el-button class="head-btn fr" type="text">更多</el-button>
              </el-col>
            </el-row>
            <ul class="guide-box">
              <li class="guide-list" v-for="o in 4" :key="o">
                <a href="javascript:void(0)" class="guide-detail"><span class="fr">2018-10-25</span>{{'列表内容 ' + o }}</a>
              </li>
            </ul>
          </el-card>
        </el-row>
        <el-row>
          <el-card class="grid-content-default" shadow="never">
            <el-row class="card-title-default">
              <span>专家</span>
            </el-row>
            <el-row type="flex" justify="center">
              <el-button class="plus-wrap">
                <i class="el-icon-plus plus-icon"></i>
              </el-button>
            </el-row>
            <el-row type="flex" justify="center">
              <span class="apply-default">申请专家</span>
            </el-row>
          </el-card>
        </el-row>
      </el-col>
    </el-row>
    <!-- 实名认证弹窗 -->
    <st-upfloat-panel :panel="panelAuth" @panelClose="cancelAuthPopbox">
      <div>
        <el-form ref="authentication" :model="authentication" :rules="authRules" label-width="120px">
          <el-form-item label="用户姓名:" label-position="left" prop="userFullname">
            <el-input type="text" v-model.trim="authentication.userFullname" :disabled="disabledLidt" placeholder="请输入真实姓名"></el-input>
          </el-form-item>
          <el-form-item label="证件类型:" label-position="left" prop="userCertificatetype">
            <!-- <el-input type="text" value="身份证" disabled></el-input> -->
            <el-select v-model.trim="authentication.userCertificatetype" class="select date-picker" placeholder="请选择证件类型" disabled auto-complete="off">
              <!-- <i slot="prefix" class="el-input__icon el-icon-picture"></i> -->
              <i slot="prefix" class="el-input__icon iconfont icon-icon-31"></i>
              <el-option v-for="item in dict_zj" :key="item.dictionaryCode" :label="item.dictionaryName" :value="item.dictionaryCode">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="证件号码:" label-position="left" prop="userCertificate">
            <el-input type="text" v-model="authentication.userCertificate" :disabled="disabledLidt" placeholder="请输入证件号码"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" label-position="left" prop="userMobile">
            <el-input type="text" v-model.trim="userInfo.userMobile" disabled></el-input>
          </el-form-item>
          <el-form-item label="验证码:" label-position="left" prop="verificationCode">
            <el-col :span="14">
              <el-input class="validate-code-input" type="text" v-model.trim="authentication.code" placeholder="请输入短信验证码"></el-input>
            </el-col>
            <el-col class="line" :span="1">&nbsp;</el-col>
            <el-col :span="9">
              <getcode />
            </el-col>
          </el-form-item>
          <el-form-item label="" label-position="left">
            <el-row type="flex" justify="start">
              <el-button type="primary" size="medium" style="width: 100%" @click="authRealname('authentication')">提交</el-button>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
    </st-upfloat-panel>
    <!-- 申请关联单位弹窗 -->
    <st-upfloat-panel :panel="panelApply" @panelClose="cancelApplyPopbox">
      <div>
        <el-form ref="applyUnitForm" label-width="120px" :rules="applyUnitRules" :model="applyUnitForm">
          <el-form-item label="单位名称:" label-position="left" prop="queryUnitName">
            <el-autocomplete v-model.trim="applyUnitForm.queryUnitName" :fetch-suggestions="allUnits" placeholder="关键字模糊搜索" @select="handleSelect" style="width:100%">
              <template slot-scope="{ item }">
                <div class="name">{{ item.unitName }}</div>
              </template>
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-autocomplete>
          </el-form-item>
          <el-form-item label="用户姓名:" label-position="left" prop="userFullname">
            <el-input type="text" v-model="userInfo.userFullname" placeholder="请输入真实姓名" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" label-position="left" prop="mobile">
            <el-input type="text" v-model="userInfo.userMobile" placeholder="请输入手机号码" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="" label-position="left">
            <el-row type="flex" justify="start">
              <el-button type="primary" size="medium" style="width: 100%" @click="userUnitBind">提交</el-button>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
    </st-upfloat-panel>
  </div>
</template>

<script>
import StUpfloatPanel from '@/components/stupfloatpanel/StUpfloatPanel'
import code from '@/components/code/Code'
import gql from 'graphql-tag'
import {
  count, // 姓名
  validateIdcard,
  validateAuthCode
} from '@/utils/validate'
import { prettyMobile } from '@/utils/index'
import { getErrorByCode } from '@/utils/errors'

export default {
  components: {
    StUpfloatPanel,
    getcode: code
  },
  data () {
    // 证件的判断
    const valiDateCode = (rule, value, callback) => {
      // 证件号
      if (this.authentication.userCertificatetype === 'd82f57aaddb611e8b6a66c0b84d10001') {
        if (!value) {
          callback(new Error('请输入身份证号'))
        } else if (!validateIdcard(value)) {
          callback(new Error('请输入正确的身份证号'))
        } else {
          callback()
        }
      } else {
        if (!value) {
          callback(new Error('请输入证件号码'))
        } else {
          callback()
        }
      }
    }
    // 姓名的判断
    const checkUserFullName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入真实姓名'))
      } else if (count(value) > 50) {
        callback(new Error('请输入正确的姓名'))
      } else {
        callback()
      }
    }

    // 验证码验证
    const codeCheck = (rule, value, callback) => {
      if (value) {
        if (!validateAuthCode(value)) {
          callback(new Error('请输入正确的短信验证码'))
        } else {
          callback()
        }
      } else {
        callback(new Error('请输入短信验证码'))
      }
    }

    return {
      list: false,
      // 实名认证panel设置
      panelAuth: {
        show: false,
        title: '实名认证',
        btnName: '',
        // 表单操作结果显示 type:(-1,0,1),msg
        result: {
          type: 0,
          msg: ''
        }
      },
      // 申请关联单位panel设置
      panelApply: {
        show: false,
        title: '申请关联单位',
        btnName: '',
        // 表单操作结果显示 type:(-1,0,1),msg
        result: {
          type: 0,
          msg: ''
        }
      },
      unitList: [],
      applyUnitForm: {
        queryUnitName: ''
      },
      // 被选中单位的ID
      checkedUnitId: '',
      disabledLidt: false,
      // 用户信息对象
      userInfo: {
        isCertification: 0,
        userFullname: '',
        userMobile: ''
      },
      isShowGuide: true,
      // 关联新单位时已选择的单位对象
      selectedUnit: {
        id: ''
      },
      // 实名认证参数
      authentication: {
        userFullname: '',
        userCertificatetype: 'd82f57aaddb611e8b6a66c0b84d10001',
        code: '',
        userCertificate: ''
      },
      dict_zj: [],
      dict_qy: [],
      userList: [],
      authRules: {
        userFullname: [
          { required: true, validator: checkUserFullName, trigger: 'blur' }
        ],
        userCertificate: [
          { required: true, validator: valiDateCode, trigger: 'blur' }
        ],
        code: [
          { required: true, validator: codeCheck, trigger: 'blur' }
        ],
        userCertificatetype: [
          { required: true, message: '请选择证件类型', trigger: 'blur' }
        ]
      },
      applyUnitRules: {
        queryUnitName: [
          { required: true, message: '请选择单位名称', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 查询字典表
    dictionary () {
      this.$apollo
        .query({
          query: gql`
           query dictionaries($type:String!,$code: String!,$type1:String!,$code1: String!) {
            card:dictionaries(type:$type,code:$code) {
                dictionaryCode:id
                dictionaryName:dictionary_name
            }
             area:dictionaries(type:$type1,code:$code1) {
                dictionaryCode:id
                dictionaryName:dictionary_name
            }
          }
          `,
          // fetchPolicy: 'no-cache',
          client: 'dictionary',
          variables: {
            type: 'dict_zj_type',
            code: 'dict_zj',
            type1: 'dict_qy_type',
            code1: 'dict_qy'
          }
        })
        .then(res => {
          console.log(res)
          if (res.data) {
            this.dict_qy = res.data.area
            this.dict_zj = res.data.card
            // res.data.dictionary.forEach((dictionary) => {
            //   switch (dictionary.dictionaryCode) {
            //     case 'dict_qy':
            //       this.dict_qy = dictionary.children
            //       break
            //     case 'dict_zj':
            //       this.dict_zj = dictionary.children
            //       break
            //     default:
            //       break
            //   }
            // })
          }
        }).catch(() => {
          this.$message.error('服务器异常')
        })
    },
    // 打开实名认证弹窗
    openAuthPopbox () {
      this.authentication.userFullname = this.userList.userFullname
      this.authentication.userCertificate = this.userList.userCertificate
      this.panelAuth = {
        show: true,
        title: '实名认证',
        result: {
          type: 0,
          msg: ''
        }
      }
    },
    toProfile () {
      this.$router.push('/profile')
    },
    // 取消实名认证弹窗
    cancelAuthPopbox () {
      this.$refs['authentication'] && this.$refs['authentication'].resetFields()
      // 清空所有实名认证输入框中的内容
      this.$refs['authentication'] && this.$refs['authentication'].clearValidate()
      this.panelAuth.result.type = 0
      this.panelAuth.show = false
    },
    // 打开申请关联单位弹窗
    openApplyPopbox () {
      if (this.userInfo.isCertification !== 1) {
        this.$message.error('请先进行实名认证')
        return
      }
      this.panelApply = {
        show: true,
        title: '申请关联单位',
        result: {
          type: 0,
          msg: ''
        }
      }
    },
    // 取消申请关联单位弹窗
    cancelApplyPopbox () {
      this.$refs['applyUnitForm'] && this.$refs['applyUnitForm'].clearValidate()
      this.panelApply.show = false
    },
    resetClearForm (refName) {
      this.$refs[refName].resetFields()
      this.$refs[refName].clearValidate()
    },
    // 选择单位
    checkUnit (item) {
      if (item.isDefault === 1) return
      this.checkedUnitId === item.unit.id
        ? (this.checkedUnitId = '')
        : (this.checkedUnitId = item.unit.id)
    },
    // 获取单位列表信息
    user () {
      this.$apollo
        .query({
          query: gql`
            query user($accountCode:String) {
              user(accountCode: $accountCode) {
                id
                userMobile
                userName
                userFullname
                isCertification
                userCertificatetype
                userCertificate
                userType
                headimgurl
                units{
                  id
                  isAdmin
                  applyStatus
                  isDefault
                  unit{
                    id
                    unitLogo
                    unitName
                    unitArea
                    unitUniformSocialCredit
                    unitOrganizationCode
                    unitAddress
                    unitZipCode
                    unitFax
                    unitLinkman
                    unitTelephone
                    unitEmail
                    unitLegal
                    unitLegalSex
                    unitLegalCertificatetype
                    unitLegalCertificate
                    unitLegalEducation
                    unitLegalServedtime
                    unitLegalTelephone
                    unitScientificEmail
                    unitFinanceEmail
                    unitAccountName
                    unitAccountBank
                    unitAccount
                    unitSubjection
                    unitRegistration
                    unitEmployTotal
                    unitEmployCollege
                    unitEmployResearch
                    unitEmployMiddleLevel
                    unitEmployUndergraduate
                    unitRegisteredCapital
                    unitRegisteredForeign
                    unitRegisteredTime
                    unitIncome
                    unitProfit
                    unitSale
                    unitEarner
                    unitAssets
                    unitLiabilities
                    unitProperties
                  }
                }
              }
            }
          `,
          fetchPolicy: 'network-only',
          client: 'center',
          variables: {
          }
        })
        .then(res => {
          const data = JSON.parse(JSON.stringify(res.data.user))
          this.userList = data
          const userFullnameShow = data.userFullname
            ? data.userFullname
            : prettyMobile(data.userMobile)

          let unitList = []
          // 资料完善度百分比计算
          data.units.map(userUnit => {
            const arr = Object.values(userUnit.unit)
            let num = 0
            Object.values(arr).map(value => {
              if (value) {
                num++
              }
              return num
            })
            userUnit.percentage = Math.round(((num - 1) / (arr.length - 1)) * 100) // 减1是为了排除id的影响
            unitList.push(userUnit)
            this.unitList = unitList
          })

          // 用户基本信息数据
          this.userInfo = {
            isCertification: data.isCertification,
            userFullname: data.userFullname,
            userFullnameShow: userFullnameShow,
            userMobile: data.userMobile
          }
          this.authentication.userFullname = data.userFullname
          this.authentication.userCertificate = data.userCertificate
          if (data.isCertification === 1) {
            this.disabledLidt = true
          } else {
            this.disabledLidt = false
          }
        })
        .catch((err) => {
          this.$message.error(getErrorByCode(err))
        })
    },
    // 设置为默认单位
    userUnitSetDefault () {
      if (!this.checkedUnitId) {
        this.$message.error('请先选择默认单位')
        return
      }
      this.$confirm('确认将该单位设置为默认单位, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$apollo
            .mutate({
              mutation: gql`
              mutation userUnitSetDefault($unitId:ID!) {
                userUnitSetDefault(unitId: $unitId)
              }
            `,
            client: 'center',
              variables: {
                unitId: this.checkedUnitId
              }
            })
            .then(res => {
              if (res) {
                this.$message({
                  type: 'success',
                  message: '设置默认单位成功!'
                })
                this.checkedUnitId = ''
                this.user()
              } else {
                this.$message.error('设置默认单位失败！')
              }
            })
            .catch((err) => {
              this.$message.error(getErrorByCode(err))
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 关联新单位
    userUnitBind () {
      if (this.selectedUnit.id) {
        this.$refs['applyUnitForm'].validate((valid) => {
          if (valid) {
            this.$apollo
              .mutate({
                mutation: gql`
            mutation userUnitBind($unitId:ID!) {
              userUnitBind(unitId: $unitId)
            }
          `,
          client: 'center',
                variables: {
                  unitId: this.selectedUnit.id
                }
              })
              .then(res => {
                if (res.data.userUnitBind) {
                  this.panelApply = {
                    show: true,
                    title: '申请关联单位',
                    result: {
                      type: 1,
                      msg: '单位关联提交成功'
                    }
                  }
                  this.$refs['applyUnitForm'].resetFields()
                  this.user()
                } else {
                  this.$message.error('单位关联提交失败！')
                }
              })
              .catch((err) => {
                this.$message.error(getErrorByCode(err))
              })
          } else {
            return false
          }
        })
      } else {
        this.$message.error('公司信息不存在不能申请')
      }
    },
    // 删除单位
    deleteUserUnit (item) {
      this.$confirm('此操作将永久解绑该单位, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$apollo
            .mutate({
              mutation: gql`
                mutation deleteUserUnit($id:ID!) {
                  deleteUserUnit(id: $id)
                }
              `,
              client: 'center',
              variables: {
                // id: item.unit.id
                id: item.id
              }
            })
            .then(res => {
              if (res) {
                this.$message({
                  type: 'success',
                  message: '单位解绑成功!'
                })
                this.user()
              } else {
                this.$message.error('单位解绑失败')
              }
            })
            .catch((err) => {
              this.$message.error(getErrorByCode(err))
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 单位模糊查询
    allUnits (unitName, callback) {
      if (unitName === '') return
      this.$apollo
        .query({
          query: gql`
            query allUnits($unitName:String!) {
              allUnits(unitName: $unitName){
                id
                unitName
              }
            }
          `,
          client: 'center',
          fetchPolicy: 'network-only',
          variables: {
            unitName: unitName
          }
        })
        .then(res => {
          const data = res.data.allUnits
          callback(data)
        })
        .catch((err) => {
          this.$message.error(getErrorByCode(err))
        })
    },
    // 单位模糊查询后选择单位
    handleSelect (item) {
      this.applyUnitForm.queryUnitName = item.unitName
      this.selectedUnit = item
    },
    // 实名认证提交
    authRealname (formData) {
      this.$refs[formData].validate(valid => {
        if (valid) {
          this.$apollo
            .mutate({
              mutation: gql`
                mutation authentication($authentication:AuthenticationInput) {
                  authentication(authentication: $authentication)
                }
              `,
              client: 'center',
              variables: {
                authentication: {
                  verificationCode: this.authentication.code,
                  userFullname: this.authentication.userFullname,
                  userMobile: this.userInfo.userMobile,
                  userCertificate: this.authentication.userCertificate
                }
              }
            })
            .then(res => {
              if (res.data.authentication) {
                this.$refs['authentication'].resetFields()
                this.panelAuth = {
                  show: true,
                  title: '实名认证',
                  result: {
                    type: 1,
                    msg: '实名认证成功'
                  }
                }
                this.user()
              }
            })
            .catch((err) => {
              this.$message.error(getErrorByCode(err))
            })
        }
      })
    },
    parseArea (areaCode) {
      let area = ''
      this.dict_qy.forEach(qy => {
        if (qy.dictionaryCode === areaCode) {
          area = qy.dictionaryName
        }
      })
      return area
    },
    // 关闭引导栏
    closeGuide () {
      this.isShowGuide = false
    }
  },
  mounted () {
    // 获取单位列表信息
    this.dictionary()
    this.user()
  }
}
</script>
<style lang='stylus'  rel='stylesheet/stylus' scoped>
@import '../../assets/fonts/iconfont.css'
.head-box
  padding-top 14px
  margin-bottom 20px
  .head-logo
    margin-right 20px
    width 60px
    height 60px
    border-radius 60px
  .detail-hap, .detail-strong, .detail-unauth
    font-size 16px
    color #909399
    font-weight normal
    margin 0 auto
    height 20px
    line-height 20px
    margin-bottom 8px
  .detail-hap
    margin-top 8px
    font-size 14px
  .detail-strong
    font-size 20px
    font-weight 400
    color #303133
  .detail-unauth
    margin-left 10px
  .edit-detail
    margin-top 8px
    height 20px
    line-height 20px
    margin 0
    font-size 14px
    color #1989fa
    .edit-icon
      color #1989fa
      margin-right 10px
    .iconfont
      cursor pointer
      font-weight 200
      margin 0 10px 0 30px
  .to-auth
    cursor pointer
    font-size 16px
    color #1989fa
.grid-content, .grid-content-default
  min-height 240px
  background #fff
  padding-bottom 20px
  margin-bottom 20px
  .header-top
    margin-bottom 18px
  .card-title, .card-title-default
    font-size 16px
    color #909399
  .head-btn
    font-size 12px
    padding 3px 0
    margin-right 20px
  .guide-box
    margin 0 20px
    padding 0
    .guide-list
      height 28px
      line-height 28px
      margin-left 16px
      padding 0
      color #909399
      .guide-detail
        font-size 14px
  .mb0
    margin-bottom 0
.pd0
  padding-bottom 0
.unit-list
  height 130px
  border 1px solid #dcdfe6
  border-bottom 4px solid #c0c4cc
  border-radius 4px
  padding 0 20px 4px
  margin-bottom 20px
  .unit-name
    height 28px
    line-height 28px
    color #252631
    font-size 20px
    margin-top 20px
    .hiddle
      width 200px
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
      display inline-block
    .default-tip
      font-size 14px
      font-weight normal
      color #fa5555
      font-weight 400
      margin-left 10px
      display inline-block
      vertical-align top
  .unit-address
    font-size 14px
    color #909399
    height 21px
    line-height 21px
    margin 10px 0 20px 0
  .info-status
    height 17px
    line-height 20px
    font-size 12px
    color #909399
    .add-info
      color #1989fa
  .info-percent
    color #909399
    height 42px
    line-height 42px
    font-size 14px
    margin-top 15px
    .percent
      font-weight normal
      color #1989fa
      font-size 30px
  .edit-icons
    position absolute
    bottom 10px
    right 20px
    color #909399
    .icon-space
      margin-left 20px
.active-list
  border-color #1989fa
.selected-list
  border-color #303133
.card-title-default
  height 40px
  margin-bottom 20px
.plus-wrap
  width 80px
  height 80px
  border-radius 4px
  background-color #fff
  border 2px dashed #e4e7ed
  .plus-icon
    color #dcdfe6
    zoom 2
.apply-default
  margin-top 15px
  font-size 16px
  color #909399
  text-align center
  display block
.validate-code-row
  width 124px
  p
    display inline-block
    width 81px
    margin 0 auto
.get-code
  background #e6f1fc
  border-radius 4px
  font-size 12px
  color #1989fa
  float right
.cursor
  cursor pointer
.guide-wrap
  height 200px
  background #fff
  padding 20px
  margin-bottom 20px
  .guide-tip
    color #fa5555
    font-size 16px
    height 22px
    line-height 22px
  .close-tag
    float right
    font-size 22px
    color #999
  .guide-do-left
    margin-top 24px
    strong
      display block
      font-size 16px
      color #474747
      height 22px
      line-height 22px
      margin-bottom 6px
    span
      display block
      font-size 14px
      color #909399
      height 18px
      line-height 18px
      margin-bottom 20px
    .do-bg-img
      width 78px
      height 80px
      display block
    .plus-right
      font-size 30px
      color #1989fa
      font-weight 800
    .realname-confirm
      background url('./images/realname-confirm.svg') no-repeat
    .add-info
      background url('./images/add-info.svg') no-repeat
    .unit-confirm
      background url('./images/unit-confirm.svg') no-repeat
    .do-deal
      background url('./images/do-deal.svg') no-repeat
.select
  width 100%
</style>