sso-ssr/components/mobile/cloudcenter/cloudCenter.vue

<template>
  <div class="cloud-info">
    <div class="box-header"><img src="/images/all/uas-m.png" alt="">账号中心</div>
    <div class="w-over-box">
      <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 class="user" 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">
                <span>绑定手机</span>
                <img v-show="user.user.mobileValidCode != 2" src="/images/all/question-m.png" alt="">
              </div>
              <div class="bind-tip">
                <span>您绑定的手机：{{secretMobile}}。若已丢失或停用，请立即更换，避免账户被盗。</span>
                <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>
          <div class="item items">
            <div class="item-list">
              <div class="bind-name">
                <span>绑定邮箱</span>
                <img v-show="user.user.emailValidCode != 2" src="/images/all/question-m.png" alt="">
              </div>
              <div class="bind-tip">
                <span>{{secretEmail ? '您绑定的邮箱：' + secretEmail : '您还没有绑定邮箱哦!'}}</span>
                <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>
          <div class="item items">
            <div class="item-list">
              <div class="bind-name">
                <span>登录密码</span>
                <img v-show="user.user.passwordLevel === 1" src="/images/all/question-m.png" alt="">
              </div>
              <div class="bind-tip">
                <span class="tip-text tipText1">安全性高的密码可以使账号更安全，建议您定期更换密码，并且设置一个包含数字和字母，长度超过8位以上的密码。</span>
                <a href="/reset/forgetPasswordValidationAccount" class="bind-btn" v-show="user.user.passwordLevel === 2 || user.user.passwordLevel === 3">修改</a>
                <a href="/reset/forgetPasswordValidationAccount" class="go-btn" v-show="user.user.passwordLevel === 1">设置</a>
              </div>
            </div>
          </div>
          <div class="item items">
            <div class="item-list">
              <div class="bind-name">
                <span>密保问题</span>
                <img v-show="!user.user.hasQuestion" src="/images/all/question-m.png" alt="">
              </div>
              <div class="bind-tip">
                <span class="tip-txt tipText2">是您找回登录密码的方法之一。建议您设置一个容易记住，且最不容易被他人获取的问题及答案。</span>
                <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>
          <div class="item items">
            <div class="item-list">
              <div class="bind-name">
                <span>实名认证</span>
                <img v-show="user.user.identityValidCode != 2" src="/images/all/question-m.png" alt="">
              </div>
              <div class="bind-tip">
                <span>实名认证后，可通过实名信息找回支付密码、修改手机号等，提高账户安全性。</span>
                <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>
                <a class="wait-btn" v-show="user.user.identityValidCode === 1">认证中</a>
              </div>
            </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="enter" :class="{enterprise : (user.userspace.validCode === 1 && user.newUserSpace)}">
              <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">
              <span>管理员</span>
              <div>{{user.userspace.admin.vipName || '-'}}</div>
            </div>
            <div class="bind-detail"><a href="/change/changeManager">修改</a></div>
          </div>
          <div class="enterprise">
            <div class="bind-info">
              <span>企业认证</span>
              <div v-text="user.userspace.validCode === 0 ? '未认证' : user.userspace.validCode === 1 ? '待认证' : user.userspace.validCode === 2 ? '已认证' : user.userspace.validCode === 3 ? '未通过' : ''"></div>
            </div>
            <div class="bind-detail">
              <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">
              <span>营业执照号</span>
              <div :class="{showAll: user.userspace.validCode != 1}">{{user.userspace.businessCode || '-'}}</div>
              <div class="new" v-if='user.userspace.validCode === 1 && user.newUserSpace'><b class="angle">——></b>{{user.newUserSpace.businessCode || '-'}}</div>
            </div>
          </div>
          <div class="enterprise">
            <div class="bind-info">
              <span>营业执照扫描件</span>
              <div v-if="user.userspace.businessCodeImage"
                   @click="showImg(user.userspace.businessCodeImage)">查看附件: <i class="fa fa-eye" style="color:#0076ad"></i></div>
              <div v-if="!user.userspace.businessCodeImage">未上传</div>
              <b v-if='user.userspace.validCode === 1 && user.newUserSpace' class="angle" style="float: left;margin-top: .3rem;">——></b>
              <div v-if='user.userspace.validCode === 1 && user.newUserSpace'
                   @click="showImg(user.newUserSpace.businessCodeImage)"
                   v-show="user.newUserSpace.businessCodeImage"  class="new">
                查看附件: <i class="fa fa-eye" style="color:#0076ad"></i></div>
            </div>
          </div>
          <div class="enterprise">
            <div class="bind-info">
              <span>法定代表人</span>
              <div :class="{showAll: user.userspace.validCode != 1}">{{user.userspace.corporation || '-'}}</div>
              <div v-if='user.userspace.validCode === 1 && user.newUserSpace' class="new"><b class="angle">——></b>{{user.newUserSpace.corporation || '-'}}</div>
            </div>
          </div>
          <div class="enterprise">
            <div class="bind-info">
              <span>注册地址</span>
              <div :class="{showAll: user.userspace.validCode != 1}">{{user.userspace.regAddress || '-'}}</div>
              <div v-if='user.userspace.validCode === 1 && user.newUserSpace' class="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>

