更换管理员

components/change/ChangeStepSelect.vue

@@ -0,0 +1,422 @@
+<template>
+  <div class="validation">
+    <div class="container">
+      <div class="content">
+        <div class="content-top">
+          <h3>更换管理员</h3>
+          <div class="step">
+            <img src="/images/all/step01.png" alt=""/>
+            <div class="step-item"><span class="active">身份验证</span><span>输入新管理员信息</span><span>更换完成</span></div>
+          </div>
+        </div>
+        <div class="choose">
+          <div v-show="hasValidPhoneWay"
+               @click="chooseWay(1)">
+            <img src="/images/all/icon01.png" alt="" class="first mob"/>
+            <span>通过验证手机</span><i class="fa fa-angle-right second"></i>
+          </div>
+          <div v-show="hasValidEmailWay"
+               @click="chooseWay(2)">
+            <img src="/images/all/icon02.png" alt="" class="first"/>
+            <span>通过验证邮箱</span><i class="fa fa-angle-right second"></i>
+          </div>
+          <div v-show="hasValidQuestionsWay"
+               @click="chooseWay(3)">
+            <img src="/images/all/icon03.png" alt="" class="first"/>
+            <span>通过验证密保</span><i class="fa fa-angle-right second"></i>
+          </div>
+          <div v-show="showManualAppeal"
+               @click="goChangeManagerAppeal()">
+            <img src="/images/all/icon04.png" alt="" class="first"/>
+            <span>通过人工申诉</span><i class="fa fa-angle-right second"></i>
+          </div>
+        </div>
+      </div>
+           <loading v-show="isShowLoading"/>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Loading from '~components/common/loading/Loading.vue'
+  export default {
+    name: 'validation',
+    components: {
+      Loading
+    },
+    data () {
+      return {
+        isShowLoading: false,
+        showManualAppeal: false,
+        showPhoneValid: false,
+        showEmailValid: false
+      }
+    },
+    mounted () {
+//      获取验证方式
+      this.$nextTick(() => {
+        this.getVerifyWay()
+      })
+    },
+    methods: {
+//      获取验证方式
+      getVerifyWay () {
+        this.$http.get('/sso/change/admin/checkType')
+          .then(response => {
+            if (response.data.success) {
+              if (!response.data.content) {
+                this.goFirstStep = true
+                this.showManualAppeal = true
+                this.hasValidPhoneWay = false
+                this.hasValidQuestionsWay = false
+                this.hasValidEmailWay = false
+              } else {
+                if (response.data.content.mobile) {
+                  this.hasValidPhoneWay = true
+                  this.getMobile = response.data.content.mobile
+                  var reg = /^(\d{3})\d{6}(\d{2})$/
+                  this.secretMobile = this.getMobile.replace(reg, '$1******$2')
+                }
+                if (response.data.content.questions) {
+                  this.hasValidQuestionsWay = true
+                  this.getQuestions = response.data.content.questions
+                  this.question1 = this.getQuestions[0].question || ''
+                  this.question2 = this.getQuestions[1].question || ''
+                  this.sort1 = this.getQuestions[0].sort || ''
+                  this.sort2 = this.getQuestions[1].sort || ''
+                  this.id1 = this.getQuestions[0].id || ''
+                  this.id2 = this.getQuestions[1].id || ''
+                }
+                if (response.data.content.email) {
+                  this.hasValidEmailWay = true
+                  this.getEmail = response.data.content.email
+                  let getEmailIndex = this.getEmail.indexOf('@')
+                  if (getEmailIndex > 3) {
+                    let len = this.getEmail.substring(3, getEmailIndex)
+                    this.secretEmail = this.getEmail.replace(len, '*')
+                  } else {
+                    this.getEmailArr = this.getEmail.split('')
+                    this.getEmailSplit = this.getEmailArr.splice(getEmailIndex, 0, '*')
+                    this.secretEmail = this.getEmailArr.join('')
+                  }
+                }
+                this.goFirstStep = true
+                this.showManualAppeal = true
+              }
+            } else {
+              return Promise.reject(response.data)
+            }
+          }).catch(err => {
+            this.$message.error(err.errMsg)
+          })
+      },
+//      跳转到人工申诉页面
+      goChangeManagerAppeal () {
+        window.location.href = '/appeals/changeManagerAppeal'
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .validation {
+    margin: 0 auto;
+    width: 100%;
+    background: #eee;
+  .container{
+    padding-top: 50px;
+    margin: 0 auto;
+    width: 980px;
+    text-align: center;
+  .content{
+    padding: 0 50px;
+    margin: 50px auto 0;
+    width: 100%;
+    /*height: 540px;*/
+    text-align: center;
+    background: #fff;
+  .content-top{
+    height: 80px;
+    line-height: 80px;
+  h3{
+    margin-bottom: 0;
+    font-size: 24px;
+    color: #000;
+    border-bottom: 1px solid #dcdcdc;
+  }
+  .step{
+    position: relative;
+    margin-top: 10px;
+  img{
+    width: 315px;
+    height: 46px;
+  }
+  .step-item{
+    position: absolute;
+    top: 45px;
+    left: 265px;
+  span{
+    margin-right: 57px;
+    font-size: 14px;
+    color: #b4b4b4;
+  }
+  span.active {
+    color: #0076ad;
+  }
+  }
+  }
+  }
+  form {
+    margin-top: 150px;
+    padding-bottom: 44px;
+  input{
+    padding: 0 0 0 18px;
+    width: 360px;
+    height: 44px;
+    line-height: 44px;
+    font-size: 14px;
+    color: #000;
+    border-radius: 0;
+  }
+  input.answer {
+    background: url("/images/all/more.png") no-repeat 325px center;
+    cursor: pointer;
+  }
+  ul{
+    display: none;
+    position: absolute;
+    top: 44px;
+    left: 0;
+    width: 360px;
+    background: #fff;
+    box-shadow: 0 0 5px rgba(0,0,0,.5);
+    -moz-box-shadow: 0 0 5px rgba(0,0,0,.5);
+    -o-box-shadow: 0 0 5px rgba(0,0,0,.5);
+    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.5);
+    z-index: 10;
+  li{
+    padding-left: 18px;
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    text-align: left;
+    font-size: 14px;
+    color: #000;
+    cursor: pointer;
+  &:hover{
+     background: #0076ad;
+     color: #fff;
+   }
+  }
+  }
+  span.tip{
+    position: absolute;
+    top: 0;
+    right: -238px;
+    font-size: 13px;
+    color: #8c8c8c;
+  a{
+    font-size: 13px;
+    color: #0076ad;
+  }
+  }
+  span.tip.codeError-tip{
+    position: absolute;
+    top: 3px;
+    left: 378px;
+    width: 200px;
+    text-align: left;
+    color: #ff4949;
+    font-size: 12px;
+  }
+  i{
+    position: absolute;
+    top: 13px;
+    left: 20px;
+    font-size: 20px;
+    color: #a0a0a0;
+  }
+  .btn {
+    margin: 34px 0 16px 0;
+    width: 360px;
+    height: 44px;
+    line-height: 44px;
+    font-size: 16px;
+    color: #fff;
+    background: #0076AD;
+    border-radius: 3px;
+  }
+  }
+  .content-bottom{
+    margin: 155px auto 0;
+    padding-bottom: 50px;
+    width: 360px;
+  div.warp{
+    padding-bottom: 65px;
+  }
+  p{
+    font-size: 24px;
+    color: #323232;
+  img{
+    margin-right: 20px;
+    width: 30px;
+    height: 28px;
+  }
+  }
+  p.pass{
+    font-size: 24px;
+    color: #e77405;
+  img{
+    height: 30px;
+  }
+  }
+  p.passed {
+    color: #2ab300;
+  img{
+    height: 30px;
+  }
+  }
+  span{
+    display: inline-block;
+    font-size: 14px;
+    color: #8b8b8b;
+  }
+  span.close-tip{
+    margin: 15px 0 140px 0;
+  }
+  .close-btn{
+    margin: 0 auto;
+    width: 200px;
+    height: 36px;
+    line-height: 36px;
+    font-size: 14px;
+    text-align: center;
+    color: #323232;
+    border: 1px solid #d2d2d2;
+    border-radius: 3px;
+    cursor: pointer ;
+  }
+  span.use{
+    display: inline-block;
+    margin-bottom: 30px;
+    width: 360px;
+    font-size: 14px;
+    color: #000;
+    text-align: left;
+  em{
+    font-size: 14px;
+    font-style: normal;
+    color: #000;
+  }
+  }
+  .form-group {
+    margin: 0 auto 16px;
+    position: relative;
+    width: 360px;
+    height: 44px;
+    line-height: 44px;
+  input{
+    padding: 0 0 0 18px;
+    width: 360px;
+    height: 44px;
+    line-height: 44px;
+    font-size: 14px;
+    color: #000;
+    border-radius: 0;
+  }
+  input.msg{
+    float: left;
+    width: 210px;
+    padding: 0 0 0 18px;
+    height: 44px;
+    line-height: 44px;
+    font-size: 14px;
+    color: #000;
+    border-radius: 0;
+  }
+  span.msg{
+    float: right;
+    margin: 0;
+    width: 130px;
+    height: 44px;
+    line-height: 44px;
+    text-align: center ;
+    font-size: 14px;
+    color: #5a5a5a;
+    background: #f4f4f4;
+    border: 1px solid #dcdcdc;
+    cursor: pointer;
+  }
+  span.msg.send{
+    background: #d2d2d2;
+    color: #fff;
+  }
+  }
+  .btn {
+    margin: 34px 0 10px 0;
+    width: 360px;
+    height: 44px;
+    line-height: 44px;
+    font-size: 16px;
+    color: #fff;
+    background: #0076AD;
+    border-radius: 3px;
+  }
+  }
+  .choose{
+    margin: 155px auto 0;
+    padding-bottom: 44px;
+  div{
+    padding: 0 15px;
+    margin: 0 auto 16px;
+    width: 360px;
+    height: 60px;
+    line-height: 60px;
+    text-align: left;
+    overflow: hidden;
+    border: 1px solid #d2d2d2;
+    cursor: pointer;
+  &:hover,&.active{
+             border-color: #0076ad;
+  span{
+    color: #0076ad;
+  }
+  i.second {
+    color: #0076ad;
+  }
+  }
+  img.first{
+    float: left;
+    margin: 24px 20px 0 0;
+    font-size: 20px;
+    color: #323232;
+  }
+  img.first.mob{
+    margin: 22px 20px 0 5px;
+    font-size: 28px;
+  }
+  i.second {
+    float: right;
+    margin: 20px 0 0 5px;
+    font-size: 20px;
+    color: #323232;
+  }
+  span{
+    float: left;
+    font-size: 14px;
+    color: #323232;
+  }
+  }
+  }
+  a.return{
+    position: absolute;
+    left: 0;
+    top: -15px;
+  img{
+    width: 34px !important;
+    height: 34px !important;
+  }
+  }
+  }
+  }
+  }
+</style>