更换管理员和更换管理员申诉页面

assets/scss/mobileCommon.scss

@@ -249,3 +249,61 @@
   background: #00a0e9;
   border-radius: 0.06rem;
 }
+
+//上传图片
+
+.phone-btn-blank{
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  line-height: .94rem;
+  height: 48px;
+  text-align: left;
+  border: 1px solid #b5b5b5;
+  overflow: hidden;
+  cursor: pointer;
+}
+.phone-btn-blank .fa {
+  margin-left: .2rem;
+  font-size: .4rem;
+}
+.phone-btn-blank span.upload {
+  margin-left: .4rem;
+  line-height: .94rem;
+  font-size: .32rem;
+  color: #c9c9c9;
+}
+.phone-btn-blank input[type='file']{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-height: 48px;
+  opacity: 0;
+  border: none;
+}
+.phone-btn-blank:hover, .phone-btn-blank[disabled] {
+  border-color: #c0c4cc;
+  background: #e6e6e6;
+  color: #333;
+}
+.phone-btn-blank:hover span.upload{
+  color: #000;
+}
+
+//地址选择小图标
+.fa.fa-p {
+  position: absolute;
+  right: .42rem;
+  bottom: .2rem;
+  font-size: .4rem;
+  color: #888;
+}
+.fa.fa-picture-o{
+  right: .3rem;
+}
+
+//地址选择弹出框
+.mint-popup-bottom {
+  top: 50%;
+}

components/mobile/changeManager/StepAppeal.vue