<script>
  export default {
    layout: 'cloud',
    middleware: 'authenticated',
    data () {
      return {
        activeTab: 0,
        secretMobile: '',
        secretEmail: '',
        isShow: false,
        imgUrl: '',
        accountLevel: ''
      }
    },
    computed: {
      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()
      })
      // 省略显示
      let ele = document.getElementsByClassName('tipText1')[0]
      let txt = ele.innerHTML
      if (txt.length > 30) {
        ele.innerText = txt.slice(0, 35) + ' ...'
      } else {
        ele.innerText = txt
      }
      let ele1 = document.getElementsByClassName('tipText2')[0]
      let txt1 = ele1.innerHTML
      if (txt1.length > 30) {
        ele1.innerText = txt1.slice(0, 35) + ' ...'
      } else {
        ele1.innerText = txt1
      }
    },
    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)
        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">
  .cloud-info {
    margin: 0 auto;
    padding: 0;
    padding-bottom: 1rem;
    width: 100%;
    text-align: center;
    background: #eaeaea;
    .box-header {
      width: 100%;
      height: 1.2rem;
      line-height: 1.2rem;
      font-size: .4rem;
      font-weight: bold;
      color: #3c3c3c;
      text-align: center;
      img{
        margin-right: .2rem;
        margin-top: -.08rem;
        width: 1.2rem;
        height: .4rem;
      }
    }
    .w-over-box {
      width: 100%;
      background: #fff;
      .basic-nav{
        width: 100%;
        height: 1.3rem;
        line-height: 1.3rem;
        span{
          display: inline-block;
          font-size: .34rem;
          color: #a0a0a0;
          width: 49%;
          text-align: center;
          &.active,&:hover{
            color: #000;
            background: #f5f5f5;
          }
        }
      }
    }
    .w-over-box .basic-info i.man{
      display: inline-block;
      position: relative;
      margin-right: .08rem;
      width: .3rem;
      height: .3rem;
      background: url(/img/over_account/man.png) no-repeat;
    }
    .w-over-box .basic-info i.enterprise-img{
      display: inline-block;
      position: relative;
      margin-right: .08rem;
      width: .3rem;
      height: .3rem;
      background: url(/img/over_account/enter.png) no-repeat;
      float: left;
      margin-top: .5rem;
    }
    .w-over-box .basic-info{
      width: 100%;
      background: #fff;
      b.angle{
        margin: 0 .1rem;
        font-weight: normal;
        color: #000;
        float: left;
      }
      .new {
        color: #2ab300 !important ;
      }
      .basic-top{
        padding: 0 .3rem;
        width: 100%;
        height: 1.25rem;
        line-height: 1.25rem;
        div.line{
          overflow: hidden;
          border-bottom: 2px solid #e5e5e5;
          div.people{
            float: left;
            width: 1.6rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            em{
              font-style: normal;
              font-size: .32rem;
              color: #000;
            }
            em.user{
              float: none;
            }
          }
          div.enter{
            width: 100%;
            text-align: left;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            em{
              font-style: normal;
              font-size: .32rem;
              color: #000;
            }
          }
          div.enterprise {
            width: 100%;
            text-align: left;
            em{
              display: inline-block;
              font-style: normal;
              font-size: .32rem;
              color: #000;
              max-width: 1.5rem;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              float: left;
            }
          }
          div.time{
            float: right;
            span{
              font-size: .24rem;
              color: #a0a0a0;
            }
          }
        }
        em.new{
          color: #2ab300;
        }
      }
      .basic-bottom{
        width: 100%;
        padding: .38rem 0;
        .item{
          height: 2.3rem;
          overflow: hidden;
          &:nth-child(1){
            margin-bottom: .85rem;
            height: auto;
            line-height: inherit;
          }
          .item-list{
            padding: 0 .3rem;
            width: 100%;
            overflow: hidden;
            .pwd-level{
              float: left;
              width: 2rem;
              height: .44rem;
              line-height: .44rem;
              text-align: center;
              font-size: .26rem;
              color: #797979;
              background: #eee;
            }
            .pwd{
              float: left;
              em{
                display: inline-block;
                margin: 0 0.08rem 0.02rem 0;
                width: .48rem;
                height: .1rem;
                &:first-child{
                  margin-left: .3rem;
                }
              }
              span{
                margin-left: .2rem;
                font-weight: bold;
                font-size: .26rem;
              }
            }
            .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-tip {
            padding-bottom: .4rem;
            border-bottom: 1px solid #ddd;
          }
          .bind-name{
            margin: 0 0 .45rem;
            text-align: left;
            span{
              font-size: .3rem;
              color: #000;
            }
            img{
              margin-left: .3rem;
              margin-top: -0.06rem;
              width: .35rem;
              height: .3rem;
            }
          }
          .bind-tip{
            overflow: hidden;
            span {
              word-break: break-all;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
              float: left;
              display: inline-block;
              width: 5rem;
              line-height: .46rem;
              text-align: left;
              font-size: .26rem;
              color: #b4b4b4;
            }
            span.tip-text {
              overflow : hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
            a{
              float: right;
              font-size: .26rem;
              color: #a0a0a0;
            }
            a.go-btn{
              color: #0076ad;
            }
            a.wait-btn{
              color: #9f9f9f;
            }
          }
          &:nth-child(6) {
            .bind-tip {
              border-bottom: none;
            }
          }
          &:nth-child(3) {
            .bind-tip {
              padding-bottom: .8rem;
            }
          }
        }
      }
      /* 管理员*/
      .enterprise-bottom{
        padding: 0 .3rem;
        width: 100%;
        .enterprise{
          padding: .35rem 0 .3rem 0;
          height: 1.75rem;
          overflow: hidden;
          border-bottom: 1px solid #ddd;
          &:nth-child(6){
            border-bottom: none;
          }
          .bind-info{
            float: left;
            text-align: left;
            width: 4.6rem;
            span{
              display: inline-block;
              width: 100%;
              font-size: .26rem;
              color: #000;
            }
            div{
              margin-top: .3rem;
              max-width: 2rem;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              text-align: left;
              font-size: .26rem;
              color: #b4b4b4;
              float: left;
            }
            div.showAll{
              width: 100%;
              overflow: visible;
            }
            .new {
              max-width: 2.6rem;
              color: #2ab300 !important ;
            }
          }
          .bind-detail{
            float: right;
            margin-top: .3rem;
            a{
              font-size: .26rem;
              color: #0076ad;
            }
            i{
              font-size: .26rem;
              font-style: normal;
              color: #0076ad;
            }
          }
        }
        }
      }
    }
</style>