sso-ssr/pages/cloudcenter/index.vue

<template>
  <div>
    <template v-if="isMobile">
      <cloud-center/>
    </template>
    <template v-else>
    <div class="info">
      <div class="w-over-box">
        <div class="container">
          <div class="basic-nav">
            <span @click="activeTab = 0" :class="{active: activeTab === 0}">个人账号信息<em></em></span>
            <span @click="activeTab = 1" :class="{active: activeTab === 1}" v-show="user.userspace">绑定企业信息<em></em></span></div>
          <div class="basic-info" v-show="activeTab === 0">
            <div class="basic-top">
              <div class="line">
                <div class="people"><i class="man"></i><em v-text="user.user.vipName ? user.user.vipName : '用户名'"></em></div>
                <div class="time"><span>上次登录时间： {{user.user.lastLoginTime | time}}</span></div>
              </div>
            </div>
            <div class="basic-bottom">
              <div class="item">
                <div class="item-list">
                  <div class="pwd-level">账号安全等级</div>
                  <div class="pwd sm" v-show="accountLevel === 0"><em></em><em></em><em></em><span>弱</span></div>
                  <div class="pwd md" v-show="accountLevel === 1"><em></em><em></em><em></em><span>中</span></div>
                  <div class="pwd lar" v-show="accountLevel === 2"><em></em><em></em><em></em><span>强</span></div>
                </div>
              </div>
              <div class="item items">
                <div class="item-list">
                  <div class="bind-name">
                    <img v-show="user.user.mobileValidCode === 2" src="/images/all/right.png" alt="">
                    <img v-show="user.user.mobileValidCode != 2" src="/images/all/questions.png" alt="">
                    <span>绑定手机</span>
                  </div>
                  <div class="bind-tip">您绑定的手机：{{secretMobile}}。若已丢失或停用，请立即更换，避免账户被盗。</div>
                  <a href="/validation/phoneValidation" class="bind-btn" v-show="user.user.mobileValidCode === 2">修改</a>
                  <a href="/validation/phoneValidation" class="go-btn" v-show="user.user.mobileValidCode != 2">设置</a>
                </div>
              </div>
              <div class="item items">
                <div class="item-list">
                  <div class="bind-name">
                    <img v-show="user.user.emailValidCode === 2" src="/images/all/right.png" alt="">
                    <img v-show="user.user.emailValidCode != 2" src="/images/all/questions.png" alt="">
                    <span>绑定邮箱</span>
                  </div>
                  <div class="bind-tip">{{secretEmail ? secretEmail : '您还没有绑定邮箱哦!'}}</div>
                  <a href="/validation/emailValidation" class="bind-btn" v-show="user.user.emailValidCode === 2">修改</a>
                  <a href="/validation/emailValidation" class="go-btn" v-show="user.user.emailValidCode != 2">认证</a>
                </div>
              </div>
              <div class="item items">
                <div class="item-list">
                  <div class="bind-name">
                    <img v-show="user.user.passwordLevel >= 2" src="/images/all/right.png" alt="">
                    <img v-show="user.user.passwordLevel === 1" src="/images/all/questions.png" alt="">
                    <span>登录密码</span>
                  </div>
                  <div class="bind-tip">安全性高的密码可以使账号更安全，建议您定期更换密码，并且设置一个包含数字和字母，长度超过8位以上的密码。</div>
                  <a href="/reset/changePasswordChooseStyle" class="bind-btn" v-show="user.user.passwordLevel === 2 || user.user.passwordLevel === 3">修改</a>
                  <a href="/reset/changePasswordChooseStyle" class="go-btn" v-show="user.user.passwordLevel === 1">设置</a>
                </div>
              </div>
              <div class="item items">
                <div class="item-list">
                  <div class="bind-name">
                    <img v-show="user.user.hasQuestion" src="/images/all/right.png" alt="">
                    <img v-show="!user.user.hasQuestion" src="/images/all/questions.png" alt="">
                    <span>密保问题</span>
                  </div>
                  <div class="bind-tip">是您找回登录密码的方法之一。建议您设置一个容易记住，且最不容易被他人获取的问题及答案。</div>
                  <a href="/encrypted-setting/EncryptedSetting" class="bind-btn" v-show="user.user.hasQuestion">修改</a>
                  <a href="/encrypted-setting/EncryptedSetting" class="go-btn" v-show="!user.user.hasQuestion">设置</a>
                </div>
              </div>
              <div class="item items">
                <div class="item-list">
                  <div class="bind-name">
                    <img v-show="user.user.identityValidCode === 2" src="/images/all/right.png" alt="">
                    <img v-show="user.user.identityValidCode != 2" src="/images/all/questions.png" alt="">
                    <span>实名认证</span>
                  </div>
                  <div class="bind-tip">实名认证后，可通过实名信息找回支付密码、修改手机号等，提高账户安全性。</div>
                  <a href="/certification/realNameCertification" class="bind-btn" v-show="user.user.identityValidCode === 2">修改</a>
                  <a href="/certification/realNameCertification" class="go-btn" v-show="user.user.identityValidCode === 0 || user.user.identityValidCode === 3">设置</a>
                  <span class="wait-btn" v-show="user.user.identityValidCode === 1">认证中</span>
                </div>
              </div>
            </div>
          </div>
          <div class="basic-info" v-show="activeTab === 1" v-if="user.userspace">
            <div class="basic-top">
              <div class="line">
                <div class="people"><i class="enterprise-img"></i>
                  <em v-text="user.userspace.spaceName ? user.userspace.spaceName : '企业名称'"></em>
                  <b v-if='user.userspace.validCode === 1 && user.newUserSpace' class="angle">——></b>
                  <em class="new" v-if='user.userspace.validCode === 1 && user.newUserSpace' v-text="user.newUserSpace.spaceName ?  user.newUserSpace.spaceName : '企业名称'"></em>
                </div>
              </div>
            </div>
            <div class="enterprise-bottom">
              <div class="enterprise">
                <div class="bind-info">管理员</div>
                <div class="bind-detail">{{user.userspace.admin.vipName || '-'}}<a href="/change/changeManager">修改</a></div>
              </div>
              <div class="enterprise">
                <div class="bind-info">企业认证</div>
                <div class="bind-detail">
                  <em v-text="user.userspace.validCode === 0 ? '未认证' : user.userspace.validCode === 1 ? '待认证' : user.userspace.validCode === 2 ? '已认证' : user.userspace.validCode === 3 ? '未通过' : ''"></em>
                  <a v-show="user.userspace.validCode === 0" href="/certification/enterpriseCertification">申请认证</a>
                  <a v-show="user.userspace.validCode === 3" href="/certification/enterpriseCertification">重新认证</a>
                </div>
              </div>
              <div class="enterprise">
                <div class="bind-info">营业执照号</div>
                <div class="bind-detail">{{user.userspace.businessCode || '-'}}</div>
                <div class="bind-detail new" v-if='user.userspace.validCode === 1 && user.newUserSpace'><b class="angle">——></b>{{user.newUserSpace.businessCode || '-'}}</div>
              </div>
              <div class="enterprise">
                <div class="bind-info">营业执照扫描件</div>
                <div class="bind-detail"
                     v-show="user.userspace.businessCodeImage">
                  附件: <span>营业执照.jpg</span><i class="fa fa-eye" @click="showImg(user.userspace.businessCodeImage)"></i>
                </div>
                <div class="bind-detail"
                     v-show="!user.userspace.businessCodeImage">未上传</div>
                <b v-if='user.userspace.validCode === 1 && user.newUserSpace' class="angle" style="float: left;">——></b>
                <div class="bind-detail new"
                     v-if='user.userspace.validCode === 1 && user.newUserSpace'
                     v-show="user.newUserSpace.businessCodeImage">
                  附件: <span class="new">营业执照.jpg</span><i class="fa fa-eye" @click="showImg(user.newUserSpace.businessCodeImage)"></i>
                </div>
              </div>
              <div class="enterprise">
                <div class="bind-info">法定代表人</div>
                <div class="bind-detail">{{user.userspace.corporation || '-'}}</div>
                <div v-if='user.userspace.validCode === 1 && user.newUserSpace' class="bind-detail new"><b class="angle">——></b>{{user.newUserSpace.corporation || '-'}}</div>
              </div>
              <div class="enterprise">
                <div class="bind-info">注册地址</div>
                <div class="bind-detail" :class="{showAll: user.userspace.validCode != 1}">{{user.userspace.regAddress || '-'}}</div>
                <div v-if='user.userspace.validCode === 1 && user.newUserSpace' class="bind-detail new"><b class="angle">——></b>{{user.newUserSpace.regAddress || '-'}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--查看大图-->
      <div id="image-box" v-if="isShow">
        <div class="x-floating-wrap"></div>
        <div class="x-floating">
          <div id="item-content">
            <div class="x-close-wrap" @click="isShow = false"><a href="javascript:void(0);">&times;</a></div>
            <div class="img"><img :src="imgUrl"/></div>
          </div>
        </div>
      </div>
    </div>
  </template>
  </div>
</template>

<script>
    import cloudCenter from '~components/mobile/cloudcenter/cloudCenter.vue'
    export default {
      layout (content) {
        return content.store.state.option.isMobile ? 'mobileCloud' : 'cloud'
      },
      middleware: 'authenticated',
      transition: {
        name: 'fade',
        mode: 'out-in'
      },
      components: {
        cloudCenter
      },
      fetch ({store}) {
        return Promise.all([
          store.dispatch('loadUserInfo')
        ])
      },
      data () {
        return {
          activeTab: 0,
          secretMobile: '',
          secretEmail: '',
          isShow: false,
          imgUrl: '',
          accountLevel: ''
        }
      },
      computed: {
        isMobile () {
          return this.$store.state.option.isMobile
        },
        user () {
          let mobile = this.$store.state.option.userInfo.data.content.user.mobile
          if (mobile) {
            var reg = /^(\d{3})\d{6}(\d{2})$/
            this.secretMobile = mobile.replace(reg, '$1******$2')
          }
          let email = this.$store.state.option.userInfo.data.content.user.email
          if (email) {
            let getEmailIndex = email.indexOf('@')
            if (getEmailIndex > 3) {
              let len = email.substring(3, getEmailIndex)
              this.secretEmail = email.replace(len, '*')
            } else {
              this.getEmailArr = email.split('')
              this.getEmailSplit = this.getEmailArr.splice(getEmailIndex, 0, '*')
              this.secretEmail = this.getEmailArr.join('')
            }
          }
          return this.$store.state.option.userInfo.data.content
        }
      },
      filters: {
        time: function (time) {
          if (typeof time === 'number') {
            if (!time) {
              return '无'
            } else {
              let d = new Date(time)
              let year = d.getFullYear()
              let month = d.getMonth() + 1
              let day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate()
              let hour = d.getHours() < 10 ? '0' + d.getHours() : '' + d.getHours()
              let minutes = d.getMinutes() < 10 ? '0' + d.getMinutes() : '' + d.getMinutes()
              let seconds = d.getSeconds() < 10 ? '0' + d.getSeconds() : '' + d.getSeconds()
              return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
            }
          }
        }
      },
      mounted () {
//      获取账号等级
        this.$nextTick(() => {
          this.showLevel()
        })
      },
      methods: {
        showImg (imgUrl) {
          this.imgUrl = imgUrl
          this.isShow = true
        },
        showLevel () {
          var totle = !!(this.user.user.identityValidCode === 2) + !!(this.user.user.hasQuestion) + !!(this.user.user.mobileValidCode === 2) + !!(this.user.user.passwordLevel >= 2) + !!(this.user.user.emailValidCode === 2)
          // switch (totle) {
          //   case 0:
          //   case 1:
          //   case 2:
          //     // 低
          //     this.accountLevel = 0
          //     break
          //   case 3:
          //   case 4:
          //     // 中
          //     this.accountLevel = 1
          //     break
          //   default:
          //     // 高
          //     this.accountLevel = 2
          // }
          if (totle === 0 || totle === 1 || totle === 2) {
            this.accountLevel = 0
          } else if (totle === 3 || totle === 4) {
            this.accountLevel = 1
          } else {
            this.accountLevel = 2
          }
        }
      }
    }
</script>

<style scoped type="text/scss" lang="scss">
  .info{
    padding:50px 0 112px 30px;
    background:#eee;
  }
  .w-over-box .basic-nav{
    margin: 0 auto 15px;
    padding: 0 245px;
    width: 1200px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    background: #fff;
    span{
      position: relative;
      font-size: 20px;
      color: #8c8c8c;
      cursor: pointer;
      &:nth-child(1){
        float: left;
      }
      &:nth-child(2){
        float: right;
      }
      em{
        &:after{
          content: '';
          position: absolute;
          bottom: 0;
          left: 30px;
          width: 52px;
          height: 6px;
          background: transparent ;
        }
      }
      &:hover,&.active{
        color: #000;
        em {
          &:after{
            background: #0076ad;
          }
        }
      }
    }
  }
  .w-over-box .basic-info i.man{
    display:inline-block;
    position:relative;
    top:5px;
    width:30px;
    height:20px;
    background: url('/img/over_account/man.png') no-repeat;
  }
  .w-over-box .basic-info i.enterprise-img{
    display:inline-block;
    position:relative;
    top:5px;
    width:30px;
    height:20px;
    background: url('/img/over_account/enter.png') no-repeat;
  }
  .w-over-box .basic-info p{
    font-weight: bold;
    font-size: 14px;
    color:#000;
    margin:0;
  }
  .w-over-box .basic-info span{
    font-size: 14px;
    color:#787878;
  }
  .w-over-box .basic-info{
    width: 1200px;
    background: #fff;
    b.angle{
      margin: 0 10px;
      font-weight: normal;
      color: #000;
    }
    .new {
      color: #2ab300 !important ;
    }
    .basic-top{
      padding: 0 40px;
      width: 100%;
      height: 70px;
      line-height: 70px;
      div.line{
        overflow: hidden;
        border-bottom: 2px solid #e5e5e5;
        div.people{
          float: left;
          margin-right: 30px;
        }
        div.time{
          float: left;
        }
      }
      em{
        font-style: normal;
        font-size: 18px;
        color: #000;
      }
      em.new{
        color: #2ab300;
      }
    }
    .basic-bottom{
      width: 100%;
      padding: 20px 0;
      .item{
        height: 60px;
        line-height: 60px;
        .item-list{
          padding: 0 37px;
          width: 100%;
          overflow: hidden;
          .pwd-level{
            float: left;
            margin: 16px 19px 0 0;
            width: 120px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            font-size: 14px;
            color: #797979;
            background: #eee;
          }
          .pwd{
            float: left;
            em{
              display: inline-block;
              margin: 0 8px 2px 0;
              width: 24px;
              height: 6px;
              &:first-child{
                margin-left: 10px;
              }
            }
            span{
              margin-left: 10px;
              font-size: 13px;
            }
          }
          .pwd.sm{
            color: #8c8c8c;
            em {
              background: #bfbfbf;
              &:first-child{
                background: #ff4e00;
              }
            }
            span{
              color: #ff4e00;
            }
          }
          .pwd.md{
            color: #8c8c8c;
            em {
              background: #22ac38;
              &:nth-child(3){
                background: #bfbfbf;
              }
            }
            span{
              color: #22ac38;
            }
          }
          .pwd.lar{
            color: #8c8c8c;
            em {
              background: #00a0e9;
            }
            span{
              color: #00a0e9;
            }
          }
        }
      }
      .items{
        &:hover{
        background: #eaf4f9;
        }
        .bind-name{
          float: left;
          margin-right: 55px;
          img{
            margin-right: 15px;
            width: 20px;
            height: 18px;
          }
          span{
            font-size: 14px;
            color: #000;
          }
        }
        .bind-tip{
          float: left;
          font-size: 14px;
          color: #787878;
        }
        .bind-btn {
          float: right;
          display: inline-block;
          width: 86px;
          text-align: center;
          font-size: 14px;
          color: #0076ad;
        }
        .go-btn{
          margin-top: 15px;
          float: right;
          display: inline-block;
          width: 86px;
          text-align: center;
          height: 30px;
          line-height: 30px;
          font-size: 14px;
          color: #fff;
          background: #0076ad;
        }
        .wait-btn{
          margin-top: 15px;
          float: right;
          display: inline-block;
          width: 86px;
          text-align: center;
          height: 30px;
          line-height: 30px;
          font-size: 14px;
          color: #8c8c8c;
        }
      }
    }
    .enterprise-bottom{
      width: 100%;
      padding: 38px 0 50px 0;
      .enterprise{
        margin-bottom: 45px;
        padding: 0 37px;
        height: 20px;
        overflow: hidden;
        &:last-child {
          margin-bottom: 0;
        }
        .bind-info{
          float: left;
          margin-right: 50px;
          width: 100px;
          font-size: 14px;
          color: #000;
        }
        .bind-detail{
          float: left;
          font-size: 14px;
          color: #787878;
          max-width: 450px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          em{
            font-style: normal;
            font-size: 14px;
            color: #787878;
          }
          a{
            margin-left: 25px;
            font-size: 14px;
            color: #0076ad;
          }
          span{
            font-size: 14px;
            color: #0076ad;
          }
          i{
            margin-left: 12px;
            font-size: 18px;
            color: #000;
            cursor: pointer;
          }
        }
        .showAll {
          width: 100%;
          overflow: visible;
        }
      }
    }
  }

</style>