@@ -0,0 +1,514 @@
+<template>
+  <div class="f-main">
+    <div class="content-top">
+      <p>更换管理员</p>
+      <!--<a href="javascript:void(0)" class="back" @click="jump('select')"><i class="el-icon-back"></i></a>-->
+    </div>
+    <div class="f-form">
+      <div class="page-part">
+        <mt-field placeholder="新管理员手机号"
+                  v-model="valid.mobile"
+                  :state="state.mobile"
+                  type="tel"
+                  @blur.native.capture="validateMobile"
+        ></mt-field>
+      </div>
+      <div class="page-part">
+        <mt-field auto-complete="off"
+                  placeholder="短信验证码"
+                  v-model="valid.code"
+                  :state="state.code"
+                  @blur.native.capture="validateCode">
+          <span class="token" @click="getCheckCode" v-text="tokenText" v-if="state.mobile === 'success'">获取验证码</span>
+          <span class="token-no" v-text="tokenText" v-if="state.mobile !== 'success'">获取验证码</span>
+        </mt-field>
+      </div>
+      <div class="page-part">
+        <mt-field placeholder="企业名称"
+                  v-model="valid.spaceName"
+                  :state="state.spaceName"
+                  @blur.native.capture="validateSpaceName"
+        ></mt-field>
+      </div>
+      <div class="page-part">
+        <mt-field placeholder="营业执照号"
+                  v-model="valid.businessCode"
+                  auto-complete="off"
+                  :state="state.businessCode"
+                  @blur.native.capture="validateBusinessCode"
+        ></mt-field>
+      </div>
+      <div class="page-part">
+        <a class="phone-btn-blank" title="上传营业执照扫描件" v-bind:class="{ correct: uploadFileChecked }">
+          <i class="fa fa-picture-o fa-p"></i>
+          <span class="upload">上传营业执照扫描件</span>
+          <input type="file"
+                 class="form-control file-input"
+                 name="name"
+                 accept="image/jpeg,image/jpg,image/gif,image/bmp,image/png,.pdf"
+                 @change="upload"/>
+        </a>
+        <a class="thumbnail" v-if="valid.businessCodeImage !== ''"><img class="previewImg" alt="" :src="isPdf ? '/images/all/timg.png' : valid.businessCodeImage"></a>
+      </div>
+      <div class="page-part">
+        <mt-field placeholder="法定代表人"
+                  v-model="valid.corporation"
+                  auto-complete="off"
+                  :state="state.corporation"
+                  @blur.native.capture="validateCorporation"
+        ></mt-field>
+      </div>
+      <div class="page-part" style="position: relative">
+        <!--// 注册地址-->
+        <mt-field readonly aria-haspopup="true" aria-expanded="false"
+                  placeholder="注册地址"
+                  v-model="valid.regAddress"
+                  @click.native="popupVisible = true"></mt-field>
+          <i class="fa fa-map-marker fa-p"></i>
+      </div>
+      <div class="page-part">
+        <mt-field placeholder="申诉说明"
+                  type="textarea"
+                  rows="4"
+                  v-model="valid.description"
+                  @blur.native.capture="validateDescription"></mt-field>
+        <p class="pwd">请描述您申诉的原因，并尽可能多地列举出证明此账号为您所有的证据</p>
+      </div>
+      <div class="page-part">
+        <mt-field placeholder="姓名"
+                  v-model="valid.contactName"
+                  :state="state.contactName"
+                  @blur.native.capture="validateContactName"
+        ></mt-field>
+      </div>
+      <div class="page-part">
+        <mt-field placeholder="联系电话"
+                  v-model="valid.contactTel"
+                  :state="state.contactTel"
+                  type="tel"
+                  @blur.native.capture="validateContactTel"
+        ></mt-field>
+      </div>
+      <div class="page-part">
+        <mt-field placeholder="电子邮箱"
+                  v-model="valid.contactEmail"
+                  :state="state.contactEmail"
+                  type="email"
+                  @blur.native.capture="validateContactEmail"
+        ></mt-field>
+      </div>
+      <div class="page-part">
+        <mt-button size="large" type="primary" @click="sureAccount('last')">提 交</mt-button>
+      </div>
+    </div>
+    <mt-popup v-model="popupVisible" position="bottom" class="mint-popup">
+      <mt-picker :slots="dateSlots" @change="onDateChange" :visible-item-count="5" :show-toolbar="false"></mt-picker>
+    </mt-popup>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'step-one',
+    data () {
+      return {
+        uploadFileChecked: false,
+        isPdf: false,
+        popupVisible: false,
+        state: {
+          mobile: 'error',
+          code: 'error',
+          spaceName: 'error',
+          businessCode: 'error',
+          businessCodeImage: 'error',
+          corporation: 'error',
+          regAddress: 'error',
+          description: 'error',
+          contactName: 'error',
+          contactTel: 'error',
+          contactEmail: 'error'
+        },
+        valid: {
+          mobile: '',
+          code: '',
+          spaceName: '',
+          businessCode: '',
+          businessCodeImage: '',
+          corporation: '',
+          regAddress: '',
+          description: '',
+          contactName: '',
+          contactTel: '',
+          contactEmail: ''
+        },
+        allCityData: {},
+        cityData: {
+          province: [],
+          city: [],
+          district: []
+        },
+        address: {
+          regProvince: '',
+          regCity: '',
+          regDistrict: '',
+          regStreet: ''
+        },
+        dateSlots: [
+          {
+            flex: 1,
+            values: ['2016-01', '2016-02', '2016-03', '2016-04', '2016-05', '2016-06'],
+            className: 'slot1',
+            textAlign: 'right'
+          }, {
+            divider: true,
+            content: '-',
+            className: 'slot2'
+          }, {
+            flex: 1,
+            values: ['2016-01', '2016-02', '2016-03', '2016-04', '2016-05', '2016-06'],
+            className: 'slot3',
+            textAlign: 'left'
+          }
+        ],
+        tokenCode: '',
+        tokenTime: 60,
+        tokenText: '获取验证码'
+      }
+    },
+    mounted () {
+      // 获取城市地址
+      this.$http.get('/data/city.json').then(response => {
+        this.allCityData = response.data
+        for (let province in response.data) {
+          this.cityData.province = response.data[province]
+          console.log('省', this.cityData.province)
+          for (let city in this.cityData.province) {
+            this.cityData.city = this.cityData.province[city]
+            console.log('市', this.cityData.city)
+            for (let street in this.cityData.city) {
+              this.cityData.district = this.cityData.city[street]
+              console.log('区', this.cityData.district)
+            }
+          }
+        }
+      })
+    },
+    methods: {
+      onDateChange (picker, values) {
+        if (values[0] > values[1]) {
+          picker.setSlotValue(1, values[0])
+        }
+        this.dateStart = values[0]
+        this.dateEnd = values[1]
+        console.log(values[0], '0')
+        console.log(values[1], '1')
+      },
+      jump (type) {
+        this.$emit('stepEvent', type)
+      },
+      // 弹窗处理
+      downToast (type) {
+        this.$toast({
+          message: type,
+          iconClass: 'el-icon-warning'
+        })
+      },
+      // 验证手机号
+      validateMobile () {
+        if (!this.valid.mobile) {
+          this.downToast('请先填写手机号')
+          this.state.mobile = 'error'
+        } else {
+          let reg = /^1[0-9]{10}$/
+          if (!reg.test(this.valid.mobile)) {
+            this.downToast('请填写正确的手机号')
+            this.state.mobile = 'warning'
+          } else {
+            this.state.mobile = 'success'
+          }
+        }
+      },
+      // 验证正确的验证码
+      validateCode () {
+        if (!this.valid.code) {
+          this.downToast('请先填写验证码')
+          this.state.code = 'error'
+        } else {
+          if (!this.valid.mobile) {
+            this.downToast('请先填写正确的手机号码')
+            this.state.code = 'warning'
+          } else {
+            if (this.tokenCode) {
+              let param = new FormData()
+              param.append('mobile', this.valid.mobile)
+              param.append('token', this.tokenCode)
+              param.append('code', this.valid.code)
+              let config = {
+                headers: {'Content-Type': 'multipart/form-data'}
+              }
+              this.$http.post('/appeal/check/mobile', param, config)
+                .then(response => {
+                  if (response.data.success) {
+                    this.state.code = 'success'
+                  } else {
+                    this.$toast({
+                      message: response.data.errMsg,
+                      iconClass: 'el-icon-error'
+                    })
+                    return Promise.reject(response.data)
+                  }
+                }).catch(() => {
+                  this.downToast('请检查网络是否正常或联系服务商')
+                })
+            } else {
+              this.downToast('请点击先获取验证码信息')
+              this.state.code = 'warning'
+            }
+          }
+        }
+      },
+      // 获取验证码
+      getCheckCode () {
+        if (this.tokenTime > 0 && this.tokenTime < 60) {
+          this.downToast('请稍后再点击，我在倒计时')
+        } else {
+          if (this.state.mobile === 'success') {
+            this.$indicator.open('获取中...')
+            let _this = this
+            this.$http.get('/appeal/check/mobile', {params: {mobile: this.valid.mobile}})
+              .then(response => {
+                this.$indicator.close()
+                if (response.data) {
+                  this.tokenCode = response.data.content.token
+                  this.$toast({
+                    message: '验证码已经发送到您的手机，请注意查收',
+                    iconClass: 'el-icon-success'
+                  })
+                  this.tokenText = '已发送(' + this.tokenTime + 'S)'
+                  let setTime = setInterval(() => {
+                    _this.tokenTime--
+                    this.tokenText = '已发送(' + this.tokenTime + 'S)'
+                    if (this.tokenTime <= 0) {
+                      clearInterval(setTime)
+                      _this.tokenText = '获取验证码'
+                      _this.tokenTime = 60
+                    }
+                  }, 1000)
+                }
+              }).catch(() => {
+                this.$indicator.close()
+                this.downToast('请检查网络是否正常或联系服务商')
+              })
+          }
+        }
+      },
+      // 验证企业名称
+      validateSpaceName () {
+        if (!this.valid.spaceName) {
+          this.downToast('请填写企业名称')
+          this.state.spaceName = 'error'
+        } else {
+          if (this.valid.spaceName.length >= 20) {
+            this.state.spaceName = 'warning'
+            this.downToast('请填写合适的企业名称，20个字符以内')
+          } else {
+            this.$http.get(`/api/userspace/checkSpaceName`, {params: {spaceName: this.valid.spaceName}})
+              .then(response => {
+                if (response.data.success) {
+                  console.log('enterpriseName', response.data)
+                  this.state.spaceName = 'warning'
+                  this.downToast('企业不存在，请确认。')
+                } else {
+                  this.state.spaceName = 'success'
+                  return Promise.reject(response.data)
+                }
+              }).catch(err => {
+                this.$indicator.close()
+                this.downToast(err.errMsg)
+              })
+          }
+        }
+      },
+      // 验证营业执照号
+      validateBusinessCode () {
+        let reg = /^[A-Za-z0-9]+$/
+        if (!this.valid.businessCode) {
+          this.downToast('请填写营业执照号')
+          this.state.businessCode = 'error'
+        } else {
+          if (this.valid.businessCode.length >= 20) {
+            this.downToast('输入长度过长，20个字符以内')
+            this.state.businessCode = 'warning'
+          } else {
+            if (reg.test(this.valid.businessCode)) {
+              this.state.businessCode = 'success'
+            } else {
+              this.downToast('营业执照号只能填写字母和数字的组合')
+              this.state.businessCode = 'error'
+            }
+          }
+        }
+      },
+      // 验证法定代表人
+      validateCorporation () {
+        if (!this.valid.corporation) {
+          this.downToast('请填写法定代表人')
+          this.state.description = 'error'
+        } else {
+          if (this.valid.corporation.length >= 20) {
+            this.downToast('输入长度过长，20个字符以内')
+            this.state.corporation = 'warning'
+          } else {
+            this.state.corporation = 'success'
+          }
+        }
+      },
+      // 上传营业执照扫描件
+      upload (e) {
+        let file = e.target.files[0]
+        if (file) {
+          if (file.size > 5 * 1024 * 1024) {
+            this.uploadFileChecked = false
+          } else {
+            this.$indicator.open('上传中...')
+            let param = new FormData()
+            param.append('image', file, file.name)
+            let config = {
+              headers: {'Content-Type': 'multipart/form-data'}
+            }
+            // 图片上传接口
+            this.$http.post('/api/userspace/upload', param, config)
+              .then(response => {
+                this.$indicator.close()
+                if (response.data.success) {
+                  let path = response.data.content
+                  if (path.slice(path.lastIndexOf('.')).toLowerCase() === '.pdf') {
+                    this.isPdf = true
+                  } else {
+                    this.isPdf = false
+                  }
+                  this.valid.businessCodeImage = response.data.content
+                  this.uploadFileChecked = true
+                } else {
+                  this.uploadFileChecked = false
+                  return Promise.reject(response.data)
+                }
+              }).catch(err => {
+                this.downToast(err.errMsg)
+                this.uploadFileChecked = false
+              })
+          }
+        } else {
+          this.$indicator.close()
+        }
+      },
+      // 申诉
+      validateDescription () {
+        if (!this.valid.description) {
+          this.downToast('请填写申诉说明')
+          this.state.description = 'error'
+        } else {
+          if (this.valid.description.length >= 100) {
+            this.downToast('输入长度过长，100个字符以内')
+            this.state.description = 'warning'
+          } else {
+            this.state.description = 'success'
+          }
+        }
+      },
+      // 验证姓名
+      validateContactName () {
+        if (!this.valid.contactName) {
+          this.downToast('请填写您的姓名')
+          this.state.contactName = 'error'
+        } else {
+          if (this.valid.contactName.length > 20) {
+            this.downToast('输入长度过长，限定20个字符以内')
+            this.state.contactName = 'warning'
+          } else {
+            this.state.contactName = 'success'
+          }
+        }
+      },
+      // 验证电话
+      validateContactTel () {
+        let reg = /^1[0-9]{10}$/
+        if (!this.valid.contactTel) {
+          this.downToast('请填写联系电话')
+          this.state.contactTel = 'error'
+        } else {
+          if (!reg.test(this.valid.contactTel)) {
+            this.downToast('请填写正确的联系电话')
+            this.state.contactTel = 'warning'
+          } else {
+            this.state.contactTel = 'success'
+          }
+        }
+      },
+      // 验证邮箱
+      validateContactEmail () {
+        let reg = /^([\w-])+(\.\w+)*@([\w-])+((\.\w{2,3}){1,3})$/
+        if (!this.valid.contactEmail) {
+          this.downToast('请填写联系电子邮箱')
+          this.state.contactEmail = 'error'
+        } else {
+          if (!reg.test(this.valid.contactEmail)) {
+            this.downToast('请输入正确的邮箱地址格式')
+            this.state.contactEmail = 'warning'
+          } else {
+            this.state.contactEmail = 'success'
+          }
+        }
+      },
+      sureAccount (type) {
+        if (this.state.mobile !== 'success' ||
+          this.state.code !== 'success' ||
+          this.state.spaceName !== 'success' ||
+          this.state.businessCode !== 'success' ||
+          this.valid.businessCodeImage !== '' ||
+          this.valid.regAddress !== '' ||
+          this.state.description !== 'success' ||
+          this.state.contactName !== 'success' ||
+          this.state.contactTel !== 'success' ||
+          this.state.contactEmail !== 'success') {
+          this.downToast('请确认填写部分是否有误')
+        } else {
+          this.$indicator.open('验证过程中...')
+          let param = new FormData()
+          param.append('mobile', this.valid.mobile)
+          param.append('code', this.valid.token)
+          param.append('spaceName', this.valid.spaceName)
+          param.append('businessCode', this.valid.businessCode)
+          param.append('businessCodeImage', this.valid.businessCodeImage)
+          param.append('regAddress', this.valid.regAddress)
+          param.append('regProvince', this.address.regProvince)
+          param.append('regCity', this.address.regCity)
+          param.append('regDistrict', this.address.regDistrict)
+          param.append('regStreet', this.address.regStreet)
+          param.append('description', this.valid.description)
+          param.append('contactName', this.valid.contactName)
+          param.append('contactTel', this.valid.contactTel)
+          param.append('contactEmail', this.valid.contactEmail)
+          param.append('token', this.tokenCode)
+          param.append('appId', this.$store.state.option.appId)
+          let config = {
+            headers: {'Content-Type': 'multipart/form-data'}
+          }
+          this.$http.post('/appeal/changeAdmin', param, config)
+            .then(response => {
+              this.$indicator.close()
+              if (response.data.success) {
+                this.$emit('stepEvent', type)
+                this.$emit('lastEvent', 'appeal')
+              } else {
+                this.downToast(response.data.errMsg)
+              }
+            }).catch(() => {
+              this.$indicator.close()
+              this.downToast('请检查网络是否正常或联系服务商')
+            })
+        }
+      }
+    }
+  }
+</script>

