sso-ssr/components/mobile/changeManager/StepAppeal.vue

<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>