components/mobile/changeManager/StepEmail.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="f-main">
+    <div class="content-top">
+      <p>更换管理员</p>
+      <a href="javascript:void(0)" class="back" @click="jump('select')"><i class="el-icon-back"></i></a>
+    </div>
+    <div class="f-form">
+      <div class="page-part">
+        <span>使用电子邮箱 <strong>{{info | hide}}</strong> 进行验证，有效期7天</span>
+      </div>
+      <div class="page-part">
+        <mt-button :disabled="hasSend" size="large"
+                   type="primary"
+                   @click="sureAccount()"
+                   v-text="secretEmail">发送验证请求</mt-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'step-email',
+    props: ['info'],
+    data () {
+      return {
+        secretEmail: '发送验证请求',
+        hasSend: false
+      }
+    },
+    filters: {
+      hide: function (value) {
+        let getEmailIndex = value.indexOf('@')
+        if (getEmailIndex > 3) {
+          let len = value.substring(3, getEmailIndex)
+          value = value.replace(len, '***')
+        }
+        return value
+      }
+    },
+    methods: {
+      jump (type) {
+        this.$emit('stepEvent', type)
+      },
+      // 警告弹窗
+      downToast (type) {
+        this.$toast({
+          message: type,
+          iconClass: 'el-icon-warning'
+        })
+      },
+      // 发送邮件
+      sureAccount () {
+        this.$indicator.open('发送过程中...')
+        this.$http.get(`/sso/change/admin/check/email`)
+          .then(response => {
+            this.$indicator.close()
+            if (response.data.success) {
+              this.hasSend = true
+              this.secretEmail = '已发送验证邮件，请查收'
+            } else {
+              this.hasSend = false
+              this.downToast(response.data.errMsg)
+            }
+          }).catch(() => {
+            this.$indicator.close()
+            this.downToast('请检查网络是否正常或联系服务商')
+          })
+      }
+    }
+  }
+</script>

components/mobile/changeManager/StepMobile.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="f-main">
+    <div class="content-top">
+      <p>更换管理员</p>
+      <a href="javascript:void(0)" class="back" @click="jump('select')"><i class="el-icon-back"></i></a>
+    </div>
+    <div class="f-form">
+      <div class="page-part">
+        <span>使用手机号<strong>{{info | hide}}</strong>接收验证码</span>
+      </div>
+      <div class="page-part">
+        <mt-field auto-complete="off"
+                  placeholder="短信验证码"
+                  v-model="code"
+                  :state="state.code"
+                  @blur.native.capture="validateCode">
+          <span class="token" @click="getCheckCode" v-text="tokenText">获取验证码</span>
+        </mt-field>
+      </div>
+      <div class="page-part">
+        <mt-button size="large" type="primary" @click="sureAccount">下一步</mt-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'step-mobile',
+    props: ['info'],
+    data () {
+      return {
+        state: {
+          code: 'error'
+        },
+        code: '',
+        tokenCode: '',
+        tokenText: '获取验证码',
+        tokenTime: '60'
+      }
+    },
+    filters: {
+      hide: function (value) {
+        let reg = /^(\d{3})\d{6}(\d{2})$/
+        return value.replace(reg, '$1******$2')
+      }
+    },
+    methods: {
+      jump (type) {
+        this.$emit('stepEvent', type)
+      },
+      // 警告弹窗
+      downToast (type) {
+        this.$toast({
+          message: type,
+          iconClass: 'el-icon-warning'
+        })
+      },
+      // 验证码验证
+      validateCode () {
+        if (!this.code) {
+          this.downToast('请填写验证码信息')
+          this.state.code = 'error'
+        } else {
+          let param = new FormData()
+          param.append('mobile', this.info)
+          param.append('code', this.code)
+          param.append('token', this.tokenCode)
+          let config = {
+            headers: {'Content-Type': 'multipart/form-data'}
+          }
+          this.$http.post(`/sso/change/admin/check/newMobile`, param, config)
+            .then(response => {
+              if (response.data.success) {
+                this.state.code = 'success'
+              } else {
+                this.state.code = 'error'
+                return Promise.reject(response.data)
+              }
+            }).catch(err => {
+              this.downToast(err.errMsg)
+            })
+        }
+      },
+      // 获取验证码
+      getCheckCode () {
+        if (this.tokenTime > 0 && this.tokenTime < 60) {
+          this.downToast('请稍后再点击，我在倒计时')
+        } else {
+          this.$indicator.open('获取中...')
+          let _this = this
+          this.$http.get('/sso/change/admin/check/mobile', {params: {mobile: this.info}})
+            .then(response => {
+              this.$indicator.close()
+              if (response.data) {
+                this.tokenCode = response.data.content.token
+                this.$toast({
+                  message: '验证码已经发送到您的手机，请注意查收',
+                  iconClass: 'el-icon-success'
+                })
+                this.tokenText = '已发送(' + this.tokenTime + 'S)'
+                let setTime = setInterval(() => {
+                  _this.tokenTime--
+                  this.tokenText = '已发送(' + this.tokenTime + 'S)'
+                  if (this.tokenTime <= 0) {
+                    clearInterval(setTime)
+                    _this.tokenText = '获取验证码'
+                    _this.tokenTime = 60
+                  }
+                }, 1000)
+              }
+            }).catch(() => {
+              this.$indicator.close()
+              this.downToast('请检查网络是否正常或联系服务商')
+            })
+        }
+      },
+      // 验证信息
+      sureAccount () {
+        if (this.state.code !== 'success') {
+          this.downToast('请确认填写部分是否有误')
+        } else {
+          this.$indicator.open('验证过程中...')
+          let param = new FormData()
+          param.append('code', this.code)
+          param.append('token', this.tokenCode)
+          let config = {
+            headers: {'Content-Type': 'multipart/form-data'}
+          }
+          this.$http.post('/sso/change/admin/check/mobile', param, config)
+            .then(response => {
+              this.$indicator.close()
+              if (response.data.success) {
+                this.$emit('stepEvent', 'new')
+                this.$emit('tokenEvent', response.data.content)
+              } else {
+                this.downToast(response.data.errMsg)
+              }
+            }).catch(() => {
+              this.$indicator.close()
+              this.downToast('请检查网络是否正常或联系服务商')
+            })
+        }
+      }
+    }
+  }
+</script>

components/mobile/changeManager/StepNew.vue

@@ -0,0 +1,261 @@
+<template>
+  <div class="f-main">
+    <div class="content-top">
+      <p>更换管理员</p>
+      <!--<a href="javascript:void(0)" class="back" @click="jump('select')"><i class="el-icon-back"></i></a>-->
+    </div>
+    <div class="f-form">
+      <div class="page-part">
+        <mt-field placeholder="新管理员姓名"
+                  v-model="valid.contactName"
+                  :state="state.contactName"
+                  @blur.native.capture="validateContactName"
+        ></mt-field>
+      </div>
+      <div class="page-part">
+        <mt-field placeholder="新管理员手机号"
+                  v-model="valid.mobile"
+                  :state="state.mobile"
+                  type="tel"
+                  @blur.native.capture="validateMobile"
+        ></mt-field>
+      </div>
+      <div class="page-part">
+        <mt-field auto-complete="off"
+                  placeholder="短信验证码"
+                  v-model="valid.code"
+                  :state="state.code"
+                  @blur.native.capture="validateCode">
+          <span class="token" @click="getCheckCode" v-text="tokenText" v-if="state.mobile === 'success'">获取验证码</span>
+          <span class="token-no" v-text="tokenText" v-if="state.mobile !== 'success'">获取验证码</span>
+        </mt-field>
+      </div>
+      <div class="page-part">
+        <mt-field placeholder="更换原因"
+                  type="textarea"
+                  rows="4"
+                  v-model="valid.description"
+                  @blur.native.capture="validateDescription"></mt-field>
+        <p class="pwd">请描述您申诉的原因，并尽可能多地列举出证明此企业账号为您所有的证据</p>
+      </div>
+      <div class="page-part">
+        <mt-field placeholder="联系电话"
+                  v-model="valid.contactTel"
+                  :state="state.contactTel"
+                  type="tel"
+                  @blur.native.capture="validateContactTel"
+        ></mt-field>
+      </div>
+      <div class="page-part">
+        <mt-button size="large" type="primary" @click="sureAccount('last')">提 交</mt-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'step-one',
+    props: ['tokenId'],
+    data () {
+      return {
+        state: {
+          contactName: 'error',
+          mobile: 'error',
+          code: 'error',
+          description: 'error',
+          contactTel: 'error'
+        },
+        valid: {
+          contactName: '',
+          mobile: '',
+          code: '',
+          description: '',
+          contactTel: ''
+        },
+        tokenCode: '',
+        tokenTime: 60,
+        tokenText: '获取验证码'
+      }
+    },
+    methods: {
+      jump (type) {
+        this.$emit('stepEvent', type)
+      },
+      // 弹窗处理
+      downToast (type) {
+        this.$toast({
+          message: type,
+          iconClass: 'el-icon-warning'
+        })
+      },
+      // 验证姓名
+      validateContactName () {
+        if (!this.valid.contactName) {
+          this.downToast('请填写您的姓名')
+          this.state.contactName = 'error'
+        } else {
+          if (this.valid.contactName.length > 20) {
+            this.downToast('输入长度过长，限定20个字符以内')
+            this.state.contactName = 'warning'
+          } else {
+            this.state.contactName = 'success'
+          }
+        }
+      },
+      // 验证手机号
+      validateMobile () {
+        if (!this.valid.mobile) {
+          this.downToast('请先填写手机号')
+          this.state.mobile = 'error'
+        } else {
+          let reg = /^1[0-9]{10}$/
+          if (!reg.test(this.valid.mobile)) {
+            this.downToast('请填写正确的手机号')
+            this.state.mobile = 'warning'
+          } else {
+            this.state.mobile = 'success'
+          }
+        }
+      },
+      // 验证正确的验证码
+      validateCode () {
+        if (!this.valid.code) {
+          this.downToast('请先填写验证码')
+          this.state.code = 'error'
+        } else {
+          if (!this.valid.mobile) {
+            this.downToast('请先填写正确的手机号码')
+            this.state.code = 'warning'
+          } else {
+            if (this.tokenCode) {
+              let param = new FormData()
+              param.append('mobile', this.valid.mobile)
+              param.append('token', this.tokenCode)
+              param.append('code', this.valid.code)
+              let config = {
+                headers: {'Content-Type': 'multipart/form-data'}
+              }
+              this.$http.post('/sso/change/admin/check/newMobile', param, config)
+                .then(response => {
+                  if (response.data.success) {
+                    this.state.code = 'success'
+                  } else {
+                    this.$toast({
+                      message: response.data.errMsg,
+                      iconClass: 'el-icon-error'
+                    })
+                    return Promise.reject(response.data)
+                  }
+                }).catch(() => {
+                  this.downToast('请检查网络是否正常或联系服务商')
+                })
+            } else {
+              this.downToast('请点击先获取验证码信息')
+              this.state.code = 'warning'
+            }
+          }
+        }
+      },
+      // 获取验证码
+      getCheckCode () {
+        if (this.tokenTime > 0 && this.tokenTime < 60) {
+          this.downToast('请稍后再点击，我在倒计时')
+        } else {
+          if (this.state.mobile === 'success') {
+            this.$indicator.open('获取中...')
+            let _this = this
+            this.$http.get('/sso/change/admin/check/newMobile', {params: {mobile: this.valid.mobile, token: this.tokenId}})
+              .then(response => {
+                this.$indicator.close()
+                if (response.data) {
+                  this.tokenCode = response.data.content.token
+                  this.$toast({
+                    message: '验证码已经发送到您的手机，请注意查收',
+                    iconClass: 'el-icon-success'
+                  })
+                  this.tokenText = '已发送(' + this.tokenTime + 'S)'
+                  let setTime = setInterval(() => {
+                    _this.tokenTime--
+                    this.tokenText = '已发送(' + this.tokenTime + 'S)'
+                    if (this.tokenTime <= 0) {
+                      clearInterval(setTime)
+                      _this.tokenText = '获取验证码'
+                      _this.tokenTime = 60
+                    }
+                  }, 1000)
+                }
+              }).catch(() => {
+                this.$indicator.close()
+                this.downToast('请检查网络是否正常或联系服务商')
+              })
+          }
+        }
+      },
+      // 申诉
+      validateDescription () {
+        if (!this.valid.description) {
+          this.downToast('请填写申诉说明')
+          this.state.description = 'error'
+        } else {
+          if (this.valid.description.length >= 100) {
+            this.downToast('输入长度过长，100个字符以内')
+            this.state.description = 'warning'
+          } else {
+            this.state.description = 'success'
+          }
+        }
+      },
+      // 验证电话
+      validateContactTel () {
+        let reg = /^1[0-9]{10}$/
+        if (!this.valid.contactTel) {
+          this.downToast('请填写联系电话')
+          this.state.contactTel = 'error'
+        } else {
+          if (!reg.test(this.valid.contactTel)) {
+            this.downToast('请填写正确的联系电话')
+            this.state.contactTel = 'warning'
+          } else {
+            this.state.contactTel = 'success'
+          }
+        }
+      },
+      sureAccount (type) {
+        if (this.state.mobile !== 'success' ||
+          this.state.contactName !== 'success' ||
+          this.state.code !== 'success' ||
+          this.state.description !== 'success' ||
+          this.state.contactTel !== 'success') {
+          this.downToast('请确认填写部分是否有误')
+        } else {
+          this.$indicator.open('验证过程中...')
+          let param = new FormData()
+          param.append('newAdminName', this.valid.contactName)
+          param.append('mobile', this.valid.mobile)
+          param.append('code', this.valid.code)
+          param.append('contactTel', this.valid.contactTel)
+          param.append('changeReason', this.valid.description)
+          param.append('token', this.tokenId)
+          param.append('codeToken', this.tokenCode)
+          let config = {
+            headers: {'Content-Type': 'multipart/form-data'}
+          }
+          this.$http.post('/sso/change/admin', param, config)
+            .then(response => {
+              this.$indicator.close()
+              if (response.data.success) {
+                this.$emit('stepEvent', type)
+                this.$emit('lastEvent', 'success')
+              } else {
+                this.downToast(response.data.errMsg)
+              }
+            }).catch(() => {
+              this.$indicator.close()
+              this.downToast('请检查网络是否正常或联系服务商')
+            })
+        }
+      }
+    }
+  }
+</script>

components/mobile/changeManager/StepSecurity.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="f-main">
+    <div class="content-top">
+      <p>更换管理员</p>
+      <a href="javascript:void(0)" class="back" @click="jump('select')"><i class="el-icon-back"></i></a>
+    </div>
+    <div class="f-form">
+      <div class="page-part">
+        <p class="security">密保问题一：<span v-text="info[0].question"></span></p>
+      </div>
+      <div class="page-part">
+        <mt-field placeholder="请填写答案一"
+                  :state="state.answer1"
+                  @blur.native.capture="validAnswer1"
+                  v-model="valid.answer1"></mt-field>
+      </div>
+      <div class="page-part">
+        <p class="security">密保问题二：<span v-text="info[1].question"></span></p>
+      </div>
+      <div class="page-part">
+        <mt-field placeholder="请填写答案二"
+                  :state="state.answer2"
+                  @blur.native.capture="validAnswer2"
+                  v-model="valid.answer2"></mt-field>
+      </div>
+
+      <div class="page-part">
+        <mt-button size="large" type="primary" @click="sureAccount('new')">下一步</mt-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'step-security',
+    props: ['info'],
+    data () {
+      return {
+        state: {
+          answer1: 'error',
+          answer2: 'error'
+        },
+        valid: {
+          answer1: '',
+          answer2: ''
+        },
+        questions: '',
+        token: ''
+      }
+    },
+    mounted () {
+      this.$nextTick(() => {
+        this.loadIssue()
+      })
+    },
+    methods: {
+      jump (type) {
+        this.$emit('stepEvent', type)
+      },
+      // 警告弹窗
+      downToast (type) {
+        this.$toast({
+          message: type,
+          iconClass: 'el-icon-warning'
+        })
+      },
+      // 验证密保答案一
+      validAnswer1 () {
+        if (!this.valid.answer1) {
+          this.downToast('请填写问题一的正确答案')
+          this.state.answer1 = 'error'
+        } else {
+          this.state.answer1 = 'success'
+        }
+      },
+      // 验证密保答案二
+      validAnswer2 () {
+        if (!this.valid.answer2) {
+          this.downToast('请填写问题二的正确答案')
+          this.state.answer2 = 'error'
+        } else {
+          this.state.answer2 = 'success'
+        }
+      },
+      // 获取密保问题
+      loadIssue () {
+        this.$http.get('/update/user/check/question')
+          .then(response => {
+            if (response.data.success) {
+              this.questions = response.data.content.questions
+            } else {
+              this.downToast(response.data.errMsg)
+            }
+          })
+      },
+      sureAccount (type) {
+        if (this.state.answer1 !== 'success' || this.state.answer2 !== 'success') {
+          this.downToast('请确认填写部分是否有误')
+        } else {
+          this.$indicator.open('验证过程中...')
+          let param = new FormData()
+          let answer = []
+          answer.push({'answer': this.valid.answer1, sort: this.info[0].sort}, {
+            'answer': this.valid.answer2, sort: this.info[1].sort
+          })
+          let answers = JSON.stringify(answer)
+          param.append('answers', answers)
+          let config = {
+            headers: {'Content-Type': 'multipart/form-data'}
+          }
+          this.$http.post(`/update/user/check/question`, param, config)
+            .then(response => {
+              this.$indicator.close()
+              if (response.data.success) {
+                this.$emit('stepEvent', type)
+                this.$emit('tokenEvent', response.data.content.token)
+              } else {
+                this.downToast(response.data.errMsg)
+              }
+            }).catch(() => {
+              this.$indicator.close()
+              this.downToast('请检查网络是否正常或联系服务商')
+            })
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped type="text/scss" lang="scss">
+
+</style>

components/mobile/changeManager/StepSelect.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="f-main">
+    <div class="content-top">
+      <p>更换管理员</p>
+    </div>
+    <div>
+      <ul class="select-item">
+        <li class="item" @click="jump('mobile')" v-if="hasMobile">
+          <img src="/images/all/icon01.png">
+          <span>通过验证手机</span>
+          <i class="fa fa-angle-right second"></i>
+        </li>
+        <li class="item" @click="jump('email')" v-if="hasEmail">
+          <img src="/images/all/icon02.png">
+          <span>通过验证邮箱</span>
+          <i class="fa fa-angle-right second"></i>
+        </li>
+        <li class="item" @click="jump('questions')" v-if="hasQuestion">
+          <img src="/images/all/icon03.png">
+          <span>通过验证密保</span>
+          <i class="fa fa-angle-right second"></i>
+        </li>
+        <li class="item" @click="jump('appeal')">
+          <img src="/images/all/icon04.png">
+          <i></i><span>通过人工申诉</span>
+          <i class="fa fa-angle-right second"></i>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'step-select',
+    data () {
+      return {
+        hasMobile: false,
+        hasEmail: false,
+        hasQuestion: false,
+        mobile: '',
+        email: '',
+        questions: ''
+      }
+    },
+    mounted () {
+      this.$nextTick(() => {
+        this.getVerifyWay()
+      })
+    },
+    methods: {
+      jump (type) {
+        this.$emit('stepEvent', type)
+        if (type === 'mobile') {
+          this.$emit('setDataEvent', this.mobile)
+        } else if (type === 'email') {
+          this.$emit('setDataEvent', this.email)
+        } else if (type === 'questions') {
+          this.$emit('setDataEvent', this.questions)
+        }
+      },
+      // 获取验证方式
+      getVerifyWay () {
+        this.$http.get('/sso/change/admin/checkType')
+          .then(response => {
+            console.log('验证方式', response.data)
+            if (response.data.success) {
+              if (response.data.content.mobile) {
+                this.hasMobile = true
+                this.mobile = response.data.content.mobile
+              }
+              if (response.data.content.email) {
+                this.hasEmail = true
+                this.email = response.data.content.email
+              }
+              if (response.data.content.questions) {
+                this.hasQuestion = true
+                this.questions = response.data.content.questions
+              }
+            }
+          }).catch(err => {
+            console.log(err)
+          })
+      }
+    }
+  }
+</script>
+
+<style scoped type="text/scss" lang="scss">
+  .select-item {
+    padding-top:.5rem;
+    .item {
+      position:relative;
+      padding-left:.4rem;
+      margin-bottom:.2rem;
+      line-height: 1.5rem;
+      background: #f4f4f4;
+      font-size: .32rem;
+      span{
+        color:#505050;
+        margin-left:.4rem;
+      }
+      i{
+        display:inline-block;
+        position:absolute;
+        right:.4rem;
+        line-height: 1.5rem;
+        font-size:.45rem;
+
+      }
+    }
+  }
+</style>

components/mobile/changeManager/StepSuccess.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="f-main">
+    <div class="content-top">
+      <p>更换管理员{{stepLast}}</p>
+    </div>
+    <template v-if="stepLast === 'success'">
+      <div class="page-part page-last">
+        <h4><img src="/images/all/pass.png"><span>重置成功</span></h4>
+        <p>恭喜您，企业管理员已更换完毕！</p>
+      </div>
+      <div class="page-part">
+        <mt-button size="large" type="primary" @click="sureAccount()">完 成</mt-button>
+      </div>
+    </template>
+    <template v-if="stepLast === 'appeal'">
+      <div class="page-part page-last">
+        <h4><img src="/images/all/pass.png"><span>申诉已提交</span></h4>
+        <p>申诉内容已提交，请耐心等待审核</p>
+      </div>
+      <div class="page-part">
+        <mt-button size="large" type="primary" @click="sureAccount()">确 认</mt-button>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'step-success',
+    props: ['stepLast'],
+    methods: {
+      sureAccount () {
+        this.$router.push('/cloudcenter')
+      }
+    }
+  }
+</script>

components/mobile/changeManager/index.js

@@ -0,0 +1,9 @@
+import StepSelect from './StepSelect.vue'
+import StepMobile from './StepMobile.vue'
+import StepEmail from './StepEmail.vue'
+import StepSecurity from './StepSecurity.vue'
+import StepNew from './StepNew.vue'
+import StepSuccess from './StepSuccess'
+import StepAppeal from './StepAppeal'
+
+export {StepSelect, StepMobile, StepEmail, StepSecurity, StepNew, StepSuccess, StepAppeal}

components/mobile/validation/ValidationEmailStepMobile.vue

@@ -18,7 +18,7 @@
         </mt-field>
       </div>
       <div class="page-part">
-        <mt-button size="large" type="primary" @click="sureAccount">确 定</mt-button>
+        <mt-button size="large" type="primary" @click="sureAccount">下一步</mt-button>
       </div>
     </div>
   </div>

components/mobile/validation/ValidationPhoneStepMobile.vue

@@ -18,7 +18,7 @@
         </mt-field>
       </div>
       <div class="page-part">
-        <mt-button size="large" type="primary" @click="sureAccount">确 定</mt-button>
+        <mt-button size="large" type="primary" @click="sureAccount">下一步</mt-button>
       </div>
     </div>
   </div>

pages/change/changeManager.vue

@@ -1,17 +1,71 @@
 <template>
   <div>
-    <accountCenter-header/>
-    <change-manager/>
+    <template v-if="isMobile">
+      <step-select v-if="step === 'select'" @stepEvent="setStep" @setDataEvent="setInfo"/>
+      <step-mobile v-if="step === 'mobile'" @stepEvent="setStep" @tokenEvent="loadToken" :info="info"/>
+      <step-email v-if="step === 'email'" @stepEvent="setStep" :info="info"/>
+      <step-security v-if="step === 'questions'" @stepEvent="setStep" @tokenEvent="loadToken" :info="info"/>
+      <step-new v-if="step === 'new'" @stepEvent="setStep" @lastEvent="setStepLast" :tokenId="tokenId"/>
+      <step-success v-if="step === 'last'" :stepLast="stepLast"/>
+      <step-appeal v-if="step === 'appeal'" @stepEvent="setStep" @lastEvent="setStepLast"/>
+    </template>
+    <template v-else>
+      <accountCenter-header/>
+      <change-manager/>
+    </template>
   </div>
 </template>
 <script>
   import AccountCenterHeader from '~components/default/AccountCenterHeader.vue'
   import ChangeManager from '~components/change/ChangeManager.vue'
+  import {StepSelect, StepMobile, StepEmail, StepSecurity, StepNew, StepSuccess, StepAppeal} from '~components/mobile/changeManager'
   export default {
-    layout: 'default',
+    layout (content) {
+      return content.store.state.option.isMobile ? 'mobile' : 'default'
+    },
+    middleware: 'authenticated',
+    transition: {
+      name: 'fade',
+      mode: 'out-in'
+    },
     components: {
       AccountCenterHeader,
-      ChangeManager
+      ChangeManager,
+      StepSelect,
+      StepMobile,
+      StepEmail,
+      StepSecurity,
+      StepNew,
+      StepSuccess,
+      StepAppeal
+    },
+    data () {
+      return {
+        step: 'select',
+        info: '',
+        tokenId: '',
+        stepLast: 'new'
+      }
+    },
+    computed: {
+      isMobile () {
+        return this.$store.state.option.isMobile
+      }
+    },
+    methods: {
+      setStep (type) {
+        console.log('fu', type)
+        this.step = type
+      },
+      setInfo (info) {
+        this.info = info
+      },
+      loadToken (token) {
+        this.tokenId = token
+      },
+      setStepLast (type) {
+        this.stepLast = type
+      }
     }
   }
 </script>

pages/validation/emailValidation.vue

@@ -55,9 +55,6 @@
           this.$router.push('/')
         }
       } else {
-        console.log(this.$route.query)
-        console.log('token', this.$route.query)
-        console.log('2', this.$route.query.step)
         if (this.$route.query.step === '2') {
           this.step = 'new'
           console.log('new')